How to Create & Add Live Chat Widget to Your Website
Engaging visitors in real time can turn casual browsers into loyal customers. With Tarjeeh AI’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 Tarjeeh AI 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
- Log in to your Tarjeeh AI
- From the sidebar, Click Chatbot manager then Click WhatsApp Bot ,Then Click Chat Widget , Then Click Create
Step 2: 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 3: 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.
Benefits of Using Tarjeeh AI 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 Tarjeeh AI’s versatile chat widgets!
❓ Frequently Asked Questions (FAQ)
What is a Tarjeeh AI Website Chat Widget?
A Tarjeeh AI 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 Tarjeeh AI Chat Widget on my website?
Using the Tarjeeh AI 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 Tarjeeh AI?
Log in to your Tarjeeh AI 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, Tarjeeh AI 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.