Different ways to format numbers with JS (WhatsApp)

Ana Updated by Ana

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.

Transform 1000 to 1,000

  1. First, we ask for a number and store it in the @number variable

  1. Create a Message block to display the @number variable. Then, set two variables, one includes the @bot_id that you can get from the URL of the bot, and the other the block reference, @node_ref, of the Message block. We will use them to do the HTTP request from Make to continue the flow in WhatsApp.

  1. Set the Trigger Automation block with all the variables that will use in Make. To see in-depth how the Trigger Automation block works, please, check thisĀ article. Leave the URL field empty for now.

Let's now create a scenario in Make:

  1. Add a Custom Webhook to our Make scenario and copy the endpoint by clicking on "Copy address to clipboard".

  1. Now we'll go back to our Trigger automation block to add the endpoint:

ThenĀ Run onceĀ your scenario on Make and after that, test your Trigger Automation, you need to see a 200 status response:

  1. Come back to Make. We'll add the Custom JS next, and add our Rapid API key in the Custom JS module. From theĀ InputĀ field, you will be able to see all the variables collected by the Custom Webhook module:

In the Input we'll addĀ @number,Ā our Landbot variable.

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

function fixValue(value){ return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}  const numberwithcomma = fixValue(input);  return numberwithcomma;

That formula will take the Input value of the module and return the number with commas. 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 'number'.
  • https://api.landbot.io/v1/customers/@id/fields/@number/
  • Method we'll selectĀ PUT
  • In Headers add:
    - Name: Authorization. Value: Token XXXXXXXXXXX
    - Name: Content-Type. Value: application/json
Get your API Token from the Settings section of the app

  • In Body type select 'Raw' then in content type selectĀ JSON
  • In 'Request Content' we'll add the following:

{

"type": "string",

"extra": {},

"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.

  • https://api.landbot.io/v1/customers/@id/assign_bot/@bot_id/
  • We'll select the customer @id and @bot_id sent from Landbot, from the dropdown.
  • 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, notice that @node_ref also comes from Landbot:

{

"launch": true,

"node": "@node_ref"

}

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

Get two decimals .00

Repeat all the steps mentioned above but in the Custom JS module of Make, please, add the following code:

return parseFloat(input).toFixed(2);

How did we do?

Add a Chart (with Chart JS library) in your Landbot

Pop up modal to embed third party elements

Contact