# Embedding for Webflow

Embedding a chat widget for Webflow is a simple process that can be completed in a few easy steps. Here's how to do it.

***

## Step 1: Login to Wonderchat

Sign in to [**Wonderchat App**](https://app.wonderchat.io/)

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-2c8186419304d088fca096bb1ac3aaceb2c056f8%2Fimage.png?alt=media" alt=""><figcaption><p>Login to Wonderchat App (<a href="https://app.wonderchat.io/auth/sign-in">https://app.wonderchat.io/auth/sign-in</a>)</p></figcaption></figure>

***

## Step 2: Go to Chatbots

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2FHC5b2m6UNo71eEAGEHSI%2Fimage.png?alt=media&#x26;token=3047d304-7784-4898-86ab-3f8b69bb520f" alt=""><figcaption></figcaption></figure>

Inside your Wonderchat chatbot page, click on the action dropdown button **(⋮)** to select the **“Embed to website”** option.

## Step 3: Copy Embed Code

This code will be used to embed the widget on your Webflow site. You may choose between the formats you wish to embed:

* Chat Widget
* Chat Screen

### To Embed as a Chat Widget

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-565bd61ca2b2f4eeedc805523edddd6e9cac50ad%2Fimage.png?alt=media" alt=""><figcaption><p>Go under "Widget" tab > click "Copy to Clipboard"</p></figcaption></figure>

### To Embed as a Chat Screen

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-0cf6e14b25bd6a5bd82a3b3e27af64e96b892f0a%2Fimage.png?alt=media" alt=""><figcaption><p>Go under "Page" tab > click "Copy to clipboard"</p></figcaption></figure>

### (Optional) Adjust Chatbot Size

If the chatbot widget needs to be resized or repositioned, you can modify your changes on the [**Wonderchat App**](https://app.wonderchat.io/) before copying the embed code over.

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-5e2b22c2cb70f43c99bdcfdb67117a79b7a2d781%2Fimage.png?alt=media" alt=""><figcaption><p>Configure your customizations and preview widget, before copying the embed code over</p></figcaption></figure>

For a more detailed guide on how customize your chat widget or page, see the pages below:

[how-to-embed-a-chat-widget](https://docs.wonderchat.io/setup-guides/adding-your-chatbot-to-your-website/how-to-embed-a-chat-widget "mention")

[how-to-embed-a-chat-screen](https://docs.wonderchat.io/setup-guides/adding-your-chatbot-to-your-website/how-to-embed-a-chat-screen "mention")

***

## Step 4: Login to your Webflow Account

Log into your Webflow account and ensure that you are on a **premium subscription plan**, as this is the only way to access the 'embed' function.

***

## Step 5: Add an Embed Element

1. Navigate to the page where you want to embed the widget.
2. To ddd an Embed element: In the **Elements panel**, click on the "**Embed element"** and drag it to the location on the page where you want to embed the widget.
3. Paste the widget's code: Double-click on the Embed element to open the code editor. Paste the widget's code into the editor and click the '**Save'** button.
4. Preview the page: Click the '**Preview'** button to preview the page and make sure the widget is displaying correctly.

## Step 6: Test Your Chatbot

Ensure the chatbot works properly by interacting with it on your live store. Test the chatbot's functionality across different devices (desktop, tablet, mobile) to make sure it's responsive.

That's it! You have successfully embedded a chat widget on your Webflow site. Visitors to your site can now use the chat widget to get in touch with you.

***

If you have any more questions, feel free to reach out to us at <mark style="color:purple;">**<support@wonderchat.io>**</mark>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wonderchat.io/setup-guides/adding-your-chatbot-to-your-website/embedding-for-webflow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.