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

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

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

Содержание

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

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

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

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

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

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

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

Да

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

Да

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

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

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

Кнопка с URL

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

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

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

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

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

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

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

Нет

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

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

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

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

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

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

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

Да

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

Да

Добавление SDK

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

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

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

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

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

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

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

Дополнительные сведения см. в статье об SDK чата с клиентами.

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

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

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

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

  1. Перейдите в раздел Настройки Страницы > Расширенный обмен сообщениями.
  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 может быть любой строкой и использоваться в разных целях. Например, с его помощью можно отслеживать клиентов, которые взаимодействуют с компанией через плагин.

    Пример события перехода Webhook

    {
        "object": "page",
        "entry": [
            {
                "id": "<PAGE_ID>",
                "time": 1559598385735,
                "messaging": [
                    {
                        "recipient": {
                            "id": "<PAGE_ID>"
                        },
                        "timestamp": 1559598385735,
                        "sender": {
                            "id": "<USER_PSID>"
                        },
                        "referral": {
                            "ref": "<DEVELOPER_DEFINED_REFERRAL>",
                            "source": "CUSTOMER_CHAT_PLUGIN",
                            "type": "OPEN_THREAD",
                            "referer_uri": "<REFERRAL_URI>"
                        }
                    }
                ]
            }
        ]
    }

Индивидуальная настройка плагина

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

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

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. Подробную информацию см. в разделе Кэширование ниже.

greeting_dialog_delay

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

ref

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

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

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

Пример полезных данных API Messenger Profile

{
  "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 при посещении вашего сайта.

Кэширование

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

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

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

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

Пример события сообщений Webhook

{
    "object": "page",
    "entry": [
        {
            "id": "<PAGE_ID>",
            "time": 1559598624359,
            "messaging": [
                {
                    "sender": {
                        "id": "<USER_PSID>"
                    },
                    "recipient": {
                        "id": "<PAGE_ID>"
                    },
                    "timestamp": 1559598623749,
                    "message": {
                        "tags": {
                            "source": "customer_chat_plugin"
                        },
                        "mid": "nhEqs_THGoYyAhpK93uNCrIfLZD...",
                        "text": "hello, from customer chat!"
                    }
                }
            ]
        }
    ]
}

Плагин WordPress

Чтобы упростить интеграцию плагина чата с клиентами в сайты WordPress, мы создали для них отдельную официальную версию этого плагина Messenger (доступна на wordpress.org).

Советы по устранению неполадок

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

  • Если возникла ошибка консоли, например «*** не отображается во фрейме, поскольку предшественник нарушил следующую директиву Политики защиты материалов: ***», убедитесь, что домен страницы с плагином добавлен в «белый» список. Убедитесь в том, что для заголовка Referrer-Policy не задано значение no-referrer.
  • Отображению плагина препятствует расширение Facebook Container для Firefox. Удалите это расширение, чтобы отобразить плагин.
  • Мобильный браузер и версии Firefox для ПК с функцией приватного просмотра (версия 63 и новее) по умолчанию блокируют отслеживание содержимого, в результате чего плагин не отображается. Выключите блокировку содержимого (нажмите значок щита в панели поиска), чтобы отобразить плагин.