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

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

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

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

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

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

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

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

 

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

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

JivoSite

https://www.jivo.ru/

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

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

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

Talk-me

https://talk-me.ru/

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

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

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

Callibri

https://callibri.ru/multichat

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

• онлайн-чат
• шаблоны быстрых ответов
• интеграция с 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/ 

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

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

 

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

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

Google Forms

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

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

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

Typeform

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

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

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

 

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

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

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

Calendly

https://calendly.com/features/availability 

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

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

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

Hesus

https://hesus.ru/

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

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

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

GBooking

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

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

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

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

Timepad

https://timepad.ru/business/ 

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

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

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

 

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

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

Disqus

https://disqus.com/

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

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

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

Cracle

https://cackle.me/comments 

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

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

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

 

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

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

Google Календарь

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

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

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

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

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

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

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

 

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

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

MegaTimer

https://megatimer.ru/

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

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

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

proTimer

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

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

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

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

 

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

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

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

https://music.yandex.ru/

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

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

SoundCloud

https://soundcloud.com/

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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