Skip to main content

HTML

You can insert and render your own code inside chat message bubbles using the html property.
If you want to use your code for an introduction panel - check out Intro Panel instead.

Getting started​

The html property can be used in server Responses and is stored inside the chat using the MessageContent format. It must describe full (not partial) elements or simple plain text. Here is an example for initialMessages:

<deep-chat initialMessages='[{"html": "<button>Button</button>", "role": "user"}]'></deep-chat>

htmlClassUtilities​

Because Deep Chat is a shadow element and your html is rendered inside it - the resulting elements will not be able to access the CSS and JavaScript in your app. To help with this, you can use this object to declare reusable styling and bind your app's functions to the elements via their class names.
events is an object that accepts properties with keys from GlobalEventHandlersEventMap (same as the string used for addEventListener(HERE), e.g. "mousedown") or any custom event name and accepts a function as the value.
styles defines the styles applied to the element for different mouse states.

Example​

// using JavaScript for a simplified example

chatElementRef.htmlClassUtilities = {
  ['custom-button']: {
    events: {
      mouseenter: (event) => (event.target.innerText = 'hovering'),
      mouseleave: (event) => (event.target.innerText = 'hovered'),
    },
    styles: {
      default: {padding: '3px 8px', cursor: 'pointer'},
      hover: {backgroundColor: 'yellow'},
    },
  },
  ['ai-button']: {
    styles: {
      default: {color: 'green'},
    },
  },
};
chatElementRef.initialMessages = [
  {html: '<button class="custom-button">Hoverable</button>', role: 'user'},
  {html: '<button class="custom-button ai-button">Hoverable</button>', role: 'ai'},
];

Deep Chat Classes​

Deep Chat comes with a pre-defined set of classes that can be used to add styling/functionality to your elements.
deep-chat-button - applies default button styling.
deep-chat-suggestion-button - when clicked sends the text that is inside the button as a new user message.
deep-chat-temporary-message - removes the message when a new one is added to the chat. This class needs to be applied to the parent-most element in the html string. This message is also not tracked in state.

Basic Example​

// using JavaScript for a simplified example

chatElementRef.initialMessages = [
  {html: '<button class="deep-chat-button deep-chat-suggestion-button">Hello</button>', role: 'ai'},
  {html: '<button class="deep-chat-suggestion-button deep-chat-temporary-message">Goodbye</button>', role: 'user'},
];
info

If you have suggestions for new classes that you think would be useful, please raise an issue on GitHub.

Bubble Style​

To unset/change the message bubble styling, use the html property in the messageStyles object.

Example​

<deep-chat messageStyles='{"html": {"shared": {"bubble": {"backgroundColor": "unset"}}}}'></deep-chat>

Custom Elements​

If the html string includes your own custom tags (e.g. <custom-element>), they cannot be for the components in your framework and must instead be for custom elements or shadow DOM elements (web components).
To create new web components - use any of the following approaches:

  • Most frameworks include a way to convert their components into shadow elements/web components. Please refer to their documentation for more information.
  • You can also create new web components in your app using basic JavaScript - refer to this guide.
  • Web components can ultimately be created in any way you desire using any framework outside of your project and imported the same ways as you do deep-chat. To note, this approach may require you to first import or use them in your app's code in order for your bundler to register them.

Example​

// This is a simple way to create web components via JavaScript, refer to all possibilities above

// JavaScript
class CustomElement extends HTMLElement {
  constructor() {
    super();
    this.textContent = 'This is a Custom Element';
  }
}

customElements.define('custom-element', CustomElement);

// HTML
<deep-chat initialMessages='[{"html": "<custom-element/>", "role": "user"}]'></deep-chat>
info

When passing values into your custom element, you need to pass them as attributes (they must be stringified). E.g. {"html": "<custom-element count="0" name="jeff"></custom-element>"}

info

If you are experiencing problems with embedding your custom elements inside the chat, you can always raise an issue on GitHub. When you do please provide us with either a sandbox example or sufficient information to enable us to replicate the problem.

Examples​

Suggestion buttons

Basic suggestion buttons using Deep Chat Classes.

// using JavaScript for a simplified example

chatElementRef.initialMessages = [
  {
    html: `
      <div class="deep-chat-temporary-message">
        <button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 5px">What do shrimps eat?</button>
        <button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 6px">Can a shrimp fry rice?</button>
        <button class="deep-chat-button deep-chat-suggestion-button" style="margin-top: 6px">What is a pistol shrimp?</button>
      </div>`,
    role: 'ai',
  },
];

chatElementRef.messageStyles = {html: {shared: {bubble: {backgroundColor: 'unset', padding: '0px'}}}};

Controlled responses

Preset user responses which can be used to give feedback, follow a conversation path or control a service.

// using JavaScript for a simplified example

chatElementRef.initialMessages = [
  {
    html: `
      <div class="deep-chat-temporary-message">
        <button class="deep-chat-button deep-chat-suggestion-button" style="border: 1px solid green">Yes</button>
        <button class="deep-chat-button deep-chat-suggestion-button" style="border: 1px solid #d80000">No</button>
      </div>`,
    role: 'user',
  },
];

chatElementRef.messageStyles = {
  html: {shared: {bubble: {backgroundColor: 'unset', padding: '0px', width: '100%', textAlign: 'right'}}},
};

Feedback

Add feedback buttons to response messages.

// using JavaScript for a simplified example

chatElementRef.initialMessages = [
  {
    html: `<div class="feedback">
        <div class="feedback-text">The powerhouse of a cell.</div>
        <img class="feedback-icon feedback-icon-positive" src="path-to-svg.svg">
        <img class="feedback-icon feedback-icon-negative" src="path-to-svg.svg">
      </div>`,
    role: 'ai',
  },
  {
    html: `<div class="feedback">
      <div class="feedback-text">A labrador.</div>
      <img class="feedback-icon feedback-icon-positive" src="path-to-svg.svg">
      <img class="feedback-icon feedback-icon-negative" src="path-to-svg.svg">
    </div>`,
    role: 'ai',
  },
];

chatElementRef.messageStyles = {
  default: {shared: {bubble: {maxWidth: '95%', width: '100%', marginTop: '10px'}}},
};

chatElementRef.htmlClassUtilities = {
  feedback: {styles: {default: {display: 'flex'}}},
  'feedback-text': {styles: {default: {width: 'calc(100% - 42px)', paddingTop: '2px'}}},
  'feedback-icon': {
    styles: {
      default: {width: '20px', height: '20px', cursor: 'pointer', borderRadius: '5px'},
      hover: {backgroundColor: '#d1d1d1'},
    },
  },
  'feedback-icon-positive': {events: {click: () => console.log('positive response')}},
  'feedback-icon-negative': {
    events: {click: () => console.log('negative response')},
    styles: {default: {transform: 'rotate(180deg)', marginLeft: '3px'}},
  },
};

Custom Element - Chart

Add a chart component (e.g. using Google Chart). Live example for React.

// using JavaScript for a simplified example

chatElementRef.initialMessages = [
  {
    html: `
      <div>
        <div style="margin-bottom: 10px">Here is an example chart:</div>
        <google-chart
          style="width: 220px; height: 200px"
          data='[["Planet", "Score"], ["Earth", 50], ["Moon", 100], ["Saturn", 80]]'
          options='{"legend": "none"}'>
        </google-chart>
      </div>
      `,
    role: 'ai',
  },
];

Custom Element - Table

Add an interactive table component (e.g. using Active Table).

// using JavaScript for a simplified example

chatElementRef.initialMessages = [
  {
    html: `
      <div>
        <div style="margin-bottom: 10px">Here is a simple example:</div>
        <active-table
          data='[["Planet", "Mass"], ["Earth", 5.97], ["Mars", 0.642], ["Jupiter", 1898]]'
          cellStyle='{"width": "80px"}'
          displayAddNewRow="false"
          displayAddNewColumn="false">
        </active-table>
      </div>`,
    role: 'ai',
  },
];