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

май 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-файл виджета в раздел 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

Обращаю внимание, что в параметры метода передаем свойство 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-код такие строки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Web-виджеты

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

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

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

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

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

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

Если поставщик использует 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 - смотрите, как творится волшебство

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

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

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

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

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