search

Chat Widget Embedding

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.

hashtag
Step 1: Click on Widget Embedding Option

Click on "Embed to website"

  1. Login to Wonderchat:

    • From your Dashboard, 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.

hashtag
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.

hashtag
(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

hashtag
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.

Click on "Preview Widget"

  1. 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.

Wonderchat Preview Page

hashtag
Step 4: Embed the Chatbot on Your Website

Click on "Copy to clipboard"

  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 <body> 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.

hashtag
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.

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

PreviousAdding your Chatbot to your websiteNextChat Screen Embedding

Last updated

Was this helpful?