> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chatling.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Webflow

> Learn how to add Chatling to your Webflow website

1. Go to your dashboard.
2. Click `Deploy` button in the sidebar menu.

<img src="https://chatling-assets.b-cdn.net/deploy-ai-agent.jpg" width="500" alt="Open Deploy page" />

3. Click the `Manage` button under the `Website Widget` option.

<img src="https://chatling-assets.b-cdn.net/manage-website-widget-chatbot.jpg" width="600" alt="Manage website widget" />

4. Design the appearance of the widget by clicking the `Open widget designer` button.

<img src="https://chatling-assets.b-cdn.net/open-website-widget-designer.jpg" width="500" alt="Open website widget designer" />

5. Select the display mode for your chatbot, such as "Floating Chat", "Inline", or "Fullscreen".

<img src="https://chatling-assets.b-cdn.net/configure-website-widget-display-type.jpg" width="500" alt="Configure website widget display type" />

6. Copy the widget code.

<img src="https://chatling-assets.b-cdn.net/website-widget-code.jpg" width="500" alt="Copy widget code" />

7. Go to your Webflow dashboard and open the website where you want to add the widget.

<img src="https://chatling-assets.b-cdn.net/ZhF7YRrFxhpPBWb3.jpg" width="600" />

8. Click the webflow icon in the top left and select `Site settings`.

<img src="https://chatling-assets.b-cdn.net/ZhF7YhrFxhpPBWb4.jpg" width="350" />

9. Click on `Custom code` from the sidebar.

<img src="https://chatling-assets.b-cdn.net/ZhF7XxrFxhpPBWb1.jpg" width="450" />

10. Paste the widget code in the `Head code` textbox and click `Save`.

<img src="https://chatling-assets.b-cdn.net/ZhF7XRrFxhpPBWbz.jpg" width="600" />

11. Publish the website. The widget will now be appear on your Webflow website.

<img src="https://chatling-assets.b-cdn.net/ZhF8fRrFxhpPBWb.jpeg" width="600" />