Skip to content
Sites

How to Use the All-in-One Chat Widget

Learn how to set up and use GHL Customer Care’s All-in-One Chat Widget to capture leads, manage conversations, and engage website visitors through a unified messaging experience.

4 min read897 words10 explained imagesUpdated Tue, 11 Aug at 5:08 AM
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. Overview
  2. Key Benefits
  3. Supported Channels & Requirements
  4. Step-by-Step Setup
  5. Using the All-in-One Chat Widget
  6. Frequently Asked Questions
  7. Troubleshooting

Video 1 Open in a new tab

Overview

The All-in-One Chat widget allows you to offer multiple communication channels—Live Chat, SMS/Email, WhatsApp, Facebook, Instagram, and Voice AI—in one unified interface. This not only saves you from managing multiple widgets but also provides your visitors with a seamless experience when choosing how they want to reach out.

Overview (image 1 of 10) What this shows The All-in-One Chat widget allows you to offer multiple communication channels—Live Chat, SMS/Email, WhatsApp, Facebook, Instagram, and… What this shows Illustrates the "Overview" section of "How to Use the All-in-One Chat Widget". This screenshot appears in the "Overview" section of "How to Use the All-in-One Chat Widget". The text alongside this image reads: The All-in-One Chat widget allows you to offer multiple communication channels—Live Chat, SMS/Email, WhatsApp, Facebook, Instagram, and Voice AI—in one unified interface. This not only saves you from managing multiple widgets but also provides your visitors with a seamless experience when choosing…. This part of the guide covers 7 fields, listed below. Immediately after, the guide continues: Overview Key Benefits Supported Channels & Requirements Step-by-Step Setup Using the All-in-One Chat Widget Frequently Asked Questions Troubleshooting. Image 1 of 10 What this coversThe All-in-One Chat widget allows you to offer multiple communication channels—Live Chat, SMS/Email, WhatsApp, Facebook, Instagram, and Voice AI—in one unified interface. This not only saves you from managing multiple widgets but also provides your visitors with a seamless experience when choosing how they want to reach out.
Fields in this part of the guide OverviewKey BenefitsSupported Channels & RequirementsStep-by-Step SetupUsing the All-in-One Chat WidgetFrequently Asked QuestionsTroubleshooting
Buttons and menus referenced TABLE OF CONTENTS
Next stepOverview Key Benefits Supported Channels & Requirements Step-by-Step Setup Using the All-in-One Chat Widget Frequently Asked Questions Troubleshooting
All 7 steps in this procedure
  1. Overview
  2. Key Benefits
  3. Supported Channels & Requirements
  4. Step-by-Step Setup
  5. Using the All-in-One Chat Widget
  6. Frequently Asked Questions
  7. Troubleshooting

TABLE OF CONTENTS

Key Benefits

  • Manage Live Chat, SMS/Email, WhatsApp, and optional Facebook, Instagram, and Voice AI channels from one widget.

  • Customize the initial welcome message to guide visitors into the right channel.

  • Consistent branding with a unified color scheme.
  • Simple setup and channel selection based on your active communication channels.

Supported Channels & Requirements

  1. Account Access
    Make sure you have the appropriate permissions to create or edit chat widgets in your account.
  2. The All-in-One Chat widget can surface multiple channels, but some options only appear when you meet their prerequisites:
    Facebook - Shows in the Chat Type selector only if a Facebook Page or account is connected in the sub-account.
    Instagram - Shows only if the Instagram account is connected in the sub-account.
    Voice AI - Shows only if a Voice AI widget is configured in the sub-account.
    WhatsApp - Can be selected only if a WhatsApp number is connected in the sub-account and a WhatsApp chat widget exists.
    If a channel does not meet its prerequisites, it will not appear as an option in the Chat Type multi-select for that widget.

Step-by-Step Setup

  1. Navigate to the Chat Widget Section
    1. Log in to your account.
    2. In the left-hand navigation menu, go to Sites → Chat Widget.
      Step 2 of 2: In the left-hand navigation menu, go to Sites → Chat Widget What this shows Step 2 of 2: In the left-hand navigation menu, go to Sites → Chat Widget. What this shows Shows what this covers for step 2 of 2 in the "Step-by-Step Setup" section of "How to Use the All-in-One Chat Widget". This screenshot accompanies step 2 of 2 in the "Step-by-Step Setup" section of "How to Use the All-in-One Chat Widget". At this point in the walkthrough you in the left-hand navigation menu, go to Sites → Chat Widget. This part of the guide covers 3 fields, listed below. Step 2 of 2Image 2 of 10 What this coversIn the left-hand navigation menu, go to Sites → Chat Widget.
      Fields in this part of the guide Customize Widget SettingsGeneral Settings:Channel Settings:
      Buttons and menus referenced Navigate to the Chat Widget SectionCreate a New Chat WidgetSelect ChannelsStyleChat TypeCustomize Widget SettingsEmail ChatWhatsAppInitial MessageContact Form Intro Messagehe Contact Form System MessageSave and Preview
      All 2 steps in this procedure
      1. Log in to your account.
      2. In the left-hand navigation menu, go to Sites → Chat Widget. this image
  2. Create a New Chat Widget & then choose All-in-One Chat from the list of chat types.
    Step 2 of 5: Create a New Chat Widget & then choose All-in-One Chat from the list… What this shows Step 2 of 5: Create a New Chat Widget & then choose All-in-One Chat from the list of chat types.Note: If you do not see “All-in-One Chat,” ensure your… What this shows Shows what to choose for step 2 of 5 in the "Step-by-Step Setup" section of "How to Use the All-in-One Chat Widget". This screenshot accompanies step 2 of 5 in the "Step-by-Step Setup" section of "How to Use the All-in-One Chat Widget". At this point in the walkthrough you create a New Chat Widget & then choose All-in-One Chat from the list of chat types.Note: If you do not see “All-in-One Chat,” ensure your account has access to the latest updates. You may need to refresh or log out and log back in. This part of the guide covers 3 fields, listed below. The next step is to select Channels. Step 2 of 5Image 3 of 10 What to chooseCreate a New Chat Widget & then choose All-in-One Chat from the list of chat types.Note: If you do not see “All-in-One Chat,” ensure your account has access to the latest updates. You may need to refresh or log out and log back in.
    Fields in this part of the guide Customize Widget SettingsGeneral Settings:Channel Settings:
    Buttons and menus referenced Create a New Chat WidgetNavigate to the Chat Widget SectionSelect ChannelsStyleChat TypeCustomize Widget SettingsEmail ChatWhatsAppInitial MessageContact Form Intro Messagehe Contact Form System MessageSave and Preview
    Next stepSelect Channels
    All 5 steps in this procedure
    1. Navigate to the Chat Widget Section
    2. Create a New Chat Widget & then choose All-in-One Chat from the list of chat types.Note: If you do not see “All-in-One Chat,” ensure your account has access to the latest updates. You may need to refresh or log out and log back in. this image
    3. Select Channels
    4. Customize Widget Settings
    5. Save and Preview
    Note: If you do not see “All-in-One Chat,” ensure your account has access to the latest updates. You may need to refresh or log out and log back in.
  3. Select Channels
    1. After creating the All-in-One Chat widget, open it and go to the Style tab.
    2. In Chat Type, use the multi-select dropdown to choose any combination of:
      - Live Chat
      - SMS/Email
      - Voice AI
      - Facebook
      - Instagram
      - WhatsApp
    3. You can enable any number of these channels at once. The preview updates instantly to reflect your selection.
    4. Choose Widget Placement

      Under the Style tab, select a placement under Widget Placement:

      Sticky: Keeps the widget fixed in a page corner.

      Embedded / Inline: Renders the All-in-One Chat experience inline within your page content.

      With Embedded / Inline placement, the widget opens automatically and remains visible within the page. The floating chat bubble and its initial prompt popup are not displayed, and the embedded widget cannot be minimized.

      Step 4 of 4: Choose Widget Placement Under the Style tab, select a placement under… What this shows Step 4 of 4: Choose Widget Placement Under the Style tab, select a placement under Widget Placement: Sticky: Keeps the widget fixed in a page corner. What this shows Shows what to choose for step 4 of 4 in the "Step-by-Step Setup" section of "How to Use the All-in-One Chat Widget". This screenshot accompanies step 4 of 4 in the "Step-by-Step Setup" section of "How to Use the All-in-One Chat Widget". At this point in the walkthrough you choose Widget Placement Under the Style tab, select a placement under Widget Placement: Sticky: Keeps the widget fixed in a page corner. Embedded / Inline: Renders the All-in-One Chat experience inline within your page content. With Embedded / Inline placement, the widget opens automatically and remains visible within the page. The floating chat bubble and its initial prompt popup are not displayed, and the embedded widget cannot be minimized. This part of the guide covers 3 fields, listed below. Step 4 of 4Image 4 of 10 What to chooseChoose Widget Placement Under the Style tab, select a placement under Widget Placement: Sticky: Keeps the widget fixed in a page corner. Embedded / Inline: Renders the All-in-One Chat experience inline within your page content. With Embedded / Inline placement, the widget opens automatically and remains visible within the page. The floating chat bubble and its initial prompt popup are not displayed, and the embedded widget cannot be minimized.
      Fields in this part of the guide Customize Widget SettingsGeneral Settings:Channel Settings:
      Buttons and menus referenced StyleNavigate to the Chat Widget SectionCreate a New Chat WidgetSelect ChannelsChat TypeCustomize Widget SettingsEmail ChatWhatsAppInitial MessageContact Form Intro Messagehe Contact Form System MessageSave and Preview
      All 4 steps in this procedure
      1. After creating the All-in-One Chat widget, open it and go to the Style tab.
      2. In Chat Type, use the multi-select dropdown to choose any combination of: - Live Chat - SMS/Email - Voice AI - Facebook - Instagram - WhatsApp
      3. You can enable any number of these channels at once. The preview updates instantly to reflect your selection.
      4. Choose Widget Placement Under the Style tab, select a placement under Widget Placement: Sticky: Keeps the widget fixed in a page corner. Embedded / Inline: Renders the All-in-One Chat experience inline within your page content. With Embedded / Inline placement, the widget opens automatically and remains visible within the page. The floating chat bubble and its initial prompt popup are not displayed, and the embedded widget cannot be minimized. this image
  4. Customize Widget Settings
    1. General Settings:
      1. Name your widget for easy reference (e.g., “Main Website Widget”).
      2. Configure widget color to match your brand.
        Step 2 of 2: Configure widget color to match your brand What this shows Step 2 of 2: Configure widget color to match your brand. What this shows Shows what this covers for step 2 of 2 in the "Step-by-Step Setup" section of "How to Use the All-in-One Chat Widget". This screenshot accompanies step 2 of 2 in the "Step-by-Step Setup" section of "How to Use the All-in-One Chat Widget". At this point in the walkthrough you configure widget color to match your brand. This part of the guide covers 3 fields, listed below. Step 2 of 2Image 5 of 10 What this coversConfigure widget color to match your brand.
        Fields in this part of the guide Customize Widget SettingsGeneral Settings:Channel Settings:
        Buttons and menus referenced Navigate to the Chat Widget SectionCreate a New Chat WidgetSelect ChannelsStyleChat TypeCustomize Widget SettingsEmail ChatWhatsAppInitial MessageContact Form Intro Messagehe Contact Form System MessageSave and Preview
        All 2 steps in this procedure
        1. Name your widget for easy reference (e.g., “Main Website Widget”).
        2. Configure widget color to match your brand. this image
    2. Channel Settings:
      1. Live Chat:Set your display name, greeting message, and offline behavior (if any).
        Step 1 of 3: Live Chat: Set your display name, greeting message, and offline… What this shows Step 1 of 3: Live Chat: Set your display name, greeting message, and offline behavior (if any). What this shows Shows what this covers for step 1 of 3 in the "Step-by-Step Setup" section of "How to Use the All-in-One Chat Widget". This screenshot accompanies step 1 of 3 in the "Step-by-Step Setup" section of "How to Use the All-in-One Chat Widget". At this point in the walkthrough you live Chat: Set your display name, greeting message, and offline behavior (if any). This part of the guide covers 3 fields, listed below. The next step is to email Chat: Add messages and customize the form fields to greet your users. Step 1 of 3Image 6 of 10 What this coversLive Chat: Set your display name, greeting message, and offline behavior (if any).
        Fields in this part of the guide Customize Widget SettingsGeneral Settings:Channel Settings:
        Buttons and menus referenced Navigate to the Chat Widget SectionCreate a New Chat WidgetSelect ChannelsStyleChat TypeCustomize Widget SettingsEmail ChatWhatsAppInitial MessageContact Form Intro Messagehe Contact Form System MessageSave and Preview
        Next stepEmail Chat: Add messages and customize the form fields to greet your users.
        All 3 steps in this procedure
        1. Live Chat: Set your display name, greeting message, and offline behavior (if any). this image
        2. Email Chat: Add messages and customize the form fields to greet your users.
        3. WhatsApp: If enabled, confirm your WhatsApp number and default greeting message.
      2. Email Chat: Add messages and customize the form fields to greet your users.
        Step 2 of 3: Email Chat: Add messages and customize the form fields to greet your… What this shows Step 2 of 3: Email Chat: Add messages and customize the form fields to greet your users. What this shows Shows what this covers for step 2 of 3 in the "Step-by-Step Setup" section of "How to Use the All-in-One Chat Widget". This screenshot accompanies step 2 of 3 in the "Step-by-Step Setup" section of "How to Use the All-in-One Chat Widget". At this point in the walkthrough you email Chat: Add messages and customize the form fields to greet your users. This part of the guide covers 3 fields, listed below. The next step is to whatsApp: If enabled, confirm your WhatsApp number and default greeting message. Step 2 of 3Image 7 of 10 What this coversEmail Chat: Add messages and customize the form fields to greet your users.
        Fields in this part of the guide Customize Widget SettingsGeneral Settings:Channel Settings:
        Buttons and menus referenced Email ChatNavigate to the Chat Widget SectionCreate a New Chat WidgetSelect ChannelsStyleChat TypeCustomize Widget SettingsWhatsAppInitial MessageContact Form Intro Messagehe Contact Form System MessageSave and Preview
        Next stepWhatsApp: If enabled, confirm your WhatsApp number and default greeting message.
        All 3 steps in this procedure
        1. Live Chat: Set your display name, greeting message, and offline behavior (if any).
        2. Email Chat: Add messages and customize the form fields to greet your users. this image
        3. WhatsApp: If enabled, confirm your WhatsApp number and default greeting message.
      3. WhatsApp: If enabled, confirm your WhatsApp number and default greeting message.
    3. Initial Message:
      Personalize the message that appears when visitors open the widget (e.g., “Hello! How can we help you today?”). 
      Live Chat within the All-In-One chat also supports two editable prompts in the Chat Window tab: the Contact Form Intro Message and the Contact Form System Message. Leaving either field blank skips the prompt and opens the form. Click here for more information on customizing these intro messages.
      Step 3 of 3: Initial Message: Personalize the message that appears when visitors… What this shows Step 3 of 3: Initial Message: Personalize the message that appears when visitors open the widget (e.g., “Hello! What this shows Shows what to click for step 3 of 3 in the "Step-by-Step Setup" section of "How to Use the All-in-One Chat Widget". This screenshot accompanies step 3 of 3 in the "Step-by-Step Setup" section of "How to Use the All-in-One Chat Widget". At this point in the walkthrough you initial Message: Personalize the message that appears when visitors open the widget (e.g., “Hello! How can we help you today?”). Live Chat within the All-In-One chat also supports two editable prompts in the Chat Window tab: the Contact Form Intro Message and t he Contact Form System Message. Leaving either field blank skips the prompt and opens the form. Click here for more information on customizing these intro messages. This part of the guide covers 3 fields, listed below. Step 3 of 3Image 8 of 10 What to clickInitial Message: Personalize the message that appears when visitors open the widget (e.g., “Hello! How can we help you today?”). Live Chat within the All-In-One chat also supports two editable prompts in the Chat Window tab: the Contact Form Intro Message and t he Contact Form System Message. Leaving either field blank skips the prompt and opens the form. Click here for more information on customizing these intro messages.
      Fields in this part of the guide Customize Widget SettingsGeneral Settings:Channel Settings:
      Buttons and menus referenced Initial MessageContact Form Intro Messagehe Contact Form System MessageNavigate to the Chat Widget SectionCreate a New Chat WidgetSelect ChannelsStyleChat TypeCustomize Widget SettingsEmail ChatWhatsAppSave and Preview
      All 3 steps in this procedure
      1. General Settings:
      2. Channel Settings:
      3. Initial Message: Personalize the message that appears when visitors open the widget (e.g., “Hello! How can we help you today?”). Live Chat within the All-In-One chat also supports two editable prompts in the Chat Window tab: the Contact Form Intro Message and t he Contact Form System Message. Leaving either field blank skips the prompt and opens the form. Click here for more information on customizing these intro messages. this image


  5. Save and Preview
    1. Click Save to store your changes.
    2. Preview the widget on your website or within GHL Customer Care to confirm that each channel is functioning as intended.

Using the All-in-One Chat Widget

  1. Switching Channels:
    Visitors can switch between any enabled channels (for example, Live Chat, SMS/Email, WhatsApp, Facebook, Instagram, or Voice AI) using the controls in the chat header. Only the channels you selected in the Chat Type multi-select appear in the widget.
    Step 1 of 3: Switching Channels: Visitors can switch between any enabled channels… What this shows Step 1 of 3: Switching Channels: Visitors can switch between any enabled channels (for example, Live Chat, SMS/Email, WhatsApp, Facebook, Instagram, or… What this shows Shows what to fill in for step 1 of 3 in the "Using the All-in-One Chat Widget" section of "How to Use the All-in-One Chat Widget". This screenshot accompanies step 1 of 3 in the "Using the All-in-One Chat Widget" section of "How to Use the All-in-One Chat Widget". At this point in the walkthrough you switching Channels: Visitors can switch between any enabled channels (for example, Live Chat, SMS/Email, WhatsApp, Facebook, Instagram, or Voice AI) using the controls in the chat header. Only the channels you selected in the Chat Type multi-select appear in the widget. The next step is to active Conversations: Chat sessions remain active until manually ended by a sub-account user or closed due to inactivity based on your widget’s timeout settings. Step 1 of 3Image 9 of 10 What to fill inSwitching Channels: Visitors can switch between any enabled channels (for example, Live Chat, SMS/Email, WhatsApp, Facebook, Instagram, or Voice AI) using the controls in the chat header. Only the channels you selected in the Chat Type multi-select appear in the widget.
    Buttons and menus referenced Active ConversationsContact Form Fields
    Next stepActive Conversations: Chat sessions remain active until manually ended by a sub-account user or closed due to inactivity based on your widget’s timeout settings.
    All 3 steps in this procedure
    1. Switching Channels: Visitors can switch between any enabled channels (for example, Live Chat, SMS/Email, WhatsApp, Facebook, Instagram, or Voice AI) using the controls in the chat header. Only the channels you selected in the Chat Type multi-select appear in the widget. this image
    2. Active Conversations: Chat sessions remain active until manually ended by a sub-account user or closed due to inactivity based on your widget’s timeout settings.
    3. Contact Form Fields: For Email and WhatsApp Chat, a standard contact form field (e.g., “Message”) is available to capture user information.
  2. Active Conversations:
    Chat sessions remain active until manually ended by a sub-account user or closed due to inactivity based on your widget’s timeout settings.
  3. Contact Form Fields:
    For Email and WhatsApp Chat, a standard contact form field (e.g., “Message”) is available to capture user information.
    Step 3 of 3: Contact Form Fields: For Email and WhatsApp Chat, a standard contact… What this shows Step 3 of 3: Contact Form Fields: For Email and WhatsApp Chat, a standard contact form field (e.g., “Message”) is available to capture user information. What this shows Shows what this covers for step 3 of 3 in the "Using the All-in-One Chat Widget" section of "How to Use the All-in-One Chat Widget". This screenshot accompanies step 3 of 3 in the "Using the All-in-One Chat Widget" section of "How to Use the All-in-One Chat Widget". At this point in the walkthrough you contact Form Fields: For Email and WhatsApp Chat, a standard contact form field (e.g., “Message”) is available to capture user information. Step 3 of 3Image 10 of 10 What this coversContact Form Fields: For Email and WhatsApp Chat, a standard contact form field (e.g., “Message”) is available to capture user information.
    Buttons and menus referenced Contact Form FieldsActive Conversations
    All 3 steps in this procedure
    1. Switching Channels: Visitors can switch between any enabled channels (for example, Live Chat, SMS/Email, WhatsApp, Facebook, Instagram, or Voice AI) using the controls in the chat header. Only the channels you selected in the Chat Type multi-select appear in the widget.
    2. Active Conversations: Chat sessions remain active until manually ended by a sub-account user or closed due to inactivity based on your widget’s timeout settings.
    3. Contact Form Fields: For Email and WhatsApp Chat, a standard contact form field (e.g., “Message”) is available to capture user information. this image

Frequently Asked Questions

Q: What if I don’t have a WhatsApp number?
You can still use the All-in-One Chat widget with just Live and Email Chat. WhatsApp Chat will be hidden until a valid number is added.

Q: Can I customize the color for each channel?
The All-in-One Chat widget applies one unified color scheme across all channels to maintain a consistent brand experience.

Q: Do I need separate permissions to set this up?
Typically, users with access to Sites → Chat Widget can create and configure widgets. If you don’t see the option, contact your admin.

Q: How do I end a Live Chat session?
Sub-account users can end the session from the Conversations panel in GHL Customer Care, or it will automatically close after the specified inactivity timeout.

Troubleshooting

  1. Widget Not Showing Up: Ensure you’ve embedded the widget code on your website correctly. You can find this code under Sites → Chat Widget → Install Code.

  2. WhatsApp Not Available: Confirm you have an active WhatsApp number. If it’s still not visible, double-check your WhatsApp integration settings.
  3. Email Not Sending: Make sure your email address is verified and properly set up in your account settings.

Was this guide helpful?

Related guides

Getting Started with Chat Widget5 min read · 16 imagesOverview of Chat Widget Customizations6 min read · 10 imagesChat Widget - Business Office Hours in Live Chat1 min read · 7 imagesChat Widget - Send your leads to Whatsapp Chat1 min read · 4 images