OLD BUILDER - How to format numbers with & without decimals

This article corresponds to the V2 (Classic) of the app. You can check the equivalent for the new version V3 (Bricks) here

Every user of Landbot deals differently with numbers, sometimes we want to display numbers without decimals like Zip Codes or years, or maybe we need numbers with 2 decimals for prices. Here we will show different ways to deal with this:

Numbers without .0

For this we will imagine that we ask for the phone number, with the Ask A Question number type input. But as by default numbers in Landbot have one decimal, we will build a flow to "erase" such .0

First of all, here is a demo will show you a demo

Here is attached the picture of the flow in the builder 

  1. First we Set a Variable for the number we want to transform:
  1. We need the user to make the input:
  1. To work with the input an work with it we need a message where we will instruct the value to be sent for transformation
Thanks for your input
{html}
<script>fixValue(@value)</script>
{/html}
  1. To have the variable available with the transformation we need an input from the user, in this case we use a simple button input like yes/no, it can be just one button:
  1. And finally we will have our number without the .0 in the variable that we created previously "@phone"
  1. The JS snippet that will do the transformation will be hosted in the Design/Advanced/Add JS section as in the picture:

<script>  
function fixValue(value){   
Landbot.exec("landbot-custom-data", {phone: Math.floor(value)})   
}
// ualee_003 //
</script>
Transfom 1000 to 1,000

In this case what we will do is the same, as in the first set up to get rid of the decimal, however, the code we will use in Design / Advanced / Add JS will be the following code instead:

<script>  function fixValue(value){    
Landbot.exec("landbot-custom-data",  {phone: commas(value)})   
}                    
function commas(num){   
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");   
}
// ualee_008 //
</script>

Get two decimals .00
  1. This is the flow we are going to use: 1 ASK A QUESTION (NUMBERS), 1 ASK A QUESTION (BUTTONS), 1 SEND A MESSAGE BLOCK

  1. In the Question Number, we will save it with the @number variable

  1. Now, to process any data, generate a new variable with a value, and display it in Landbot, we need an input from the user. That is why we do this two things in this block. We call a function that will transform the @number, create a new Landbot variable @numbertwodecimals with the new value, and once the user clicks the button, it will be ready to use.

Intermediate step (with input from the user){html}
<script>fixValue(@number)</script>{/html}

  1. In the send a message we can already display the new value with the new variable.

  1. The JS snippet that will do the transformation will be hosted in the Design/Advanced/Add JS section as in the picture:

CODE:

<script>  
function fixValue(value){   
Landbot.exec("landbot-custom-data",    
{numbertwodecimals: parseFloat(value).toFixed(2)})   
}
// ualee_043 //
</script>

These scripts and how to's are not native functionalities. Landbot won't be able to support, help or guarantee these scripts and how to's. These Workarounds and How to's are for developers, as a learning and example material on how to extend or modify some of the platform limitations.  Due to platform updates, some scripts might stop working in the future.Please, note that in case of Scripts and Workaround the Custom Success Team can deliver limited support.


How did we do?


Powered by HelpDocs

Powered by HelpDocs