> ## Documentation Index
> Fetch the complete documentation index at: https://help.wotnot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Javascript

> Executes a javascript code on the client side.

> [!NOTE]
>
> Available on the **PREMIUM** plan and above.

![Image](https://mintcdn.com/wotnot/9dFb9jDqAX6_tYFX/images/image-309.png?fit=max\&auto=format\&n=9dFb9jDqAX6_tYFX\&q=85\&s=88e0e270ee52f61b8dd331fcfdf567c4)

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:

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

The script runs when the conversation reaches the Javascript block.

![Image](https://mintcdn.com/wotnot/9dFb9jDqAX6_tYFX/images/image-311.png?fit=max\&auto=format\&n=9dFb9jDqAX6_tYFX\&q=85\&s=9d12fa8004879c5733b0dac543781db1)

You can choose to run the Javascript code on:

> [card] Client
>
> The code runs on the user’s device (like their browser or phone)

> [card] 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:

```javascript theme={null}
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:

```javascript theme={null}
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:

```javascript theme={null}
wn.setConversationVariable("variable_name", "variable_value");
```

For example:

```javascript theme={null}
wn.setConversationVariable("name_wn", "ABC");
```

**Contact variables**

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

```javascript theme={null}
wn.setContactVariable("variable_name", "variable_value");
```

For example:

```javascript theme={null}
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.

```javascript theme={null}
const lengthOfString = "variable_name".length;
```

For example:

```javascript theme={null}
const lengthOfString = "some_string_content".length;

// Output: 19
```

> [!NOTE]
>
> 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.

```javascript theme={null}
const partOfString = "variable_name".slice();
```

For example:

```javascript theme={null}
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.

> [!NOTE]
>
> 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:

```javascript theme={null}
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:

```javascript theme={null}
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:

```javascript theme={null}
const currentDate = new Date();
```

**Check if the from date is before the to date**

You can compare two dates using JavaScript:

```javascript theme={null}
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.

> [!WARNING]
>
> 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](https://help.wotnot.io/build/integrations/http-request-api.md) or [Codeblock](https://help.wotnot.io/build/blocks/codeblock.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.