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.

Example​

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

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.

Example​

// Markup

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

// using JavaScript for a simplified example

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

chatElementRef.htmlClassUtilities = {
  ['custom-button']: {
    events: {
      click: (event) => {
        const text = event.target.children[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'}}},
};

introPanelStyle​

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.

Example​

<deep-chat
  introPanelStyle='{"backgroundColor": "#fffeec"}'
  directConnection='{"openAI": {"audio": true, "key": "placeholder-key"}}'
></deep-chat>
tip

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