Skip to main contentWatson Assistant web chat

Custom content

You can control how custom content looks and behaves, and make sure it matches core web chat functionality.

Overview

Web chat supports all of the response types supported by dialog skills. This means it can render buttons or images on your website without any additional configuration.

Web chat also supports special rendering behavior you can use to customize your content. Web chat supports full HTML, CSS, and JavaScript in text responses from your dialog skill. It also supports a subset of Markdown, which means that you can author multichannel content that is compatible with Watson Assistant integrations like Facebook Messenger and Slack, without using HTML.

With user-defined response types, you can augment your dialog skill responses by injecting code from your website into web chat at run time. This enables you to write much more powerful response types than those you can write in your dialog.

Any CSS you define for either HTML in a text response or for a user-defined response type should be prefixed by #WACContainer.WACContainer. Web chat uses an aggressive CSS reset in order to allow web chat to be directly embedded on your page instead of being an iFrame. In order to override our resets you will need the CSS specificity provided by using the prefix.

Example

#WACContainer.WACContainer .myAwesomeClass {
  background: hotpink;
  color: indigo;
}

HTML content

If you include HTML (including style and script tags) in your text response from your dialog skill, web chat will render those elements as provided. Web chat comes configured so that all elements (such as button or table) will automatically have styling applied so they match the web chat content.

In addition to native elements, web chat also provides helper CSS classes that enable you to build more complex non-native layouts that match native web chat layouts. These classnames are available to use in custom response types and writeable elements.

ClassnameDescription
ibm-web-chat-cardAdds styling for a card like those used in image, search results, and other native response types in your own custom response type.
ibm-web-chat-card-home-screenAdds styling for a card like those used in home screen, including correct padding and spacing.
ibm-web-chat-card-home-screen--transparentAdds styling for a transparent card used in home screen, including correct padding and spacing.
ibm-web-chat-card-home-screen--accentAdds styling for a card the color of your accent color used in home screen, including correct padding and spacing.
ibm-web-chat-card-home-screen__title-outerAdds styling for a title for either a .ibm-web-chat-card-home-screen or.ibm-web-chat-card-home-screen--transparent based card.
Example

<div class="ibm-web-chat-card-home-screen__title-outer"></div>
<div class="ibm-web-chat-card-home-screen"></div>

ibm-web-chat-card-home-screen__title-innerAdds styling for a title for either a .ibm-web-chat-card-home-screen or.ibm-web-chat-card-home-screen--accent based card.
Example

<div class="ibm-web-chat-card-home-screen">
  <div class="ibm-web-chat-card-home-screen__title--inner"></div>
</div>

User-defined responses

In addition to rendering HTML content in responses, web chat can render content from your own HTML, CSS, or JavaScript on your page, using a user-defined response type. This allows for a much better authoring experience for development, and it enables you to make changes to responses without editing your dialog skill. These user-defined response types also inherit styling and helper CSS classes from web chat, just like text responses with HTML.

To learn more about user-defined response types, see the tutorial .

Markdown

If you are authoring your dialog to support other channels (such as Facebook or Slack) in addition to Web Chat, HTML might not be supported for all channels. As an alternative, web chat supports a limited subset of Markdown. For italics, bold, and URLs, you can use Markdown tagging that the IBM-provided integrations parse into formats that the corresponding channels understand. For more information, see the Watson Assistant documentation.