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

Последнее обновление Сен 22, 2021

Содержание

В моем предыдущем посте « Как создать чат-бот 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"}

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

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

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


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"

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

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


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