Skip to main content

Intro Panel

This is an initial overlay panel that is displayed in the center of the chat.

How To

Insert your markup between the Deep Chat element tags and the component will render it inside the intro panel.


width: 200px;
background-color: #f3f3f3;
border-radius: 10px;
padding: 12px;
padding-bottom: 15px;
display: none;
<div style="text-align: center; margin-bottom: 8px; font-size: 16px">
<b>Intro panel</b>
<div style="font-size: 15px; line-height: 20px">
Insert a description to help your users understand how to use the component.

Depending on your framework of choice - the intro panel may briefly be visibile before the component fully loads. To prevent this, you can set its display style to "none" and it will automatically be set to "block" once it is ready (this property needs to be set in a style attribute/property and not in a class).

Style and Events

Because Deep Chat is a shadow element - the intro panel will not have access to the CSS classes and JavaScript in your app. To get around this, we recommend using the htmlClassUtilities property which will allow you to define reusable styling and bind functions to your app's state.


// Markup

<deep-chat id="chat-element">
<div style="display: none">
<div class="custom-button">
<div class="custom-button-text">"Explain quantum computing"</div>
<div class="custom-button" style="margin-top: 15px">
<div class="custom-button-text">"Creative ideas for a birthday"</div>
<div class="custom-button" style="margin-top: 15px">
<div class="custom-button-text">"Hello World in JavaScript"</div>

// using JavaScript for a simplified example

const chatElementRef = document.getElementById('chat-element');

chatElementRef.htmlClassUtilities = {
['custom-button']: {
events: {
click: (event) => {
const text =[0].innerText;
chatElementRef.submitUserMessage(text.substring(1, text.length - 1));
styles: {
default: {backgroundColor: '#f2f2f2', borderRadius: '10px', padding: '10px', cursor: 'pointer', textAlign: 'center'},
hover: {backgroundColor: '#ebebeb'},
click: {backgroundColor: '#e4e4e4'},
['custom-button-text']: {styles: {default: {pointerEvents: 'none'}}},


Controls the intro panel's parent-most element's style. This is most useful for changing the base styling of the automatically generated intro panels when using services in the directConnection property.


introPanelStyle='{"backgroundColor": "#fffeec"}'
directConnection='{"openAI": {"audio": true, "key": "placeholder-key"}}'

To remove an automatically generated panel - add empty div tags: <deep-chat><div></div></deep-chat> .