Свой сервис обратного звонка CallBack

Библиотека </h2>

Не нужно думать, что виджет у вас будет один.

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

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

Поэтому сразу проектируем код таким образом, чтобы он позволял вставлять неограниченное число разных виджетов на одну страницу без ограничений. Первое, что приходит в голову: «а давайте просто выведем iframe с нашего сайта?».

И сделаем код iframe вида:

И это будет большой ошибкой по нескольким причинам.

Невозможность расширения

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

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

Про то, какие проблемы есть в работе с iframe и их решении, поговорим попозже.

Лишние запросы на бэкенд

Если на сайт будет установлено 5 таких одинаковых виджетов, то на ваш сервер придет 5 одинаковых запросов, хотя по факту нужен был только один. Конечно, можно сделать кеш на nginx и не пропускать запрос дальше, но зачем нам самим себе делать паразитные запросы? С таким кодом изменить логику получения данных не получится без изменения кода вставки виджета. Если виджет будет установлен на десятках сайтов, даже не самых популярных, в сумме они могут давать заметную нагрузку.

А как надо делать?

Если вы когда-нибудь устанавливали на сайт какой-нибудь виджет, например, от ВК, то могли заметить, что код виджета разделен на две части: библиотеку (SDK — Software Development Kit) и инициализацию виджетов:

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

Мы видим, что для вставки любого виджета нужно один раз подключить SDK и добавить один пустой тэг с инициализацией виджета. А дальше все делает javascript: он может делать любые запросы и любое их количество на бэкенд, и разработчики виджета могут в любой момент эту логику изменить без изменения кода виджета на сайте. В итоге из html на сайте для виджета должен быть только пустой контейнер с уникальным id. Чтобы не томить вас ожиданием, давайте сразу напишем пример SDK и рендер простого виджета.

А потом поговорим о том, что же у нас получилось и на что стоит обратить внимание.

Код библиотеки:

namespace MyCompany { /** * Виджет кнопки */ class Button { /** * Внутренний id кнопки */ protected id: number; /** * DOM элемент контейнера */ protected containerElement: HTMLElement; /** * Инстанс api */ protected apiInstance: Api; /** * Constructor * @param {Api} instance * @param {string} containerId */ public constructor(instance: Api, containerId: string) { this.apiInstance = instance; this.containerElement = document.getElementById(containerId); } /** * Инициализация */ public init(): void { this.containerElement.innerHTML = ‘Виджет кнопки’; } } /** * Основной класс Api */ export class Api { /** * Виджет кнопки * @param {string} containerId * @return {MyCompany.Button} */ public button(containerId: string): Button { const widget = new Button(this, containerId); widget.init(); return widget; } /** * Запуск колбеков инициализации */ public runInitCallbacks(): void { let myCompanyApiInitCallbacks = (window as any).myCompanyApiInitCallbacks; if (myCompanyApiInitCallbacks && myCompanyApiInitCallbacks.length) { setTimeout(function () { let callback; while (callback = myCompanyApiInitCallbacks.shift()) { try { callback(); } catch (e) { console.error(e); } } }, 0); } } } } /** * Инициализация Api */ if (typeof (window as any)[‘myCompanyApi’] === ‘undefined’) { (window as any).myCompanyApi = new MyCompany.Api(); (window as any).myCompanyApi.runInitCallbacks(); }

Код вставки:

Выглядит страшно и как-то избыточно, давайте разбираться, зачем все это.

Асинхронность </h2>

Сразу в глаза бросается атрибут async у тэга script. Он позволит браузеру не ждать загрузки нашего скрипта и продолжить отрисовывать сайт. Это важно: если по каким-то причинам наш скрипт будет недоступен (недоступен сервер, фаервол компании), это не должно влиять на скорость загрузки сайта клиента. Но все не так просто. Раз скрипт загружается асинхронно, это значит, что когда браузер дойдет до места, где инициализируется наш виджет, наш SDK может быть еще не загружен, и если просто вызвать метод из библиотеки — будет ошибка, причем плавающая, в зависимости от того, успел загрузиться скрипт или нет.

Поэтому в месте вызова виджета мы должны обработать оба сценария, когда SDK загрузился и еще нет.

В первом случае мы просто вызываем функцию init(). Во втором — откладываем выполнение этой функции до момента, когда скрипт загрузится, добавляя замыкание в очередь. А последней строчкой в нашем SDK вызывается метод runInitCallbacks, который как раз и выполнит все отложенные инициализации.

Тут же есть защита от повторного подключения SDK, ведь пользователи могут проигнорировать ваши требования и вставить скрипт библиотеки десять раз.

Теперь наш код запускается всегда и не блокирует отрисовку страницы!

Продвинутые технологии сервиса Звонок с сайта

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

В итоге виджет срабатывает на самых вероятных клиентах, это упрощает работу менеджеров.

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

Как телефон на сайте связан с топом

По результатам исследования факторов ранжирования 2020 авторства Лаборатории поисковой аналитики «Ашманов и партнеры», бесплатный для пользователей телефон 8-800 есть у 65% сайтов в топ-30 Яндекса. В Google он есть у 61% из топ-30. Цифры касаются e-commerce отрасли.

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

3b162d05a8ae437ddf048db03e17b4d6.jpg

Телефон на сайте e-commerce нужен, причем лучше, если номеров несколько — для разных филиалов. Еще указывают дополнительные номера отделов, к примеру, способ связаться с PR-отделом для прессы.

Сервисы обратного звонка: принцип работы и обзор лучших

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

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

Сегодня мы обсудим, какие сервисы обратного звонка лучшие, их возможности и особенности работы.

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий