«
»
FacebookСоциальные сети

Добавить постоянное меню и кнопки для вашего бота-мессенджера

В моем предыдущем посте « Как создать чат-бот Facebook Messenger с помощью PHP» я продемонстрировал, как разработать простой чат-бот, отвечающий текстовым сообщением. Теперь, когда у нас есть бот, пришло время персонализировать его. Мы можем сделать его более удобным для пользователя, а также визуально привлекательным, добавив такие функции, как « Постоянное меню» , « Начало работы» и « Текст приветствия» .

Эти функции доступны путем настройки параметров потока. Чтобы настроить параметры потока, необходимо выполнить вызов POST для / me / thread_settings? Access_token = PAGE_ACCESS_TOKEN с параметрами в теле.

В этой статье я начну с настройки постоянного меню. Затем я расскажу об обработке ответа POSTBACK с использованием PHP. Далее я покажу, как добавить кнопку GET Started. Наконец, я покажу, как добавить текст приветствия.

Итак, что такое постоянное меню?

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

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

Как настроить постоянное меню?

Добавить постоянное меню в чат-бота очень просто. Вам просто нужно сделать POST-запрос к Facebook Graph API с необходимыми параметрами. Вот пример запроса cURL:

curl -X POST -H "Content-Type: application/json" -d '{ "setting_type" : "call_to_actions", "thread_state" : "existing_thread", "call_to_actions":[ { "type":"postback", "title":"Help", "payload":"DEVELOPER_DEFINED_PAYLOAD_FOR_HELP" }, { "type":"postback", "title":"Latest Posts", "payload":"DEVELOPER_DEFINED_PAYLOAD_FOR_LATEST_POSTS" }, { "type":"web_url", "title":"View Website", "url":"http://yoursite.com/" } ] }' "https://graph.facebook.com/v2.6/me/thread_settings?access_token=PAGE_ACCESS_TOKEN"

В приведенном выше примере call_to_actions содержит пункты меню. Вы можете иметь максимум 5 предметов , которые могут быть либо постбэк или web_url . В дополнение к этому заголовок имеет ограничение в 30 символов. PAGE_ACCESS_TOKEN – это токен доступа к странице, с которой связан ваш бот.

В случае успешной настройки вы получите следующий ответ:

{"result":"Successfully added structured menu CTAs"}

Вот как выглядит Постоянное меню.

Демо Facebook Messenger Постоянное меню

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

Если вам нужно удалить Постоянное меню, отправьте запрос УДАЛИТЬ.

curl -X DELETE -H "Content-Type: application/json" -d '{ "setting_type":"call_to_actions", "thread_state":"existing_thread" }' "https://graph.facebook.com/v2.6/me/thread_settings?access_token=PAGE_ACCESS_TOKEN"

Обновление :
Вы также можете добавить символы Unicode и эмодзи в свои постоянные пункты меню. Для этого вам просто нужно ввести или вставить эти символы в атрибуты заголовка. Вы можете скопировать смайлики отсюда http://getemoji.com/ . Вот как выглядит постоянное меню с символами Юникода и смайликами.

смайлик юникод в постоянном меню

Вот пример кода для меню выше.

curl -X POST -H "Content-Type: application/json" -d '{ "setting_type" : "call_to_actions", "thread_state" : "existing_thread", "call_to_actions":[ { "type":"postback", "title":"Help - सहयोग ", "payload":"DEVELOPER_DEFINED_PAYLOAD_FOR_HELP" }, { "type":"postback", "title":"Latest Posts", "payload":"DEVELOPER_DEFINED_PAYLOAD_FOR_LATEST_POSTS" }, { "type":"web_url", "title":"😁 Contact Us", "url":"http://thedebuggers.com/contact-us" } ] }' "https://graph.facebook.com/v2.6/me/thread_settings?access_token=PAGE_ACCESS_TOKEN"

Примечание. Для многоуровневого (вложенного) постоянного меню следуйте этой статье. Вложенное постоянное меню с использованием Messenger Profile API .

Обработка запросов POSTBACK

Когда мы нажимаем кнопку с полезной нагрузкой POSTBACK, Facebook отправляет запрос в нашу конечную точку webhook. Этот запрос содержит Postback с полезной нагрузкой. Вы можете добавить следующие фрагменты PHP для обнаружения события Postback:

// Read raw data from the request body and $input = json_decode(file_get_contents('php://input'), true); $page_id = $input['entry'][0]['id']; $sender = $input['entry'][0]['messaging'][0]['sender']['id']; $message = isset($input['entry'][0]['messaging'][0]['message']['text']) ? $input['entry'][0]['messaging'][0]['message']['text']: '' ; $postback = isset($input['entry'][0]['messaging'][0]['postback']['payload']) ? $input['entry'][0]['messaging'][0]['postback']['payload']: '' ; if($message || $postback) { if($message) { // If Page receives Message, process the Message and prepare content to reply $reply = 'Message received: ' . $message; } else { // If Page receives Postback, process the Postback and prepare content to reply switch($postback) { case 'DEVELOPER_DEFINED_PAYLOAD_FOR_HELP': $reply = 'You clicked Help button'; break; case 'DEVELOPER_DEFINED_PAYLOAD_FOR_LATEST_POSTS': $reply = 'You clicked Latest Post button'; break; } } $responseJSON = '{ "recipient":{ "id":"'.$sender.'" }, "message": { "text":"'. $reply .'" } }'; $access_token = 'your_page_access_token'; //Graph API URL $url = 'https://graph.facebook.com/v2.7/me/messages?access_token='.$access_token; // Using cURL to send a JSON POST data $ch = curl_init($url); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS, $responseJSON); curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json')); $result = curl_exec($ch); curl_close($ch); }

Кнопка «Начать»

Кнопка « Начать» может отображаться на экране приветствия в качестве точки входа в разговор. При нажатии этой кнопки Facebook активирует обратный вызов, полученный после обратной передачи, и предоставит идентификатор области (PSID) этого человека. Затем вы можете представить персонализированное сообщение, чтобы приветствовать пользователя или представить кнопки, чтобы побудить его или ее к действию.

Эта кнопка отображается только при первом взаимодействии пользователя со страницей в Messenger.

Чтобы добавить кнопку «Начать», вам нужно сделать POST-запрос к Facebook Graph API как:

curl -X POST -H "Content-Type: application/json" -d '{ "setting_type":"call_to_actions", "thread_state":"new_thread", "call_to_actions":[ { "payload":"USER_DEFINED_PAYLOAD" } ] }' "https://graph.facebook.com/v2.6/me/thread_settings?access_token=PAGE_ACCESS_TOKEN"

После выполнения вышеуказанного запроса вы увидите кнопку «Начало работы», аналогичную следующей:

«<Yoastmark

Как и Постоянное меню, мы также можем удалить кнопку «Начать». Для удаления отправьте запрос УДАЛИТЬ:

curl -X DELETE -H "Content-Type: application/json" -d '{ "setting_type":"call_to_actions", "thread_state":"new_thread" }' "https://graph.facebook.com/v2.6/me/thread_settings?access_token=PAGE_ACCESS_TOKEN"

Текст приветствия

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

Вот как добавить текст приветствия:

curl -X POST -H "Content-Type: application/json" -d '{ "setting_type":"greeting", "greeting":{ "text":"Hi {{user_first_name}}, welcome to The Debuggers" } }' "https://graph.facebook.com/v2.6/me/thread_settings?access_token=PAGE_ACCESS_TOKEN"

Чтобы удалить, отправьте запрос DELETE следующим образом:

curl -X DELETE -H "Content-Type: application/json" -d '{ "setting_type":"greeting" }' "https://graph.facebook.com/v2.6/me/thread_settings?access_token=PAGE_ACCESS_TOKEN"

Вывод

Сегодня я обсудил настройку параметров потока в Messenger, чтобы улучшить взаимодействие с пользователем. Кнопка «Приступить к работе» и текст приветствия служат точкой входа в диалог, в то время как « Постоянное меню» помогает пользователю быстро использовать общие функции вашего бота. Настройка этих функций довольно проста и понятна. Не так ли?

Вам также может понравиться: Система подписки Messenger Bot с использованием Broadcast API в PHP

Источник записи: https://thedebuggers.com

Связанные записи
WordPressПлагиныСоциальные сети

Плагин Free Sliding Social Sharing Buttons

WordPressПлагиныСоциальные сети

Как: добавить Mashable Style Social Box Sharing Box в WordPress

WordPressПлагиныСоциальные сети

Как: добавить кнопки социальных сетей в WordPress - бесплатный плагин

WordPressПлагиныСоциальные сети

Официальный бесплатный плагин Facebook WordPress