> For the complete documentation index, see [llms.txt](https://docs.aisera.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aisera.com/aiseragpt/embed-your-webchat-channel.md). # Embed Your Webchat Channel
This topic describes the installation of the Aisera Webchat bot (AiseraGPT application on the Aisera Webchat channel) on any portal or web landing page. This involves setting up session variables to pass information to the bot before loading it, and also the specific JavaScript code that should be used in the page layout to load the bot on the page. ## JavaScript for Aisera Webchat Bots The Aisera Webchat Bot is included as a default channel when you create a new application/bot. \ You can use the channel 'as is', or add different channels, for a different 'look and feel'.
If you're using the default Webchat channel, you can add it to an HTML web page by including the parameters within a JavaScript( JS) tag. on your page or portal. \ \ The following is an example Webchat script. {% code overflow="wrap" %} ```javascript (function() {var d = document, s = d.createElement('script'); s.async = true; s.src = 'https://.chatbot.aisera./awc/js?t=a1b2c3d4-e5f6-7890-1234-567890abcdef' + Date.now(); d.getElementsByTagName('head')[0].appendChild(s)})(); ``` {% endcode %} #### To obtain the Webchat Script: 1. In the Aisera Admin UI navigate to **Settings > AiseraGPT** in the left navigation panel. 2. In the **AiseraGPT Details** window under **Channels** click on the **Webchat** channel. 3. At the bottom of the **Channel Details Page** under the **JavaScript** **Snippet** click **Copy.**
4. This script contains all the relevant parameters for loading your bot on your page or portal. \ To write JavaScript code inside an HTML page, you must enclose your code within **`` tags**. Add your webchat javascript (like thie one in the example above) between two script tags, as shown in the red box in the example below.
**NOTE:** If you choose the **Test** button below the JavaScript snippet (shown in the diagram as part of Step 3 above, the script will render a Webchat bot, according to the JavaScript instructions.
## Additional Configurations The following sections contain additional options, but you must perform these edits and operations outside the regular commands in the Aisera Admin UI. ### Session Variables Session variables can optionally be passed to Webchat in the `window.aisera_bot` global variable (or `window.webchat` for backward compatibility). The following session variables have special meaning to Webchat: * `userEmail:` User email * `userFullName:` User full name In addition to the user variables, other session variables could be specified to be used in custom flows. For example: ```javascript window.aisera_bot = { userEmail: "jsmith@acme.com", userFullName: "John Smith", accountId: "1234" } ``` {% hint style="info" %} If you specify `userEmail` in the session variables then you have to set the variable before the snippet that loads Webchat. *It cannot be changed later* using the [update session vars](#update-session-vars) message. {% endhint %} Below is an example showing session variables being passed to the webchat. ```html

Sample page

``` ### Input Messages You can make a request to Webchat to perform operations using the `window.postMessage` function. The JavaScript for these messages looks like the following: ```javascript let message = { type: MESSAGE_TYPE, // additional fields depending on the message type }; window.postMessage(JSON.stringify(message), "*"); ``` The following input message types are supported: #### Open This message opens the application window if it is not already opened.
FieldDescription
typeaisera.webchat.open
textOptional text to be used as a search utterance
messageOptional html to be displayed in Webchat
Other fields can be specified here and received in the opened output messages described below.
#### Close This message closes the webchat window if it is not already closed
FieldDescription
typeaisera.webchat.close
#### Reset This message clears the webchat content and the current conversation contexts.
FieldDescription
typeaisera.webchat.reset
#### Hide This message hides the Webchat and the opener icon.
FieldDescription
typeaisera.webchat.reset
#### Show This message shows the Webchat and the opener icon if they are hidden using the `aisera.webchat.hide` message.
FieldDescription
typeaisera.webchat.show
#### Update Session Vars The hosting page can update the `window.aisera_bot_variable` at any time, but it needs to send this notification to notify the application.
FieldDescription
typeaisera.webchat.update_session_vars
### Output Messages Webchat sends notification messages to the host window during specific operations. The JavaScript that allows Webchat to receive the messages looks like the following: ```javascript window.addEventListener("message", event => { let message = JSON.parse(event.data); // use message.type etc }) ``` The following outgoing message types are supported: #### Ready This message is sent when Webchat is initialized and is ready to process messages.
FieldDescription
typeaisera.webchat.ready
#### Opened This message is sent when Webchat is opened. All fields specified in the [open](#open) input message are included in the message.
FieldDescription
typeaisera.webchat.opened
#### Closed This message is sent when Webchat is closed.
FieldDescription
typeaisera.webchat.closed
#### Handoff This message is sent when a button with the Hand-off action is clicked.
FieldDescription
typeaisera.webchat.handoff
transcriptThe conversation transcript as a string
#### Session Timeout This message is sent when the conversation session times out. The session times out when the user idle timeout configured in the Admin UI elapses.
FieldDescription
typeaisera.webchat.session_timeout
## Webchat Embed with an Iframe To use your Webchat in an `iframe` inside a page containing a webchat snippet, change the URL in the snippet to include a `target_id` parameter with the `iframe tag id`. For example, if the page has the following tag: ```html