Skip to main content

Embed WhatsApp Connect For Your Customers

If you are a SaaS or solutions provider and want your customers to connect their WhatsApp Phone numbers via Your Chakra Account, You can do so by following the steps below

1. Create a connect token​

To embed the connect button inside your webpage/webapp you will first need to generate a connect token. Please note that this token is only valid for 1 hour.

Use the Create Connect Token API to do this. Ideally this should be generated at the backend and passed to the frontend.

Parameters needed for this API

  • pluginId - this is the pluginId of the WhatsApp plugin where the connected WABA details will be stored. It is strongly recommended to create a new plugin per customer.

2. Embed the sdk​

To embed the sdk, add the following script tag to the head of your webpage

<script src="https://embed.chakrahq.com/whatsapp-partner-connect/v1/sdk.js"></script>

Create a container div with a unique id in your webpage and then add the following script tag to the end of your webpage. It is important to add this script tag after the container div, else the intialization will fail. Example Snippet below:

  <div id="container">
  </div>
  <script>
    const connectToken = "<CONNECT-TOKEN>";
    const chakraWhatsappConnect = ChakraWhatsappConnect.init({
      connectToken: connectToken,
      container: '#container',   // optional, defaults to document.body
      baseUrl: 'http://localhost:8000',
      onMessage: (event, data) => console.log(event, data),
      onReady: () => console.log('iframe ready'),
      onError: (err) => console.error(err),
    });

    // Later, you can destroy the iframe:
    // chakraWhatsappConnect.destroy();
  </script>

3. Check if the integration is successful​

If the integration is successful, you should see a "Connect with Facebook" button as shown in the screenshot below

Successful sdk integration

Connecting a WhatsApp phone number​

Your customer can now click the "Connect with Facebook" button and complete the embedded signup. A successful flow would look something like the demo below:

Embedded Signup Flow