28 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как создать виджет для сайта?

Топ-10 виджетов, которые улучшат функционал сайта

Виджет – это компонент, который добавляет на сайт определенные функции. Виджеты встраиваются непосредственно на сайт. Чтобы добавить виджет на ресурс, нужно скопировать и вставить код, предоставленный разработчиком.

Зачем нужны виджеты?

Сайты могут работать без виджетов. Но они нужны для добавления на сайт дополнительного функционала.

Конструкторы сайтов и CMS предоставляют ограниченные возможности. Виджеты могут компенсировать недостатки этих платформ.

Я составил список 10 лучших виджетов, которые сделают ваш сайт более функциональным.

1. Reservio

Reservio – это виджет для онлайн-записи. Добавить на сайт кнопку бронирования от Reservio намного проще, чем назначать встречи по телефону.

Reservio синхронизируется с такими программами, как Outlook, iCal и Google Calendar. Виджет также совместим с популярными конструкторами сайтов и CMS: Wix, Webnode, Weebly и WordPress.

2. Smartsupp

Smartsupp предназначен для добавления онлайн-чата на сайт. Он идеально подходит для тех, кто управляет интернет-магазином. Виджет позволяет клиентам быстро связаться с вами по любому интересующему их вопросу.

Добавление персонализированных методов общения на сайт увеличит показатели конверсии в долгосрочной перспективе. Онлайн-чат увеличивает среднюю стоимость заказа на 10%, а конверсия — на 40%.

3. Disqus

Disqus расширяет возможности комментирования публикаций на сайте. Он также предоставляет дополнительные инструменты для мониторинга и ответов на комментарии.

4. AddThis

Для продвижения сайта нужно использовать эффективные способы привлечения пользователей. Например, задействовать зарегистрированных пользователей сайта. Поощряйте их делиться вашим контентом с друзьями, семьей, коллегами и знакомыми в социальных сетях.

Виджет AddThis облегчает эту задачу. Он добавляет на сайт кнопку «Поделиться», с помощью которой можно подключить более 200 социальных медиа. Все кнопки оптимизированы для мобильных устройств.

Доступные параметры для настройки кнопок:

  • Изменение вида кнопок.
  • Изменение размера кнопок.
  • Размещение иконок в виде строки.

5. Survio

С помощью виджета Survio можно всего за несколько минут создать новый опрос и интегрировать его на сайт. Это эффективный способ получения дополнительной информации от посетителей сайта.

Этот виджет предоставляет сотни шаблонов опросов на выбор. Вот лишь несколько из них:

  • Узнаваемость бренда.
  • Опыт покупки.
  • Техническая поддержка.
  • Планирование события.
  • Опрос клиентов банка.
  • Постояльцев гостиницы.
  • Клиентов службы доставки.

6. MailChimp

Если вы используете сервис MailChimp для электронных рассылок, то обязательно установите на сайте виджет формы регистрации от MailChimp . Для этого достаточно скопировать и вставить код формы в нужном мечте HTML-разметки сайта.

MailChimp предлагает четыре вида формы:

  • Классическая.
  • Сокращенная.
  • Горизонтальная.
  • Без стиля.

Виджет совместим с такими платформами, как WordPress, Jimdo, Webs, Weebly, Yola, Blogger и Blogspot.

7. GetResponse

GetResponse – еще один популярный сервис email-маркетинга. Но кроме этого он предоставляет стандартный виджет для размещения на сайте формы подписки.

Кроме этого GetResponse предоставляет виджет обратной связи, который можно использовать для создания настраиваемых контактных форм. А также виджет для проведения различных опросов. Например:

  • Опросы при отказе от покупки.
  • Опрос об удовлетворенности клиентов
  • Опросы для исследования рынка.

Этот виджет может интегрироваться с MailChimp, Mailer и HubSpot.

8. Gumroad

Gumroad создан специально для тех, кто использует свой сайт для продажи цифровых товаров или услуг.

Установить его очень просто. Все, что я сделал, это набрал текст «Купить на Quick Sprout» в поле формы, и кнопка автоматически изменилась. Затем нужно решить.

После этого код виджета автоматически генерируется на основе используемых настроек. Его нужно будет скопировать и вставить на свой сайт.

Обработка платежей с помощью этого виджета обойдется в 3,5% + 0,30 доллара США за транзакцию.

9. Swiftype

Как посетители сайта могут найти нужный контент или товар? Эту проблему можно решить, добавив на сайт виджет строки поиска Swiftype . Его используют такие компании, как CBS, AOL, BMW, AT&T и Samsung.

Принцип работы этого виджета предельно прост. После указания адреса сайта Swiftype проиндексирует весь его контент и создаст поисковую систему.

У этого виджета есть функция автозаполнения по мере того, как пользователь вводит свой поисковой запрос. Также данный виджет корректирует поиск в зависимости от цены, местоположения, даты или типа контента.

10. Wufoo

Wufoo – это виджет для создания опросов, приглашений, контактных форм, формы регистрации и предоставления информации об оплате.

Все, что нужно сделать, это создать форму с помощью специального конструктора форм и вставить ее на свой сайт. После заполнения пользователем формы Wufoo сообщит вам об этом электронным письмом или текстовым сообщением.

Доступно более 400 шаблонов форм. Также можно установить пользовательские параметры и создавать динамические визуализации с помощью диаграмм и графиков.

Заключение

Можно значительно усовершенствовать свой сайт, добавив тот или иной виджет.

Существует большое количество виджетов. Но перечисленные выше отличаются гибкостью настройки, простотой установки и широким функционалом.

Я уверен в том, что в приведенном выше списке найдется полезный виджет для каждого.

Данная публикация представляет собой перевод статьи « The Top 10 Widgets to Improve Your Website » , подготовленной дружной командой проекта Интернет-технологии.ру

Пишем встраиваемый виджет на нативном javascript и php

Каждый раз подключая на своих сайтах готовое решение от сервисов вроде disqus или google-аналитики, я удивляюсь простоте интеграции достаточно сложного функционала. Поставил в код 3 строчки javascript-кода – и у тебя уже развернулся блок с комментариями. Еще 2 строчки – и доступна аналитика от гугла или яндекса. Конечно, никакого волшебства при этом не происходит, те самые 3 строчки кода подтягивают с удаленного сервера весь нужный код, и по сути разворачивают небольшое веб-приложение на страницах Вашего сайта. Но как это устроено внутри и как это сделать самому? Разобраться с этим было достаточно интересно, и в итоге у меня получился небольшой виджет, который работает именно по такой простой схеме встраивания и при этом еще выполняют некоторые полезные вещи. Далее подробности.

Зачем нужны виджеты?

Здесь все просто: допустим, у нас есть какой-то неимоверно крутой сервис. Он настолько крут, что мы хотим поделиться нашими возможностями со всем миром (а может, и продать их). Но здесь всплывают несколько моментов. Во-первых, мы не готовы предоставлять открыто наши исходники. Во-вторых, нужна максимально простая схема встраивания нашего функционала в сторонние сайты. В-третьих, мы хотим, чтобы наши пользователи были уверены, что использование нашего сервиса ничем не навредит их сайту.

Для этой цели хорошо подходят iframe-ы. Это фактически отдельные html-страницы, которые встраиваются в другие страницы, при этом не имея доступа к своему “родителю”. То есть в iframe можно встроить наше веб-приложение, которое будет спокойно выполнять свою работу, не вмешиваясь в основной сайт. А что именно будет делать Ваш виджет, строить систему комментариев на странице, показывать прикольную игрушку или рисовать интерактивный рекламный баннер – дело исключительно Вашего вкуса и фантазии.

В этой статье на игрушку мы замахиваться не будем, а рассмотрим, как создать встраиваемый виджет для определения погоды. Конечно, для этого есть много различных погодных сервисов, но нам неинтересно воспользоваться готовым решением. Хочется создать простенький виджет своими руками, чтобы понять, как это вообще работает и в дальнейшем применить знания уже для каких-то полезных вещей. Заодно попутно освежим знания в нативном javascript и php.

Что будем делать?

Мы создадим виджет, который рисует форму с прогнозом погоды на завтра. В качестве примера возьмем только температуру, но как увидите дальше, легко можно будет добавить и другие данные. В виджете будет располагаться информация о температуре на завтра, раскрывающийся список с возможностью выбрать город. Кнопка Обновить будет отправлять запрос на сервер, который в свою очередь обращается на сторонний сервис для определения погоды и возвращает нам нужную инфу. Эти данные мы обрабатываем и возвращаем в браузер клиенту. Где уже клиентская часть виджета перехватывает информацию и выводит ее пользователю.

Выглядит это проще, чем звучит – можете сразу посмотреть, что в итоге получится – Демо страницы с виджетом

Здесь мы видим какую-то страницу, где рассказывается, что якобы мы умеем определять погоду. И демонстрируем нашим посетителям формочку, дабы они могли убедиться, что погоду действительно можно узнать прямо здесь.

Я не развлекался с версткой формы, цель статьи не в этом. В реальном мире мы, конечно же, создали бы симпатичную формочку, которая привлекала бы внимание.

Читать еще:  Игры на андроид 2018

Итак, вернемся. Люди узнают погоду, возможно, даже не задумываясь о том, что фактически пользуются другим сервисом. Но все довольны и счастливы, Вы получаете посетителей на свой сайт, клиенты – нужную информацию.

Здесь нужно небольшое уточнение: смысл виджетов в том, чтобы предоставлять уникальный, удобный, интересный функционал. Мы не даем в нашем примере какую-то особенную информацию. Погоду можно узнать где угодно. Но в познавательных целях, так как мы сами пока ничего не умеем делать, возьмем данные по погоде с сервиса Прогноз погоды в России и СНГ. Они любезно предоставляют бесплатный api, коим мы и воспользуемся.

По технологиям

Тоже ничего сложного. Про iframe я уже проговорился. javascript-код будем писать на vanillaJS, без единой дополнительной библиотеки. Даже без jQuery для манипуляции DOM. Наша цель еще состоит и в том, чтобы полученный виджет был максимально легковесным, и ни к чему тащить в браузер пользователя мешок дополнительных библиотек для облегчения своей работы. Поэтому вспомним, как работать с DOM и отправлять ajax-запросы на нативном javascript, и наши клиенты скажут нам спасибо. Серверная часть – пара десятков строк кода на php.

Пишем код. Создаем базовую страницу

Страницу, на которой будет располагаться наш будущий виджет. Напишем там пару строчек текста о том, какие мы классные в плане умения прогнозировать погоду на завтра. Это будет файл index.html – обычная html-страничка. В секции head напишем так:

В секции body вот так:

Что здесь из интересного? В файле css/style.css будем хранить стили для страницы (не для виджета!). И в нужном месте создаем iframe. В атрибуте src iframe-a ставим ссылку на виджет, в нашем случае – https://webdevkin.ru/examples/weather/widget/widget.html. Мы убираем у него границу и возможность скроллинга и задаем руками размеры виджета. Конечно, интереснее создать адаптивный, но до этого доберемся позже.

Стили для страницы, без особых изысков:

Заготовка для виджета

Виджет представляет из себя обычный html-документ. В чем отличие? Первое – мы не будем заморачиваться с лишними мета-тегами, потому как поисковикам наш виджет не нужен. И второе – и стили, и js-код мы напишем прямо в коде html-страницы. Нам это нужно, чтобы сделать загрузку виджета максимально быстрой, а уменьшение числа запросов к веб-серверу в этом нам поможет. Все, что нужно, мы загрузим одним файлом.

В секции head у нас будет такой код:

Рассмотрим эти блоки подробнее.

Разметка для виджета

Здесь обычная форма. Сверху небольшая панель, где мы будем выводить температуру. Дальше select с выбором города. Значения value у городов взяты с сервиса meteoservice.ru, где именно, расскажу позже, в разделе, где будем непосредственно получать данные о погоде. И в конце кнопка Обновить. Верстка у нас будет на классах, айдишники проставлены тем элементам, доступ к которым нужен из кода javascript. Префикс wbd- (от webdevkin) используется для удобства, чтобы не путать разметки виджета и основной страницы.

Стили для виджета

Стили для виджета максимально просты – Вы можете написать их под себя, как угодно. Не забываем, что стили ставим прямо в html-файл виджета в раздел head – style.

javascript-код виджета.

Напишем класс, в котором будут методы инициализации, привязки событий и получения данных с сервера. Не забываем, что код будем писать на нативном js, так как не хотим обременять пользователей лишним грузом библиотек.

Что здесь происходит? Мы создаем модуль на основе замыкания WeatherWidget, внутри оного пишем класс Widget, в прототип которого закидываем нужные методы и возвращаем его из замыкания. Последней строкой мы создаем экземпляр виджета – new WeatherWidget();

Переменная XHR нужна для выполнения ajax-запросов. В конструкторе инициализируем свойство url, по которому будем получать данные о погоде. Также есть объект ui, в котором хранятся 3 поля – те самые элементы DOM, к которым нам нужен доступ из js-кода. Инициализируются они позже, в методе _initUI(). Метод init() вызывает инициализацию ui, привязку событий и обновление данных с сервера (мы же хотим, чтобы при отрисовке виджета пользователь сразу видел погоду без нажатия на Обновить). В _bindHandlers привязывается метод _updateData к клику на кнопку Обновить. Это единственная “интерактивная” часть нашего виджета.

Обратите внимание на конструкцию Widget.prototype._updateData.bind(this). Здесь явным образом привязываем контекст – нам нужно, чтобы в методе _updateData this всегда указывал на экземпляр класса Widget. Сейчас будет видно, зачем – рассмотрим код метода _updateData

Получение данных с сервера, метод _updateData

Обращаю внимание, что в параметры метода передаем свойство e (event). Оно нужно, чтобы сделать preventDefault в самом начале, дабы не перезагрузить наш виджет (иначе сработает submit формы).
Но делаем мы это такой строчкой
e && e.preventDefault();
Эта дополнительная проверка на наличие параметра e нужна, потому что когда мы вызываем this._updateData(), параметр e будет равен undefined, и соответственно e.preventDefault() выкинет исключение.

После этого мы создаем нужные переменные, объект для ajax-запроса, выбранный город и DOM-элемент, в который выводим значение температуры, полученной с сервера. data будет отправляться в ajax-запросе, resp – это ответ от сервера. Дальше мы открываем соединение и отправляем данные на сервер. Дожидаемся ответа 200 от сервера и выводим полученную температуру в span. Условимся, что от сервера приходит json-строка в формате <"code": "success", "temperature": "диапазон температур">. Традиционно обработку ошибок оставлю на Вашу совесть, все делают по-разному. И наконец, нам осталось узнать, как получить данные о погоде с нашего сервера.

Как узнавать погоду?

Как я уже упоминал, мы воспользуемся сайтом meteoservice.ru. Он предоставляет возможность получить xml-файл с данными о погоде по любому гододу СНГ. Например, по этой ссылке доступна погода по Москве. С нашего сервера мы будем запрашивать этот файлик curl-ом, парсить его на нашей стороне, извлекать данные о температуре и возвращать ее обратно в браузер. Каждому городу нужно заранее поставить в соответствие нужный код (37 – Москва), узнать их можно здесь. Как работать с curl, можно узнать в этой статье на webdevkin-е

Рекомендую пользоваться этим сервисом с осторожностью. Когда статья уже почти была готова, неожиданно поменялся формат ответа по запросу о погоде. Отрубился вывод прогноза по времени суток, который я изначально хотел продемонстрировать в виджете. Пришлось частично переписывать код и уменьшать функциональность виджета, что меня не порадовало. Не знаю, как часто происходят у них такие вещи, но пользоваться сервисом в реальном приложении не советую.

Пишем php-код для получения информации о погоде

Как брать данные, уже понятно, алгоритм прост: вытаскиваем из $_POST параметр city – выбранный город, формируем строку вида http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml. Это путь к файлу с погодой. Отправляем на него get-запрос curl-ом. Полученный ответ парсим и вытаскиваем из него нужные параметры: минимальная и максимальная температуры. Полученные числа отдаем в json-объекте обратно в браузер.

Поясню про simplexml_load_string – эта функция создает xml-объект, который мы уже можем парсить. А создается объект из строки xml, которую мы получаем от сервиса погоды.
REPORT->TOWN->FORECAST[0]->TEMPERATURE – это путь по узлам xml, чтобы добраться до нужных значений температуры. Пройдите по ссылке выше (московская погода) и наглядно увидите эти пути.
Если что-то непонятно, спрашивайте в комментариях.

Итого

И на этом все! Мы создали несложный виджет для получения информации о погоде. Главная его особенность в том, что его очень легко встроить на любой сайт, достаточно всего лишь вставить в html-код такие строки

Полагаю, что есть масса вариантов применения таких виджетов, от сбора различной информации до рекламных баннеров. А у Вас есть идеи, где это можно применить? Поделитесь в комментариях!

Как создать виджет самостоятельно?

Операционная система Аndroid имеет множество функций и возможностей. Одной из них являются виджеты – окошки, которые позволяют использовать часть функционала приложения, без его запуска.

В основном виджеты идут в комплекте с приложением. Однако есть программы, которые лишены данной опции. А значит, нужно брать дело в свои руки!

  • С помощью Play Market скачиваем бесплатное приложение “KWGT Kustom Widget Maker”, которые можно приобрести бесплатно, однако часть функций будут доступны только после покупки дополнения.

Программа выступает в качестве платформы для запуска сторонних виджетов от разных разработчиков. Помимо этого вы можете изменить внешний вид виджетов, задать им дополнительный функционал.

Читать еще:  Инструкция: как сделать эмодзи, которым будут пользоваться во всем мире

Сперва можно подумать, что “KWGT Kustom Widget Maker” сложное приложение, которое напоминает программы для разработки софта. И да и нет: интерфейс похож, но сложного тут ничего нет.

Чтобы начать редактировать виджеты:

  • заходим на рабочий стол и вызываем меню редактирования рабочих столов путем удержания кнопки меню или долгим тапом по экрану;
  • находим рамку виджетов “KWGT” и выставляем необходимый размер, например – 4х2. После этого на рабочем столе образуется окошко;

  • Кликаем по окошку, тем самым открывая меню выбора виджетов;
  • Выбираем понравившийся макет и нажимаем на него (Дополнительные макеты можно скачивать с Play Маркет. Для этого в строке поиска приложений указываем “KWGT виджеты”);

  • После выбора понравившегося макета приложение перейдет к его редактированию. Будут доступны следующие настройки:
  1. Элементы, отвечающие за настройку геометрических параметров виджета;
  2. Фон, отвечающий за фоновую картинку на виджета;
  3. Касание, задающий действия которые будут выполняться при активации виджета;
  4. Слой, отвечающий за масштаб виджета;

В итоге мы получим уникальный виджет, с необходимым функционалом.

Как создать виджет для сайта?

Считается, что основная задача вебмастера – привлечение аудитории пользователей. Но это не совсем так. Можно сколь угодно много привлекать аудиторию, но если среди неё не будет лояльной – результаты конверсии опечалят. Чтобы увеличить активность пользователей при взаимодействии с сайтом, стоит сделать для него виджет.

О сколько виджетов нам разных…

Если обратиться к словарю, выяснится, что виджет (widget) – небольшое графическое приложение, встраиваемое в пользовательский интерфейс браузера или сайта, и показывающее какую-либо информацию из какого-нибудь места. Именно поэтому они могут быть очень разнообразны. Когда речь заходит о создании виджета для сайта, обычно под этим подразумевается одно из трех графических приложений:

  • Обновляемый или просто визуально привлекательный элемент панели быстрых закладок;
  • Лента обновлений для размещения на главной странице поисковой системы «Яндекс»;
  • Модуль обновлений или комментариев, связанный с социальной сетью Facebook и отображаемый непосредственно на сайте.

Что ж, разберемся, как создать каждый из этих виджетов – и зачем он вам вообще нужен.

Создание виджета для Визуальных закладок (для движков WordPress и других)

Сервис Визуальных закладок от «Яндекс» в последнее время становится всё более популярным. Он удобен, красив и функционален. Визуальные закладки встраиваются в браузеры на движке Chromium из соответствующего магазина, а также входят в Яндекс.Браузер прямо «из коробки».

Визуально этот сервис являет собой табло со ссылками на сайты. Если туда добавить линк на собственную веб-страницу, в подавляющем большинстве случаев она будет выглядеть невероятно уныло – просто доменное имя на цветном фоне.

Чтобы сделать его более привлекательным для пользователей, стоит совсем немного потрудиться. А именно – «поколдовать» с API Табло.

Но сначала требуется создать логотип сайта. Картинка должна соответствовать следующим правилам:

  • Формат .PNG;
  • Размер 150х60 пикселей;
  • Прозрачный фон.

Сам виджет пишется на XML. В блокноте набирается следующий код:

Файл нужно сохранить под названием manifest.json и закинуть в корневой каталог сайта.

Следующий этап – немного поколдовать с PHP. Ну, или HTML – в зависимости от того, на каком языке написан движок сайта. Если хедер находится в header.php, то изменения вносятся в этот файл. А если в каком-нибудь другом месте – нижеследующую строчку нужно вписать, соответственно, туда.

А вот код для включения:

Этот код нужно вписать в хедер – то есть между открывающим и закрывающим HTML-тегами .

Виджет в Табло Визуальных закладок обновляется автоматически. Но не мгновенно. Любители покодить могут даже обновляемым его сделать, выводя различные уведомления.

Виджет сайта для главной страницы Яндекс

Многие знают, что главная страница поисковой системы Яндекс настраивается. И на ней можно разместить виджет своего сайта – чтобы пользователи могли узнавать обновления, не заходя собственно на веб-страницу. Это будет прекрасным преимуществом, так как снизит статистику отказов и повысит ваш проект в рейтинге поисковой системы.

Создать виджет для сайта несложно. Не нужно даже HTML изучать! Для такого виджета требуется, чтобы у сайта была RSS-лента. У движка WordPress она имеется по умолчанию и располагается по следующему адресу:

А вот для других движков потребуется создавать её самостоятельно.

Итак, виджет для Яндекса делается в два простых шага:

  1. Зайти на http://wdgt.yandex.ru/widgets и ткнуть на кнопку «Создать виджет»;
  2. Заполнить панели с названием виджета, описанием, картинкой и адресом RSS-ленты.

Всё! Копировав ссылку для установки на Яндекс, можно убедить пользователей добавить виджет вашего сайта на главную страницу поисковой системы.

А ещё этот виджет можно разместить на вашем сайте – на боковой панели, например, или в «вылетающем окошке» pop-up.

Виджет Facebook

Социальные сети плотно вошли в повседневную жизнь современного человека. Правда, в «наших широтах» наиболее распространены «ВК» и «Одноклассники». Однако Facebook – лучшее место для продвижения сайта, особенного предлагающего какие-либо товары или услуги.

Почему? Причина тут проста. Именно в Facebook проще всего организовать вирусное продвижение контента среди «интеллектуальной элиты». Различные профессионалы в самых разных областях предпочитают пользоваться именно этой социальной сетью, а значит – тут проще всего создать лояльную, «думающую» аудиторию, от которой даже можно подчерпнуть какую-нибудь новую информацию.

Разработчики Facebook прекрасно понимают, что владельцы информационных порталов предпочитают пользоваться именно их социальной сетью, и потому значительно упрощают процесс создания и размещения виджетов.

Итак, вот она, пошаговая инструкция о том, как создать виджет для сайта. Только предполагается, что у вашего сайта – или компании – уже есть соответствующая страница на Facebook, созданная человеком, у которого также есть аккаунт в Facebook:

  1. Нужно зайти от имени этого человека (авторизоваться через его логин и пароль) и нажать кнопку «Редактировать профиль» на главной странице профиля;
  2. Пролистать страницу до конца и открыть «Разработчикам»;
  3. На открывшейся странице отыскать кнопку Sharing, сопровождающуюся знаком Like, и смело в неё ткнуть;
  4. Затем требуется выбрать «Социальные плагины»;
  5. Найти Like Box;
  6. Откроется страница настройки виджета, где можно установить его размеры, цветовую схему, контент и визуальную составляющую;
  7. Затем нажатием кнопки Get Code можно получить код, выбрав язык разметки, максимально совместимый с движком сайта.

Виджет для WordPress

Теперь осталась пара мелочей – разместить виджет на сайте. Для самого популярного движка – WordPress – для этого придется добавить код в два различных места. Первое – футер. Туда добавляется JAVA-скрипт, определяющий функциональность виджета.

Второе – место непосредственного размещения виджета, например, сайдбар. Туда требуется скопировать CSS-код с div-блоком, в котором расположена ссылка на скрипт.

Для других движках, в том числе самописных или статичных – созданных на чистом HTML и отличающихся сложнейшей процедурой добавления контента – используется несколько иная методика. Однако в этих случаях проще обратиться к создателю сайта, чем пытаться самостоятельно разобраться в хитросплетениях кода.

[Кейс] Как бесплатно сделать виджет колесо удачи для вашего сайта онлайн

В представленной инструкции мы расскажем, как бесплатно своими руками можно создавать виджет колесо удачи онлайн на подобие представленному по адресу https://hoversignal.com/ru/widgets/1, позволяющий увеличить конверсию сайта на 8,3 %. Для реализации данного кейса не понадобятся услуги программиста и любые другие дополнительные затраты. Всё будет показано на примере ниши инфобизнеса, но вы научитесь создавать и настраивать виджеты колеса фортуны для любой другой сферы: электронной коммерции, недвижимости, авто.

Пошаговая инструкция

Сначала регистрируемся в HoverSignal – заполните несколько полей, указав любой адрес сайта, всё очень просто.

Далее выбираете тип виджетов – «Колесо фортуны».

Жмете «+Создать новый» (1). На бесплатном тарифе можно создавать любое количество виджетов, но действуют ограничения по количеству заполненных форм (2) для колеса фортуны.

Выбираем нужную отрасль, например, «Инфобизнес и образование».

И в открывшемся каталоге выбираем готовый шаблон колеса фортуны. Список шаблонов постоянно пополняется.

В открывшейся вкладке «Дизайн» просматриваем виджет колеса фортуны.

Если что-то нужно добавить/заменить – редактируете это во вкладках “Содержимое” и «Купоны».

Вы можете редактировать имеющиеся купоны (1, 2), добавлять новые (3), а также тонко настраивать вероятность выигрыша (4).

После этого нажмите на кнопку на “Сохранить и выйти”.

Для запуска колеса фортуны на странице используется триггер, настройки которого расположены во вкладке «Триггер». Его очень просто настроить.

Читать еще:  Smart touch на телефоне Meizu: что это такое?

При нажатии на триггер активируется виджет колеса фортуны. Но также его можно запускать автоматически через заданное время или при попытке посетителя закрыть страницу вашего сайта. Всё это для вашего колеса удачи настраивается на странице “Где показывать”.

Тут же вы можете очень точно указать список нужных страниц сайта, на которых вы планируете показывать/запускать виджет колеса фортуны или «ловить беглецов» с вашего сайта.

Если нужно создать уникальное колесо фортуны – жмите на “Пустой шаблон”.

Создавайте новый виджет колеса фортуны, легко добавляя ваши тексты/купоны. Это просто и интуитивно понятно!

Все собранные данные ваших посетителей (эмейлы, номера телефонов) будут отправляться вам на указанную почту в настройках вашего сайта, указанного в панели Хуверсигнал.

Добавляйте новые адреса, чтобы получать на них всю собранную информацию.

Также все контакты ваших посетителей, собранные с помощью колеса удачи, хранятся на странице “Лиды”.

Чтобы активировать показ колеса фортуны на вашем сайте, добавьте код из админки Хуверсигнал на нужные вам страницы.

Просто скопируйте и вставьте наш скрипт в код футера вашего инфосайта.

После правильной вставки кода (он работает для всех виджетов, не только колеса фортуны) появится соответствующая надпись.

Ещё один вариант бесплатного создания колеса фортуны – это сразу выбрать нужный вам вариант из каталога Hoversignal, указав тип виджета – колесо фортуны (1) и выбрав нужную нишу (2).

После этого достаточно нажать на «Установить бесплатно».

Выводы

Как вы могли убедиться, можно самостоятельно и без навыков программирования создавать виджеты колеса удачи и собирать базу контактов посетителей вашего сайта. Хотите попробовать? Начните прямо сейчас – это на 100 % бесплатно и просто, как и показано в этом небольшом кейсе!

Создание веб виджета для сторонних сайтов

Если Вам понравился данный материал, поделитесь им с вашими друзьями в соц сетях

Перед тем как продолжить ознакомление с данным материалом давайте немного поговорим о том, что такое виджет, где и для чего он используется.

Виджет – это небольшой независимый программный модуль, работающий в некоторой среде (напр. сайте, браузере, мобильном телефоне) и исполняющий, как правило, одну определённую функцию.

Вы наверное видели на страницах сайтов такие элементы, как:

  • информеры погоды, времени, курс валют;
  • онлайн тесты;
  • онлайн чаты
  • онлайн консультанты;
  • социальные виджеты, дающие возможность пользователем быстро и просто сделать репост понравившийся страницы сайта в своих социальных сетях;
  • подключение сервисов Яндекс.Метрика или Google Analytics к Вашему сайту по своей сути тоже является подключением виджета стороннего сервиса.

Таким образом, большинство из этих элементов на сайтах являются виджетами. Виджеты служат не только украшением, они несут в себя информационный контент, и служат дополнительным инструментом для расширения функциональности сайта.

На текущий момент большое количество сервисов предоставляют для сторонних сайтов свои виджеты, которые выполняют определенные функции. Во время установки виджета должны выполняться следующие требования:

  • установка виджетов не должна вызывает особых сложностей;
  • если дизайн виджета не подходит к общей стилистики сайта, то должна быть возможность его изменения.

Теперь давайте поставим для себя задачу.

Мы хотим создать виджет для сторонних сайтов, который будет отображать на их страницах, некий информационный блок с ссылками на наш сайт, т.е. создадим что то типо новостной ленты. При этом встраивание нашего виджета на страницы сайтов должно быть очень простым.

На данном сайте мной реализован виджет, который формирует в правой колонке список ссылок на материалы раздела Яндекс.Карты. В качестве демонстрации результата работы виджета Вы можете разместить на своем сайте следующий код:

скопируйте и вставьте следующий код на своем сайте

Подготавливаем файлы, необходимые для создания веб виджета

При создании веб виджета для сторонних сайтов, в качестве примера я буду использовать сайт с доменным именем yoursite.loc. Для более полного понимания материала на момент создания нашего виджета, что бы не путаться в путях давайте создадим и разместим новые файлы прямо в корень сайта yoursite.loc, там где расположен индексный файл.

Создадим в корне сайта 3 файла:

  • yoursite.loc
    • .htaccess
    • index.php
    • widget.php
    • widget.css
    • widget.js

В нашем примере мы будем использовать статическую HTML разметку, так как нас интересует сам принцип создания веб виджетов. Вы же, уже при создании рабочего виджета напишете код для получения тех данных, что Вам необходимы

внесем минимум стилей

содержимое javascript файла на данные момент оставим пустым

Ознакомившись с механизмами работы веб виджетов мной было выявлено 2 метода встраивания их кода на страницы сайтов: используя элемент iframe и используя javascript.

Подключение виджета через iframe

Элемент iframe позволяет нам вставить один html-документ в другой html-документ, где в атрибуте src мы указываем путь к документу, который отобразиться во встроенном iframe. При этом css и js файлы, необходимо подключить в файле widget.php.

Таким образом для размещения веб виджета на сторонних сайтах через iframe необходимо разместить в нужном месте на html-страницы iframe примерно следующего содержания:

Подключение виджета через javascript

Рассмотрев более детально примеры подключения виджетов сторонних сайтов стало понятно, что их подключение также возможно осуществить средствами javascript.

Я приведу Вам пару примеров такого подключения виджетов:

YandexLike (блок “Поделиться”) – простой виджет социальных сетей, позволяющий пользователям социальных сетей создавать репосты понравившихся страниц сайтов.

Виджет для сообществ с соответствующей группой или официальной страницей ВКонтакте. Виджет позволяет подписаться на новости сообщества, не покидая страницы.

При подключении виджетов выполняются примерно следующие шаги:

  • добавление на страницу блока в который будет размещен виджет (в том случае, если виджет визуально отображается для посетителей сайта);
  • подключение javascript файла, с сайта предоставляющего подключение виджета
  • подключение css файла, с сайта предоставляющего подключение виджета (если это необходимо)
  • инициализация виджета

Исходя из данных примеров, мы видим, что установка виджетов отвечает основному требованию – она не вызывает особых сложностей. Нам необходимо разместить всего пару строк предоставляемого кода на своей странице и виджет “волшебным образом” заработает.

Того же хотим добиться и мы с Вами. Мы хотим, что бы, установка нашего виджета была такой же простой. Так давайте попробуем сделать свою реализацию подключения нашего виджета и его инициализацию.

Составим код, который мы будем предоставлять для встраивания нашего виджета на страницу любого сайта.

Код подключения нашего виджета

  • 1 стр: добавляем на страницу HTML-элемент c идентификатором “wrgsv”, в этот элемент будет размещен виджет после его инициализации
  • 2 стр: подключение javascript файла, в котором описан javascript объект виджета
  • 3 стр: инициализация виджета

Инициализация виджета через javascript

Пришло время поработать с нашим файлов widget.js. В нем мы создадим объект с свойствами и методами. Основным интересующим нас методом будет метод инициализации виджета init.

Так как подключение css стилей виджета осуществляется, в методе “addStyle” объекта “wrgsv”, то из файла http://yoursite.loc/widget.php необходимо удалить подключение файла стилей “widget.css”, которое мы добавили ранее при подключении виджета через iframe.

Для базового расширения функционала виджета, мы можем добавить возможность во время его инициализации, указать в качестве параметра, идентификатор HTML-элемента, в который будет встроен виджет. Это видно в методе init: function(id) .

Код подключения нашего виджета с указанием нового идентификатора “new_id_box”

Ошибки во время выполнения кросс-доменного скриптинга

Во время инициализации виджета, а именно во время отправки ajax запроса на другой домен, в консоле браузера может возникнуть ошибка. К разных браузерах она звучит по разному. К примеру:

В Chrome – XMLHttpRequest cannot load http://yoursite.loc/widget.php. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://САЙТ-ГДЕ-ПОДКЛЮЧАЕТСЯ-ВИДЖЕТ.ru’ is therefore not allowed access

В Firefox – Запрос из постороннего источника заблокирован: Политика одного источника запрещает чтение удаленного ресурса на http://yoursite.loc/widget.php. (Причина: отсутствует заголовок CORS ‘Access-Control-Allow-Origin’)

Обычно запрос XMLHttpRequest выполняет запрос только в рамках текущего сайта. При попытке использовать другой домен/порт/протокол – браузер выдаёт ошибку. Возникновение данной ошибки вполне “нормальное явление”, так как разработчики данного стандарта побеспокоились о контроле безопасности.

Для исправления данной ошибки необходимо внести изменения в заголовки ответа сервера и тем самым разрешить такой запрос для стороннего сайта. Это можно сделать как минимум следующими способами:

голоса
Рейтинг статьи
Ссылка на основную публикацию
Статьи c упоминанием слов: