# Javascript

JavaScript is a script that runs in the browser to execute various actions. Some common use cases for a JavaScript action block include:

* Performing mathematical calculations.
* Dynamically updating variable values.
* Modifying strings.
* Triggering and tracking events in Google Analytics.

Select Javascript action block in Replycx bot flow.

![](https://1047404187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeyvV4WfyYBGZdBoAuetg%2Fuploads%2Fae9cfM0lc9Vb7h6aeIzW%2Fjs%201.png?alt=media\&token=595605aa-6a55-4dea-a5d2-776000b6dc74)

### **Maths Calculations:**

Here are some code snippets you can use to perform mathematical calculations within the chatbot flow:

| Parameter                 | Snippets                               | Description                                                                                                                                                                                                        |
| ------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Summation (Addition)      | *const additionResult = num1 + num2;*  | <ul><li><strong>Num 1</strong> and <strong>Num 2</strong> can be any number or a variable containing a numeric value.</li><li>The result will be stored in the <strong>additionResult</strong> variable.</li></ul> |
| Subtraction (Minus)       | *const additionResult = num1 - num2;*  | <ul><li>Num 1 and Num 2 can be any numeric value or a variable containing a number.</li><li>The result will be saved in the additionResult variable.</li></ul>                                                     |
| Division (Divide)         | *const additionResult = num1 / num2;*  | <ul><li>Num 1 and Num 2 can be any numeric value or a variable containing a stored number.</li><li>The result will be stored in the additionResult variable.</li></ul>                                             |
| Multiplication (Multiple) | *const additionResult = num1 \* num2;* | <ul><li>Num 1 & Num 2 can be any number or variable which has a number stored in it</li><li>The result will be stored in additionResult variable</li></ul>                                                         |

### **Rendering values into variables:**

Here are some snippets you can use to dynamically render values in variables.

| Parameter                   | Snippet                                                                                                                                                                            | Example                                                                                                       |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| Set Variable (Conversation) | <p>wn<em>.setConversationVariable(“variable\_name”,”variable\_value”);</em></p><p><em>Or</em></p><p><em>wn.setConversationVariables({“variable\_name”:”variable\_value”})</em></p> | <p>wn.setConversationVariable(“name\_wn”,”ABC”);</p><p>Or</p><p>wn.setConversationVariables({“t1”:”123”})</p> |
| Set Variable (Contact)      | <p>wn<em>.setContactVariable(</em>“<em>variable\_name”,”variable\_value”);</em></p><p><em>Or</em></p><p><em>wn.setContactVariables({“variable\_name”:”variable\_value”})</em></p>  | <p>wn.setContactVariable(“name\_wn”,”ABC”);</p><p>Or</p><p>wn.setContactVariables({“t1”:”123”})</p>           |

### **String Modification:**

Here are some snippets you can use to determine the length of a string or extract a portion of its value.

| Parameter            | Snippet                                             | Example                                                                                                                                                                                                                                                                                            |
| -------------------- | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Length of String     | *const lengthOfString = “variable\_name”.length();* | <p>const lengthOfString = “some\_string\_content”.length();</p><p><strong>//Output: 19</strong></p><p>Calculates the number of characters passed/present in the value</p>                                                                                                                          |
| Get part of a string | *const partOfString = “variable\_name”.slice();*    | <p>const partOfString = “some\_string\_content”.slice(5);</p><p>Note: We need to pass the starting index from where we need to get the sub-string. The index starts from 0.</p><p><strong>//Output: string\_content</strong></p><p>Commonly used to pass the phone number without country code</p> |

### **Triggering day-based flow:**

Here is a snippet you can use to trigger the flow based on a specific day.

| Parameter                                      | Snippet                                                                                                                                                                                                                              | Description                             |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------- |
| Get current date                               | *const currentDate = new Date();*                                                                                                                                                                                                    | Helps retrieve today's date.            |
| Check if From date should be more than To date | <p><em>isFromDateBeforeToDate(fromDate, toDate) {</em></p><p><em>const fromDateObj = new Date(fromDate);</em></p><p><em>const toDateObj = new Date(toDate);</em></p><p><em>return fromDateObj < toDateObj;</em></p><p><em>}</em></p> | Helps to trigger the day-specific flow. |

### **Triggering and monitoring events in Google Analytics or any other analytics tool:**

Here is a snippet you can use to log or track events in Google Analytics or any other analytics tool.

| Tool               | Snippet                                      | Example |                                                                                                                                                                                                                                                                                                                                                                                                        |                                          |   |                                                                                                                                                                                                                                                                          |
| ------------------ | -------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | - | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Google Analytics 4 | <p><em>window\.dataLayer = window\.dataLayer |         | \[];</em></p><p><em>function gtag() {</em></p><p><em>window\.dataLayer.push(arguments);</em></p><p><em>}</em></p><p><em>gtag("js", new Date());</em></p><p><em>gtag("config", "YOUR-MEASUREMENT-ID");</em></p><p><em>gtag("event", "YOUR-EVENT-NAME", {</em></p><p><em>"send\_to": "YOUR-MEASUREMENT-ID"</em></p><p><em>// Additional parameters that you may want to pass</em></p><p><em>});</em></p> | <p>window\.dataLayer = window\.dataLayer |   | \[];</p><p>function gtag() {</p><p>window\.dataLayer.push(arguments);</p><p>}</p><p>gtag("js", new Date());</p><p>gtag("config", "123");</p><p>gtag("event", "Replycx\_Test", {</p><p>"send\_to": "123",</p><p>"name": "Test",</p><p>"phone": "123456789",</p><p>});</p> |

### JS execution in async

JavaScript can be run asynchronously, allowing the bot to continue the conversation without waiting for the script to complete. This results in a smoother and faster chat experience.

**How to enable:**\
Go to **JavaScript block** → Enable **"Execute asynchronously"**.

<figure><img src="https://1047404187-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeyvV4WfyYBGZdBoAuetg%2Fuploads%2FHJR4SGSGWJ2alosTLoVz%2Fjs%202.png?alt=media&#x26;token=75c29d9b-7c2b-4da6-aeff-34916a987822" alt=""><figcaption></figcaption></figure>
