# Embedding for Wix

Embedding a Wonderchat widget into your Wix website can help you provide a better user experience by allowing visitors to interact with you or your support team directly. In this guide, we'll walk you through the process of embedding a chat widget code into your Wix website step by step.

For the chat widget to be visible to your users, it is recommended that you add it to both the desktop and mobile version of your site.

***

## Step 1: Login to Wix Editor

Here is a step by step guide on how to embed your chat widget to your wix desktop site:

1. Log in to your Wix account and navigate to the Wix Editor.
   * Go to wix.com and sign in to your account.
   * Select the site you want to add the chat widget to from the "My Sites" page.
   * Click "Edit Site" to open the Wix Editor.
2. Add an HTML iframe to your site.
   * In the Wix Editor, click the "+" (Add) button on the left-hand side menu.
   * Scroll down and select "Embed Code" from the options.
   * Click "Embed HTML" and you will be redirected to the HTML settings page asking for your chat widget code

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-b55bbb45836439b1abd9ea5706db4f27d1f4d704%2Fimage.png?alt=media" alt=""><figcaption><p>Go to "Embed Code" > Select "Embed HTML"</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-d08467bb0fe3a8d2c89b63b95ccc83a764fd8022%2Fimage.png?alt=media" alt=""><figcaption><p>In the pop-up, select the "Code" option and paste the Chat Widget Embed Code from Wonderchat (For steps to retrieve Chat Widget Embed Code, see below)</p></figcaption></figure>

***

## Step 2: Retrieve your Chat Widget Embed Code from Wonderchat

1. In a separate window or tab, open [**Wonderchat App**](https://app.wonderchat.io/). Get your chat widget embed code from Wonderchat

   * Log in to Wonderchat
   * Within the chatbots page, click on the actions button and click on embed to website to copy the code for your chat widget
   * 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")

   <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>

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

***

## Step 3: Embed Widget into Desktop (Website View)

#### 1. Paste the chat widget embed code into the HTML iframe.

* Go back to the Wix Editor
* Paste the chat widget embed code you copied in previous step into the "Add your code here" box.
* Click "Update" to save the changes

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-01c22df051d8d1dc93ad572ef90140b43f080f11%2Fimage.png?alt=media" alt=""><figcaption><p>Paste the copied code into the space, and click <strong>"update"</strong> to save changes</p></figcaption></figure>

#### 2. (Optional) Adjust the iframe Size and Position

* You can resize the HTML iframe by clicking and dragging its corners. We recommend the dimensions of **384 (width)** x **622 (height)**.
* To change its position, click and drag the iframe to the desired location on your website. We recommend that you position it on either the **left or right** of your page.
* Once you are happy with the size of the widget, right click on the HTML settings box and click on “pin to screen”

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-4c4fce054811b6ab9a6b563185ab3e8bf1b36aa9%2Fimage.png?alt=media" alt=""><figcaption><p>Right-click on the HTML settings box, and click on <strong>"Pin to Screen"</strong></p></figcaption></figure>

* Next, select the side of the page you want to pin the chat widget to

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-f378c582c565b058b2f99435e861de28f128c307%2Fimage.png?alt=media" alt=""><figcaption><p>Select the side of the page you'd like to pin the chat widget to</p></figcaption></figure>

* Select “show on all pages” for your widget to appear on all pages

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-ad4341b4fd4f07fad29239070892463072766830%2Fimage.png?alt=media" alt=""><figcaption><p>Turn on "Show on All Pages"</p></figcaption></figure>

#### 3. Preview and publish your website.

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

Once you're satisfied with the chat widget's appearance, click **"Publish"** in the top right corner to make the changes live on your website, and your wonderchat widget should be ready for use!

***

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-wix.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.