Веб виджеты. Web-виджеты


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

Еще примеры

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

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

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

Промокод Moclients

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

Мой отзыв о Moclients

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

май 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-код такие строки

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

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

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

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

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

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

Перенесите службу поддержки прямо к вашим клиентам

Все, что понадобится вашим клиентам, - прямо на месте

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

  • справочный центр

  • Chat

  • Тикеты

Mobile SDK

Web Widget

Как это работает

Поддержка клиентов осуществляется органично, как по волшебству

Zendesk Embeddables - это сочетание компонентов Web Widget и Mobile SDK, пригодное как для Android, так и для iOS. Эти компоненты позволяют разработчикам встраивать функции Zendesk - справочный центр, чат или тикеты - практически в любое приложение, веб-сайт или автономное устройство. Это помогает поддерживать целостность бренда, повышает эффективность операций поддержки и сводит к минимуму несогласованность для клиентов.

Волшебство Embeddables

  • Повышение качества обслуживания клиентов

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

  • Проблемы решаются быстрее благодаря контексту

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

  • Дайте себе место для роста

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

    Mobile SDK

    Встройте поддержку прямо в свое мобильное приложение

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

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

    Включайтесь в нужный момент

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

    Больше контекста - быстрее решение

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

    Начните с Mobile SDK

    Для разработчиков

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

    Документация по Mobile SDK


    Web Widget

    Общайтесь с пользователями на своем веб-сайте

    Встроенная поддержка по вашему вкусу

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

    Разумные предложения для экономии времени

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

    Универсальная среда поддержки

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

    Получить виджет

    Для разработчиков

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

    Web Widget API

    «Zendesk SDK позволяет нам встречать клиентов там, где они находятся, не отвлекая их от дела».
    - Джереми Фейр, отдел операций с бизнес-системами, Big Fish Games

    Приступайте. Опробуйте продукт в деле.

    Зарегистрируйтесь и начните работу с Embeddables - смотрите, как творится волшебство

    Начать работу

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

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

Разберемся, что такое виджеты, и как ими пользоваться. С формальной точки зрения, виджет – это небольшое приложение, заточенное под реализацию какой-нибудь полезной задачи.Разобраться, что означает слово «виджет» не совсем просто, потому что долгое время так называли различные гаджеты, но за последние 20 лет появились специальные приложения, написанные на HTML или JavaScript, и выполняющие определенную функцию.

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

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

Классификация

По внешнему виду

Виджеты классифицируют по внешнему виду, функционалу и месту установки. По внешнему виду выделяют следующие виды этих программ:

  1. Топперы, расположенные в верхней части экрана и выглядящие как полоска с полем и кнопкой. Выполняют информационную функцию, сообщая про акции и скидки, могут и применяться для сбора контактов.
  2. Флор выполняет те же функции, что и топпер, но находится в нижней части экрана.
  3. Всплывающие окна, перекрывающие страницу сайта. Их используют для сообщений о разного рода акциях или для предложений оставить контактные данные.
  4. Ярлычки располагаются сбоку экрана и применяются для получения обратной связи от посетителей сайта.
  5. Встраиваемые виджеты.

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

По месту встраивания

Web-виджеты

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

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

Более точное название второй разновидности - информер. Классический пример - это показ прогноза погоды или отображение изменений биржевых курсов валют.

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


2024 © gtavrl.ru.