Integrating Whippy Embed Iframe

This guide is intended for developers looking to integrate the Whippy Embed Iframe into their web applications. The Whippy Embed Iframe facilitates the seamless transfer of phone number data from your application to the Whippy service for various functionalities, including SMS campaign management. You can see an example implementation on GitHub - https://github.com/hellowhippy/whippy-embed-demo.

Prerequisites

Familiarity with HTML and JavaScript.
Ability to modify the HTML content of your web application.

Integration Steps

Step 1: Embedding the Iframe

Embed the Whippy Iframe into your web page by inserting the following HTML code at the desired location:

<iframe id="whippy-iframe" src="https://app.whippy.co/embed" style="width:100%; height:100%; border:none;"></iframe>

This snippet creates an Iframe that loads the Whippy Embed page. Adjust the style attribute to fit the Iframe into your page layout appropriately.

Step 2: Preparing Phone Number Data

Organize the phone number data you intend to pass to the Iframe. The data should be structured as an array of objects, with each object containing an id and a number property, as shown below:

const phoneNumbers = [
  { id: "1", number: "+13234249459" },
  { id: "2", number: "(555) 555-5678" },
  // Add more phone numbers as needed
];

Step 3: Serializing and Passing Data to the Iframe

Depending on how you format your phone number data Whippy will either process your data as a single phone number to open a 1-1 conversation or as a list of phone numbers that you can then use to create a campaign or sequence in Whippy.

In your client code you need to ensure that your are formatting you data correct so that it can be passed to the iframe in order for the desired action to happen.

Example: Send a Single Phone Number.

const handleOpenConversation = (number: string) => {
  // Prepare the message payload as a JSON string
  const message = JSON.stringify({
    isExtension: true,
    whippy_phone: number, // No need to stringify the number again
  });

  // Reference to the iframe within the drawer
  const iframe = drawerRef.current?.querySelector("iframe");

  // Post the message to the iframe's content window
  iframe?.contentWindow?.postMessage(
    message,
    "*" // Note: In production, replace "*" with a specific target origin for security
  );
};

Example: Send a List of Phone Numbers.

const handleCreateSMSCampaign = () => {
  // Assuming numbersFormatted is an array of phone numbers formatted as required
  const serializedPhoneNumbers = returnStringifiedArray(numbersFormatted);

  // Prepare the message payload as a JSON string
  const message = JSON.stringify({
    isExtension: true,
    whippy_phone: serializedPhoneNumbers,
  });

  // Reference to the iframe within the drawer
  const iframe = drawerRef.current?.querySelector("iframe");

  // Post the message to the iframe's content window
  iframe?.contentWindow?.postMessage(
    message,
    "*" // Note: In production, replace "*" with a specific target origin for security
  );
};

// Helper function to serialize the phone numbers array
const returnStringifiedArray = (
  phoneNumbers: { id: string; number: string }[]
) => {
  return encodeURIComponent(JSON.stringify(phoneNumbers));
};