Integrate Google signup form with WhatsApp through Flow Builder

In this guide, you will learn how to link your Google Signup Form with WhatsApp by using Flow Builder. By creating a flow using a webhook as a trigger, you’ll be able to link any Google Form to your WhatsApp Templates.

Requirements

• A MessageBird account

• A WhatsApp for Business account

• A Google Account

Before you begin

• Create a business account by signing up with MessageBird - WhatsApp Business Plan.

• Submit your pre-approved Message Templates via the WhatsApp Template Manager in your MessageBird Dashboard. You can use the following example as a guide:

E.g. Hi {{1}},

This is an automated system that helps facilitate your registration process through WhatsApp. Visit this link to find out what documents you need before we get started: https://www.messagebird.com/en/

Reply with Start when you're ready to proceed.

• Create a Google signup form like the following:

Step 1: Create a webhook trigger flow

1. Go to Flow Builder and create a new flow.

2. Select Webhook as the trigger.

3. Add embeds[0].fields[0].value and embeds[0].fields[1].value as your webhook variables.

4. Done? Awesome! Add a Send WhatsApp HSM step below your Webhook. Choose your template, add embeds[0].fields[0].value as the Recipient, and embeds[0].fields[1].value as variable 1.

5. Publish your flow in the top-right corner of your screen, and you're good to go!

Step 2: Set up your Google Form

1. Create a Google Signup Form for use with this script.

2. Go to the top-right corner of your screen and select Script editor. Done? Now paste the following scripts.

var POST_URL = "https://flows.messagebird.com/flows/c60a5eaa-f68b-417e-b6e4-3a024f48d1a7/invoke";

function onSubmit(e) {
    var form = FormApp.getActiveForm();
    var allResponses = form.getResponses();
    var latestResponse = allResponses[allResponses.length - 1];
    var response = latestResponse.getItemResponses();
    var items = [];

    for (var i = 0; i < response.length; i++) {
        var question = response[i].getItem().getTitle();
        var answer = response[i].getResponse();
        try {
            var parts = answer.match(/[\s\S]{1,1024}/g) || [];
        } catch (e) {
            var parts = answer;
        }

        if (answer == "") {
            continue;
        }
        for (var j = 0; j < parts.length; j++) {
            if (j == 0) {
                items.push({
                    "name": question,
                    "value": parts[j],
                    "inline": false
                });
            } else {
                items.push({
                    "name": question.concat(" (cont.)"),
                    "value": parts[j],
                    "inline": false
                });
            }
        }
    }

    var options = {
        "method": "post",
        "headers": {
            "Content-Type": "application/json",
        },
        "payload": JSON.stringify({
            "content": "‌", // This is not an empty string
            "embeds": [{
                "title": "TOP TEXT CHANGE THIS IN SCRIPT",
                "fields": items,
                "footer": {
                    "text": "BOTTOM TEXT CHANGE THIS IN SCRIPT"
                }
            }]
        })
    };

    UrlFetchApp.fetch(POST_URL, options);
};

2. Replace the red highlighted webhook with your Flow Builder Webhook URL you just created. To get your URL, open your flow, click on the Webhook step and tap copy.

4. Add a trigger into the current project. Click the clock icon below, the page of the project trigger will open. Press Add Trigger button, set it up per the screengrab below.

5. And that's it! Click the Save button to add a trigger to the current project.

And that’s it! 🎉 Now you know how to integrate a Google Form with WhatsApp. Check out this demo video to see them in action!