# Javascript

Javascript is a piece of code that can be run on the browser to perform an action. Some of the cases where a Javascript action block can be used are:

* Performing maths calculations.
* Dynamically rendering the values of the variables.
* String modification.
* Firing & tracking events in Google Analytics.

You can choose to run the Javascript code either on **CLIENT / SERVER**.

### Maths Calculations: <a href="#maths-calculations" id="maths-calculations"></a>

Here are a few of the snippets that you can use to perform the maths calculations within the chatbot flow:

| Parameter                 | Snippet                                | Description                                                                                                                                                         |
| ------------------------- | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Summation (Addition)      | *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 <em>additionResult</em> variable</li></ul> |
| Subtraction (Minus)       | *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 <em>additionResult</em> variable</li></ul> |
| Division (Divide)         | *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 <em>additionResult</em> 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 <em>additionResult</em> variable</li></ul> |

### Rendering values into variables: <a href="#rendering-values-into-variables" id="rendering-values-into-variables"></a>

Here are few of the snippets that you can use to render values in variables.

| Parameter                   | Snippet                                                           | Example                                         |
| --------------------------- | ----------------------------------------------------------------- | ----------------------------------------------- |
| Set Variable (Conversation) | *wn.setConversationVariable(“variable\_name”,”variable\_value”);* | *wn.setConversationVariable(“name\_wn”,”ABC”);* |
| Set Variable (Contact)      | *wn.setContactVariable(“variable\_name”,”variable\_value”);*      | *wn.setContactVariable(“name\_wn”,”ABC”);*      |

### String Modification: <a href="#string-modification" id="string-modification"></a>

Here are few of the snippets that you can use to calculate the length of the variable or get part of the variable.

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

### Firing & Tracking events in Google Analytics or any Analytics tool: <a href="#firing-and-tracking-events-in-google-analytics-or-any-analytics-tool" id="firing-and-tracking-events-in-google-analytics-or-any-analytics-tool"></a>

Here is the snippet that you can use to push or record events into 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", "Swiftsell\_Test", {</p><p>"send\_to": "123",</p><p>"name": "Test",</p><p>"phone": "123456789",</p><p>});</p> |

### Triggering day-based flow: <a href="#triggering-day-based-flow" id="triggering-day-based-flow"></a>

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

| Parameter                                    | Snippet                                                                                                                                                                                                                              | Description                                     |
| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------- |
| Get current date                             | *const currentDate = new Date();*                                                                                                                                                                                                    | Helps to get the today’s date                   |
| Check if Fromdate should be more than Todate | <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 flow the day specific flow |