customPanel.open()

Opens the custom panel and displays it over the chat window. The panel takes up the full size of the chat window by default. Call instance.customPanels.getPanel() first to get the panel instance.

Syntax

await customPanel.open(options);

Parameters

object

Optional configuration for the panel header and display.

`options` properties

string

The title displayed in the panel header. The chat font family applies to this title.

boolean

When set to true, hides the Back button in the panel header. The Back button closes the custom panel and returns the user to the chat. Default: false.

boolean

When set to true, hides the Close button in the panel header. The Close button closes and minimizes the entire chat window. Default: false.

boolean

When set to true, hides the entire panel header, including all buttons and the title. Default: false.

Returns

Returns a promise that resolves when the panel is open.

Examples

The following example opens the custom panel with a title and default header buttons:

const customPanel = instance.customPanels.getPanel();

customPanel.hostElement.innerHTML = `<p>Terms and conditions...</p>`;

await customPanel.open({ title: 'Terms and Conditions' });

The following example hides the Back button so the user cannot dismiss the panel without completing the required action:

const customPanel = instance.customPanels.getPanel();

customPanel.hostElement.innerHTML = `
  <div>
    <p>Please accept the terms to continue.</p>
    <button id="accept-btn">Accept</button>
  </div>
`;

document.getElementById('accept-btn').addEventListener('click', async () => {
  await customPanel.close();
});

await customPanel.open({
  title: 'Terms and Conditions',
  hideBackButton: true,
  hideCloseButton: true,
});

The following example opens the panel without a header:

const customPanel = instance.customPanels.getPanel();

customPanel.hostElement.innerHTML = `<div id="my-widget"></div>`;

await customPanel.open({ hidePanelHeader: true });

Do you need practical examples?

Learn how to apply the features available for embedded chat into your implementation with guidance and examples.

Release Notes

Get Started

Build

Deploy

Analyze

Developer experience

Legal notices

Syntax

Parameters

`options` properties

Returns

Examples

Do you need practical examples?

​Syntax

​Parameters

​options properties

​Returns

​Examples

Do you need practical examples?

Syntax

Parameters

`options` properties

Returns

Examples