How to Embed a Chat Screen
A Guide on How to Embed a Chat Screen on your Website.
Last updated
A Guide on How to Embed a Chat Screen on your Website.
Last updated
You can also embed your Wonderchat bot as a chat interface within a page. Here's how.
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 pop-up, go under the "Pages" 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:
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.
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.
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.
After embedding the code, save and publish your changes. The chatbot should now be visible and ready to interact with visitors.
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 support@wonderchat.io
