Embedding for Wix

A Guide on How to Embed Chatbot Widget for Wix users.

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

Go to "Embed Code" > Select "Embed HTML"

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)

---

Step 2: Retrieve your Chat Widget Embed Code from Wonderchat

1. In a separate window or tab, open Wonderchat App. Get your chat widget embed code from Wonderchat

   • Log in to Wonderchat

   • Within the dashboard, 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:

     Chat Widget Embedding

     Chat Screen Embedding

   

   Go to "Dashboard" and under actions, click on the “⋮” and go to “Embed to website”

   

   Click on "Copy to clipboard"

---

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

Paste the copied code into the space, and click "update" to save changes

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”

Right-click on the HTML settings box, and click on "Pin to Screen"

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

Select the side of the page you'd like to pin the chat widget to

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

Turn on "Show on All Pages"

3. Preview and publish your website.

Click on "Publish" to make changes live

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 [email protected]