Перейти к основному контенту

Интеграция ManyChat и Metabot для создания квиза-калькулятора

1. Введение

В этой статье мы рассмотрим, как интегрировать ManyChat, отличный инструмент для построения воронок, с платформой Metabot в качестве Low-code инструмента для бэкенд-разработки. ManyChat обладает удобным интерфейсом для работы с пользователями, но не поддерживает написание кода. Metabot идеально дополняет ManyChat, предлагая возможности быстрой разработки и легкой интеграции с чат-ботами.

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

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

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

2. Обзор интеграции

  1. Создание бота в Metabot: Сначала нужно создать бота в системе Metabot.
  2. Создание пользователя API и токена в Metabot: Для авторизации запросов необходимо создать пользователя с типом API и сгенерировать токен.
    • image.png

    Настройка внутреннего endpoint в Metabot: В боте нужно создать endpoint, который будет обрабатывать запросы от ManyChat.

      image.png

      Написание кода для обработки запросов: Пример кода показывает, как обработать запросы и вернуть результат в формате, подходящем для ManyChat.

      3. Пример кода эндпоинта

      snippet('Business.Helpers.Response');// Check if the necessary fields are present in the requestif (!request.json ||     !request.json.destinationCoefficient ||    !request.json.nights ||    !request.json.travelers ||    !request.json.averageSpendingScore ||    !request.json.seasonCoefficient ||    !request.json.tripPurposeCoefficient ||    !request.json.familyTravelCoefficient ||    !request.json.format) {  return getErrorResponse("Required fields are missing");}// Ensure that format is either 'raw' or 'manychat'if (request.json.format !== 'raw' && request.json.format !== 'manychat') {  return getErrorResponse("Invalid format specified");}// Extract values from the requestconst destinationCoefficient = request.json.destinationCoefficient;const seasonCoefficient = request.json.seasonCoefficient;const tripPurposeCoefficient = request.json.tripPurposeCoefficient;const familyTravelCoefficient = request.json.familyTravelCoefficient;// Base daily cost based on average spending score (example values)let baseDailyCost;if (request.json.averageSpendingScore <= 1.75) {  baseDailyCost = 50; // Low spender} else if (request.json.averageSpendingScore <= 2.5) {  baseDailyCost = 100; // Moderate spender} else if (request.json.averageSpendingScore <= 3.25) {  baseDailyCost = 150; // High spender} else {  baseDailyCost = 200; // Ultra spender}// Calculating the total recommended amountconst totalAmount = (baseDailyCost * request.json.destinationCoefficient * request.json.nights * request.json.travelers) *                     seasonCoefficient *                     tripPurposeCoefficient *                     familyTravelCoefficient;// Determine the response formatif (request.json.format === 'raw') {  // Returning the calculated budget in raw format  return getSuccessResponseWithJson({    calculatedBudget: totalAmount  });} else {  // Returning the calculated budget in ManyChat format  return {    "version": "v2",    "content": {  /*    "messages": [        {          "type": "text",          "text": `Ok! I got it`        }        // Additional messages can be added here      ],*/      "actions": [        {          "action": "set_field_value",          "field_name": "budget_estimate_amount", // Custom field name in ManyChat          "value": totalAmount.toString()  // Setting the calculated budget as the value        }      ],      "quick_replies": []    }  };}

      4. Код плагина Business.Helpers.Response

      ЭтотПлагин плагинBusiness.Helpers.Response облегачаетслужит подготовкуутилитой для стандартизации ответов API в бизнес-приложениях. Его основная цель - упростить создание последовательных и структурированных ответов для различных сценариев, возникающих во время взаимодействия с API.
      Код плагина доступен в Библиотеке плагинов. Создайте плагин с таким же названием в вашем бизнесе на платформе Metabot, скопировав код плагина.

      5.

      /** 
       * Prepares and returns an API response object for a failed operation.
       * This should be used when an operation does not complete successfully,
       * with the provided error message included in the response.
       * 
       * @param {string} errorMessage - The error message to be included in the response.
       * @returns {Object} An object representing a failed operation response.
       */
      function getErrorResponse(errorMessage) {
        return {
          success: false,
          message: errorMessage
        };  
      }
      
      /** 
       * Prepares and returns an API response object for a successful operation.
       * This should be used when an operation completes successfully 
       * and no additional data needs to be returned.
       * 
       * @returns {Object} An object representing a successful operation response.
       */
      function getSuccessResponse() {
        return {
          success: true  
        };
      }
      
      /** 
       * Prepares and returns an API response object for a successful operation 
       * with additional JSON data. This should be used when an operation completes 
       * successfully and there is additional data to return in the response.
       * 
       * @param {Object} json - The JSON data to be included in the response.
       * @returns {Object} An object representing a successful operation response with additional data.
       */
      function getSuccessResponseWithJson(json) {
        return {
            ...json,
            success: true
        }
      }

       

      Интеграция с ManyChat

      1. Настройка API в ManyChat: В ManyChat реализуйте команду для динамического формирования контента, указав URL endpoint MetaBot.
        • Подробнее про эту команду: https://support.manychat.com/support/solutions/articles/36000143342-dev-tools-dynamic-block 

        image.png

        Настройка Headers и Body запроса: В Header запроса укажите токен авторизации, а в Body - параметры из воронки ManyChat.

        Форматы ответа

        • RawПодробнее Format:про Простойформат JSONобмена сREST расчетомAPI: бюджета.https://manychat.github.io/dynamic_block_docs/ 
        • ManyChatНастройте Format:заголовок Формат,запроса:image.png
        подходящийНастройте длятело динамических сообщений ManyChat.запроса:image.png

        Пример тела запроса

        {
          
        json
        "script_request_params":
        {
        "destinationCoefficient":
        {1, //"nights": Пример5, тела"travelers": запроса1, для"averageSpendingScore": поездки2.25, "seasonCoefficient": 1.0, "tripPurposeCoefficient": 1.0, "familyTravelCoefficient": 1.0, "format": "manychat" } }

        Всегда оборачивайте все запросы к эндпоинтам вашего бота на платформы Metabot в Канаду }

        Использование в Postman

          Создание запроса: Откройте Postman и создайте новый запрос POST с URL endpoint. Настройка Headers: Добавьте ключ для авторизации и вставьте ваш API ключ. Настройка Body: Выберите raw и JSON, затем вставьте пример тела запроса. Отправка запроса: Отправьте запрос и просмотрите ответ.

          Включение скриншотов

            Скрин 1: Настройка API в ManyChat - Header. Скрин 2: Настройка API в ManyChat - Body. Скрин 3: Воронка в ManyChat с командой. Скрин 4: Настройка endpoint в MetaBot. "script_request_params"!

            Заключение

            Интеграция ManyChat и MetaBotMetabot открывает новые возможности для создания продвинутых чат-ботов. Благодаря лоу-кодLow-Code подходу MetaBotMetabot и удобному интерфейсу ManyChat, можно быстро разрабатывать и интегрировать сложные функциональности, улучшая взаимодействие с пользователями.