# Action {% hint style="danger" %} **From 1st October 2024, all Chatlayer customers will be migrated to the new web widget, Web V2.** To learn more about the differences between V1 and V2, check [this page.](https://docs.chatlayer.ai/channels/all-channels/web/web-v2/from-web-v1-to-v2) For a technical deep dive, check [this page](https://docs.chatlayer.ai/channels/all-channels/web/web-v2/web-v2-methods-and-options). {% endhint %}

You can use the JSON builder in combination with the [Web channel](https://docs.chatlayer.ai/channels/all-channels/webhook-api) to receive [window events](https://developer.mozilla.org/en-US/docs/Web/API/Window#events) on your webpage. These events will contain the data as configured in your JSON builder action. To do this, you'll need to tick the **Send config to parent window** option. It will allow you to send data to the place where the widget is in a structured way. Here's an example: 1. Configure your JSON builder action to send a **language** key, with a variable retrieved from the session. 2. Set the toggle **Send config to parent window** on.

Add an **Action** block by [dragging and dropping it](https://docs.chatlayer.ai/buildabot/bot-navigation/bot-builder/flows/canvas-functionalities#drag-and-drop) to your flow.

**Action** blocks allow you to integrate third-party services, implement custom coding logic, or perform specialized operations within your bot

## Coding steps ### Code The code editor allows developers to quickly build custom logic on top of the bot by writing their own Javascript code blocks. Typically, the code editor is used to perform requests to external systems, or to do operations with variables. You can find more information about the code editor here: {% content-ref url="../../../integrateandcode/code-action" %} [code-action](https://docs.chatlayer.ai/integrateandcode/code-action) {% endcontent-ref %} There are also two tutorials in which we show you how the code editor can be used: {% content-ref url="../../../integrateandcode/code-action/retrieving-data-from-airtable-get" %} [retrieving-data-from-airtable-get](https://docs.chatlayer.ai/integrateandcode/code-action/retrieving-data-from-airtable-get) {% endcontent-ref %} {% content-ref url="../../../integrateandcode/code-action/airtable" %} [airtable](https://docs.chatlayer.ai/integrateandcode/code-action/airtable) {% endcontent-ref %} ### API The [API step ](https://docs.chatlayer.ai/integrateandcode/custom-back-end-integrations)is an integration where you integrate Chatlayer with your back end or third party services in order to share data gathered in the conversation with the bot, or enrich the bot with data captured.

### JSON builder If your bot is published on the [Webhook API](https://docs.chatlayer.ai/channels/all-channels/webhook-api) channel, you can use the JSON Builder action to send messages to the conversation that don't need to result in an actual message to the user. Typically, it's used to send information about the user or bot conversation to the website the bot is published on. ![](https://2786867680-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLTwFwbOqJj4dDhg8Ju%2F-M1dw5eMqNDrpjDngOe6%2F-M1dx9mzFppiXljhS6k-%2Fimage.png?alt=media\&token=3ef5dcd0-6d98-4e2d-9d95-631beacaa858) #### Website window events **You can use the JSON builder action** **in combination with the webwidget channel** to receive window events on your webpage. These events will contain the data as configured in your JSON builder action. Here's an example: \ Configure your JSON builder action to send a **language** key, with a variable retrieved from the session, and the "Send config to parent window" toggled on. ![JSON builder action with a language field](https://2786867680-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLTwFwbOqJj4dDhg8Ju%2F-MKa3vnvkdS2-AigosWt%2F-MKa57sjNNmEoWB6CO2l%2Fimage.png?alt=media\&token=c4e9711d-7541-4f47-8ff3-4db02a33cd6b) Your widget will trigger an event for that configuration to its parent window as a MessageEvent. The MessageEvent will contain a \`data\` field which contains the stringified result of the JSON builder configuration. Here's an example on how to listen to these events: ```javascript // Chatlayer JSON Builder Event Handler window.addEventListener('message', (event) => { const data = event && event.data && JSON.parse(event.data) || {} const { type, payload } = data if (type !== 'CL_DISPATCH_EVENT') return; console.log('Chatlayer language received: ' + payload.language) }) ``` ## Pausing steps ### Pause bot The **Pause bot** step will pause your bot when it reaches this block.

### Delay Sometimes you need a slight delay between bot messages, either to create a natural pause or to make an API call without the bot being silent. These pauses can significantly enhance the user experience.

You can [for example use Delay before a Close conversation](#example-delay-before-close-conversation) step. ## Variables steps ### Clear session data: variables and context Use a **Clear session** step to clear out [variables](https://docs.chatlayer.ai/navigation/settings/secure-variables-gdpr)

and/or [context](https://docs.chatlayer.ai/nlp/natural-language-processing-nlp/using-context)

that you don't need anymore.

### Set variables The **Set variable** step facilitates the creation, formatting, and assignment of values to [variables](https://docs.chatlayer.ai/bot-answers/settings/secure-variables-gdpr). {% hint style="warning" %} We've recently introduced a [new expression syntax](https://docs.chatlayer.ai/integrateandcode/expression-syntax). To explore the full range of expressions and functions available, check out the comprehensive documentation provided [here](https://docs.chatlayer.ai/integrateandcode/expression-syntax). {% endhint %}

Add an operation inside your variable value.

Operations allow you to perform calculations like addition, subtraction, multiplication, division, or finding the remainder of two numbers. {% hint style="info" %} For a comprehensive list of available operations such as addition (+), multiplication (\*), division (/), and more, please refer to the detailed documentation provided [here](https://docs.chatlayer.ai/integrateandcode/expression-syntax). {% endhint %} ### Go to variable bot dialog Use the **Go to variable bot dialog** step to navigate to a block that is contained inside a variable.

## Email steps ### Send mail The **Send mail** step sends an email with a message.

### Mail report The **Mail report** step sends 2 things: * an email with a message * the bot conversation at the time where the message was send All you need to do is to define the email title, recipients and body. Here you can also use variables between curly braces if you need to.

## Voicebot steps ### Start recording the call From the **Start recording the call** step, the [conversation with your voicebot is being recorded](https://docs.chatlayer.ai/voice/phone-and-voice).

### Stop recording the call From the **Stop recording the call** step, the conversation with your [voicebot](https://docs.chatlayer.ai/voice) will stop being recorded.

### Forward call You can [forward the call from your voicebot to a phone number](https://docs.chatlayer.ai/voicebots/phone-and-voice#forwarding-and-closing-a-call) by using the **Forward call** step.

{% hint style="info" %} The phone number should contain a country code but no leading zeros, only the '+' sign.\ For example: 0800 55 800 becomes +32 800 55 80 {% endhint %} After setting up the phone number you wish to forward your call to, the bot will automatically hang up upon transferring. To reach the bot again, hang up the call and call a second time. ## Other steps ### Track event A **Track event** step can be used you to [create custom dashboards and funnels to improve the analysis of your bot performance](https://docs.chatlayer.ai/bot-answers/track-events-for-analytics).

### iFrame An iFrame is a custom element that can be used to show a different web page in the chat conversation. It can also be used to communicate with the parent window using the [postMessage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). Have a look at this basic example: ```markup ``` If this block of code is hosted and embedded within our iframe plugin, it will send the user a chat message when they click the button. The postMessage API can also handle `UPDATE_SESSION` and `GO_TO_DIALOGSTATE` events. ### Get time The [**Get time** step](#get-time) is about guiding your flow based on the current moment in time. You can reuse those [time variables](#get-time-variables) inside your conversation. When you provide a **timezone offset**, the result of the plugin will contain time properties that are equal to UTC+`offset`.

Get time variables

If you do not provide a time zone offset, the current moment in time will be saved under the **Target variable** field. In our example, this variable will be called `time`. In this case, your **Target variable** will be accessible with the following variables: * `(target).utc.year` * `(target).utc.month` * `(target).utc.dayOfMonth` * `(target).utc.dayOfWeek` * `(target).utc.hours` * `(target).utc.minutes` * `(target).utc.seconds` * `(target).utc.ISO` By default, the plugin result will contain properties related to the UTC time. When you provide a `timezone offset`, the result will also contain time properties that are equal to UTC+\. * `(target).offset.year` * `(target).offset.month` * `(target).offset.dayOfMonth` * `(target).offset.dayOfWeek` * `(target).offset.hours` * `(target).offset.minutes` * `(target).offset.seconds` * `(target).offset.ISO` Inside a message, you can use those variables for instance like this: *Today is `{time.offset.dayOfMonth}`/`{time.offset.month}`/`{time.offset.year}`*

{% content-ref url="../../tips-and-best-practices/route-your-flow-depending-on-the-time" %} [route-your-flow-depending-on-the-time](https://docs.chatlayer.ai/buildabot/tips-and-best-practices/route-your-flow-depending-on-the-time) {% endcontent-ref %} ### Close conversation The bot will close the active conversation when the **Close conversation** step is reached. This means that the session variables are erased.

Example: Delay before Close conversation

You can for example use the **Close conversation** step together with a [**Delay**](#delay) step. This is useful in a situation where the user is not responding for a few minutes and you want to close the conversation from there. ![](https://2786867680-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FIq8QY3yGhUdrrCY0j0YN%2FScreenshot%202024-09-24%20at%2010.40.14.png?alt=media\&token=9b049378-6830-4561-8045-055c0d111272)

{% hint style="success" %} **Close conversation** is now available on the [Web](https://docs.chatlayer.ai/channels/channels/web-v2) channel, [Voice](https://docs.chatlayer.ai/voicebots/phone-and-voice#set-up-voice-channel) channel, and [Sinch Conversation API](https://docs.chatlayer.ai/channels/sinch-conversation-api-beta) channel. {% endhint %} ### Table operation The **Table operation** step is about using your built-in Chatlayer [Tables](https://docs.chatlayer.ai/navigation/tables).

### Knowledge base AI The **Knowledge base AI** step is about using your [Knowledge base AI](#knowledge-base-ai).

### Send to offload provider A user that reaches this action will be offloaded to a human customer support agent. {% hint style="warning" %} To be able to see this step in your bot, you will need to [configure an offload provider.](https://docs.chatlayer.ai/integrateandcode/human-offloading-live-chat) {% endhint %} Depending on your selected offloading provider, additional configuration may be required.