Conversational Components

Conversational Components are new in-chat features that you can enable for each business phone numbers. They make it easier for WhatsApp users to interact with your business. You can configure easy-to-use commands, provide pre-written icebreakers that users can tap, and greet first time users with a welcome message.

This feature can be configured within the WhatsApp Business Manager. Access through the API is expected to be available later this year.

Configuration Steps

Businesses with shared WABAs can configure it in the WhatsApp Manager for any phone number as follows:

1. Navigate in the WhatsApp Manager within the Business Manager.

2. Go to Account Tools > Phone Numbers.

3. Click on Settings (gear icon:) next to the phone number you want to configure.

4. Find "Conversational Components" under Automations and toggle the "Welcome Messages" switch to turn the feature on.

If the WABA is under OBO (On Behalf Of), please contact our Support Team for assistance with this configuration.

Welcome Messages

Activating Welcome Messages allows your business to automatically greet users opening your chat for the first time. This feature can be particularly useful for enhancing service interactions like customer support or account management. For example, embedding a WhatsApp button on your app or website directs users to WhatsApp, where they're can be met with a welcome message that provides context on how they can interact with you.

If you enable this feature and a user messages you, Meta checks for an existing message thread between the user and your business phone number. If there is none, it triggers a messages webhook with type set to request_welcome. You can use this to then respond to the user with your own welcome message.

The request_welcome webhook triggers a customer service window which allows your business to send free-form messages when responding to customers.

Webhook Payload

{
  "object": "whatsapp_business_account",
  "entry": [
    {
      "id": "<WHATSAPP_BUSINESS_ACCOUNT_ID>",
      "changes": [
        {
          "value": {
            "messaging_product": "whatsapp",
            "metadata": {
              "display_phone_number": "<BUSINESS_DISPLAY_PHONE_NUMBER>",
              "phone_number_id": "<BUSINESS_PHONE_NUMBER_ID>"
            },
            "contacts": [
              {
                "profile": {
                  "name": "<WHATSAPP_USER_NAME>"
                },
                "wa_id": "<WHATSAPP_USER_ID>"
              }
            ],
            "messages": [
              {
                "from": "<WHATSAPP_USER_PHONE_NUMBER>",
                "id": "<WHATSAPP_MESSAGE_ID>",
                "timestamp": "<TIMESTAMP>",
                "type": "request_welcome"  // Indicates first time message from WhatsApp user
              }
            ]
          },
          "field": "messages"
        }
      ]
    }
  ]
}

Ice Breakers

Ice Breakers are customizable, tappable text strings that appear in a message thread the first time you chat with a user. For example, "Plan a trip" or "Create a workout plan".

Ice Breakers are great for service interactions, such as customer support or account servicing. For example, you can embed a WhatsApp button on your app or website. When users tap the button, they will be redirected to WhatsApp where they can choose from a set of customizable prompts, showing them how to interact with your services.

You can configure up to 4 ice breakers on a business phone number from WhatsApp Manager. Each ice breaker can have a maximum of 80 characters. Emojis are not supported.

When a user taps an ice breaker, it triggers a standard received message webhook with the ice breaker string assigned to the body property in the payload. If the user attempts to message you instead of tapping an ice breaker, the keyboard will appear as an overlay, but it can be dismissed to see the ice breaker menu again.

Limitations

If a WhatsApp user taps a universal link (i.e. wa.me link) configured with pre-filled text, the user interfaces for ice breakers are automatically dismissed.

Webhook Payload

{
  "object": "whatsapp_business_account",
  "entry": [
    {
      "id": "<WHATSAPP_BUSINESS_ACCOUNT_ID>",
      "changes": [
        {
          "value": {
            "messaging_product": "whatsapp",
            "metadata": {
              "display_phone_number": "<BUSINESS_DISPLAY_PHONE_NUMBER>",
              "phone_number_id": "<BUSINESS_PHONE_NUMBER_ID>"
            },
            "contacts": [
              {
                "profile": {
                  "name": "<WHATSAPP_USER_NAME>"
                },
                "wa_id": "<WHATSAPP_USER_ID>"
              }
            ],
            "messages": [
              {
                "from": "<WHATSAPP_USER_PHONE_NUMBER>",
                "id": "<WHATSAPP_MESSAGE_ID>",
                "timestamp": "<TIMESTAMP>",
                "text": {
                  "body": "Plan a trip" //ice breaker string
                },
                "type": "text"
              }
            ]
          },
          "field": "messages"
        }
      ]
    }
  ]
}

Commands

Commands are text strings that WhatsApp users can see by typing a forward slash in a message thread with your business.

Commands are composed of the command itself and a hint, which gives the user an idea of what can happen when they use the command. For example, you could define the command:

/imagine - Create images using a text prompt

When a WhatsApp user types, /imagine cars racing on Mars, it will trigger a standard received message webhook with that exact text string assigned to the body property. You could then generate and return an image of cars racing on the planet Mars from your software.

You can define up to 30 commands. Each command has a maximum of 32 characters, and each hint has a maximum of 256 characters. Emojis are not supported.

Webhook Payload:

{
  "object": "whatsapp_business_account",
  "entry": [
    {
      "id": "<WHATSAPP_BUSINESS_ACCOUNT_ID>",
      "changes": [
        {
          "value": {
            "messaging_product": "whatsapp",
            "metadata": {
              "display_phone_number": "<BUSINESS_DISPLAY_PHONE_NUMBER>",
              "phone_number_id": "<BUSINESS_PHONE_NUMBER_ID>"
            },
            "contacts": [
              {
                "profile": {
                  "name": "<WHATSAPP_USER_NAME>"
                },
                "wa_id": "<WHATSAPP_USER_ID>"
              }
            ],
            "messages": [
              {
                "from": "<WHATSAPP_USER_PHONE_NUMBER>",
                "id": "<WHATSAPP_MESSAGE_ID>",
                "timestamp": "<TIMESTAMP>",
                "text": {
                  "body": "/imagine cars racing on Mars"
                },
                "type": "text"
              }
            ]
          },
          "field": "messages"
        }
      ]
    }
  ]
}

Testing

To test conversational components once they have been configured, open the WhatsApp App and open a chat with your business phone number.

For welcome messages and ice breakers, if there is already a chat thread going with the business phone number, you must first delete the chat thread:

1. Open the thread in the WhatsApp client.

2. Tap the business phone number's profile

3. Tap Clear Chat > Clear All Messages.

4. Return to the (now empty) chat thread.

You can then send a message to the business phone number, which should trigger the request_welcome webhook.