> ## Documentation Index
> Fetch the complete documentation index at: https://developer.watson-orchestrate.ibm.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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()`](customPanels_getPanel) first to get the panel instance.

## Syntax

```javascript theme={null}
await customPanel.open(options);
```

## Parameters

**options** `object`

Optional configuration for the panel header and display.

### `options` properties

**title** `string`

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

**hideBackButton** `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`.

**hideCloseButton** `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`.

**hidePanelHeader** `boolean`

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

## Returns

**Promise\<void>**

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:

```javascript theme={null}
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:

```javascript theme={null}
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:

```javascript theme={null}
const customPanel = instance.customPanels.getPanel();

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

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

> **[Do you need practical examples?](https://www.ibm.com/docs/SSAVQO/deploy/web_chat_agent/tutorials/tutorials_lp.html)**
>
> Learn how to apply the features available for embedded chat into your implementation with guidance and examples.