How To Create and Install a Live Chat Widget

Created by Stefan Perchinkov, Modified on Wed, 26 Feb at 7:34 AM by Stefan Perchinkov

Adding a Live Chat widget to your website is a powerful way to connect with visitors in real-time, enhancing customer service and engagement. This guide will walk you through the steps of setting up the Live Chat widget, customizing its appearance, and integrating additional features like business hours and conversational AI for a seamless user experience.

Why Use the Live Chat Widget?

The Live Chat widget provides a simple way to:

  • Engage Visitors: Connect with customers directly on your website.
  • Boost Responsiveness: Offer real-time support, improving customer satisfaction.
  • Personalize Experiences: Customize the widget's look and behavior to align with your brand and service hours.

1. Setting Up the Live Chat Widget

  1. Access the Chat Widget Setup:
    • Navigate to Sites > Chat Widget within your account.
  1. Select Chat Type:
    • In the Chat Type section, select Live Chat to enable real-time messaging.
  1. Save and Preview:
    • Once Live Chat is selected, save your settings to activate the widget. A preview will show you how it will appear on your website.

2. Customizing Widget Appearance

  1. Enable Chat Bubble:
    • Use the Enable Chat Bubble option to display a chat bubble icon on your site. If disabled, only the circular chat icon will remain.
  1. Set Intro Message:
    • Customize the Intro Message that visitors see before initiating a chat.
  1. Upload an Avatar:
    • Add a personal touch with an avatar for team members, or select from pre-set images.
  1. Adjust Colors and Fonts:
    • In the Widget Window settings, you can change widget colors, font styles, and branding. These options ensure the widget reflects your brand identity.
  1. Configure Acknowledgement Messages:
    • Enter messages for Greeting, Chat Ended, and Feedback to personalize the interaction.

3. Setting Business Office Hours

  1. Enable Business Hours:
    • Go to Sites > Chat Widget, select the Chat Window tab, and activate Business Office Hours.
  1. Define Office Hours:
    • Specify time ranges for each day (Sunday to Saturday) to control chat availability.
  2. Customize Messages:
    • Set a Welcome Message for outside business hours, such as “We are currently offline.”
  3. Automate Contact Form:
    • When a visitor messages outside of office hours, a contact form will automatically display, allowing them to leave their details for follow-up.

4. Integrating Conversational AI

  1. Access Conversational AI Settings:
    • Head to Settings > Conversational AI to enable automated responses for Live Chat.
  2. Configure AI Responses:
    • Choose between Live Chat or SMS Widget and define response behaviors.
  1. Train the Bot:
    • Use Bot Training to add relevant Q&A, or allow the bot to learn from your website by entering your URL.
  1. Testing the Bot:
    • Visit the Bot Trial tab to test and refine responses before going live.

5. Feature Location in Conversations

The Live Chat widget integrates within the Conversations module, providing:

  • Request Contact Details: Prompt visitors for contact information during chat for personalized follow-up.
  • End Live Chat: Close the conversation when an issue is resolved, ensuring efficient chat handling.

FAQ

1. Can I set different availability hours for each day of the week?
Yes, you can customize hours for each day, and copy settings across multiple days if needed.

2. What options are available if my team is offline?
You can set a welcome message and configure a contact form for visitors to leave their details when messaging outside of business hours.

3. Is it possible to add AI responses to the chat?
Yes, use the Conversational AI feature to enable automated responses, which can be trained and customized for common questions.

4. How do I install the widget on an external site like WordPress?
Copy the widget code from the builder and paste it into your website’s footer or body. On WordPress, you can also use a plugin to insert the code.

5. Can I personalize the chat experience for returning visitors?
Yes, enable the Return Visitors option to display tailored messages for users who have previously chatted on your site.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article