Table of Contents

Javascript in WhatsApp

Abby Updated by Abby

There may be instances where we need to use Javascript inside of our WhatsApp flow

However, as WhatsApp doesn't have access to a console we are limited in how we can do this

With Make's(Integromat's) new Custom JS module we can now seamlessly run a Javascript function during the flow, and return the value back to our user in WhatsApp without interrupting the conversation

Before getting started, you'll need to sign up for Rapid API & subscribe to the Custom JS API

In our example, we need to get a UNIX timestamp to later send to our CRM

We'll collect the date from the user in this format - 2022/11/11 and return it in this format - 1668124800

Then we'll reassign the user to the next block in the conversation, and send our new timestamp to our CRM

The Builder:

Make Scenario:

Let's get started:

  1. In the builder, after the date question we'll need to initialize our variable

We'll be sending the variable @unix from our third party, so in order to simplify things, we'll create our variable at the beginning of the flow, with any irrelevant value (As any value will be overidden)

  1. Let's add a Trigger Automation block after that, but we won't add the url yet

  1. Next we need a 'Landing' block, this is where we will redirect the users

In our example we used a Message Bubble, with the text 'Thank you for submitting your availability', then we have another Trigger automation block, where we send the UNIX timestamp to our CRM

It's important that this 'Landing block' isn't connected to any previous points in the flow

Let's now create a scenario in Make
  1. The first thing we need to do, is add a Webhook to our Make scenario and copy the endpoint

(don't click determine data structure yet!)

  1. Now we'll go back to our first Trigger automation block and add this endpoint, as well as the variables we want to send:

In this case we'll send the following:

@id - this is the user ID, we'll need this to be able to send the user back to the flow

@date - the variable we want to later tranform with Javascript

  1. Now in our Make scenario, in the webhook, we can click 'Determine data structure'

  1. Once we've clicked that we'll go back to Trigger Automation and click 'Test Webhook Trigger'

That's all for the bot! Now we'll go back to our Make Scenario:

  1. We'll add the Custom JS next, and add our Rapid API key

In the input we'll add @date our Landbot variable

And in the Javascript Code we'll add the following:

return Math.floor(new Date(input).getTime() / 1000)

Let's press OK

  1. Now we'll add an HTTP module (Make a request) to set the variable

In the url we'll add the endpoint to set the variable, with the @id we sent earlier from Landbot

and the name of the variable we want to update, in our case 'output'

https://api.landbot.io/v1/customers/@ID/fields/output/

In method we'll select PUT

And in the headers we'll add our API key following the format in the image

  1. In Body type select 'Raw' then in content type select JSON

In 'Request Content' we'll add the following:

{

"type": "string",

"value": "@OUTPUT"

}

Output is the value coming from the JS module, so you'll need to select it from the dropdown that appears when you click in the body

Let's press OK

  1. Our Last module will be another HTTP (Make a request) to assign the user back to the bot

Here's our endpoint:

https://api.landbot.io/v1/customers/{{1.id}}/assign_bot/XXXXX/

We'll select the customer @id sent from Landbot from the dropdown

And the last part of the url will be our bot ID, you can find that here:

The method will be PUT again, and the Headers will be the same as the previous module

In the body, we'll add the following:

{

"launch": true,

"node": "XXXXX"

}

To get the node reference for the block you want to send the user to, you need to right click and copy the block:

Let's press OK and test! - Be sure to activate the scenario!

How did we do?

How to change Avatar dynamically (Landbot v3)

Javascript in Landbot v3

Contact