How to Embed a Chat Screen
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"
Step 2: Adjust Dimensions (Optional)
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:
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.
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.
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 support@wonderchat.io
Last updated