The Live Chat Widget allows you to interact with website visitors in real-time, helping businesses engage potential customers, provide support, and track visitor behavior. By integrating the Live Chat Widget with SleekFlow, you can streamline communication and automate workflows to improve customer interactions.

In this article, we’ll guide you through the steps to set up and configure the Live Chat Widget in SleekFlow, including customization options, language settings, and advanced features.
 

Setting up Live Chat Widget

You can follow the steps below to set up your SleekFlow Live Chat:

1. Click on the icon on the left navigation bar to go to the “Channels” page
2. Select “Live Chat Widget” on the left-side menu, and you will be redirected to the “Live Chat Widget” settings page
3. In this page, you can set up this channel based on your need and preferences

General settings

Customize the appearance and behavior of your Live Chat Widget to align with your brand:

• Chatbot logo – Upload a logo to display on the chat widget.
• Background & button color – Adjust colors to match your brand identity.
• Chatbot display name – Set the chatbot name that will be displayed in your Live Chat Widget

Advanced settings

Enhance your chat experience with additional options:

• Reply time indicator – Set expected response times to manage customer expectations.
  
• Business hours – Configure operating hours and choose whether to hide the chat button outside working hours.
  
  
  • You can also toggle on the “Hide Live Chat messaging feature during off hours” option to disable the “Start chat” feature during non-business hours. Please note that social messaging channels will always be displayed, even if this setting is enabled.
• Contact form – Require visitors to provide contact details (name, email, phone) before starting a chat
  
  • By enabling this toggle, by default, visitors are required to provide a phone number when they want to initiate conversation through live chat. You can tick the corresponding box if you would like to make them optional.
  • You can also choose to activate this request  "All-time" or "Only during off-hours".
• Widget branding (for Premium & Enterprise users only) – Choose to show or hide the “Powered by SleekFlow” branding.
  

Languages settings

You can configure the Live Chat Widget’s language settings to display the chat interface in your users’ preferred language. This helps create a localized experience for visitors on your website.

In this section, you can:

• Enable additional languages by toggling them on
• Set a default language as a fallback for unsupported browser languages
  
  

Once a language is enabled, you can set it as the default by clicking the icon and selecting “Set as default.”

You can set multiple languages for your Live Chat Widget to meet your business needs. When customers land on your website, the widget will automatically match their browser language. If the visitor’s browser language is not available or enabled in your settings, the Live Chat will display the default language.
 

Pop-up messages

You can send website visitors automatic targeted pop-up messages based on their URL and their activity.

Creating a pop-up message

You can follow the steps below to create a pop-up message:

1. In the “Pop-up message” tab, click “Create pop-up message” button. A “Create pop-up message” dialog will appear
   
   
    
2. Fill in the following items:
   1. Message header: Enter a name for you to identify the pop-up message. This is for you to identify your pop-up message. It won’t show to the customers
   2. Message: Enter your message text that you would like to show to your customer (maximum 1024 characters).
   3. Select the trigger time: Define in seconds, when you would like to show the message when customers land on the URL
   4. Conditions: You can set which page you would like to “show” or “hide” this pop-up message, based on the URL. You can add multiple conditions to specify 

Editing pop-up message

You can modify an existing pop-up message to fit your needs:

1. Click the icon next to the message you want to edit
2. Make the necessary changes in the edit dialog
3. Choose to save as draft or save and publish the updated message.
    

Deleting pop-up message

If you no longer need a pop-up message, follow these steps to delete it:

1. Click the icon next to the message.
2. A warning message will appear. Click “Delete” to confirm the deletion
   

Publishing drafted pop-up messages

To publish a draft pop-up message:

1. Click the “Draft” dropdown and select “Published”
2. Click “Save” to finalize and make the message live
   

Configuring channels for Live Chat Widget

You can choose which communication channels will be visible to your website visitors through the Live Chat Widget, allowing customers to connect with your business via their preferred messaging platform.

When customers click on a channel (e.g., WhatsApp, Instagram, LINE), they will be redirected to the respective platform to continue the conversation. If they choose Live Chat, they can engage with your business directly within the widget on your website.

Selecting available channels by following the steps below:

1. Enable the channels you want to display in the widget by toggling on the channels
   
2. Visitors will see these options and can choose where to send their messages.
   
3. For platforms like WhatsApp, Instagram, and Facebook Messenger, you can select a specific account from the dropdown list
   

Getting the code snippet

To integrate the Live Chat Widget into your website, you need to copy and paste the unique code snippet into your site’s HTML. This ensures that the widget appears and functions properly for visitors.

You can follow the steps below to get the code snippet of your Live Chat Widget:

1. Once you have completed setting up your Live Chat Widget, you can click the “Get code snippet”  button on the top right corner of the page.
   
2. A pop-up window will appear. Click “Copy code” at the bottom right corner of the pop-up window to copy the code snippet to your clipboard
   

Once you have copied the code snippet, follow the steps below to install the code snippet:

1. Paste the snippet before the </body> tag on every page where you want the widget to appear
   1. To display the widget on all pages, add the code to the <header> or <footer> section
2. Refresh your website after pasting the code to activate the chat widget.
3. Confirm the setup by checking if the widget appears at the bottom right corner of your site
4. Send a test message through live chat channel to ensure that the widget is successfully connected to SleekFlow