How to Create & Add Live Chat Widget to Your Website

Engaging visitors in real time can turn casual browsers into loyal customers. With BotSailor’s website chat widget, you can add an on-site messaging window that matches your branding, greets visitors automatically, and helps you respond to questions the moment they arise. In this guide, you’ll learn how to access the Chat Widgets section, set up a new widget with custom colors, logos and positioning, and then embed the generated JavaScript snippet into your site’s HTML. By the end, you’ll have a fully functional chat interface ready to welcome and assist every visitor.

Why You Should Use BotSailor Chat Widget?

• Boost Conversions: Engage visitors instantly to reduce bounce rates.
• Brand Alignment: Match colors, logos, fonts, and positioning.
• Automated Greetings: Welcome users proactively.
• Privacy Compliance: Auto-delete subscriber data.
• Easy Setup: Embed with one code snippet.

Step 1: Navigate to the Chat Widgets Section

1. Log in to your BotSailor account.
2. From the sidebar, click on Chat Widgets under the WEBCHAT (BETA) section.
   
   

Step 2: Create a New Chat Widget

1. Click on the Create Live Chat Widget button.
2. A configuration panel will appear.

Step 3: Configure Your Chat Widget

In the configuration panel, set up your widget with the following details:

• Chatbox Display Title: Name of your chat widget.
• Website URL: Your website address.
• Theme Background & Text Color: Customize colors to match your website theme.
• Chat Bubble Background & Text Color: Define chat bubble colors.
• Brand Logo & Chatbox Wallpaper: Upload your logo and background for branding.
• Chatbox Font: Choose the font style.
• Chatbox Position: Select where the chat widget appears on the screen.
• Stay Open on Startup: Decide if the widget remains open or closed by default.
• X-Axis/Y-Axis Offset: Adjust the position precisely.
• Loading Chatbox: Set a delay before the chatbox appears.
• Auto-Delete Subscribers: Configure automatic subscriber management.
• After configuring the settings, click Save at the bottom of the panel.
  
  
  
  

Step 4: Embed Chat Widget on Your Website

• After saving the settings, you will see your widget listed.
• Click on Embed Code next to your widget.
  
  
  
  
  
  
• Copy the JavaScript embed code provided.
  
  
  
  
  
  
  
• Paste this embed code into the HTML source file of your website where you want the chat widget to appear.
• Paste the JavaScript code snippet just before the closing </body> tag.

Example:

<script type="text/javascript" src="https://botsailor.com/script/webchat-link.js?code=YOUR_WIDGET_CODE"></script>

Step 5: Activate Your Chat Widget

• Save your changes.
• Reload your website to see your chat widget live in action.

Your website chat widget is now ready, enabling seamless communication with your website visitors.

Integrating WhatsApp, Telegram, and Facebook Chat Widgets

For integrating chat widgets from WhatsApp, Telegram, or Facebook:

• Log into your BotSailor dashboard.
• Navigate to the respective platform’s Bot Manager > Chat Widgets section.
• Follow similar steps to generate and copy the embed code.
• Embed this JavaScript code into your website’s HTML file, as illustrated above.

Your live chat widget is now ready to engage visitors!

Benefits of Using BotSailor Chat Widgets

• Enhance visitor engagement through instant messaging.
• Improve customer support efficiency.
• Easy to integrate with minimal technical knowledge.

Enjoy streamlined interactions with your customers using BotSailor's versatile chat widgets!

❓ Frequently Asked Questions (FAQ)

What is a BotSailor Website Chat Widget?
A BotSailor Website Chat Widget is an on-site messaging tool that lets you interact with your website visitors in real time. It allows you to display a customized live chat window, enabling quick communication and automated greetings.

Why should I use the BotSailor Chat Widget on my website?
Using the BotSailor chat widget can help you:
Instantly engage visitors
Boost conversions by reducing bounce rates
Match your brand’s style with custom colors and logos
Offer proactive customer service
Stay compliant by auto-deleting subscriber data

How do I access the chat widget setup in BotSailor?
Log in to your BotSailor account, then go to the WEBCHAT (BETA) section and click on Chat Widgets from the left sidebar.

What customization options are available for the chat widget?
You can customize:
-Display title
-Website URL
-Theme and chat bubble colors
-Font and logo
-Widget position (X/Y offset)
-Whether it stays open on load
-Auto-deletion of subscribers

Can I upload my brand logo and chatbox background?
Yes, BotSailor allows you to upload both your logo and a custom wallpaper for the chatbox to match your branding.

Is the widget mobile responsive?
Yes, the chat widget is designed to work seamlessly across desktop and mobile browsers.

How do I embed the chat widget on my website?
After configuring and saving your widget:
Click Embed Code beside your widget.
Copy the provided JavaScript snippet.
Paste it into your website’s HTML before the </body> tag or wherever you want the widget to load.

Can I manage multiple chat widgets for different websites?
Yes, you can create and configure multiple widgets, each tailored for different domains or use cases.

Is there an option to delay the widget from appearing immediately?
Yes, you can set a delay using the “Loading Chatbox” option during configuration.

What happens to subscribers who message through the chat widget?
You can enable Auto-Delete Subscribers, which automatically removes inactive or expired data to help with privacy compliance and storage optimization.

 

Can I integrate multiple widgets (e.g., WhatsApp and WebChat) on one website?
Yes, you can embed multiple widgets to provide visitors the choice of platform for communication.