# Chat Screen Embedding

You can also embed your Wonderchat bot as a chat interface within a page. Here's how.

***

## Step 1: Go to Chatbots page

To embed our chatbot as a page, you can go to your Dashboard and under the actions column, click on **"Embed to website"**

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2FKuZ9c0ipeBeV6lFaaClA%2Fimage.png?alt=media&#x26;token=d1daa81e-c0aa-4711-9078-21c64f4bd412" alt=""><figcaption></figcaption></figure>

## **Step 2: Adjust Dimensions (Optional)**

In the pop-up, go under the **"Pages"** tab.

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-3cac6df3e07dcc0b3349831f5876cc4a01c2f9ef%2Fimage.png?alt=media" alt=""><figcaption><p>in this pop-up, go under the "Page" option tab</p></figcaption></figure>

\
Before embedding, you can modify the `width` and `height` attributes of the iframe code to customize how the chatbot appears on your page. By default, both the `width` and `height` are set to 100%, meaning the chatbot will occupy the full width and height of the container it's placed in. You can set specific values if needed, like `500px` for height or width, depending on your design preferences.

Example code:

```html
htmlCopy code<iframe 
  src="https://app.wonderchat.io/chatbot/cm0w2lbcf0fyienmkv56prpce"
  style="border-width: 0px;" 
  allow="clipboard-read; clipboard-write" 
  width="100%" 
  height="100%">
</iframe>
```

## **Step 3: Preview the Chatbot**

After adjusting the dimensions, you can use the **Preview Page** button to see how the chatbot will look on your webpage. This ensures that the size and placement are just right before finalizing the embed.

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-97870c0aefba6825da97325799093baf7285a3c7%2Fimage.png?alt=media" alt=""><figcaption><p>Click on "Preview Page" to preview chatbot</p></figcaption></figure>

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-c9f2bc9d457a3b4a42891acddbda428a68323982%2Fimage.png?alt=media" alt=""><figcaption><p>In a new window, you'll see the preview of the chatbot</p></figcaption></figure>

## **Step 4: Copy the Embed Code**

Once you’re satisfied with the dimensions, copy the provided embed code as shown below. This code will be pasted into the HTML of your website.

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

## **Step 5: Paste into Your Web Page**

Paste the copied code into the desired location within the HTML of your website. The chatbot will automatically load in that section of the page.

## **Step 6: Save and Publish**

After embedding the code, save and publish your changes. The chatbot should now be visible and ready to interact with visitors.

#### Advanced Customization (Optional)

* If you want to further customize the appearance of the chatbot widget, enable **Advanced CSS Customization**. This allows for more detailed styling options, which can be tailored to better match your website's design.

That's it! Your chatbot should now be embedded on your website and ready to interact with visitors.

***

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/how-to-embed-a-chat-screen.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.