​

Use Case Guide: Insurance Quote

​

Intro and Overview

• Collect relevant information to help build a personalised quote
• Allow your users to customise their preferred excess amount
• Request appropriate personal information of the people who the insurance will cover
• Allow your users to select the payment frequency
• Review available insurance plans based on the selections and present a description for each
• Publish, Send, and Monitor your Flow

​

Getting Started

• Completed prerequisites for building Flows.
• A Glitch account

​

Flows JSON Template

​

Tell us who you’d like to cover?

• Just myself
• Myself & another person
• My family
• Just my children (under 18)

​

Additional applicant

​

Create new flow from a template

1. In the Flows section of WhatsApp Manager click on the Create Flow button in the top right corner.
2. In the Create page, fill in the details for the pre-approved loan Flow:
   • Name - Type Insurance Quote, or choose another name you like.
   • Categories - Select Lead generation.
   • Template - Choose Provide Insurance Quote. You can further customize the template to suit your use case.
3. Click Create to create Flow.

• Flow JSON Overview

​

Configure Demo Backend on Glitch

​

1. Remix (fork) Glitch endpoint

​

2. Setup encryption key

1. Generate the public-private key pair by running the command below in the Glitch terminal. Replace YOUR_PASSPHRASE with your designated passphrase. Access the Glitch terminal by clicking the TERMINAL tab at the bottom of the page a run following command: node src/keyGenerator.js YOUR_PASSPHRASE
2. Copy the passphrase and private key and paste them to the .env file. Click on the file labeled .env on the left sidebar, then click on ✏️ Plain text on top. Do not edit it directly from the UI, as it will break your key formatting.
3. After you set the environment variables, copy the public key that you generated and upload the public key via the Graph API.

​

3. Set endpoint URI

1. At the top right of the Glitch page, click on Share and copy the Live Site URL from the displayed modal.
2. Head to the Flow Builder and in the Flow Builder click on the three dot menu in top right corner of the screen. Select Setup under the Endpoint section.
3. A popup will appear, allowing you to configure the endpoint URI, business phone number, and app on Meta for Developers. Save the Live Site URL copied from the Glitch into the first step of modal.

​

4. Set App Secret (optional)

• Detailed code walk through for demo backend
• Implementing endpoint for Flows for full details on how to build production endpoint

​

Testing and Debugging

​

Debug flow using the interactive preview

1. Trigger the interactive preview by clicking on settings menu in the Preview section of the Flow Builder and enabling Interactive mode toggle.
2. In the modal that appears, select the phone number, enter any string as Flow token and choose the Request data option under Request data on the first screen. This sends a request to the endpoint to retrieve data for the first screen.

​

Send draft flow to your device

• Flow Testing and debugging guide

​

Publishing

• All validation errors and publishing checks have been resolved.
• The Flow meets the design principles of WhatsApp Flows
• The Flow complies with WhatsApp Terms of Service, the WhatsApp Business Messaging Policy and, if applicable, the WhatsApp Commerce Policy

​

Sending

• Template messages - these do not require a 24-hour customer service window to be open between you and the message recipient before the message can be sent.
• Interactive Flow messages - these can only be sent to a user when a customer service window is open between you and the user.

​

Receiving flow response

​

Monitoring

• Metrics Dashboard in WhatsApp Account Manager
  • Navigate to Flow section of Whatsapp Account Manager and click on any published flow with the endpoint. You will be presented with a Details page with a Performance Metrics Dashboard.
• Metrics API
  • All the data presented in the Details page is also available to be queried through Flows Metrics API.
• Quality Webhooks
  • You should also subscribe to Flows Quality Webhooks to be updated in real time about the statuses and performance of your business’ Flows.

​

Next Steps

​

Overview of demo backend

​

server.js

const { APP_SECRET, PRIVATE_KEY, PASSPHRASE, PORT = "3000" } = process.env;

if (!PRIVATE_KEY) {
  throw new Error('Private key is empty. Please check your env variable "PRIVATE_KEY".');
}

if(!isRequestSignatureValid(req)) {
// Return status code 432 if request signature does not match.
// To learn more about return error codes visit: https://developers.facebook.com/docs/whatsapp/flows/reference/error-codes#endpoint_error_codes
  return res.status(432).send();
}

let decryptedRequest = null;
try {
  decryptedRequest = decryptRequest(req.body, PRIVATE_KEY, PASSPHRASE);
} catch (err) {
  console.error(err);
  if (err instanceof FlowEndpointException) {
    return res.status(err.statusCode).send();
  }
  return res.status(500).send();
}

const { aesKeyBuffer, initialVectorBuffer, decryptedBody } = decryptedRequest;
console.log("💬 Decrypted Request:", decryptedBody);

const screenResponse = await getNextScreen(decryptedBody);
console.log("👉 Response to Encrypt:", screenResponse);

res.send(encryptResponse(screenResponse, aesKeyBuffer, initialVectorBuffer));

​

encryption.js

​

keyGenerator.js

​

flow.js

const { screen, data, version, action, flow_token } = decryptedBody;

• A data_exchange request signified by a data_exchange action
• An error notification request signified by a data.error element
• A health check request signified by a ping action

​

Health check and Error handler

// handle health check request
if (action === "ping") {
    return {
        version,
        data: {
            status: "active",
        },
    };
}

// handle error notification
if (data?.error) {
    console.warn("Received client error:", data);
    return {
        version,
        data: {
            acknowledged: true,
        },
    };
}

​

INIT handler

 // handle initial request when opening the flow and display APPLICANTS screen
  if (action === "INIT") {
    return {
      ...SCREEN_RESPONSES.APPLICANTS,
      data: {
        ...SCREEN_RESPONSES.APPLICANTS.data,
        additional_applicants_count: undefined,
      },
    };
  }

​

data-exchange handlers

if (data.cover === "my_children") {
  return {
    ...SCREEN_RESPONSES.ADDTIONAL_APPLICANT,
    data: {
      ...data,
      additional_applicants: [],
      additional_applicant_title: "Additional Applicant 1",
      additional_applicant_index: 0,
    },
  };
}

if (data.cover === "myself") {
  return {
    ...SCREEN_RESPONSES.POLICY_SELECTION,
    data: {
      // copy initial screen data then override specific fields
      ...SCREEN_RESPONSES.POLICY_SELECTION.data,
      ...data,
    },
  };
}

if (applicant_index < data.additional_applicants_count) {
  return {
    ...SCREEN_RESPONSES.ADDTIONAL_APPLICANT,
    data: {
      ...rest,
      additional_applicant_title: `Additional Applicant ${
        applicant_index + 1
      }`,
      additional_applicant_index: applicant_index,
      additional_applicants: updateApplicantsList,
   },
 };
}

return {
  ...SCREEN_RESPONSES.POLICY_SELECTION,
  data: {
    // copy initial screen data then override specific fields
    ...SCREEN_RESPONSES.POLICY_SELECTION.data,
    ...rest,
    additional_applicants: updateApplicantsList,
    additional_applicants_count: undefined, // we do not need to send the count to the next screen
    additional_applicant_index: undefined, // we do not need to send the index to the next screen     },
};