The Live Chat Widget 2.0 lets you interact with website visitors instantly, capture leads, and provide real-time support. This guide walks you through how to install the widget on your website, configure its appearance and behavior, and manage common settings.

Pain points solved:

• Difficult installation process: The Live Chat Widget 2.0 can be added to any website with a single embed code.
• Unbranded or inconsistent chat experience: Customize logo, colors, and names to match your brand.
• Visitors missing important nudges: Pop-up messages let you prompt visitors on key pages or after time spent.
• Language mismatch: Auto-detects browser language to reduce friction for international visitors.
• Unclear testing: Preview options show how the widget appears before you publish changes.

Common use cases:

• Embed the widget globally: Add the script to your site header or footer so it appears on every page.
• Customize branding: Upload a logo and set brand colors for a consistent look.
• Collect leads: Require visitors to fill in email or phone number before starting a chat.
• Trigger contextual pop-ups: Show targeted messages on pricing pages or after a set time on product pages.
• Localize the experience: Auto-detect or manually set languages for different regions.

Enabling Live Chat Widget 2.0

You can follow the steps below to enable the Live Chat Widget 2.0:

1. Click on the icon to go to the “Channels” page
2. In the left-sided panel, click on “Live Chat Widget 2.0” to go to the “Live Chat Widget 2.0” channel settings page
   
    
3. In the “Live Chat Widget 2.0” channel settings page, locate the “Live Chat” card and toggle it on
   
    
4. Once you have toggled it on, a save bar will appear at the bottom of the page prompting you to save or cancel your changes.
   
    
5. Click “Save” and your Live Chat Widget 2.0 is ready to be configured

Configure available channels in your Live Chat Widget 2.0

In addition to Live Chat, you can make other messaging channels available directly in the widget. This allows visitors to choose their preferred platform to start a conversation with your team.

You can follow the steps below to configuring other channels in your Live Chat Widget 2.0:

1. Click on the icon to go to the “Channels” page
2. In the left-sided panel, click on “Live Chat Widget 2.0” to go to the “Live Chat Widget 2.0” channel settings page
   
    
3. In the “Live Chat Widget 2.0” channel settings page, you’ll see ​​all connected channels
   
    
4. Toggle on the channels you want to display in the widget.
5. Use the preview panel on the right to see how the widget will look with your selected channels.
   
    
6. Once you have toggled it on, a save bar will appear at the bottom of the page prompting you to save or cancel your changes.
   
    
7. Click “Save” to apply the changes

Configuring your Live Chat Widget 2.0 general settings

The General settings tab lets you adjust how the widget looks and what information it collects from visitors.

Accessing the “General” settings tab

You can follow the steps below to access the “General” settings tab for your Live Chat Widget 2.0:

1. Click on the icon to go to the “Channels” page
2. In the left-sided panel, click on “Live Chat Widget 2.0” to go to the “Live Chat Widget 2.0” channel settings page
   
3. Click on the “General” on the top panel
   

Here are the items that you can configure in the “General settings” tab:

1. Company logo
2. Colors
3. Display name
4. Welcome message
5. Additional settings: Contact form
    

Company logo

You can upload your company logo to make the Live Chat Widget match your brand identity. The logo appears on the widget’s welcome screen and as the responder’s avatar in the chat window.

You can follow the steps below to upload or remove your company logo: 

1. In the “General” settings tab, locate the “Company logo” section
   
2. To upload a logo:
   1. Click on “Upload” logo
   2. A system dialog will appear prompting you to choose a file from your device
   3. Select your logo file (.JPG, .JPEG, or .PNG, up to 1 MB).
   4. The uploaded logo will immediately appear in the widget preview on the right
      
   5. Click “Save” at the bottom of the page to save the changes
      
3. To remove a logo:
   1. Click “Remove logo”
   2. Click “Save” at the bottom of the page to save the changes
      
   3. The widget will no longer display a logo in the chat header or agent avatar.
      

Colors

You can customize the widget’s button and message bubble colors to match your brand identity. The colors you set here will be reflected in the widget preview on the right.

In this section, you can configure:

1. Button color: Defines the color of action buttons (e.g. “Start chat”)
   
    
2. Message bubble color: Defines the background color of chat bubbles
   

You can follow the steps below to configure your colors:

1. In the General settings tab, locate the Colors section
2. Click on the color box next to “Button color” or “Message bubble color” fields
   
3. A color picker dialog will appear. You can:
   1. Select from the palette
   2. Enter a HEX code
4. The new color will update immediately in the widget preview on the right
5. Click “Save” at the bottom of the page to save the changes
   

Display name

You can customize the names that appear in the Live Chat Widget to make it clearer for visitors who they are chatting with. There are two display names you can configure:

• Live Chat display name: The title shown at the top of the widget header (e.g. Cat Paradise Live Chat).
• Sender display name: The name that appears when your team replies (e.g. Paw buddy).
   

You can follow the steps below to configure display names:

1. In the “General” settings tab, locate the Live Chat display name and Sender display name fields
2. Click inside the “Live Chat display name” or “Sender display name” field
3. Enter the name you want to display:
   
4. The preview panel on the right will update automatically to reflect your changes.
5. Click “Save” at the bottom of the page.
   

Welcome message

You can set a default welcome message that greets visitors when they open the Live Chat Widget. This helps create a friendly first impression and encourages them to start chatting.

The welcome message appears if no URL-based pop-up message has been configured.

You can follow the steps below to configure your welcome message:

1. In the General settings tab, locate the Welcome message field.
2. To update the message:
   1. Click inside the text field under Welcome message.
   2. Enter your greeting (e.g. “Hello and welcome! Got questions or need assistance? Just let me know—I’m here to help.”).
   3. You can enter up to 500 characters
3. The preview panel on the right will update automatically to show your new welcome message.
4. Click “Save” at the bottom of the page.
   

Additional settings: Contact form

You can require visitors to provide their contact details before starting a chat. This ensures your team always has a way to follow up, even if the conversation ends early.

You can choose to collect:

• Phone number
• Email address

Both fields can be enabled together or individually.

You can follow the steps below to configure contact form requirements:

1. In the General settings tab, scroll down to the “Additional settings” section
   
    
2. To enable required details:
   1. Toggle on” Require contact details from website visitors”
   2. Select which details to require by checking the boxes for Phone number and/or Email address.
   3. The preview panel on the right will show how the form will appear to visitors before they can start a chat.
      
3. To disable required details:
4. Toggle off the option. Visitors will be able to start chatting without entering contact information.
5. Click “Save” at the bottom of the page.
   
    

Configuring pop-up messages for your Live Chat Widget 2.0

Pop-up messages let you proactively reach out to visitors while they browse your site. For example, you can show a greeting on your pricing page or after a visitor spends time on a product page. When clicked, the pop-up opens the Live Chat window so the visitor can start a conversation right away.

Accessing the “Pop-up messages” tab

You can follow the steps below to access the “General” settings tab for your Live Chat Widget 2.0:

1. Click on the icon to go to the “Channels” page
2. In the left-sided panel, click on “Live Chat Widget 2.0” to go to the “Live Chat Widget 2.0” channel settings page
   
3. Click on the “Pop-up message” on the top panel
   
   
    

Creating pop-up message

You can follow the steps below to create and manage pop-up messages:

1. In the “Pop-up message” tab, click on “Create pop-up message”
2. A pop-up modal will appear
   
    
3. To set the message content, navigate to the “Content” tab to set the following items:
   1. Message title: The pop-up message title that will only be displayed internally for your teammates to recognize this pop-up message
   2. Message: Type the text you want to display. You can enter up to 70 characters.
      1. For example: Need help choosing a plan? Chat with us now!
4. To set conditions for when to show the pop-up message, navigate to the “Conditions” tab:
   
   
   1. Conditions define when and where your pop-up messages will appear. You must set at least 1 condition and can add up to 5 conditions per message. The pop-up will only display if the visitor meets all selected conditions.
   2. You can follow the steps below to set conditions:
      1. After entering your pop-up message content, go to the Conditions tab.
      2. Choose how you want the rule to work from the dropdown:
         1. Show when URL contains
         2. Show when URL contains exactly
         3. Hide when URL contains
         4. Hide when URL contains exactly
      3. Enter the matching criteria (For example https://catparadise.com/adoption).
      4. (Optional) Add additional conditions by clicking “+ Add condition”.
         1. Example: Show when URL contains /adoption AND after 10 seconds on the page.
      5. Set the time delay if needed: enter how many seconds after the condition is met before the pop-up should appear.
         
      6. Click “Save as draft” if you want to keep editing later, or “Save and publish” to activate the message.

Editing pop-up message

You can edit existing pop-up messages if you want to update the content, conditions, or timing.

1. Go to the “Pop-up message” tab in your Live Chat Widget 2.0 settings page
   
2. Find the message you want to update in the list
3. Click on the icon
4. A pop-up modal will appear with the existing settings of the pop-up message
   
5. Update the content, conditions, or delay time as needed.
6. Click “Save as draft” to store your changes, or “Save and publish” to make them live immediately.

Updating pop-up message status

You can control whether a pop-up is live on your website or saved for later editing by switching its status.

1. Go to the Pop-up message tab.
2. Locate the pop-up you want to update.
3. Click the status dropdown
4. Select one of the following:
   1. Draft: The pop-up will be saved but not shown to visitors.
   2. Published: The pop-up will go live and display to visitors when its conditions are met.

Deleting pop-up message

If a pop-up is no longer needed, you can permanently remove it from your Live Chat Widget settings.

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

1. Go to the “Pop-up message” tab in your Live Chat Widget 2.0 settings page
   
2. Locate the pop-up you want to delete.
3. Click the icon 
4. A confirmation dialog will appear
   
5. Click “Delete” to confirm
6. The pop-up will be permanently removed from your list.

Configuring languages for your Live Chat Widget 2.0

You can configure multiple languages in your Live Chat Widget 2.0 to provide a localized experience for visitors across regions. The widget will automatically detect and display in the visitor’s browser language when available.

Accessing the “Language” tab

1. Click on the icon to go to the “Channels” page
2. In the left-sided panel, click on “Live Chat Widget 2.0” to go to the “Live Chat Widget 2.0” channel settings page
   
3. Click on the “General” on the top panel
   
   
    

Enable or disable languages

You can follow the steps below to enable or disable languages:

1. In the “Language” tab under the Live Chat Widget 2.0 settings, you’ll see a list of supported languages
   
2. Toggle a language “On” to make it available in your widget.
   
3. Toggle it “Off” to disable that language.
   

Set a default language

You can choose one language as the default for your Live Chat Widget. The default language is used whenever a visitor’s browser language does not match any of the enabled options.

You can follow the steps below to set a default language:

1. In the “Language” tab under the Live Chat Widget 2.0 settings, you’ll see a list of supported languages
2. Locate the language you want to set as default
3. Click on the icon and select “Set as default”
   

4. The widget will now use this language whenever the visitor’s browser language is not supported.

Installing your Live Chat Widget 2.0 to your website

To display the Live Chat Widget on your website, you’ll need to embed a short script. Once installed, the widget will appear in the bottom-right corner of your site.

You can follow the steps below to install:

1. Get the embed code
   1. In the Live Chat Widget 2.0 channel settings page, click the “Get code snippet” located at the top-right corner of the page
      
   2. A pop-up modal will appear with the script code
      
   3. Click “Copy code snippet” at the bottom right corner
   4. The code snippet will be copied to your clipboard
2. Add the code to your website
   1. Paste the script before the closing </body> tag of every page where you want the widget to appear
   2. If you want the widget displayed across your entire site, paste it into your site’s <header> or <footer>.
3. Save and refresh
   1. Save your website changes
   2. Refresh your site, the widget should now appear in the configured position.
4. Test the widget
   1. Send a test message to confirm the Live Chat Widget is properly connected and set up to SleekFlow