vania-janet/multiturn-rag-retrieval-data huggingface dataset:
* Home screen: The web chat home screen has been updated to have a more modern look. For more information about the home screen, see [Configuring the home screen](https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-web-chat-configweb-chat-configure-home-screen).
* Agent events: New events are now fired by the web chat when interacting with a human agent using a service desk integration. If you are using a custom service desk integration based on the [starter kit](https://github.com/watson-developer-cloud/assistant-web-chat-service-desk-starter), you can use these events to create a pre-chat form before the agent escalation occurs, to create a post-chat form after the agent conversation ends, or to specify what happens if an agent isn’t available (like create a ticket submission form). For more information, see [Agent events summary](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-eventssummary).
* Markdown support: The web chat now fully supports common Markdown formatting in messages received from an assistant. You might need to review existing assistant output that contains strings that might be recognized as Markdown. (For example, a line of text that begins with a greater-than (>) character is interpreted as a block quote.)
* Time zone: The time zone set in the context by the web chat no longer overrides any time zone set by the assistant.
* Locale: Any locale configured for the web chat is now sent to the assistant as part of the context.
* Window open events: The window:pre:open and window:open events now fire any time the chat window is opened, regardless of the reason. In previous releases, these events only fired if the window was opened by the customer clicking on the built-in launcher. Other methods of opening the chat window, such as session history or custom launchers, did not fire these events.

The event data passed to the listener has a new reason property that indicates the reason the window was opened.
The following HTML snippet is the source for a test page that you can copy and save as a file with a .html extension for testing purposes. You would replace the script element block here with the script elements you copied from the web chat integration setup page.

<html>
<head></head>
<body>
<title>My Test Page</title>
<p>The body of my page.</p>

</body>
</html>
13. Refresh the web page.

For information about the web browsers that are supported by the web chat, see [Browser Support](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=key-conceptsbrowsersupport).

![Chat icon](https://cloud.ibm.com/docs-content/v1/content/a2b18c153837bce00a5b4de496e4b4ca64bbf56e/assistant-data/images/web-chat-icon.png)

The web chat launcher icon is displayed at the end of the page. The icon is blue unless you customize the accent color.

The placement of the web chat icon is always the same regardless of where you paste the script element into the web page source. The chat window is represented by a div HTML element.

A developer can make more involved style changes, including:



* Changing the launcher icon or placement of the launch button. For more information, see the [Using a custom launcher tutorial](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=tutorials-launcher).
* Changing the size or position of the chat window that is displayed when users click the launcher button. For more information, see the [Render to a custom element tutorial](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=tutorials-example-element).



14. Click the icon to open the chat window and talk to your assistant.

!
The Audio response type is supported in the web chat, Facebook, WhatsApp, Slack, SMS, and phone integrations.







 Adding an iframe response type 

Include iframes in your response to embed content from another website directly inside the chat window as an HTML iframe element. An iframe response is useful if you want to enable customers to perform some interaction with an external service without leaving the chat. For example, you might use an iframe response to display the following within the web chat:



* An interactive map on [Google Maps](https://www.google.com/maps)
* A survey using [SurveyMonkey](https://www.surveymonkey.com/)
* A form for making reservations through [OpenTable](https://www.opentable.com/)
* A scheduling form using [Calendly](https://calendly.com/)



In the web chat, an iframe response renders as a preview card that describes the embedded content. Customers can click this card to display the frame and interact with the content.

To add an iframe response type, complete the following steps:



1. Choose iframe.
2. Add the full URL to the external content in the iframe source field.

The URL must specify content that is embeddable in an HTML iframe element. Different sites have varying restrictions for embedding content, and different processes for generating embeddable URLs. An embeddable URL is one that can be specified as the value of the src attribute of the iframe element.

For example, to embed an interactive map using Google Maps, you can use the Google Maps Embed API. (For more information, see [The Maps Embed API overview](https://developers.google.com/maps/documentation/embed/get-started).) Other sites have different processes for creating embeddable content.
9. Paste the same embed script into each web page where you want the assistant to be available to your customers.

You can paste the same script tag into as many pages on your website as you want. Add it anywhere where you want users to be able to reach your assistant for help. However, be sure to add it only once on each page.



You can now test your assistant and see its responses just as your customers would.

Before you go to production with the web chat, however, you will probably want to customize it for your site and for the needs of your customers. For more information, see [Web chat development overview](https://cloud.ibm.com/docs/watson-assistant?topic=watson-assistant-web-chat-develop).
In the web chat, the linked video will render using the embeddable player for the hosting service.

Specify the URL you would use to view the video in your browser (for example, https://www.youtube.com/watch?v=52bpMKVigGU). You do not need to convert the URL to an embeddable form; the web chat will do this automatically.

You can embed videos hosted on the following services:



* [YouTube](https://youtube.com)
* [Facebook](https://facebook.com)
* [Vimeo](https://vimeo.com)
* [Twitch](https://twitch.tv)
* [Streamable](https://streamable.com)
* [Wistia](https://wistia.com)
* [Vidyard](https://vidyard.com)





If you want to display a video title and description above the embedded video in the response, then add them in the fields provided.

Some integration channels ignore titles or descriptions.

If you want to scale the video to a specific display size, specify a number in the Base height field.
3. The Video response type is supported in the web chat, Facebook, WhatsApp, Slack, and SMS integrations.







 Adding an Audio response type 

Include audio clips in your response to share spoken-word or other audible content. In the web chat, a video response renders as an embedded video player. In the phone integration, an audio response plays over the phone.

To add an Audio response type, complete the following steps:



1. Choose Audio.
2. Add the full URL to the hosted audio clip into the Audio source field:



* To link directly to an audio file, specify the URL to a file in any standard format such as MP3 or WAV. In the web chat, the linked audio clip will render as an embedded audio player.
* To link to an audio clip on a supported audio hosting service, specify the URL to the audio clip.
* A new servers property is now available in the web chat configuration options. You can use this property to set up a proxy between your users' browsers and Watson Assistant. For more information, see [Setting up a proxy](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-configurationserversconfig).







 6.5.2 

Release date: 11 July 2022



* Bug fix for date response type.







 6.5.1 

Release date: 15 June 2022



* Bug fix for the Zendesk integration.







 6.5.0 

Release date: 6 June 2022



* New agent events: New events are now fired by the web chat when messages are sent or received during a conversation with a human agent using a service desk integration. For more information, see [Agent events summary](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-eventsagent-summary).
* Bug fixes.







 6.4.1 

Release date: 16 May 2022



* Minimum size: The minimum allowed size of the rendered web chat window has been reduced to satisfy the accessibility requirements defined by the [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/) standard.
* Pop-up windows and tabs from iframes: The web chat now allows pop-up windows and new tabs to be opened from content rendered inside iframe responses.
* Faster responses: Responses received from the assistant are now displayed more quickly and without a ... typing indicator.







 6.4.0 

Release date: 18 April 2022



* Date picker: If you configure a step to collect a Date customer response, the step now uses the new date response type to request that the web chat display a graphical date picker the customer can use to select a date, as an alternative to typing the date in the input field. Existing steps do not automatically inherit this behavior; if you want to use the date picker, you must delete the existing Date response and then re-add it.
* Bug fix: Fixing a bug that prevented the web chat integration preview from working after security was enabled.







 3.2.0 

Release date: 26 October 2020



* Security improvement: If you enable security, you no longer need to include the identityToken property when the web chat is loaded on a web page. If a token is not initially provided, the existing identityTokenExpired event will be fired when the web chat is first opened to obtain one from your handler.
* Starter kit update: The starter kit now allow you to customize the timeout that occurs when the web chat integration checks whether any service desk agents are online.







 3.1.1 

Release date: 22 October 2020



* Accessibility improvement: Changed how the announcement text is generated to prevent announcements from being duplicated. Announcement text is hidden text that is provided for use by screen readers to indicate when dynamic web page changes occur.







 3.1.0 

Release date: 8 October 2020



* Suggestions now allow for trial and error: If customers select a suggestion and find that the response is not helpful, they can open the suggestions list again and try a different suggestion.







 3.0.0 

Release date: 22 September 2020



* Choose when a link to support is included in suggestions: The Suggestions beta feature has moved to its own tab. Now you can enable suggestions even if your web chat is not set up to connect to a service desk solution. That's because now you can control if and when the option to connect to customer support is available from the suggestions list. For more information, see [Showing more suggestions](https://cloud.ibm.com/docs/assistant?topic=assistant-deploy-web-chatdeploy-web-chat-alternate).
* Search result format change: To support the ability to show more than 3 search results in a response, the search skill response type format changed. If you are using pre:receive or receive handlers to process search results, you might need to update your code. The results property was replaced by the primary_results and additional_results properties.
For more information about how to customize it, see [HTML content](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=api-renderhtml).



The web chat is embedded directly on your page, not inside an iframe. Therefore, the cascading style sheet (CSS) rules for your website can sometimes override the web chat CSS rules. The web chat applies aggressive CSS resets, but the resets can be affected if your website uses the !important property in elements where style is defined.



 Passing values 

Here are some common tasks you might want to perform:



* [Setting and passing context variable values](https://cloud.ibm.com/docs/assistant-data?topic=assistant-data-web-chat-configweb-chat-config-set-context)
* [Adding user identity information (if you don't enable security)](https://cloud.ibm.com/docs/assistant-data?topic=assistant-data-web-chat-configweb-chat-config-userid)



For a tutorial that describes how to set context values from the web chat, see [Setting context](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=tutorials-setting-context).



 Setting and passing context variable values 

A context variable is a variable that you can use to pass information to your assistant before a conversation starts. It can also collect information during a conversation, and reference it later in the same conversation. For example, you might want to ask for the customer's name and then address the person by name later on.

The following script preserves the context of the conversation. In addition, it adds an $ismember context variable and sets it to true.

The name that is specified for the skill (main skill) is a hardcoded name that is used to refer to any skill that you create from the product user interface. You do not need to edit your skill name.

<script>
function preSendhandler(event) {
If you use more than one integration type, focus on defining an engaging conversation in the underlying skill. The same skill is used for all integrations. To customize the conversation for the web chat only, you can take the following actions:



* Update the text of a message before it is sent or after it is received, such as to hide personally-identifiable information.
* Pass contextual information, such as the customer's name, from the web chat to the underlying skill. For examples of how to complete common tasks, see [Passing values](https://cloud.ibm.com/docs/assistant?topic=assistant-web-chat-configweb-chat-config-context).
* Change the language that is used by the web chat. For more information, see [Global audience support](https://cloud.ibm.com/docs/assistant?topic=assistant-web-chat-basicsweb-chat-basics-global).
* Render your own custom response types inside the web chat widget, including responses that incorporate code from your website at run time. For a tutorial that shows you how, see [Creating a custom response](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=tutorials-user-defined-response).
* Use React portals to render your custom response type as part of your application. For a tutorial that shows you how, see [Custom responses with React](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=tutorials-react-portals).







 Change the look of the web chat 

You can make simple changes to the color of things like the text font and web chat header from the Style tab of the web chat configuration page. To make more extensive style changes, you can set the CSS style color theme to a different theme or specify your own theme.



* You can choose to use a different base Carbon Design theme. The supported base themes are color themes that are defined by [IBM Carbon Design](https://www.carbondesignsystem.com/guidelines/color/usage/).
This documentation is for the classic Watson Assistant experience. To see the documentation for the new Watson Assistant, please go [here](https://cloud.ibm.com/docs/watson-assistant).



 Applying advanced customizations 

Tailor the web chat to match your website and brand, and to behave in ways that meet your business needs.



 API overview 

The following APIs are available:



* Configuration object: When the embedded web chat widget starts, a configuration object named watsonAssistantChatOptions is used to define the widget. By editing the configuration object, you can customize the appearance and behavior of the web chat before it is rendered.
* Runtime methods: Use the instance methods to perform tasks before a conversation between the assistant and your customer begins or after it ends.
* Events: Your website can listen for these events, and then take custom actions.



A developer can use these APIs to customize the web chat in the following ways:



* [Change how the web chat opens and closes](https://cloud.ibm.com/docs/assistant?topic=assistant-web-chat-configweb-chat-config-open-close)
* [Change the conversation](https://cloud.ibm.com/docs/assistant?topic=assistant-web-chat-configweb-chat-config-convo)
* [Change the look of the web chat](https://cloud.ibm.com/docs/assistant?topic=assistant-web-chat-configweb-chat-config-look)







 Change how the web chat opens and closes 

You can change the color of the launcher icon from the Style tab of the web chat configuration page. If you want to make more advanced customizations, you can make the following types of changes:



* Change the launcher icon that is used to open the web chat widget. For a tutorial the shows you how, see [Using a custom launcher](https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html?to=tutorials-launcher).
* Change how the web chat widget opens.
For example, if you passed the value "mvp:true" in the JSON payload, you can add a dialog flow that checks for this value to define a response that is meant for VIP customers only. Add a dialog node with a condition like this:



Private variable as node condition

 Field Value 

 If assistant recognizes $integrations.chat.private.user_payload.mvp 
 Assistant responds I can help you reserve box seats at the upcoming conference! 







 Web chat: Accessing web browser information 

When you use the web chat integration, information about the web browser that your customer is using to access the web chat is automatically collected and stored. The information is stored in the context.integrations.chat.browser_info object.

You can design your dialog to take advantage of details about the web browser in use. The following properties are taken from the window object that represents the window in which the web chat is running:



* browser_name: The browser name, such as chrome, edge, or firefox.
* browser_version: The browser version, such as 80.0.0.
* browser_OS: The operating system of the customer's computer, such as Mac OS.
* language: The default locale code of the browser, such as en-US.
* page_url: Full URL of the web page in which the web chat is embedded. For example: https://www.example.com/products
* screen_resolution: Specifies the height and width of the browser window in which the web page is displayed. For example: width: 1440, height: 900
* user_agent: Content from the User-Agent request header. For example: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:80.0) Gecko/20100101 Firefox/80.0
* client_ip_address: IP address of the customer's computer. For example: 183.49.92.42





 Example: Using page URL information in your dialog 

You might embed the web chat in multiple pages on your website.
* Firefox ESR (most recent ESR only)
* Opera
* Samsung Mobile Browser
* UC Browser for Android
* Mobile Firefox



For optimal results when rendering the web chat on mobile devices, the <head> element of your web page must include the following metadata element:

<meta name="viewport" content="width=device-width, initial-scale=1" />





 Global audience support 

The underlying skills understand customer messages that are written in any of the languages that are supported by the service. For more information, see [Supported languages](https://cloud.ibm.com/docs/assistant?topic=assistant-language-support). The responses from your assistant are defined by you in the underlying skill and can be written in any language you want.

Even if your skill includes responses in a language other than English, some of the phrases that are displayed in the web chat widget are added by the web chat itself and do not come from the underlying skill. These hardcoded phrases are specified in English unless you choose to apply a different language.

There are language files that contain translations of each English-language phrase that is used by the web chat. You can instruct the web chat to use one of these other languages files by using the instance.updateLanguagePack() method.

Likewise, the web chat applies an American English locale to content that is added by the web chat unless you specify something else. The locale setting affects how values such as dates and times are formatted.

To configure the web chat for customers outside the US, follow these steps:



1. To apply the appropriate syntax to dates and times and to use a translation of the English-language phrases, set the locale. Use the instance.updateLocale() method.

For example, if you apply the Spanish locale (es), the web chat uses Spanish-language phrases that are listed in the es.json file, and uses the DD-MM-YYYY format for dates instead of MM-DD-YYYY.

The locale you specify for the web chat does not impact the syntax of dates and times that are returned by the underlying skill.
2.
The following HTML snippet is the source for a test page that you can copy and save as a file with a .html extension for testing purposes. You would replace the script element block here with the script elements you copied from the web chat integration setup page.

<html>
<head></head>
<body>
<title>My Test Page</title>
<p>The body of my page.</p>

</body>
</html>
3. Refresh the web page.

For information about the web browsers that are supported by the web chat, see [Browser Support](https://cloud.ibm.com/docs/assistant?topic=assistant-web-chat-basicsweb-chat-basics-browsers).

![Chat icon](https://cloud.ibm.com/docs-content/v1/content/417db917d18067d9dcc4cf2612564a9a87c3ddc8/assistant/images/web-chat-icon.png)

The web chat launcher icon is displayed at the end of the page. The icon is blue unless you customize the accent color.

The placement of the web chat icon is always the same regardless of where you paste the script element into the web page source. The chat window is represented by a div HTML element.

A developer can make more involved style changes, such as changing the launcher icon and its placement or the size and position of the chat window. For more information, see [Applying advanced customizations](https://cloud.ibm.com/docs/assistant?topic=assistant-web-chat-config).
4. Click the icon to open the chat window and talk to your assistant.

![Web chat window](https://cloud.ibm.com/docs-content/v1/content/417db917d18067d9dcc4cf2612564a9a87c3ddc8/assistant/images/web-chat-window.png)
5.