Как расширить функциональность сайта: интеграция сторонних виджетов

Как расширить функциональность сайта: интеграция сторонних виджетов

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

 

Что такое виджеты и зачем они нужны

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

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

С помощью интеграции сервисов можно решать самые разные задачи, например: 

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

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

 

Виджеты поддержки пользователей

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

JivoSite

https://www.jivo.ru/

Интеграция на сайт чата онлайн-поддержки Jivo

Особенности:

  • коммуникация с пользователями в чате
  • настройка типовых фраз
  • автоматические действия
  • сбор контактов клиентов
  • обратный звонок
  • настройка дизайна

Стоимость: от 0 до 2094 руб. в месяц за оператора

Talk-me

https://talk-me.ru/

Интеграция на сайт чата онлайн-поддержки Talk-me

Особенности:

  • общение с клиентами в чате
  • шаблоны быстрых ответов
  • интеграция с CRM
  • настройка дизайна

Стоимость: от 99 до 1500 руб. в месяц за оператора

Callibri

https://callibri.ru/multichat

Интеграция на сайт чата онлайн-поддержки Callibri

Особенности:

  • онлайн-чат
  • шаблоны быстрых ответов
  • интеграция с CRM
  • обратный звонок
  • дополнительные инструменты повышения конверсии
  • гибкая кастомизация

Стоимость: от 1000 до 20000 руб. в месяц в зависимости от посещаемости сайта, безлимитное количество операторов.

 

Виджеты соцсетей

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

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

ВКонтакте

https://dev.vk.com/ru/widgets/overview 

Интеграция на сайт виджета соцсети ВКонтакте

Особенности:

  • встраивание отдельной записи или комментария
  • блок для комментариев
  • отправка личного сообщения
  • кнопки «Нравится» и «Поделиться» для статьи
  • организация опроса
  • встраивание плейлиста сообщества

Стоимость: бесплатно

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

Блок «Поделиться» от Яндекса

https://yandex.ru/dev/share/ 

Интеграция на сайт блока кнопок социальных сетей от Яндекса

Особенности: кнопки соцсетей, Evernote, Pocket, Pinterest, Telegram, WhatsApp, Viber, Skype.

Стоимость: бесплатно

Сервис Uptolike

https://uptolike.com/ 

Интеграция на сайт блока кнопок соцсетей Uptolike

Особенности: кнопки соцсетей, Evernote, Pocket, Pinterest, Mail.ru, Telegram, WhatsApp, Viber, Skype.

Стоимость: бесплатно

 

Виджеты опросов

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

Google Forms

https://docs.google.com/forms/ 

Интеграция на сайт опроса Google Forms

Особенности: создание форм опросов с разными типами вопросов по шаблону или вашему выбору. 

Стоимость: бесплатно

Typeform

https://www.typeform.com/surveys/ 

Интеграция на сайт сервиса опросов и форм Typeform

Особенности: конструктор опросов и форм с опциями кастомизации дизайна.

Стоимость: есть бесплатный тариф

 

Виджеты для онлайн-записи и мероприятий

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

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

Calendly

https://calendly.com/features/availability 

Интеграция на сайт виджета онлайн-записи Calendly

Особенности:

  • инструмент для планирования встреч
  • настройка свободных часов в календаре
  • мгновенное подтверждение при бронировании

Стоимость: есть бесплатный тариф

Hesus

https://hesus.ru/

Интеграция на сайт виджета онлайн-записи Hesus

Особенности:

  • запись клиентов
  • гибкая конфигурация модулей — резервирование билетов на маршрут
  • посуточное бронирование номера в гостинице или хостеле
  • опция выбора конкретного места (на мероприятии, в транспорте или в ресторане)

Стоимость: 990-1590 руб. в месяц

GBooking

https://gbooking.ru/online-booking/ 

Интеграция на сайт виджета онлайн-записи GBooking

Особенности:

  • сервис записи клиентов
  • рабочий кабинет для администраторов
  • автоматическая интеграция с электронным журналом

Стоимость: 2000-4000 руб. в месяц

Timepad

https://timepad.ru/business/ 

Интеграция на сайт виджета мероприятий и оплаты билетов Timepad

Особенности:

  • создание онлайн и офлайн событий
  • форма регистрации участников
  • оплата билетов

Стоимость: без комиссии для бесплатных событий, комиссия 6,5-8,5% для платных мероприятий.

 

Виджеты комментариев

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

Disqus

https://disqus.com/

Интеграция на сайт блока комментариев Disqus

Особенности:

  • добавляет на сайт комментарии, используя собственную соцсеть
  • премодерация комментариев

Стоимость: есть бесплатный тариф (с рекламой)

Cracle

https://cackle.me/comments 

Интеграция на сайт блока комментариев Cracle

Особенности:

  • микроразметка рейтинга, индексируемая поисковыми системами
  • адаптивный дизайн
  • кросспостинг в соцсети
  • поиск
  • аналитика
  • шаблоны сообщений

Стоимость: от 700 руб. в месяц

 

Виджеты календаря

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

Google Календарь

https://support.google.com/calendar/answer/41207?hl=ru

Интеграция на сайт Google Календаря

Особенности: интеграция Google Календаря, выбор параметров отображения. 

Стоимость: бесплатно

Яндекс Календарь

https://yandex.ru/support/calendar/widget.html

Интеграция на сайт Яндекс Календаря

Особенности: интеграция Яндекс Календаря, настройка параметров отображения. 

Стоимость: бесплатно

 

Виджеты таймера обратного отсчета

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

MegaTimer

https://megatimer.ru/

Интеграция на сайт таймера обратного отсчета MegaTimer

Особенности:

  • настройка типа таймера
  • выбор единиц времени — дни, часы, минуты, секунды
  • кастомизация размеров и шрифтов
  • функции зацикливания и отложенного запуска

Стоимость: бесплатно

proTimer

https://makedreamprofits.ru/pt/video/ 

Интеграция на сайт таймера обратного отсчета proТаймер

Особенности:

  • создание таймера для сайта или рассылки
  • гибкая настройка графика
  • защита от сброса пользователем
  • кастомизация дизайна

Стоимость: бесплатная пробная версия, далее от 49 руб. в месяц

 

Виджеты аудио

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

Яндекс Музыка

https://music.yandex.ru/

Интеграция на сайт виджета Яндекс Музыки

Особенности: интеграция плейлиста, альбома или трека. 

Стоимость: бесплатно (с рекламой)

SoundCloud

https://soundcloud.com/

Интеграция на сайт виджета SoundCloud

Особенности: интеграция плейлиста, альбома или трека. 

Стоимость: бесплатно

 

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

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

Блок Embed и редактирование пользовательского кода доступны на тарифе Хостинг Basic.

Для добавления виджета на сайт потребуются следующие шаги:

1. Выберите нужный сервис и получите код интеграции. 

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

Настройка виджета чата обратной связи

Получение кода для интеграции виджета на сайт

2. Добавьте полученный код на сайт.

В зависимости от сервиса и его функциональности может использоваться один из двух вариантов интеграции кода: 

1) Блок вставки кода Embed. В этом случае результат работы кода будет отображаться в том месте страницы, куда вы поместите блок.

Блок вставки пользовательского кода Embed

Блок Embed служит для добавления кастомного кода в форматах html, css и js. Это может быть код, сгенерированный сервисом или ваша собственная разработка. 

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

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

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

Настройки страницы

В настройках страницы — выбрать раздел Пользовательский код. Обычно требуется добавить код в подраздел, относящийся к тегу <head>.

Вставка пользовательского кода страницы

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

Настройки проекта

Здесь также есть раздел Пользовательский код и подраздел для тега <head>.

Вставка пользовательского кода проекта

3. Сохраните и опубликуйте страницу.

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

Публикация страницы сайта

4. Проверьте результат работы.

Откройте сайт в интернете и посмотрите, корректно ли работает виджет.

Проверка работы виджета онлайн-чата на сайте


Краткое резюме

  • Виджеты интеграции — отличный способ расширить возможности сайта и добавить нужные вам решения. Спектр использования виджетов очень разнообразный.
  • Сторонние виджеты экономят время и ресурсы, т.к. вам не нужно писать код или заказывать его у программиста.
  • Интеграцию можно реализовать просто и быстро, вставив сгенерированный сервисом код в блок Embed или раздел пользовательского кода в настройках проекта.
     
Может быть интересно
все статьи
Оставить заявку
Имя
Это поле обязательно для заполнения
Телефон
Это поле обязательно для заполнения
Почта
Это поле обязательно для заполнения
Радио группа
Это поле обязательно для заполнения
Комментарий
Это поле обязательно для заполнения
Галочка
Это поле обязательно для заполнения
Спасибо!
Форма отправлена
Что-то не так. Попробуйте позже