How to Embed a Chat Widget
A Guide on How to Embed a Chat Widget on your Website.
Embedding a Chat Widget for a General Site
In today's digital age, chat widgets are an essential tool for businesses you to connect with your customers. Embedding a chat widget on your general site can help you provide instant support to your customers, increase engagement, and ultimately boost your sales. An automated Chatbot like Wonderchat can make your website and your value proposition even more appealing.
Here are steps you can take to instantly embed your Wonderchat widget into your site.
Step 1: Click on Widget Embedding Option
Login to Wonderchat:
From your Dashboard, find the chatbot you want to embed.
Open the Options Menu:
Click the three-dot menu (⋮) under the Actions column
Select "Embed to Website":
Click on the Embed to Website option from the dropdown (as shown in the image). This will take you to the embed settings pop-up page.
Step 2: Customize the Widget Configuration
Widget Size and Button Size:
Adjust the Widget Size and Widget Button Size from the dropdown menus to fit your website's design (options like Normal are available).
Positioning:
You can configure the widget's position by setting the Offset Bottom and Offset Right values for both desktop and mobile views.
Widget Display:
Select how the widget is displayed:
Entire Site: Show the widget across all pages.
Hide for Specific URLs: Exclude the widget on specific URLs.
Only Show on Specific URLs: Display the widget only on selected URLs.
Additional Settings:
Toggle the options for allowing the widget to be movable or enabling Advanced CSS Customization if needed.
(Optional) Exclude chatbot from rendering on certain pages of your site
Enable the “hide widget for specific URLs” button
Enter the links where you wish to exclude the chatbot from rendering
If you wish to exclude an entire subdirectory (i.e. wonderchat.io/blogs), remember to add an /* asterisk after links.
E.g. "https://wonderchat.io/blogs/*"
This will command the chatbot to exclude all urls with the /blog links
Step 3: Preview and Test the Widget
Preview the Widget:
Once you've configured your settings, click the Preview Widget button.
This will open a preview window, where you can see how the chatbot will look and function on your website.
Test the Chatbot:
In the preview window, your chatbot will appear as a widget on the bottom right of the page.
You can interact with the chatbot to ensure it works as expected before embedding it on your actual site.
Step 4: Embed the Chatbot on Your Website
Copy Script Code to Clipboard
After configuring and previewing the chatbot, return to the main embed section and click Copy to Clipboard to copy the script code.
Insert the Script into Your Website:
Now, it's time to add the embed code to your general site. You can do this by opening your site's HTML code and pasting the embed code at the end of the tag.
Deploy and Save:
Once the code is added, save your changes and deploy your website to make the chatbot live. Make sure to test the chat widget to ensure it's working correctly.
Step 5: Monitor and Respond to Chats
Once the chat widget is up and running on your general site, you can then and respond to chats promptly. This will help you provide excellent customer support and build lasting relationships with your customers.
Summary
Copy the embed script from Wonderchat’s dashboard.
Adjust the widget configuration settings.
Preview the chatbot to ensure everything looks correct.
Embed the script into your website and deploy the changes.
In conclusion, embedding a Wonderchat chat widget for your general site can help you provide instant support to your customers, increase engagement, and boost your sales. By following the steps outlined in this guide, you'll be able to embed a chat widget on your general site quickly and easily.
If you have any more questions, feel free to reach out to us at support@wonderchat.io
Last updated
