# Chat Widget Embedding **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**

1. **Login to Wonderchat**: * From your **Chatbots page**, find the chatbot you want to embed. 2. **Open the Options Menu**: * Click the three-dot menu **(⋮)** under the **Actions** column 3. **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**

Customize your Widget Configuration by toggling on the settings here

1. **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). 2. **Positioning**: * You can configure the widget's position by setting the **Offset Bottom** and **Offset Right** values for both desktop and mobile views. 3. **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. 4. **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. "\*"* * This will command the chatbot to exclude all urls with the /blog links *** ## **Step 3: Preview and Test the Widget** 1. **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.

2. **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**

1. **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. 2. **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 just before the closing \ tag. 3. **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 1. Copy the embed script from Wonderchat’s dashboard. 2. Adjust the widget configuration settings. 3. Preview the chatbot to ensure everything looks correct. 4. 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 **** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.wonderchat.io/setup-guides/adding-your-chatbot-to-your-website/how-to-embed-a-chat-widget.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.