UCal
  • Welcome
  • 🚀Getting Started
    • Quick Start
      • What is IS-Messenger?
      • Setting Up an Account
      • Connecting Channels
      • Inviting Your Teammates
      • Getting Contacts to Message You
      • Automated Welcome and Away Messages
      • Responding to Messages
      • Glossary of Terms
    • Connecting a Channel
    • Invite your teammates
    • Getting Contacts to Message You
    • Automated Welcome and Away Messages
    • Responding to messages
    • Glossary of Terms
    • Creating a Chatbot
  • ⚙️Workspace Modules
    • Dashboard
    • Inbox
      • Inbox Overview
      • Assignment and closing a conversations
      • Custom Inboxes
      • Interacting with Respond AI Prompts
      • Using AI Assist
    • Contacts
      • Contact Details
      • Contacts Overview
      • Merge Suggestions
      • Contact Activity
      • Contact Channels
      • Contact Import
      • Segments
    • Broadcast
      • Broadcast Overview
      • Managing Broadcasts
    • Workflow
      • Triggers
      • Workflow Step
        • Step: Send a Message
        • Step: Ask a Question
        • Step: Assign To
        • Step: Branch
        • Step: Update Contact Tag
        • Step: Update Contact Field
        • Step: Open Conversation
        • Step: Close Conversation
        • Step: Add Comment
        • Step: Jump To
        • Step: Wait
        • Step: Date & Time
        • Step: HTTP Request
        • Step: Trigger Another Workflow
        • Step: Add Google Sheets Row
        • Step: AI Agent
      • Workflow Templates
    • Reports
      • Reports: Conversations
      • Reports: Responses
      • Reports: Resolutions
      • Reports: Messages
      • Reports: Contacts
      • Reports: Assignments
      • Reports: Leaderboard
      • Reports: Users
      • Reports: Broadcasts
  • ⚙️Workspace Setting
    • Managing a Workspace
    • General
    • Users
      • Access Levels
    • Teams
    • Channels
      • Chat Menus
    • Contact Fields
    • Growth Widgets
      • Website Chat Widget Quick Start
      • Website Chat Widget Overview
      • Workspace Settings: Growth Widgets
      • Install Website Chat Widget on Squarespace
      • Install Website Chat Widget on Joomla
      • Install Website Chat Widget on Wix
      • Install Website Chat Widget on Shopify
      • Install Website Chat Widget on WordPress
      • How to Track Conversation Source from Multiple Websites
    • Respond AI
    • Integrations
      • Dialogflow
        • Dialogflow: Connecting to Dialogflow
        • Dialogflow: Creating a Chatbot
        • Dialogflow : Managing Intents
        • Dialogflow: Parameters
        • Dialogflow: Events
        • Dialogflow: Response Templates
        • Dialogflow: Custom Payloads
        • Dialogflow: Fulfillment Webhook Request
      • E-Commerce & CRM Integrations
        • E-Commerce Integration: Shopify
        • E-Commerce Integration: BigCommerce
        • E-Commerce Integration: WooCommerce
        • E-Commerce Integration: Magento
        • CRM Integration: HubSpot
        • CRM Integration: Salesforce
        • CRM Integration: Pipedrive
        • CRM Integration: ActiveCampaign
      • Zapier
      • Developer API
      • Webhooks
      • Make (formerly Integromat)
    • Closing Notes
    • Snippets
    • Files
    • Data Export
    • Data Import
  • ⚙️User Account
  • Profile
  • User Activity Status
  • Notifications
  • Resetting your Passwords
  • 👨‍👧‍👦CONTACT AND MESSAGES
    • Dynamic Variables
      • Dynamic Variables Overview
      • How to Use Dynamic Variables
    • Contact Search and Custom Inbox
    • Conversations
  • ⚙️MESSAGING CHANNELS
    • Channel Overview
    • Facebook Messenger
      • Facebook Messenger Quick Start
      • Facebook Chat Plugin
      • Private Replies
      • Message Tag
    • Instagram
      • Instagram Overview
      • Instagram Quick Start
    • WhatsApp
      • WhatsApp Business API Quick Start
      • Getting Ready for Inbound Conversations
      • Getting Ready for Promotional Messaging
      • WhatsApp Official Business Account (Green Tick)
      • Grow your WhatsApp Audience by Maximizing Entry Points
      • Get WhatsApp API Account for Government Agencies
      • Meta Business Verification
      • WhatsApp Message Templates
      • WhatsApp Pricing
      • WhatsApp Business Platform (API) Channel Configuration
      • WhatsApp Messaging Limits
      • Meta Product Catalog
      • Change Your WhatsApp Business Display Name
      • Phone Number Migration to IS-Messenger WhatsApp Business API
      • Turn-off WhatsApp Number Two-Step Verification
      • WhatsApp Cloud API
        • Migrating from On-Premises API to Cloud API
        • Migrating from Cloud API to On-Premises API
        • Set up the WhatsApp Echo Bot
        • Load Testing on Cloud API
        • Experiments
        • Webhooks Setup
      • 360Dialog WhatsApp
      • Twillio WhatsApp
      • MessageBird WhatsApp
      • Vonage WhatsApp
      • Phone Number Migration to WhatsApp Cloud API
    • Website Chat Widget
      • Install on WordPress
      • Install on Shopify
      • Install on Wix
      • Install on Squarespace
      • Install Website Chat Widget on Joomla
    • LINE
      • LINE Overview
      • LINE Quick Start
    • Telegram
      • Telegram Overview
      • Telegram Quick Start
    • Viber
      • Viber Overview
      • Viber Quick Start
    • SMS Overview
      • Twilio SMS Quick Start
        • Importing Contacts to Twilio SMS
      • MessageBird SMS Quick Start
      • Vonage SMS Quick Start
    • Twitter Overview
      • Twitter Quick Start
    • WeChat
      • WeChat Overview
      • WeChat Quick Start
    • Google Business Message
    • Email
      • Google Workspace Quick Start
      • Other Email
    • Custom Channel
      • Custom Channel Overview
      • Custom Channel Quick Start
  • New Release Update
  • Support Use Cases
    • How to Identify Contacts by Email and Phone NumberI
    • How to Enrich Customer Data from a CRM or other Business Software
    • How to Route Customers to the Right Team Automatically
    • How to Auto-Assign Customers to a Team or Dedicated Agent
    • How to Send Outbound Support Messages
    • Support: Closing Conversations
    • How to Supervise Your Support Agents
    • How to Analyze Reports for Support
    • How to Send CSAT to Customer and Save Data in Google Sheets or CRMs
  • Handling Inbound Conversations
    • Managing Spam
    • Create Automated Welcome and Away Messages
    • Get Contacts’ Consent for Personal Data Collection
    • Create Automated Chat Menus
    • Collect Contacts’ Emails and Phone Numbers
    • Route Contacts by Shifts
    • Route Contacts by Team Functions
    • Route New & Returning Contacts
    • Route VIP Contacts
    • Assignment Strategy: Automatic Contact Distribution & Load Balancing
    • Assignment Strategy: Unassign Agents after Conversations Closed
  • Capture Conversations
    • How to Streamline Meeting Scheduling via CTC Ads
    • How to Automate Product Info Sharing in Conversations Initiated via CTC Ads
    • How to Track Conversation Source from Multiple Websites
    • How to Route Contacts from CTC Ads to Agents
  • Automate Conversations
    • How to Maximize Customer Service Potential with AI Agent
    • How to Automate Contact Information Collection with AI
    • How to Route Contacts to Preferred AI Agent
    • How to Automatically Qualify Contacts Based on Budget Using AI Agent
    • How to Route Contacts by their Preferred Language
    • How to Create Automated Chat Menus
    • Assignment Strategy: How to Automate Contact Distribution & Load Balancing
    • Assignment Strategy: Unassign Agents after Conversations Closed
    • How to Create Automated Welcome and Away Messages
    • How to Block Contacts and Manage Spam
    • How to Route New and Returning Contacts
    • How to Collect Contacts’ Emails and Phone Numbers
    • How to Route New and Returning Contacts
    • How to Route Contacts by Team Functions
    • How to Route Contacts by Shifts
    • How to Get Contacts’ Consent for Personal Data Collection
    • How to Route VIP Contacts
  • How to Promptly Transfer Conversation Between Agents
  • How to Guide Customers from Exploration to Purchase with Engaging Menus
  • How to Optimize Customer Onboarding with Automated & Customized Welcome Messages
  • Converse with Customers
    • How to Get a Complete View of the Customers
    • How to Simplify Customer Escalation with Automation
    • How to Transfer Contacts to the Next Shift Automatically
    • How to Optimize Agents’ Productivity in the Messages Module
    • How to Align AI Conversations with Your Brand Voice
    • How to Draft Customer Replies with AI
    • How to Convert Image to Text Using AI
    • How Automate Calculations Using AI
  • Broadcasts Use Cases
    • How to Sending a Simple Broadcast
    • How to Start a Workflow Based on Broadcast Response
    • How to Import to Broadcast via WhatsApp
    • How to Troubleshoot a Failed Broadcast
  • Sales Use Cases
    • How to Collect Leads' Email and Phone Number
    • How to Enrich Contact Data and Qualify Leads
    • How to Route Leads
    • How to Auto-Assign Leads to Sales Agents
    • How to Send Outbound Sales Messages
    • How to Track Productivity by Closing Conversations
    • How to Supervise Sales Agents
    • How to Analyze Reports for Sales
  • Accessing Help Menu
Powered by GitBook
On this page
  1. MESSAGING CHANNELS
  2. WhatsApp
  3. WhatsApp Cloud API

Set up the WhatsApp Echo Bot

The WhatsApp Echo Bot is a sample webhook server application that echoes back to you whatever you send it. It can serve as a basic reference for how to set up webhooks and reply to incoming messages.

PreviousMigrating from Cloud API to On-Premises APINextLoad Testing on Cloud API

Last updated 1 year ago

To test out the echo bot, we assume you have a Meta developer app with the WhatsApp product added already. Follow the to onboard as a developer and send your first test message.

After you send your test message, with the WhatsApp Echo Bot:

Configure the WhatsApp Echo Bot

Using Glitch

  1. Go to our starter webhook project on Glitch:

  2. Click Remix to edit. A new copy of the project will be created for you.

  3. Back in App Dashboard > WhatsApp > Getting Started, copy your access token from the developer portal:

  1. Save it into the .env file in the Glitch app under WHATSAPP_TOKEN.

  2. Now, set the other .env variable called VERIFY_TOKEN. This can be any string you choose. In our case, we picked "blue_panda".

  3. At this point, the .env file in the Glitch app will look like this:

  4. To get the webhook url from Glitch click the Share button (you need to be logged in to see it) copy the live site link. Make sure to append /webhook to the end of the URL.

  5. Use this URL as the Webhook URL when setting up webhooks on the Meta Developer portal (also enter matching verify token, blue_panda in our case):

  6. Click Verify and Save. Back in the Configuration screen, click Manage and subscribe to the messages webhooks field:

  7. Now, when you send a message to the API number on WhatsApp, it should send back your message in the following format "Ack: {your message}".

Before you start, make sure to .

In AWS:

  1. Open the console. AWS operates in several regional data centers and this example is set up in the US East (N. Virginia) us-east-1 region. So the actual link is https://us-east-1.console.aws.amazon.com/lambda/home.

  2. Click Create Function > Author from scratch and create your function. For this example, we have added and/or selected the following options:

    • Function name: cloudEcho

    • Runtime: Node.js 16.x, since we're implementing Javascript-based Lambda function

    • Execution role: Create a new role with basic Lambda permissions

    • Advanced Settings: Enable function URL has been checked and Auth type was set to None.

    The Advanced Settings look like this:

  3. Click Create Function.

  4. Once the function is created, you are redirected to the function page. There, you can see the following information:

    • The function's URL ending in .lambda-url.AWS_REGION.on.aws/. Save that for later use.

    • The Code source tab for that function.

  5. Inside your function's Code Source, you need to add code that does the following:

    • Only accepts GET and POST requests

    • Verifies using the GETrequest described .

    • Replies to the message based on the message payload structure described .

    The code sample to be copied and pasted is:

  6. Once you paste the code, you will see the Changes not deployed banner pop up. Do not deploy your function yet! We need to set verify token and access token before that.

In Meta for Developers:

  1. Open Meta for Developers > and select the app you have created while following the . Click WhatsApp > Getting started.

  2. Copy the temporary access token:

In AWS:

  1. Paste the access token into your Lambda function. Then, set up the VERIFY_TOKEN field in your Lambda function. For this example, we're using blue_panda.

  2. Click Deploy.

In Meta for Developers:

  1. Open Meta for Developers > and select the app you have created while following the . Click WhatsApp > Configuration > Configure a webhook.

  2. Under Callback URL, paste your Lambda function URL (this is the URL that was generated immediately after the function was created). Under Verify Token, paste the token you created after pasting your access token (for our example, we're using blue_panda):

  3. Click Verify and Save.

  4. Once verification is successful, click Manage back in the Configuration page:

  5. A new dialog module opens up with all available objects you can subscribe to. Click Subscribe for the messages object. Then, click Done.

  6. You are done setting up the echo bot! Now, when you send a message to the API number on WhatsApp, it should send back your message in the following format "Ack from AWS lambda: {your message}".

⚙️
const https = require("https");

exports.handler = async (event)  => {
  const VERIFY_TOKEN = "Set_your_verify_token_value_here";
  const WHATSAPP_TOKEN = "Paste_whatsapp_access_token_here";

  let response;
  if (event?.requestContext?.http?.method === "GET") {
    // https://developers.facebook.com/docs/graph-api/webhooks/getting-started#verification-requests
    // to learn more about GET request for webhook verification
    let queryParams = event?.queryStringParameters;
    if (queryParams != null) {
      const mode = queryParams["hub.mode"];
      if (mode == "subscribe") {
        const verifyToken = queryParams["hub.verify_token"];
        if (verifyToken == VERIFY_TOKEN) {
          let challenge = queryParams["hub.challenge"];
          response = {
              "statusCode": 200,
              "body": parseInt(challenge),
              "isBase64Encoded": false
          };
        } else {
          const responseBody = "Error, wrong validation token";
          response = {
              "statusCode": 403,
              "body": JSON.stringify(responseBody),
              "isBase64Encoded": false
          };
        }
      } else {
          const responseBody = "Error, wrong mode";
          response = {
              "statusCode": 403,
              "body": JSON.stringify(responseBody),
              "isBase64Encoded": false
        };
      }
    }
    else {
      const responseBody = "Error, no query parameters";
      response = {
          "statusCode": 403,
          "body": JSON.stringify(responseBody),
          "isBase64Encoded": false
      };
    }
  } else if (event?.requestContext?.http?.method === "POST") {
    // process POST request (WhatsApp chat messages)
    // https://developers.facebook.com/docs/whatsapp/cloud-api/webhooks/payload-examples#text-messages
    // to learn about WhatsApp text message payload structure
    let body = JSON.parse(event.body)
    let entries = body.entry;
    for (let entry of entries) {
      for (let change of entry.changes) {
        let value = change.value;
        if(value != null) {
          let phone_number_id = value.metadata.phone_number_id;
          if (value.messages != null) {
            for (let message of value.messages) {
              if (message.type === 'text') {
                let from = message.from;
                let message_body = message.text.body;
                let reply_message = "Ack from AWS lambda: " + message_body;
                sendReply(phone_number_id, WHATSAPP_TOKEN, from, reply_message);
                const responseBody = "Done";
                response = {
                    "statusCode": 200,
                    "body": JSON.stringify(responseBody),
                    "isBase64Encoded": false
                };
              }
            }
          }
        }
      }
    }
  } else {
    const responseBody = "Unsupported method";
    response = {
        "statusCode": 403,
        "body": JSON.stringify(responseBody),
        "isBase64Encoded": false
    };
  }
  
  return response;
}

const sendReply = (phone_number_id, whatsapp_token, to, reply_message) => {
  let json = {
    messaging_product: "whatsapp",
    to: to,
    text: { body: reply_message },
  };
  let data = JSON.stringify(json);
  let path = "/v12.0/"+phone_number_id+"/messages?access_token="+whatsapp_token;
  let options = {
    host: "graph.facebook.com",
    path: path,
    method: "POST",
    headers: { "Content-Type": "application/json" }
  };
  let callback = (response) => {
    let str = "";
    response.on("data", (chunk) => {
      str += chunk;
    });
    response.on("end", () => {
    });
  };
  let req = https.request(options, callback);
  req.on("error", (e) => {});
  req.write(data);
  req.end();
}
getting started workflow
configure webhooks
Remix on Glitch
register and sign into an AWS development account
AWS Lambda
here
here
Copy Code
My Apps
getting started workflow
My Apps
getting started workflow