Chat Screen Embedding

A Guide on How to Embed a Chat Screen on your Website.

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

---

Step 1: Go to Dashboard

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

In the Dashboard page, Click on the “⋮” and go to “Embed to website"

Step 2: Adjust Dimensions (Optional)

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

in this pop-up, go under the "Page" option tab

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:

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.

Click on "Preview Page" to preview chatbot

In a new window, you'll see the preview of the chatbot

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.

Click on "Copy to Clipboard"

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