​

Use Case Guide: Capture interest for a personalised Offer

​

Intro and Overview

• Present groups of products for your user to select
• Offer customisation options (budget, size, purpose etc.), to narrow down to a specific product
• Based on their inputs, make recommendations of a list of products, including detailed overview of each product
• Confirm product selection and allow users to proceed with a purchase

​

Getting Started

• Completed prerequisites for building Flows.
• A Glitch account

​

Flows JSON Template

• Mobile phones
• eBook readers
• Cameras

​

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 Personalised offer, or choose another name you like.
   • Categories - Select Lead generation.
   • Template - Choose Capture interest for a personalised offer. 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 PRODUCT_SELECTOR screen
if (action === "INIT") {
  return {
    ...SCREEN_RESPONSES.PRODUCT_SELECTOR
  };
}

​

data-exchange handlers

case "PRODUCT_SELECTOR":
  const product_type = data.product_selection.split('_').pop().slice(0, -1);
  return {
    ...SCREEN_RESPONSES.OPTIONS,
    data: {
      // copy initial screen data then override specific fields
      ...SCREEN_RESPONSES.OPTIONS.data,
      phone_use_case: data.product_selection === SCREEN_RESPONSES.PRODUCT_SELECTOR.data.products[0].id,
      cta_label: "View " + product_type + "s",
      screen_heading: "Let's find the perfect " + product_type + " offer for you",
      selected_product: product_type,
    },
  };

case "OPTIONS":
  // TODO here process user selected preferences and return customised offer
  return {
    ...SCREEN_RESPONSES.OFFER,
    data: {
      // copy initial screen data then override specific fields
      ...SCREEN_RESPONSES.OFFER.data,
      offer_label: "Here are 4 shortlisted " + data.selected_product + "s",
      selected_product: data.selected_product,
    },
  };

case "OFFER":
  // TODO return details of selected device
  return {
    ...SCREEN_RESPONSES.PRODUCT_DETAIL,
    data: {
      // copy initial screen data then override specific fields
      ...SCREEN_RESPONSES.PRODUCT_DETAIL.data,
      product_name: SCREEN_RESPONSES.OFFER.data.shortlisted_devices
          .filter((a) => a.id === data.device)
          .map((a) => a.title)[0],
      selected_device: data.device,
    },
  };