Available on the PREMIUM plan and above.

The Javascript block executes a piece of code that can be run on the browser to perform an action. Use the Javascript action block when you need to run JavaScript in the visitor’s browser during a conversation.

Using the Javascript block

Some use cases where a Javascript action block can be used are:

Performing calculations
Formatting or modifying values
Reading information available on the host webpage
Setting conversation or contact variables
Triggering third-party tracking or analytics events
Performing other lightweight browser-side operations

To add JavaScript to your chatbot:

Drag the Javascript action block onto the canvas.
Connect it to the required point in your flow.
Open the block configuration.
Enter your JavaScript in the code editor.
Configure the required execution and variable settings.
Connect the output to the next block in the flow.

The script runs when the conversation reaches the Javascript block.

You can choose to run the Javascript code on:

Client

The code runs on the user’s device (like their browser or phone)

Server

The code runs on your backend server instead of the user’s device.

Configurations

Script

Enter the JavaScript code that you want to execute. For example:

const additionResult = num1 + num2;

Actions you can perform on Javascript

Here are some examples of actions you can perform on the Javascript block.

Reading variables

You can use WotNot variables directly in your JavaScript code. For example:

const additionResult = num1 + num2;

Here, num1 and num2 can be numbers or variables containing numeric values.

Writing variables

You can store values in conversation or contact variables using the WotNot JavaScript methods.

Math calculations

You can use JavaScript to perform mathematical calculations within the chatbot flow.

Parameter	Snippet	Description
Summation (Addition)	`const additionResult = num1 + num2;`	`num1` and `num2` can be any number or variable containing a number. The result is stored in `additionResult`.
Subtraction (Minus)	`const subtractionResult = num1 - num2;`	`num1` and `num2` can be any number or variable containing a number. The result is stored in `subtractionResult`.
Division (Divide)	`const divisionResult = num1 / num2;`	`num1` and `num2` can be any number or variable containing a number. The result is stored in `divisionResult`.
Multiplication (Multiply)	`const multiplicationResult = num1 * num2;`	`num1` and `num2` can be any number or variable containing a number. The result is stored in `multiplicationResult`.

Storing values into variables

You can use the Javascript block to store values in conversation or contact variables. Conversation variables Use wn.setConversationVariable() to store a value in a conversation variable:

wn.setConversationVariable("variable_name", "variable_value");

For example:

wn.setConversationVariable("name_wn", "ABC");

Contact variables Use wn.setContactVariable() to store a value in a contact variable:

wn.setContactVariable("variable_name", "variable_value");

For example:

wn.setContactVariable("name_wn", "ABC");

String modification

You can use JavaScript to calculate the length of a string or extract part of a string. Get the length of a string Use the .length property to calculate the number of characters in a string.

const lengthOfString = "variable_name".length;

For example:

const lengthOfString = "some_string_content".length;

// Output: 19

In JavaScript, length is a property, so use .length rather than .length().

Get part of a string Use .slice() to extract part of a string.

const partOfString = "variable_name".slice();

For example:

const partOfString = "some_string_content".slice(5);

// Output: string_content

The starting index begins at 0. This can be useful when you need to extract a specific part of a value, such as a phone number without the country code.

Fire and track events in Google Analytics

You can use the Javascript block to push or record events in Google Analytics or another analytics tool installed on your website.

Make sure the Google Analytics 4 code snippet is already present on your website before using the Javascript block to fire an event.

Use the following code to fire an event:

window.dataLayer = window.dataLayer || [];

function gtag() {
  window.dataLayer.push(arguments);
}

gtag("js", new Date());

gtag("config", "YOUR-MEASUREMENT-ID");

gtag("event", "YOUR-EVENT-NAME", {
  "send_to": "YOUR-MEASUREMENT-ID"
  // ADDITIONAL PARAMETERS THAT YOU MAY WANT TO PASS
});

Replace YOUR-MEASUREMENT-ID with your Google Analytics Measurement ID and YOUR-EVENT-NAME with the name of the event you want to track. For example:

window.dataLayer = window.dataLayer || [];

function gtag() {
  window.dataLayer.push(arguments);
}

gtag("js", new Date());

gtag("config", "123");

gtag("event", "WotNot_Test", {
  "send_to": "123",
  "name": "Test",
  "phone": "123456789"
});

Triggering a day-based flow

You can use JavaScript to work with dates and determine whether a flow should continue based on a specific day. Get the current date Use the following code to get the current date:

const currentDate = new Date();

Check if the from date is before the to date You can compare two dates using JavaScript:

function isFromDateBeforeToDate(fromDate, toDate) {
  const fromDateObj = new Date(fromDate);
  const toDateObj = new Date(toDate);

  return fromDateObj < toDateObj;
}

This can be used when you need to determine whether one date occurs before another date.

Executing JavaScript asynchronously

You can execute JavaScript asynchronously without enforcing a delay for the end user. This can provide a smoother experience when the result of the JavaScript execution is not required before the conversation continues.

Do not use asynchronous execution when a subsequent step depends on the result of the JavaScript execution.

Security considerations

The Javascript block runs in the visitor’s browser. This means the code is sent to and executed on the visitor’s device. Never include the following in client-side JavaScript:

API keys
Access tokens
Passwords
Private credentials
Database credentials
Other sensitive secrets

If you need to make an authenticated API request or execute server-side logic, use the HTTP request or Codeblock.

Getting started

Build

Operate

Deploy

Reports

Account

Javascript

Using the Javascript block

Client

Server

Configurations

Script

Actions you can perform on Javascript

Reading variables

Writing variables

Math calculations

Storing values into variables

String modification

Fire and track events in Google Analytics

Triggering a day-based flow

Executing JavaScript asynchronously

Security considerations

​Using the Javascript block

Client

Server

​Configurations

​Script

​Actions you can perform on Javascript

​Reading variables

​Writing variables

​Math calculations

​Storing values into variables

​String modification

​Fire and track events in Google Analytics

​Triggering a day-based flow

​Executing JavaScript asynchronously

​Security considerations

Using the Javascript block

Configurations

Script

Actions you can perform on Javascript

Reading variables

Writing variables

Math calculations

Storing values into variables

String modification

Fire and track events in Google Analytics

Triggering a day-based flow

Executing JavaScript asynchronously

Security considerations