Плагин чата с клиентами (бета-версия)

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

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

Содержание

Поддерживаемые функции

Поддерживаемые браузеры

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

  • Браузеры в Messenger

Типы сообщений и поддерживаемые шаблоны

В настоящее плагин чата с клиентами поддерживает следующие типы сообщений и шаблоны структурированных сообщений:

ФункцияПоддержка

Текстовое сообщение

Да

Видео/изображение/аудио/GIF

Да

Общие функции/шаблон кнопки

Да (поддерживаются не все типы кнопок)

Обратная передача

Кнопка с URL

Кнопка вызова

Кнопка "Купить"

Кнопка "Поделиться"

Кнопка "Войти"

Кнопка "Выйти"

Кнопка "Запуск игры"

Список/мультимедиа/шаблон Open Graph

Нет

Быстрые ответы

Да (поддерживаются не все типы быстрых ответов)

Текстовые быстрые ответы

Быстрые ответы с номером телефона пользователя

Быстрые ответы с эл. адресом

Быстрые ответы о местоположении

Постоянное меню

Да

Действия отправителя

Да

Добавьте в проект SDK

Чтобы использовать плагин чата с клиентами, добавьте Facebook SDK для JavaScript на страницу, где будет отображаться этот плагин.

Инструкции по добавлению этого SDK см. здесь.

Локализация и интернационализация

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

Подробнее см. здесь.

Динамическое управление

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

Подробнее читайте здесь.

Настройка плагина

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

Вариант 1. Использование инструмента настройки

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

  1. Откройте Настройки Страницы > Платформа Messenger.
  2. В разделе "Плагин чата с клиентами" нажмите кнопку "Настроить".

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

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

Вариант 2. Инструкции для разработчиков

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

  1. Занесение домена сайта в "белый" список

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

    Требования

    Чтобы домен можно было занести в «белый» список, должны быть выполнены следующие условия:

    • В домене поддерживается протокол HTTPS.

    • Название домена должно быть указано полностью, например так: https://www.messenger.com/. IP-адреса и адрес localhost нельзя занести в «белый» список.

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

    1. Нажмите Настройки в верхней части Страницы.
    2. Слева нажмите Платформа Messenger.
    3. В разделе доменов из «белого» списка укажите нужный домен.
  2. Добавление плагина на страницу сайта

    Чтобы добавить плагин на страницу сайта, добавьте в HTML-код страницы div с этими атрибутами:
    <div class="fb-customerchat"
     page_id="<PAGE_ID>">
    </div>

    По умолчанию диалог приветствия отображается на ПК и скрыт на мобильных устройствах. Настроить диалог приветствия можно с помощью атрибутов greeting_dialog_display и "greeting_dialog_delay".

    Рекомендуемое место для плагина

    Настоятельно рекомендуем оставить плагин чата с клиентами в правом нижнем углу страницы.

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

  3. Необязательно. Обработка события messaging_postbacks для новых переписок

    Если новая переписка начата из плагина и в вашем боте настроена кнопка "Начать", то при нажатии этой кнопки в ваш Webhook будет отправляться событие messaging_postbacks.

    Если вы добавите в плагин чата с клиентами атрибут ref, он будет включен событие обратной передачи.

  4. Необязательно. Обработка события messaging_referrals для существующих переписок

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

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

Пользовательская настройка плагина

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

АтрибутОписание

theme_color

Необязательно. Цвет темы оформления плагина, в том числе цвет фона значка плагина чата с клиентами и цвет фона сообщений, отправленных пользователями. Поддерживает любой шестнадцатеричный код цвета, начинающийся со значка решетки (например, #0084FF), кроме белого. Настоятельно рекомендуем вам выбрать цвет, контрастный белому.

logged_in_greeting

Необязательно. Текст приветствия, который будет отображаться, если пользователь вошел на Facebook. Не более 80 символов.

logged_out_greeting

Необязательно. Текст приветствия, который будет отображаться, если пользователь не вошел на Facebook. Не более 80 символов.

greeting_dialog_display

Необязательно. Режим показа диалога приветствия. Поддерживаются следующие значения:


  • show: количество секунд, в течение которых диалог приветствия будет отображаться на экране ПК или телефона, можно задать в атрибуте greeting_dialog_delay.
  • hide: диалог приветствия скрыт и отображается на экране ПК или телефона только после клика.
  • fade: количество секунд, в течение которых диалог приветствия будет отображаться на экране ПК или телефона, можно задать в атрибуте greeting_dialog_delay; после этого диалог исчезает. На мобильных телефонах этот диалог скрыт.

По умолчанию на ПК используется значение show, а на мобильных устройствах — hide.

greeting_dialog_delay

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

minimized

Уведомление об упразднении

Этот атрибут больше не используется. Для настройки плагина следует использовать greeting_dialog_display. Атрибут greeting_dialog_delay теперь имеет приоритет над атрибутом minimized.

Необязательно.

  • true. При значении true этот атрибут будет давать тот же эффект, что и greeting_dialog_delay = "fade".
  • false При значении false эффект будет таким же, как greeting_dialog_delay = "show".

ref

Необязательно. Если вы хотите передать в событие Webhook дополнительный контекст, используйте необязательный параметр ref. Его можно использовать для различных целей, например чтобы узнать, с какой страницы пользователь начал переписку, направить пользователя к определенному контенту или функциям, доступным через бота, или привязать пользователя Messenger к сеансу или аккаунту на сайте.

Отключение постоянного меню

В некоторых случаях постоянное меню бота в плагине чата с клиентами требуется отключить. Для этого при настройке постоянного меню добавьте в код элемент "disabled_surfaces": ["CUSTOMER_CHAT_PLUGIN"]:

{
  "persistent_menu":[
    {
      "locale":"default",
      "disabled_surfaces": ["CUSTOMER_CHAT_PLUGIN"],
      "composer_input_disabled": false,      
      "call_to_actions":[
        {
          "title":"My Account",
          "type":"postback",
          "payload":"PAYBILL_PAYLOAD"
        }
      ]
    }
  ]
}

Вход пользователя

Если пользователь уже вошел в свой аккаунт на Facebook, он может начать общаться с вашим ботом. Если он еще не вошел, он увидит приветственное сообщение с предложением войти в свой аккаунт на Facebook или создать новый.

Ограничения по странам на Страницах

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

Кэширование

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

Определение происхождения сообщения

Иногда требуется определить, взаимодействует ли человек с вашей компанией через плагин чата с клиентами. Для этого платформа Messenger включает свойство "source": "customer_chat_plugin" во все события обратной передачи и в массив tags полезной нагрузки всех сообщений, отправленных из плагина:

"message": {
  "mid":"mid.14577641449818:41d102a3e1ae206a38",
  "text":"hello, from customer chat!",
  "tags": [
    {
      "source": "customer_chat_plugin"
    }
  ]
}

Советы по устранению неисправностей

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

  • Если возникла ошибка консоли, например "*** не отображается во фрейме, поскольку предшественник нарушил следующую директиву Политики защиты материалов: ***", убедитесь, что домен страницы с плагином добавлен в "белый" список. Убедитесь, что вы не установили для заголовка Referrer-Policy значение no-referrer.