Как добавить виджет на сайт: инструкция по разработке онлайн виджетов для сайта

Как добавить виджет на сайт: инструкция по разработке онлайн виджетов для сайта Гаджет

Что такое виджеты, и как они работают

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

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

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

Какие задачи решают виджеты:

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

4 способа добавить виджет на сайт joomla

  1. Примените модуля JivoSite

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

    Сама установка несложная: в разделе Расширения/Extensions выбираем Установка модуля/Install. Архив и JivoSite загружаем в CMS.

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

    В коде чата находим уникальный ID чата. Он понадобится нам в новом модуле. Данный ID находится в разделе “Управление” — Настройки сайта — Установка. После “widget_id =”: в коде чата вы увидите уникальную буквенную и цифровую комбинацию, которая и является необходимым нам ID виджета.

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

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

    Когда все настройки внесены, на сайте отобразиться форма чата.

  2. Применение менеджера шаблонов

    Виджеты могут быть добавлены для версии Joomla 2.5 . В панели управления сайта выбираем “Расширения” — “Менеджер шаблонов”. Перед вами появится таблица, далее в “Шаблоны” выбираем используемый нами шаблон. Его можно определить по звездочке, которая стоит у строки “По умолчанию” и в строке “Область системы” стоит “Сайт”. Далее переходим к “Основные файлы шаблона” — “Изменить шаблон главной страницы”. В шаблон перед тегом </body> вставляем код нужного нам виджета. Сохраняем. Все просто!

    Совет: если в процессе регистрации вы забыли сохранить код виджета, не переживайте. Его всегда можно найти в JivoSite: раздел “Управление”, далее переходим в настройки сайта — Установка.

  3. Установка виджета путем создание нового модуля

    Используем CMS Joomla 2.5 . В панели управления сайта находим профиль “Сайт”, далее переходим в “Мой профиль”.

    С правой стороны в строках меню переходим к основным настройкам. Во вкладке редактор выбираем “без редактора”. Не забудьте сохранить.

    Находим вкладку “Расширения”, затем переходим к “Менеджеру модулей”. Создаем новый модуль типа HTML-Код.

    Код нашего виджета вставляем в чистое поле текста. Настраиваем нужные функции, сохраняем. Все получилось! Состояние редактора можно восстановить во вкладке “Мой профиль”.

  4. Использование FTP

    Заходим на хостинг сайта. Или можно использовать FTP-клиент и найти исходные файлы сайта. В файл Index.php вносятся нужные изменения (файл можно найти по алгоритму /templates/название выбранного шаблона/index.php).Использование FTP

    Используем код нужного виджета перед тегом </body> и сохраняем. Все получилось!Используем код нужного виджета

Widget своими руками

Привет.

Наверное, многие из вас пользовались стандартными javascript-виджетами, написанными как безвестными разработчиками, так и крепкими профессионалами, так и гуру. Есть великолепные коллекции виджетов, поставляемых в качестве плагинов к известным фреймворкам (вроде jQuery, Prototype JS, YUI), так и целые фреймворки, акцентирующие свое внимание на создании виджетов, вроде Ext JS или qooXdoo.

Но что, если вы не хотите использовать достаточно объемный фреймворк для создания простого диалогового окна, или хотите разобраться в том, как создаются такие виджеты, или даже разрабатываете собственный фреймворк?

Об этом и пойдет речь в сегодняшнем посте — как сделать простейшее диалоговое окно и alert средствами чистого javascript, без применения каких-либо фреймворков.

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

Прежде всего, нам понадобится небольшая коллекция методов, облегчающих нашу работу — это, прежде всего, навешивание и удаление обработчиков событий на DOM-элементы, остальные совершенно необязательны, и просто являются хелперами, уменьшающими объем кода и увеличивающими его понятность:

  1. // Для этого проекта мы будем использовать одну переменную с глобальной областью видимости "DEMO".
  2. // Для чего нужно использовать как можно меньше переменных с глобальной областью видимости?
  3. // По двум причинам:
  4. // 1. Вы можете быть уверенным, что весь ваш код надежно упрятан в безопасное место, и другой разработчик, подключив
  5. //   свой модуль (или свою библиотеку), не сломает вашу функцию или объект, и ваш код (и его) будет работать именно так,
  6. //   как вы ожидаете. Программирование - непростая штука, так зачем находить себе проблемы там, где их можно избежать?
  7. // 2. Объекты, являющиеся свойствами глобального объекта (в клиентском javascript'е - объекта window) иначе обрабатываются
  8. //   сборщиком мусора, и живут дольше, а значит, если вы для каждую мелкую функцию или временную переменную будете
  9. //   создавать в глобальной области видимости, использование памяти будет неоптимальным, что само по себе плохо. А если
  10. //   вы плохо распоряжаетесь памятью, то, по мере роста функционала, ваш проект очень скоро начнет тормозить.
  11. // Лично для меня любая из этих причин является достаточно веским аргументом для того,
  12. // чтобы упаковывать весь свой код в одну переменную с глобальной областью видимости.
  13. if (typeof DEMO == "undefined" || !DEMO) {
  14.   var DEMO = {};
  15. }
  16.  
  17. // Lang - это утилита, содержащая удобные методы для работы с языком.
  18. // На самом деле, это просто синтаксический сахар - то есть, можно обойтись и без них,
  19. // но с ними приходится меньше печатать, да и код становится более человекопонятным.
  20. //
  21. // Обратите внимание, что перед тем, как создать объект Lang в объекте DEMO, я проверяю, не создан ли он уже
  22. // в рамках этой демонстрации это не является необходимым, но в случае, если ваш код будет использовать человек,
  23. // не слишком хорошо понимающий, что он делает (скажем, просто подключает ваш виджет к своему блогу),
  24. // он может и два и три раза подключить несколько ваших виджетов, имеющих те же самые объекты как свою часть - а без
  25. // этой проверки объект DEMO.Lang несколько раз перезапишется, причем, это будет совершенно лишняя операция.
  26. DEMO.Lang = typeof DEMO.Lang != 'undefined' && DEMO.Lang ? DEMO.Lang : {
  27.   isUndefined : function (o) {
  28.     returntypeof o === 'undefined';
  29.   },
  30.   isString : function (o) {
  31.     returntypeof o === 'string';
  32.   }
  33. };
  34.  
  35. // DOM - это ряд функций, облегчающих работу с DOM. В рамках примера мне достаточно только двух - навешивание и удаление
  36. // обработчиков событий, метод get вспомогательный и без него можно обойтись.
  37. DEMO.DOM = typeof DEMO.DOM != 'undefined' && DEMO.DOM ? DEMO.DOM : {
  38.   get : function (el) {
  39.     return (el && el.nodeType) ? el : document.getElementById(el);
  40.   },
  41.  
  42.   addListener : function (el, type, fn) {
  43.     // если el не dom-элемент, а строка, тогда пробуем найти dom-элемент с id, равным этой строке
  44.     if (DEMO.Lang.isString(el)) { el = this.get(el); }
  45.  
  46.     // проверка наличия необходимой функциональности в браузере перед использованием функции называется
  47.     // feature-testing.
  48.     // Подробнее об этом принципе можно прочитать, здесь: www.unix.com.ua/orelly/webprog/jscript/ch20_01.htm
  49.     // а конкретно об этом кусочке кода здесь: fastcoder.org/articles/?aid=17
  50.     if (el.addEventListener) {
  51.       el.addEventListener(type, fn, false);
  52.     } elseif (el.attachEvent) {
  53.       el.attachEvent('on' type, fn);
  54.     } else {
  55.       el['on' type] = fn;
  56.     }
  57.   },
  58.  
  59.   removeListener : function (el, type, fn) {
  60.     if (DEMO.Lang.isString(el)) { el = this.get(el); }
  61.  
  62.     if (el.removeEventListener){
  63.       el.removeEventListener(type, fn, false);
  64.     } elseif (el.detachEvent) {
  65.       el.detachEvent('on' type, fn);
  66.     } else {
  67.       el['on' type] = function () { returntrue; };
  68.     }
  69.   }
  70. };

* This source code was highlighted with Source Code Highlighter.

Чтобы не раздувать листинг, я не включил в него еще две функции — purge и setInnerHTML, по ссылке вы можете найти их описание и принцип действия. Также вы можете найти их в исходниках примера.

Ну и теперь перейдем к тому, ради чего все затевалось — к созданию непосредственно диалогового окна.

  1. if (typeof DEMO == "undefined" || !DEMO) {
  2.   var DEMO = {};
  3. }
  4.  
  5. // Обратите внимание - объект строится по так называемому "модульному" паттерну, предложенному YAHOO!
  6. // подробнее: ajaxian.com/archives/a-javascript-module-pattern
  7. DEMO.Dialog = typeof DEMO.Dialog != 'undefined' && DEMO.Dialog ? DEMO.Dialog : function () {
  8.   // "private"-свойства
  9.  
  10.   // создаем контейнер диалога и запоминаем его.
  11.   var dialog = document.createElement('div');
  12.  
  13.   dialog.className = 'dialog';
  14.   document.body.appendChild(dialog);
  15.  
  16.   // Главная функция. На вход может приходить как строка (в этом случае она становится текстом окна)
  17.   // так и объек со свойствами:
  18.   // body {String} - текст окна
  19.   // buttons {Array} - массив кнопок, при этом каждая кнопка - объект вида:
  20.   //  id : {String} - id кнопки
  21.   //  text : {String} - текст кнопки
  22.   //  callback : {Function | Object} - либо функция (в этом случае она будет повешена на click по кнопке), либо объект вида:
  23.   //   fn : {Function} непосредственно функция
  24.   //   type : {String} тип события, на которое будет навешена функция.
  25.   var render = function (o) {
  26.     var html, i, length = (typeof o.buttons === 'undefined') ? 0 : o.buttons.length,
  27.       button;
  28.  
  29.     // текст диалогового окна
  30.     if (typeof o === 'string') {
  31.       html = '<p>' o '</p>';
  32.     } else {
  33.       html = '<p>' ((o.body) ? o.body : o) '</p>';
  34.     }
  35.  
  36.     for (i = 0; i < length; i ) {
  37.       button = o.buttons[i];
  38.       html = '<a href="#" id="' button.id '">' button.text '</a>';
  39.     }
  40.  
  41.     // нам не нужно беспокоиться об утечках памяти, Дуглас Крокфорд побеспокоился за нас
  42.     DEMO.DOM.setInnerHTML(dialog, html);
  43.  
  44.     activateListeners(o.buttons);
  45.   };
  46.  
  47.   // навешиваем обработчики событий на кнопки. Если кнопок нет - ничего не делаем.
  48.   var activateListeners = function (buttons) {
  49.     var i, length, button, isUndefined = DEMO.Lang.isUndefined;
  50.  
  51.     if (DEMO.Lang.isUndefined(buttons)) { return; }
  52.     length = buttons.length;
  53.  
  54.     for (i = 0; i < length; i ) {
  55.       button = buttons[i];
  56.       if (!isUndefined(button.callback.type) && !isUndefined(button.callback.fn)) {
  57.         DEMO.DOM.addListener(button.id, button.callback.type, button.callback.fn);
  58.       } else {
  59.         DEMO.DOM.addListener(button.id, 'click', button.callback);
  60.       }
  61.     }
  62.     cached_buttons = buttons;
  63.   };
  64.  
  65.   return {
  66.     // публичный функции
  67.     // показываем диалогове диалоговое окно
  68.     show : function (o) {
  69.       render(o);
  70.     },
  71.     // прячем диалоговое окно
  72.     hide : function () {
  73.       dialog.style.display = 'none';
  74.     }
  75.   };
  76. }();

* This source code was highlighted with Source Code Highlighter.

Теперь у нас есть объект DEMO.Dialog, у которого есть два public метода — show и hide. При этом объект достаточно гибкий и может отрисовать как диалоговое окно, так и оповещение.

Если мы хотим вызвать показать диалоговое окно, то мы добавим две кнопки:

  1. DEMO.Dialog.show({
  2.   body : 'Хотите кофе?',
  3.   buttons : [
  4.     {
  5.       id : 'cancel',
  6.       text : 'Не',
  7.       callback : function () { DEMO.Dialog.hide(); }
  8.     },
  9.     {
  10.       id : 'accept',
  11.       text : 'Да!',
  12.       callback : function () {
  13.         DEMO.Dialog.hide();
  14.         document.body.appendChild(document.createTextNode('Я тоже :)'));
  15.       }
  16.     }
  17.   ]
  18. });

* This source code was highlighted with Source Code Highlighter.

Если мы хотим оповестить пользователя о чем-то, то достаточно одной кнопки «Закрыть»:

  1. DEMO.Dialog.show({
  2.   body : 'Э... кхм... ваше кофе сбежало!',
  3.   buttons : [
  4.     {
  5.       id : 'accept',
  6.       text : 'Куда?! o_O',
  7.       callback : function () { DEMO.Dialog.hide(); }
  8.     }
  9.   ]
  10. });
  11.  

* This source code was highlighted with Source Code Highlighter.

Думаю, css-код, используемый для примера, не важен.

Демонстрация.

Исходный код в архиве.

Вес javascript кода после склейки:

Разумеется, это лишь пример, в реальном проекте нужно было добавить следующее:

P.S.кросспост в моем блоге.

Виды виджетов для сайта

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

[expert]

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

1. Pop-up

Поп-ап – это всплывающее окно с информацией об акциях или с призывами к каким-либо действиям. Обычно рop-up выходят при первом визите на сайт или через некоторое время.

Этот виджет на странице помогает заинтересовать посетителей акцией, взять их контактные данные, предложив взамен промокоды, скидки и т. д. Воспользовавшись вашим предложением и совершив, например, первый заказ с выгодой, клиент может вполне стать постоянным.

Как добавить виджет на сайт ucoz

Если на редактируемой странице нажать кнопку «Виджеты», то появляется окно с набором таких модулей.

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

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

  1. В раскрывающемся окне выберите требуемую категорию модулей. К примеру, «Игры и развлечения». В этом случае вы увидите окно с символами доступных игр.
  2. Выберите определенную игру (к примеру, «Снежок»), и вам будет доступны настройки игры.
  3. В поля под значком игры нужно добавить размеры окна, в котором будет отображаться виджет на странице сайта (к примеру, 320 х 240).
  4. При нажатии на кнопку «Получить код» открывается окно с кодом модуля.
  5. Код виджета необходимо копировать в буфер обмена, а затем закройте окно с кодом.
  6. Скопированный код следует добавить в поле редактора страниц в нужное вам место.
  7. После нажатия кнопки «Сохранить» вы увидите окно с сообщением об успешном сохранении. Теперь перейдите по ссылке «Перейти на страницу». Выша страница с установленным виджетом «Снежок» появится в окне браузера.

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

Как создать и добавить виджет группы вк на сайт

Перед тем как добавить виджет ВКонтакте на сайт, нужно зайти на свою страничку в этой соцсети. Затем следует переместиться в левый нижний угол экрана. Здесь под таргетированными объявлениями расположена кнопка «Разработчикам». Нередко у неопытных админов сайтов возникают сложности с поиском этой кнопки.

Если у вас не получилось найти данный пункт, вернитесь в самый верх вашей странички ВК и нажмите на треугольный символ рядом с вашим именем. Здесь необходимо найти пункт «Помощь».

После нажатия на эту кнопку будет открыта страничка, снизу которой есть пункт «Разработчикам».

После перехода на страницу разработки приложений нажмите на пункт «Подключение сайтов и виджеты».

В этом разделе следует найти «Виджеты для сайтов» и нажать на кнопку «Сообщества».

Теперь вы попадете в раздел «Виджет для сообществ», где можно сделать все нужные настройки, чтобы добавить виджет ВКонтакте. Все необходимые поля будут заполнены автоматически.

Вам будут доступны пять полей:

  1. В разделе «Ссылка на страницу» добавьте адрес своей группы.
  2. В разделе «Вид» нужно выбрать одну из следующих опций:

    • Участники (на таком виджете будут отображены аватарки членов вашего сообщества).

    • Новости (здесь можно найти последние новости сообщества).

    • Только название (виджет будет содержать только название вашей группы.

  3. Раздел с настройками ширины и высоты виджета.
  4. В четвертом поле можно добавить цвет фона, текста и кнопок.
  5. Последнее поле, которое представлено в красном квадрате, содержит код виджета для установки на сайт.

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

Окно чата

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

По этим причинам к чату требования чуть мягче, чем к другим виджетам, но все же они есть:

  • стандартное расположение этого виджета — левый нижний угол, но необязательно. Если других дополнений нет, можно расположить его и справа;
  • возможность в любое время свернуть окно или полностью его закрыть;
  • время ответа специалиста. Оперативные ответы — главное преимущества чата. Когда человеку приходится ждать сообщений оператора часам — применение теряет всякий смысл. Максимальное время реакции — одна-две минуты, лучше меньше;
  • обязательно указывайте статус окна. Если все специалисты заняты и ответить в данный момент времени некому — сообщите об этом пользователю. То же самое касается и присутствия операторов в чате. Никого нет онлайн — клиент должен об этом знать. Никому не хочется писать в пустоту. Внесите конкретику: не просто “все операторы заняты” или “к сожалению, мы не онлайн”, а “извините, но сейчас ни один из специалистов не может вам ответить. Ближайший оператор будет доступен через 10 минут. Спасибо!”;
  • фотография специалиста в окне. Вроде бы мелочь, но именно из таких мелочей складывается одно целое. Лучше не использовать стандартные или стоковые фото — ставьте изображения реальных специалистов. Это повышает лояльность и дает понять, что общается не робот или бот, а живой человек;
  • текст обращения. Текст должен предлагать человеку решить его проблему. Можно написать “Напишите нам, мы онлайн”, а можно: “Есть вопросы? Специалисты нашего чата с удовольствием на них ответят!”. Еще: креатив приветствуется. Вместо стандартных предложений написать специалисту чата можно выдать примерно такое:

Полезные виджеты для сайта: установка и настройка виджета бесплатно

Алексей Кондаков, руководитель проектов интернет-агентства Brandmaker, протестировал популярные сервисы для создания виджетов и рассказал об их особенностях блогу Нетологии.

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

Процент посетителей сайта, оставивших заявку, называется конверсией сайта (CR%), и, чтобы наиболее эффективно расходовать рекламный бюджет, конверсию нужно постоянно повышать. Доработки сайта — удовольствие недешевое, да и грамотного специалиста найти не так-то просто. Что же делать малому и среднему бизнесу, желающему повысить прибыль своей компании? Здесь в бой вступают онлайн-виджеты. Они способны повысить число обращений с сайта с минимальными вложениями денег и времени.

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

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

Программа обучения: «CRM-маркетинг: управление клиентской базой»

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

Настройка и установка

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

Обзор популярных виджетов для сайта

Правила показа

Есть возможность настроить страницы показа ярлычков виджетов, например, на странице контактов отображаем виджет подписки на соцсети, а на страницах с товаром виджет сбора заявок. А также есть возможность настройки условий всплывания окон виджета по таймеру, просмотру страниц или при попытке ухода с сайта (Exit Popup). Ещё можно показывать виджет отдельно на мобильной или десктопной версии. Все условия показа поддерживают регулярные выражения.

Обзор популярных виджетов для сайта

Настройка систем аналитики

Полная интеграция с Яндекс.Метрикой и Google Analytics. Настройка целей осуществляется простым заполнением пары полей.

Обзор популярных виджетов для сайта

Интеграция с CRM и другими сервисами

Доступна интеграция с самыми популярными CRM-системами (проброс заявок): Битрикс24, AmoCRM, RetailCRM. И также есть готовые способы интеграции с системами RoiStat, R7K12, Мой склад, МегаПлан. Проброс электронных адресов подписавшихся возможен в UniSender и MailChimp.

Обзор популярных виджетов для сайта

Виджет сбора заявок

Виджет сбора заявок поддерживает стандартные поля «Имя», «Телефон», «Email» и «Свободный текст».

Обзор популярных виджетов для сайта

Сквиз-тест (Калькулятор)

Конструктор сквиз-тестов (имитация калькулятора), поддерживающий разные типы вводимых данных — от текстового поля до чекбоксов и радиокнопок с изображениями.

Обзор популярных виджетов для сайта

Виджет подписки на соцсети

Всплывающий виджет подписки на группу ВКонтакте.

Обзор популярных виджетов для сайта

Виджет email-подписки

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

Обзор популярных виджетов для сайта

Виджет обратного звонка

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

Мобильные версии

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

SMS-информирование

Можно настроить SMS-оповещения о заявках, в которых будут отправлять контактные данные клиента. Это необходимо для молниеносной реакции на заявки. Каждое SMS оплачивается отдельно.

Обзор популярных виджетов для сайта

Статистика по заявкам

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

Обзор популярных виджетов для сайта

Кейсы и примеры использования

Кейсы по увеличению числа заявок с сайта публикуются в группе Moclients ВКонтакте.

Цена и бесплатный период

При регистрации на баланс начисляются 500 рублей, которых хватит на 1 месяц тестового использования виджета. Далее активируется бесплатный тариф, который позволяет использовать всю функциональность (за исключением SMS-уведомлений). Ограничения бесплатного тарифа — 10 заявок в месяц. Начиная с 11 заявки контактные данные клиента будут скрыты. Это удобно для сайтов с небольшим трафиком, то есть за виджет можно не платить вообще. Если хотите получать больше 10 заявок в месяц, то необходимо активировать полную версию, которая стоит 16 рублей в день за каждый активный сайт в системе без ограничений по числу заявок.

Языковые версии

Полная поддержка Русского и Английского языков. Поддержка Чешского и Латвийского находится в beta-тесте.

Доступность в России

Сайт не блокируется Роскомнадзором.

Обработка персональных данных

В соответствии с законом ФЗ-152 каждая форма сбора персональных данных пользователей на сайтах должна сопровождаться ссылкой на политику обработки персональных данных. В виджете этот документ генерируется автоматически, достаточно просто заполнить реквизиты своей компании.

Обзор популярных виджетов для сайта

Техподдержка и документация

В личном кабинете есть раздел с ответами на частые вопросы. Для решения проблем можно обращаться в техподдержку через виджет ВКонтакте из личного кабинета. Среднее время ответа — 10 минут в рабочие дни.

Обзор популярных виджетов для сайта

Партнерская программа

Есть реферальная программа: от 30 до 40% от оплат каждого приведённого пользователя в течение неограниченного времени.

Обзор популярных виджетов для сайта

Программа обучения: «Интернет-маркетолог: от новичка до профи»

Красивый и удобный онлайн-чат на сайт с гибкой системой постоплаты. Подойдёт как сайтам с небольшим трафиком, так и огромным порталам. За счёт имитации диалога с помощью Чат-Бота показывает отличные показатели конверсии посетителей в заявки. Прозрачная партнёрская программа с гарантированными выплатами. Впечатление было омрачено недоступностью сайта в России, но надеемся, что это временная неприятность.

Настройка и установка

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

Обзор популярных виджетов для сайта

Правила показа

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

Обзор популярных виджетов для сайта

Настройка систем аналитики

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

Обзор популярных виджетов для сайта

Интеграция с CRM и другими сервисами

Доступна интеграция с некоторыми популярными CRM-системами (проброс заявок): Битрикс24, AmoCRM. А также есть готовые способы интеграции с RoiStat.

Обзор популярных виджетов для сайта

Виджет сбора заявок

Виджет сбора заявок, поддерживающий поля как «Имя», «Телефон», «Email», «Город». Есть возможность собирать ссылки на профили из соцсетей.

Обзор популярных виджетов для сайта

Онлайн-чат

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

Обзор популярных виджетов для сайта

Виджет обратного звонка

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

Обзор популярных виджетов для сайта

Мобильные версии

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

Обзор популярных виджетов для сайта

SMS-информирование

Можно настроить SMS-оповещения о заявках, в которых будут отправлять контактные данные клиента. Это необходимо для молниеносной реакции на заявки. Пакеты SMS-сообщений докупаются отдельно.

Обзор популярных виджетов для сайта

Статистика по заявкам

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

Обзор популярных виджетов для сайта

Цена и бесплатный период

Пробный период длится 14 дней с момента регистрации. Далее оплата идёт ежемесячно исходя из количества заявок за прошлый месяц. От 25 до 2,5 рубля за заявку (чем больше, тем дешевле).

Языковые версии

Только русский язык.

Доступность в России

Сайт временно блокируется Роскомнадзором. Для доступа придётся использовать прокси-серверы.

Техподдержка и документация

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

Обзор популярных виджетов для сайта

Партнерская программа

Есть реферальная программа: 25% от оплат каждого приведённого пользователя в течение неограниченного времени.

Обзор популярных виджетов для сайта

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

Настройка и установка

После регистрации открылись настройки, содержащие аж 17 вкладок. Очень серьёзная функциональность с возможностью тонкой настройки под ваши запросы, но чтобы разобраться с ним, потребуется больше времени, чем с другими испытуемыми. Установка осуществляется вставкой кода на сайт. Есть возможность отправить код программисту. Для настройки потребовалось 45 минут.

Обзор популярных виджетов для сайта

Правила показа

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

Обзор популярных виджетов для сайта

Настройка систем аналитики

Полная интеграция с Яндекс.Метрикой и Google Analytics. Подробные инструкции есть в базе знаний.

Обзор популярных виджетов для сайта

Интеграция с CRM и другими сервисами

Доступна интеграция с некоторыми популярными CRM-системами (проброс заявок): Битрикс24, AmoCRM. Установка на сайты на конструкторе LPGenerator. Можно подключить RetailCRM, Google Таблицы, Мой Склад, Мегаплан, 1C CRM, YClients, PipeDrive, Fresh Office или Slack через универсальный сервис интеграций Albato.

Обзор популярных виджетов для сайта

Виджет сбора заявок

Виджет сбора заявок поддерживает поля «Имя», «Телефон», «Email», «Свободный текст». Отображается, если все операторы офлайн.

Обзор популярных виджетов для сайта

Онлайн-чат

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

Обзор популярных виджетов для сайта

Виджет обратного звонка

Доступен виджет обратного звонка за дополнительную плату.

Обзор популярных виджетов для сайта

Мобильные версии

Виджет адаптируется под экраны мобильных устройств. Операторы могут общаться с клиентами на сайте с помощью мобильного приложения для iOS и Android.

Обзор популярных виджетов для сайта

Статистика по заявкам

В личном кабинете доступна подробная статистика по заявкам, разбитая по операторам.

Обзор популярных виджетов для сайта

Цена и бесплатный период

Тестовый период 14 дней. Далее от 592 до 790 рублей за каждого оператора в месяц (чем больше период оплаты, тем дешевле выходит месяц использования). Есть полностью бесплатная версия до 5 операторов с некоторыми ограничениями.

Обзор популярных виджетов для сайта

Языковые версии

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

Доступность в России

Сайт доступен.

Обработка персональных данных

Есть функциональность запроса согласия на обработку персональных данных.

Обзор популярных виджетов для сайта

Техподдержка и документация

Техподдержка 24/7 прямо в виджете на главной странице сайта. Подробная база знаний, в которой описаны ответы на самые частые вопросы. Среднее время ответа — 2 минуты.

Обзор популярных виджетов для сайта

Партнерская программа

Есть возможность получать вознаграждение каждый раз, когда клиент, приведённый вами, оплачивает лицензию. Величина вознаграждения — от 25% до 35%, зависит от суммы платежей ваших клиентов за последние 12 месяцев.

Обзор популярных виджетов для сайта

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

Настройка и установка

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

Обзор популярных виджетов для сайта

Настройка систем аналитики

Полная интеграция с Яндекс.Метрикой и Google Analytics. Подробные инструкции есть в базе знаний.

Обзор популярных виджетов для сайта

Интеграция с CRM и другими сервисами

Доступна интеграция с CRM-системами (проброс заявок) Битрикс24, AmoCRM, EnvyCRM.

Обзор популярных виджетов для сайта

Виджет сбора заявок

Виджет сбора заявок поддерживает поля «Имя», «Телефон» или «Email».

Обзор популярных виджетов для сайта

Сквиз-тест (Калькулятор)

Есть конструктор сквиз-тестов (имитация калькулятора), поддерживающий разные типы вводимых данных — от текстового поля до чекбоксов и радиокнопок с изображениями.

Обзор популярных виджетов для сайта

Виджет обратного звонка

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

Мобильные версии

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

Обзор популярных виджетов для сайта

Статистика по заявкам

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

Обзор популярных виджетов для сайта

Кейсы и примеры использования

Примеры использования есть на главной странице сервиса.

Цена и бесплатный период

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

Обзор популярных виджетов для сайта

Языковые версии

Только русский язык.

Доступность в России

Сайт доступен.

Техподдержка и документация

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

Обзор популярных виджетов для сайта

Партнерская программа

Вы получаете 35% от всех оплат клиентов.

Обзор популярных виджетов для сайта

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

Читать ещё: «5 сервисов для экспресс-аудита сайта: новинки на нейросетях и проверенная классика»

Если будут какие-то вопросы по представленным выше виджетам — пишите, с удовольствием отвечу.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Таймер обратного отсчета

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

  • будьте с клиентами честными — это самое главное. Если уж ставите такой счетчик — пусть все будет взаправду. Если никакой акции, на самом деле, не существует, а виджет используется только для привлечения внимания и подгоняет человека к совершению покупки — это сразу станет понятным. Покупатель просто обновит страницу или зайдет на следующий день. Если таймер начнет считать с начала и времени, оказывается, столько же, весь смысл виджета сойдет на нет. Больше того: клиент почувствует себя обманутым;
  • должна быть возможность убрать таймер. Вообще, это требование относится ко всем виджетам. Пользователю нужно предоставить возможность закрыть дополнения или, хотя бы, свернуть их. Если таймер висит посредине экрана и его нельзя никак убрать или хотя бы сдвинуть в сторону — это не есть хорошо;
  • таймер не должен всплывать каждую секунду. Представьте: покупатель увидел счетчик, но он его не заинтересовал. Человек закрывает виджет и продолжает серфинг по сайту. Вдруг окно всплывает снова. А потом опять. И опять. В какой-то момент пользователю это надоедает и он может покинуть сайт.

Украшательства

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

.select{font-size: 0.625em;font-family: Verdana, Arial, sans-serif;-moz-box-sizing: border-box;box-sizing: border-box;padding: .1em 2.5em .2em .5em;width: 10em;border: .2em solid #000;border-radius: .4em;box-shadow: 0 .1em .2em rgba(,,,.45);background: #F0F0F0;background:-webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);background:linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);}.select .value{display: inline-block;width: 100%;overflow: hidden;vertical-align: top;white-space: nowrap;text-overflow: ellipsis;}

Нам не нужен дополнительный элемент, чтобы создать стрелку вниз; вместо этого мы используем псевдоэлемент :after. Также её можно создать при помощи простого фонового изображения в классе select.

Далее стилизуем список вариантов:

Для вариантов нам нужно добавить класс highlight чтобы сделать возможным идентифицировать значение которе пользователь выберет (или выбрал).

Итак, вот результат с нашими тремя состояниями:

Гаджет:  Мониторинг работы видеокарты (RUS): температура, загрузка, производительность
Оцените статью
GadgetManiac
Добавить комментарий