Custom UI content

Overview

You can extend the look of the AI chat to match the needs of your brand and customer workflows in many ways. Learn how to inject custom code into the AI chat to meet your users’ needs better.

For more information, see layout, theming, customization of the header, launcher, or the homescreen for customizations that don't require custom code.

For a list of standard response types that the AI chat can accept, see response_types. You can go to the properties for each response_type. For more information, see GenericItem.

Customizing responses from the assistant

Rich text responses

The AI chat also supports basic styling inside text responses to match the theme of your AI chat, both with Markdown or HTML content returned from the Assistant. Using Markdown instead of HTML in your text responses is the recommendation. It allows adding channels that do not support HTML (such as Facebook, Slack, or WhatsApp) without having to rewrite your content.

Markdown

The AI chat supports common Markdown syntax (bold, italics, lists, tables, code blocks, headings, blockquotes, and so on) in the text response type. The AI chat follows standard CommonMark rules.

HTML content

If you include HTML (including style and script tags) in your text response from your assistant, the AI chat renders those elements as provided. A better approach is to use a user_defined response instead of adding HTML directly to your responses to make adding support for channels that do not support HTML easier.

User-defined responses

In addition to rendering HTML content in responses, the AI chat can render content from your own HTML, CSS, or JavaScript on your page by using a user_defined response type. It allows for a better authoring experience for development and enables you to change responses without editing your assistant. You can even use portals in advanced frameworks like React to render content from your main application.

To show custom content, you return the following from your server as a GenericItem. Refer to the following example.

{
  response_type: 'user_defined',
  user_defined: {
    // A unique name for each UI component.
    type: 'my-unique-name',
    // Any other custom metadata you need for rendering.
    foo: 'bar',
    baz: {
      boz: true
    }
  }
}

The user_defined response injects into a slot within the AI chat's ShadowRoot. This means that it can be styled from global CSS and have a small amount of the CSS inherited from the AI chat (font styling, and so on) styles.

For more information, see the example documentation for React and web components.

Using Carbon Components

You can use Carbon components inside writeable elements or user_defined response types. Since all these components render into a slot inside the AI chat's ShadowDOM, you need to provide any Carbon styles in the global CSS for them to render properly. Any CSS variables that you update in the AI chat by choosing a theme or calling updateCSSVariables apply to the Carbon components rendered inside the chat. So, if your host page uses a light theme and the AI chat uses a dark theme, any carbon components injected into the AI chat get dark theme values.

Cards

Cards provide a way to compose complex responses in a card. To see examples and experiment with making your own cards, use the Response editor.

Customizing the AI chat container

Writeable elements

The AI chat strategically provides access to various elements around the AI chat. You can directly write to these elements or write to them as portals from your application if you use advanced frameworks like React, Angular, Vue, or a web component.

For more information, see Learn more about writeable elements

Custom Panel

The AI chat opens an overlay panel with custom content anytime. Panels are effective for use cases that range from pre-chat content forms, post-chat feedback forms, or multistep processes. You can open the panel at any time, whether from an event, a user_defined response, or even an action a user takes on your website.

For more information, see Learn more about the custom panel

Launcher

The AI chat launcher welcomes and engages customers so they know where to find help if they need it. For more information about the default launcher behavior, see launcher appearance and behavior.