Главная » Триколор ТВ » Web виджеты. Пишем встраиваемый виджет на нативном javascript и php. Превращение посетителей в клиентов

Web виджеты. Пишем встраиваемый виджет на нативном javascript и php. Превращение посетителей в клиентов

май 21 , 2016

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Webdevkin. Демонстрация виджета Погода

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

Что здесь из интересного? В файле css/style.css будем хранить стили для страницы (не для виджета!). И в нужном месте создаем iframe..html. Мы убираем у него границу и возможность скроллинга и задаем руками размеры виджета. Конечно, интереснее создать адаптивный, но до этого доберемся позже.

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

Body { font-family: Arial; font-size: 14px; } .wrapper { width: 960px; margin: 0 auto; } .weather-widget-container { margin: 30px 0; }

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

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

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

В секции body:

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

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

Температура на завтра °C

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

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

html, body, body * { margin: 0; padding: 0; } .wbd-widget, .wbd-widget * { box-sizing: border-box; font-family: Ubuntu; } .wbd-widget { border: solid 1px #333; padding: 20px; color: black; } .wbd-widget__info { color: steelblue; font-size: 16px; text-align: center; } .wbd-widget__form-label { display: block; line-height: 30px; }

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

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

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

Var WeatherWidget = (function() { // Для выполнения ajax-запросов var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest: XDomainRequest; // Конструктор виджета function Widget() { this..php"; this.ui = { updateBtn: null, citySelect: null, temperatureSpan: null }; this.init(); } // Обновление данных о погоде Widget.prototype._updateData = function(e) { // Отправка ajax-запроса на сервер } // Инициализация компонентов ui Widget.prototype._initUI = function() { this.ui.updateBtn = document.getElementById("wbd-widget-update"); this.ui.citySelect = document.getElementById("wbd-widget-city"); this.ui.temperatureSpan = document.getElementById("wbd-widget-temperature"); } // Привязывание событий Widget.prototype._bindHandlers = function() { this.ui.updateBtn.addEventListener("click", Widget.prototype._updateData.bind(this)); } // Инициализация виджета Widget.prototype.init = function() { this._initUI(); this._bindHandlers(); this._updateData(); } // Возвращаем класс виджета return Widget; })(); new WeatherWidget();

Что здесь происходит? Мы создаем модуль на основе замыкания 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

// Обновление данных о погоде Widget.prototype._updateData = function(e) { e && e.preventDefault(); var xhr = new XHR(), city = this.ui.citySelect.value, temperatureSpan = this.ui.temperatureSpan, data = "city=" + city, resp; xhr.open("POST", this.url, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(data); xhr.onreadystatechange = function() { if (this.readyState != 4) return; if (this.status != 200) { console.log("Request error"); return; } resp = JSON.parse(this.responseText); temperatureSpan.innerHTML = resp.temperature; } }

Обращаю внимание, что в параметры метода передаем свойство 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": "диапазон температур"}. Традиционно обработку ошибок оставлю на Вашу совесть, все делают по-разному. И наконец, нам осталось узнать, как получить данные о погоде с нашего сервера.

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

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

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

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

$cityId = (int)$_POST["city"]; $url = "http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml"; $temperature = ""; if ($curl = curl_init()) { curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); $result = curl_exec($curl); curl_close($curl); $xml = simplexml_load_string($result); $object = $xml->REPORT->TOWN->FORECAST->TEMPERATURE; $temperature = $object["min"] . "-" . $object["max"]; } echo json_encode(array("code" => "success", "temperature" => $temperature));

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

Итого

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

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

Сегодня под микроскопом очередной сервис с виджетами для сайта. Почему очередной? – Их стало даже слишком много, одних обратных звонков наберется штук 50 . Но мы не рассматриваем все подряд. Если подопытный попал в этот блог, значит в нем есть кое-что интересное.

Итак, сегодня сервис с виджетами MoClients . На момент написания статьи, внутри 6 гибко-настраиваемых инструментов. Ребята позиционируются как бесплатные виджеты для сайта, но это правда лишь отчасти. Бесплатно можно получать с виджета всего 10 заявок в месяц. Впрочем, этого достаточно для тестирования. +В конце вас ждет промокод на дополнительную сумму для тестов.

Видео-обзор виджетов MoClients:

Список виджетов

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

Онлайн калькулятор. Этому виджету уделено особое внимание в статье. Дальше мы рассмотрим пример редактирования и варианты использования.
Обычный калькулятор, когда вы вводите какие-то числа (например, при расчете кредита) и в итоге выдается сухая цифра. Она может показаться слишком большой, и клиент уйдет. Если вас интересуют такие калькуляторы, здесь можно посмотреть обзор на все сервисы . В МоКлиентс другая модель. Вы заполняете форму калькулятора по шагам, и в конце вас просят ввести email или телефон, с помощью которого с вами связывается менеджер. Это contact-wall: ты потратил время на заполнение параметров и хочешь получить результат. Конверсия в заполненные формы с калькулятора намного выше, чем с других стандартных форм заявки. С клиентом связывается менеджер, дополняет стоимость ценностями, обрабатывает возражения. В итоге, цифры стоимости обретают другой, наполненный смысл.
Форма заказа. Обычная форма, которая собирает контактные данные людей и отправляет их вам.
Ссылка на нужную страницу. В данный виджет можно поставить ссылку на важную страницу.
Всплывающее окно акции. При уходе с сайта или по истечению определенного времени (параметры настраиваются в админке) всплывает окошко, вы вводите email и получаете скидку.
Каталог фотографии продукции. Виджет для размещения портфолио, каталог продукции и т.д. с возможностью оставить заявку.
Подписка на рассылку . Стандартный виджет, позволяющий собирать E-mail базу для дальнейших рассылок.

Пример работы калькулятора

Самый сок – это калькулятор. Давайте посмотрим, как он работает на примере вот такого сайта:

Справа вы увидите блок с двумя пунктами:

Админ-панель МоКлиентс:

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

Здесь же происходит создание нового виджета.

Добавление виджета

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

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

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

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

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

Установка Моклиентс на сайт

Чтобы все добавленные виджеты появились и заработали на сайте, нужно установить код. Это можно сделать в самом низу вкладки меню «Виджеты» или во вкладке «Установка на сайт». Есть три варианта установки:

Заказать бесплатную установку
Отправить инструкции на e-mail
Установить самостоятельно

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

В настройках сайта можно добавить е-mail для уведомлений, телефон для SMS и пр. Добавить сайт вам предложат при регистрации на сервисе.

Еще примеры

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

Контактная форма в виде виджета «Задайте нам вопрос».

Есть базовая бесплатная версия, но мы не берем ее в расчет, на ней ограничение: 10 заявок в месяц. Тестировать можно первые две недели и на полном тарифе, при этом без ограничений получать уведомления о новых заявках как на e-mail, так и посредством sms сообщений, и не заботится об ограничениях на количество заявок.

Промокод Moclients

При регистрации по этому промокоду на счету будет 800 рублей для тестов. Срок действия до 13 ноября!

Мой отзыв о Moclients

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

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

Как правило, все CMS позволяют разместить на сайте информеры.

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

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

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

Правила установки информера:

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

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

Не перегружайте свой сайт информерами — есть опасность расфокусировать внимание посетителей, отвлечь от основной информации. Переизбыток информеров чреват торможением загрузки основного контента.

Виды информеров:

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

Информеры и виджеты курса валют

Информер курса валют будет полезен компаниям, у которых стоимость услуг или товаров привязана к курсу. Такие виджеты могут предоставить информацию о котировках на биржах, колебаниях цен. Валютные информеры можно брать на сайте investing.com , ExDex или forex-informers .

Информеры и виджеты погоды

Информер погоды на сайт следует размещать компаниям, которые предоставляют услуги по туризму, рыбалке, охоте и размещению гостей, например турбазы, гостевые дома и гостиницы. Возможно, такие информеры подойдут и магазинам, которые продают сезонные вещи, например оборудование для зимних видов спорта. Можно воспользоваться сервисами Gismeteo или Яндекс.Погода . Gismeteo. Они развернутые и краткие. Дают информацию о текущей погоде и прогноз на несколько дней.

Информеры и виджеты новостей

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

Информер Яндекс.Расписания

Информеры и виджеты календаря

Информер календарь для сайта будет удобен посетителям сайта, если им нужно видеть какие-то даты, например, начала тура, экскурсии или начало/конец приема каких-либо документов. Очень удобный сервис календаря предлагает Google. они описывают инструкцию по размещению информера календарь на сайте.Так же есть следующие сервисы: chasikov.net.ru , calendar.yuretz.ru .

Информеры счетчиков посещаемости

У счетчиков посещаемости так же имеются информеры, на них отражены данные о посещаемости сайта, обычно их располагают в боковых колонках сайта или в подвале.

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

Информеры и виджеты социальных сетей

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

Это просто! Меньше чем за 5 минут вы можете обновить ваш вебсайт или блог при помощи интерактивных часов, что сделает их более яркими и дружественными к пользователям

Почему генератор виджетов часов от сайт?

Наши html5 виджеты не замедляют ваши веб страницы
Они дружественны к мобильным устройствам
Наши чудесные часы вообще не используют FLASH, а значит ваш вебсайт или блог не будет получать штрафные баллы от Google
Вы можете с легкостью разместить до 10 виджетов в ряд на странице.

Часто задаваемые вопросы

Могу ли я разместить больше чем одни часы на моей странице/сайте? Да, вы можете разместить на странице или вебсайте столько часов, сколько пожелаете Могу ли я изменить код виджета? В общем мы не позволяем делать изменения в коде, что предоставляем. Часы могут работать не верно в случае изменений, поэтому мы советуем просто вставить код "каким он есть". Однако, если вы знакомы с html - можете изменить следующее: цвет, размер, выравнивание и подсветка текста, делать небольшие изменения в текст цифровых часов. Другие изменения, особенно удаление гиперссылок, не разрешаються. Ваша копия часов может быть заблокирована в любой момент после изменений. Город, для которого мне нужны часы использует летнее время. Будут ли часы показывать точное время после перехода на зимнее время? Да, конечно! Наши часы учитивают изменения, связанные с переходами на летнее/зимнее время для всего мира!

Web-виджеты – это набор сервисов, которые привлекают новых посетителей, удерживают их на сайте компании и превращают в постоянных клиентов. Они анализируют поведение клиентов онлайн и делают им индивидуальные предложения о продаже. Такой подход увеличивает конверсию сайта и повышает количество продаж на 40-75%.

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

Удержание посетителей на сайте

«Умный виджет обратной связи» предлагает посетителю сайта заказать бесплатный звонок вашего специалиста. Это повышает лояльность клиента, создает личный контакт менеджера с потенциальным покупателем и влечет рост продаж с сайта на 40%. Виджет используется на 45 тысячах сайтов в зонах.РФ и.RU.

Превращение посетителей в клиентов

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

Повышение качества сервиса

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

Мгновенная консультация клиентов

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

Web-виджеты – это просто, удобно и эффективно

Для установки и настройки web-виджетов не требуются специальные навыки или помощь IT-специалиста. Подключите их самостоятельно прямо сейчас! Управляйте всеми каналами общения с клиентами в удобном личном кабинете, чтобы повышать лояльность покупателей и улучшать качество услуг. Меняйте оформление по мере необходимости, чтобы делать клиентам выгодные «горящие» предложения и увеличивать продажи.

Общение с клиентами в мессенджерах и соцсетях

В личном кабинете вы можете взаимодействовать с клиентами по множеству каналов связи сразу: звонить и принимать звонки и заявки на обратную связь, вести почтовую и SMS переписку, принимать сообщения и отвечать в мессенджерах и соцсетях ВКонтакте, Viber, Skype, Одноклассники, Facebook, Slack и других.

Смена оформления по требованию

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