# 🔧 How to Enable Dockable Mode

To enable dockable mode on your existing Ask AI widget:

### 1. Go to the My AI Agents Page

Log in at [platform.dappier.com](https://platform.dappier.com) and navigate to **My AI Agents**.

### 2. Select Your AI Agent

Choose the agent you want to configure.

### 3. Click the Ask AI Tab

In the agent editor, open the **"Ask AI"** tab to view your widget configuration options.

### 4. Go to Dockable Configuration Settings

Within the Ask AI tab, under **Configuration Settings**, click on the **"Dockable"** sub-tab.

<img className="block dark:hidden" src="https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-configuration-settings.png?fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=9e96473d411518252e2dc3d14c35617b" alt="Dockable Configuration Settings Interface" data-og-width="758" width="758" data-og-height="902" height="902" data-path="images/dockable-configuration-settings.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-configuration-settings.png?w=280&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=67b65af936225c09a498f264c9dd0ecb 280w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-configuration-settings.png?w=560&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=3f293db339aab072e7c370e969295805 560w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-configuration-settings.png?w=840&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=d3b768e7133b5b41978cdfcc285dc836 840w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-configuration-settings.png?w=1100&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=5275bf43787440d9d96d10990da3d576 1100w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-configuration-settings.png?w=1650&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=bbade7d0bbb4cfc4c27a4ec1f37e7637 1650w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-configuration-settings.png?w=2500&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=044fd2fc32cd2b7cee6ca4f4381ff57e 2500w" />

<img className="hidden dark:block" src="https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-configuration-settings.png?fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=9e96473d411518252e2dc3d14c35617b" alt="Dockable Configuration Settings Interface" data-og-width="758" width="758" data-og-height="902" height="902" data-path="images/dockable-configuration-settings.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-configuration-settings.png?w=280&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=67b65af936225c09a498f264c9dd0ecb 280w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-configuration-settings.png?w=560&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=3f293db339aab072e7c370e969295805 560w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-configuration-settings.png?w=840&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=d3b768e7133b5b41978cdfcc285dc836 840w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-configuration-settings.png?w=1100&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=5275bf43787440d9d96d10990da3d576 1100w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-configuration-settings.png?w=1650&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=bbade7d0bbb4cfc4c27a4ec1f37e7637 1650w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-configuration-settings.png?w=2500&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=044fd2fc32cd2b7cee6ca4f4381ff57e 2500w" />

### 5. Customize Dockable Settings

Adjust the following options to configure your dockable experience:

#### Enable Dockable

Toggle this on to activate dockable mode. This will display a floating Ask AI icon on your site.

#### Show Inline Widget

Toggle this on if you also want the Ask AI widget to appear inline on your page. Turn it off to display only the dockable version.

#### Trigger Prompts Open Dockable Widget

Enable this to allow suggested prompts to automatically open the dockable widget and display responses there.

#### Dockable Container Width (Desktop)

Set the width of the expanded dockable widget on desktop devices (default is 380px).

#### Dockable Icon Position

Choose where the icon appears: **bottom-right** or **bottom-left**.

#### Offset Height (px)

Add a vertical pixel offset if needed to prevent overlap with sticky footers or other site elements.

### 6. Update your widget

Click **Update Widget** to apply your settings.

Once updated, you'll see the dockable icon appear on your site—typically in the bottom-right or bottom-left corner depending on your configuration.

## 📷 Example Dockable Widget in Action

The dockable icon will appear as a floating chat button that, when clicked, opens the chat container overlay on your page.

<img className="block dark:hidden" src="https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-widget-example.png?fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=31e53166eca5622d38886c37b0f62df6" alt="Example of Dockable Ask AI Widget showing chat interface overlay" data-og-width="461" width="461" data-og-height="728" height="728" data-path="images/dockable-widget-example.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-widget-example.png?w=280&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=2f61bb909db4e649c4cc458baabb41be 280w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-widget-example.png?w=560&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=98fe6430dde4085782d76273a933d40f 560w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-widget-example.png?w=840&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=5f8b2b300fe1f40556123f1c4f539c6f 840w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-widget-example.png?w=1100&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=c3c3cb1a01e5223bf14e457d668eb0f0 1100w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-widget-example.png?w=1650&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=95b3d0d994af816811d5b1b6a143a737 1650w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-widget-example.png?w=2500&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=59f17b2159355cff693b37918f9a191f 2500w" />

<img className="hidden dark:block" src="https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-widget-example.png?fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=31e53166eca5622d38886c37b0f62df6" alt="Example of Dockable Ask AI Widget showing chat interface overlay" data-og-width="461" width="461" data-og-height="728" height="728" data-path="images/dockable-widget-example.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-widget-example.png?w=280&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=2f61bb909db4e649c4cc458baabb41be 280w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-widget-example.png?w=560&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=98fe6430dde4085782d76273a933d40f 560w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-widget-example.png?w=840&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=5f8b2b300fe1f40556123f1c4f539c6f 840w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-widget-example.png?w=1100&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=c3c3cb1a01e5223bf14e457d668eb0f0 1100w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-widget-example.png?w=1650&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=95b3d0d994af816811d5b1b6a143a737 1650w, https://mintcdn.com/dappier-20/GPubPuGcoHagv5PD/images/dockable-widget-example.png?w=2500&fit=max&auto=format&n=GPubPuGcoHagv5PD&q=85&s=59f17b2159355cff693b37918f9a191f 2500w" />

## 💡 Pro Tips

* Dockable widgets work great on both desktop and mobile.
* Disabling the inline widget is ideal when you want a cleaner layout or when space is limited.

## 🧰 Troubleshooting

**Dockable icon not showing?**
Double-check that dockable mode is enabled and your site includes the proper embed code.

**Prompt not opening dockable icon?**
Ensure the "Trigger Prompts Open Dockable Widget" setting is enabled and the prompt text matches your configuration.

## 📩 Need Help?

For further assistance or advanced customization, reach out to us at [support@dappier.com](mailto:support@dappier.com) or contact your Dappier account manager.