Integrate WhatsApp with Typebot using ZapZap API

Step by step

1. 1

   Build the flow and capture the data in Typebot

   In the Typebot editor, drag blocks from the Inputs category onto the canvas: use the Text input for the name and the Phone number input for the phone. Typebot saves each answer in a variable, for example {{Name}} and {{Phone}}. Check the variable names in the Variables panel, in the editor's corner.

2. 2

   Add the HTTP request block

   Open the block palette on the right, go to the Integrations category and drag the HTTP request block (formerly the Webhook block) to the end of the flow, after the inputs. This is the block that will talk to ZapZap API when the lead finishes answering.

3. 3

   Configure method, URL and headers

   Click the HTTP request block to open its settings. Under Method choose POST and under URL paste ZapZap API's sending endpoint (base https://api.zapzapapi.com, check the exact path at https://api.zapzapapi.com/llms.txt). Open Headers and add two lines: x-api-key with your key and x-api-secret with your secret, both available in the ZapZap dashboard.

4. 4

   Build the Body with Typebot variables

   Still in the block, go to Body and select JSON. Write the body referencing the captured variables with double braces, for example the number in {{Phone}} and a message that uses {{Name}}. Typebot substitutes the real values at the time of sending. The exact body field names are documented at https://api.zapzapapi.com/llms.txt.

5. 5

   Test in preview and publish

   Click Test in the top bar to run the flow in preview mode and check that the request goes out with a success status (you can use Test the request inside the block itself). Once the sending is confirmed on WhatsApp, click Publish to put the Typebot live as a link, embed or popup.

// ILLUSTRATIVE example of the HTTP request block Body (POST)
// Exact fields are in the docs: https://api.zapzapapi.com/llms.txt
//
// URL:    https://api.zapzapapi.com/api/v1/{instanceId}/send/text   (illustrative endpoint)
// Method: POST
// Headers:
//   x-api-key: YOUR_API_KEY
//   x-api-secret: YOUR_API_SECRET
//   Content-Type: application/json
//
// Body (JSON) with Typebot variables:
{
  "number": "{{Phone}}",
  "text": "Hi {{Name}}, we received your contact and will be with you here shortly."
}