Skip to content
Getting Started w/ GHL Customer Care

Getting Started - Set Up a Live Chat Widget

GHL Customer Care’s Chat Widget lets you add different chat experiences to your website. In this guide, you’ll create a Live Chat widget that allows…

2 min read448 words8 explained imagesUpdated Tue, 18 Aug at 2:41 PM
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. Create Live Chat Widget
  2. Deploy Live Chat Widget via Embed Code
  3. Deploy Live Chat Widget via Settings
  4. Related Articles

GHL Customer Care’s Chat Widget lets you add different chat experiences to your website. In this guide, you’ll create a Live Chatwidget that allows website visitors to start real-time conversations with your team or Conversation AI. You’ll also learn how to customize the widget and add it to a GHL Customer Care website or funnel.

TABLE OF CONTENTS

Create Live Chat Widget

To add Live Chat to your website, create a new widget from the Chat Widget section and select Live Chat as the chat type.

  • Navigate to Sites > Chat Widget
  • Click New where you can choose one of the following: All-in-one chat, SMS / Email chat, Live chat, WhatsApp.
    Step 2 of 7: Click New where you can choose one of the following: All-in-one chat… What this shows Step 2 of 7: Click New where you can choose one of the following: All-in-one chat, SMS / Email chat, Live chat, WhatsApp. What this shows Shows what to choose for step 2 of 7 in the "Create Live Chat Widget" section of "Getting Started - Set Up a Live Chat Widget". This screenshot accompanies step 2 of 7 in the "Create Live Chat Widget" section of "Getting Started - Set Up a Live Chat Widget". At this point in the walkthrough you click New where you can choose one of the following: All-in-one chat, SMS / Email chat, Live chat, WhatsApp. The navigation path used here is Sites > Chat Widget Click New. This part of the guide covers 1 field, listed below. The next step is to select Live Chat. Step 2 of 7Path: Sites > Chat Widget Click NewImage 1 of 8 What to chooseClick New where you can choose one of the following: All-in-one chat, SMS / Email chat, Live chat, WhatsApp.
    Fields in this part of the guide Customize your widget to fit your brand
    Buttons and menus referenced NewChat WidgetLive ChatSites > Chat WidgetSaveGet Code > CopyLearn MoreNext,
    Next stepSelect Live Chat
    All 7 steps in this procedure
    1. Navigate to Sites > Chat Widget
    2. Click New where you can choose one of the following: All-in-one chat, SMS / Email chat, Live chat, WhatsApp. this image
    3. Select Live Chat
    4. Customize your widget to fit your brand
    5. Click Save
    6. Click Get Code > Copy
    7. Copy the provided embed code
  • Select Live Chat
  • Customize your widget to fit your brand
  • Click Save
    Step 5 of 7: Click Save What this shows Step 5 of 7: Click Save What this shows Shows how to confirm for step 5 of 7 in the "Create Live Chat Widget" section of "Getting Started - Set Up a Live Chat Widget". This screenshot accompanies step 5 of 7 in the "Create Live Chat Widget" section of "Getting Started - Set Up a Live Chat Widget". At this point in the walkthrough you click Save. For context, this section explains: To add Live Chat to your website, create a new widget from the Chat Widget section and select Live Chat as the chat type. The navigation path used here is Sites > Chat Widget Click New. This part of the guide covers 1 field, listed below. The next step is to click Get Code > Copy. Step 5 of 7Path: Sites > Chat Widget Click NewImage 2 of 8 How to confirmClick Save
    Fields in this part of the guide Customize your widget to fit your brand
    Buttons and menus referenced SaveChat WidgetLive ChatSites > Chat WidgetNewGet Code > CopyLearn MoreNext,
    Next stepClick Get Code > Copy
    All 7 steps in this procedure
    1. Navigate to Sites > Chat Widget
    2. Click New where you can choose one of the following: All-in-one chat, SMS / Email chat, Live chat, WhatsApp.
    3. Select Live Chat
    4. Customize your widget to fit your brand
    5. Click Save this image
    6. Click Get Code > Copy
    7. Copy the provided embed code
  • Click Get Code > Copy
  • Copy the provided embed code
    Step 7 of 7: Copy the provided embed code What this shows Step 7 of 7: Copy the provided embed code What this shows Shows what to copy for step 7 of 7 in the "Create Live Chat Widget" section of "Getting Started - Set Up a Live Chat Widget". This screenshot accompanies step 7 of 7 in the "Create Live Chat Widget" section of "Getting Started - Set Up a Live Chat Widget". At this point in the walkthrough you copy the provided embed code. For context, this section explains: To add Live Chat to your website, create a new widget from the Chat Widget section and select Live Chat as the chat type. The navigation path used here is Sites > Chat Widget Click New. This part of the guide covers 1 field, listed below. Step 7 of 7Path: Sites > Chat Widget Click NewImage 3 of 8 What to copyCopy the provided embed code
    Fields in this part of the guide Customize your widget to fit your brand
    Buttons and menus referenced Chat WidgetLive ChatSites > Chat WidgetNewSaveGet Code > CopyLearn MoreNext,
    All 7 steps in this procedure
    1. Navigate to Sites > Chat Widget
    2. Click New where you can choose one of the following: All-in-one chat, SMS / Email chat, Live chat, WhatsApp.
    3. Select Live Chat
    4. Customize your widget to fit your brand
    5. Click Save
    6. Click Get Code > Copy
    7. Copy the provided embed code this image

Learn More

Next, you can decide how you'd like to deploy your new widget! Let's explore your options.

Deploy Live Chat Widget via Embed Code

Already familiar with adding scripts directly into your website or funnel? Perfect! Embedding the chat widget directly into your site editor couldn't be simpler. Follow these quick steps:

  • Navigate to Sites > Websites OR Sites > Funnels
  • Find your desired website or funnel and open it for editing
    Step 2 of 5: Find your desired website or funnel and open it for editing What this shows Step 2 of 5: Find your desired website or funnel and open it for editing What this shows Shows what this covers for step 2 of 5 in the "Deploy Live Chat Widget via Embed Code" section of "Getting Started - Set Up a Live Chat Widget". This screenshot accompanies step 2 of 5 in the "Deploy Live Chat Widget via Embed Code" section of "Getting Started - Set Up a Live Chat Widget". At this point in the walkthrough you find your desired website or funnel and open it for editing. The navigation path used here is Sites > Websites OR Sites > Funnels Find. This part of the guide covers 1 field, listed below. The next step is to in the editor, click the Tracking Code icon (). Step 2 of 5Path: Sites > Websites OR Sites > Funnels FindImage 4 of 8 What this coversFind your desired website or funnel and open it for editing
    Fields in this part of the guide In the editor, click the Tracking Code icon (</>)
    Buttons and menus referenced Sites > WebsitesSites > FunnelsTracking CodeSaveLearn MoreNext,
    Next stepIn the editor, click the Tracking Code icon (</>)
    All 5 steps in this procedure
    1. Navigate to Sites > Websites OR Sites > Funnels
    2. Find your desired website or funnel and open it for editing this image
    3. In the editor, click the Tracking Code icon (</>)
    4. Paste the copied chat widget code
    5. Click Save
  • In the editor, click the Tracking Code icon (</>)
  • Paste the copied chat widget code
  • Click Save
    Step 5 of 5: Click Save What this shows Step 5 of 5: Click Save What this shows Shows how to confirm for step 5 of 5 in the "Deploy Live Chat Widget via Embed Code" section of "Getting Started - Set Up a Live Chat Widget". This screenshot accompanies step 5 of 5 in the "Deploy Live Chat Widget via Embed Code" section of "Getting Started - Set Up a Live Chat Widget". At this point in the walkthrough you click Save. For context, this section explains: Already familiar with adding scripts directly into your website or funnel? Perfect! Embedding the chat widget directly into your site editor couldn't be simpler. Follow these quick steps. The navigation path used here is Sites > Websites OR Sites > Funnels Find. This part of the guide covers 1 field, listed below. Step 5 of 5Path: Sites > Websites OR Sites > Funnels FindImage 5 of 8 How to confirmClick Save
    Fields in this part of the guide In the editor, click the Tracking Code icon (</>)
    Buttons and menus referenced SaveSites > WebsitesSites > FunnelsTracking CodeLearn MoreNext,
    All 5 steps in this procedure
    1. Navigate to Sites > Websites OR Sites > Funnels
    2. Find your desired website or funnel and open it for editing
    3. In the editor, click the Tracking Code icon (</>)
    4. Paste the copied chat widget code
    5. Click Save this image

Learn More

Great job! Next, you might consider testing your widget to ensure it's functioning seamlessly.

Deploy Live Chat Widget via Settings

Prefer to keep things even simpler? Deploying your widget directly through your website settings is super convenient, especially if you're less comfortable dealing directly with code. Let’s walk through it:

  • Navigate to Sites > Websites OR Sites > Funnels
  • Find your desired website or funnel and open its settings
    Step 2 of 4: Find your desired website or funnel and open its settings What this shows Step 2 of 4: Find your desired website or funnel and open its settings What this shows Shows what this covers for step 2 of 4 in the "Deploy Live Chat Widget via Settings" section of "Getting Started - Set Up a Live Chat Widget". This screenshot accompanies step 2 of 4 in the "Deploy Live Chat Widget via Settings" section of "Getting Started - Set Up a Live Chat Widget". At this point in the walkthrough you find your desired website or funnel and open its settings. The navigation path used here is Sites > Websites OR Sites > Funnels Find. This part of the guide covers 5 fields, listed below. The next step is to under the Chat Widget section, select your live chat widget. Step 2 of 4Path: Sites > Websites OR Sites > Funnels FindImage 6 of 8 What this coversFind your desired website or funnel and open its settings
    Fields in this part of the guide Under the Chat Widget section, select your live chat widgetGetting Started with Chat WidgetLive ChatHow to Install GHL Customer Care's Chat WidgetOverview of Chat Widget Customizations
    Buttons and menus referenced Sites > WebsitesSites > FunnelsChat WidgetliveSaveNext,Related Articles
    Next stepUnder the Chat Widget section, select your live chat widget
    All 4 steps in this procedure
    1. Navigate to Sites > Websites OR Sites > Funnels
    2. Find your desired website or funnel and open its settings this image
    3. Under the Chat Widget section, select your live chat widget
    4. Click Save
  • Under the Chat Widget section, select your live chat widget
    Step 3 of 4: Under the Chat Widget section, select your live chat widget What this shows Step 3 of 4: Under the Chat Widget section, select your live chat widget What this shows Shows what to choose for step 3 of 4 in the "Deploy Live Chat Widget via Settings" section of "Getting Started - Set Up a Live Chat Widget". This screenshot accompanies step 3 of 4 in the "Deploy Live Chat Widget via Settings" section of "Getting Started - Set Up a Live Chat Widget". At this point in the walkthrough you under the Chat Widget section, select your live chat widget. The navigation path used here is Sites > Websites OR Sites > Funnels Find. This part of the guide covers 5 fields, listed below. The next step is to click Save. Step 3 of 4Path: Sites > Websites OR Sites > Funnels FindImage 7 of 8 What to chooseUnder the Chat Widget section, select your live chat widget
    Fields in this part of the guide Under the Chat Widget section, select your live chat widgetGetting Started with Chat WidgetLive ChatHow to Install GHL Customer Care's Chat WidgetOverview of Chat Widget Customizations
    Buttons and menus referenced Chat WidgetliveSites > WebsitesSites > FunnelsSaveNext,Related Articles
    Next stepClick Save
    All 4 steps in this procedure
    1. Navigate to Sites > Websites OR Sites > Funnels
    2. Find your desired website or funnel and open its settings
    3. Under the Chat Widget section, select your live chat widget this image
    4. Click Save
  • Click Save
    Step 4 of 4: Click Save What this shows Step 4 of 4: Click Save What this shows Shows how to confirm for step 4 of 4 in the "Deploy Live Chat Widget via Settings" section of "Getting Started - Set Up a Live Chat Widget". This screenshot accompanies step 4 of 4 in the "Deploy Live Chat Widget via Settings" section of "Getting Started - Set Up a Live Chat Widget". At this point in the walkthrough you click Save. For context, this section explains: Prefer to keep things even simpler? Deploying your widget directly through your website settings is super convenient, especially if you're less comfortable dealing directly with code. Let’s walk through it. The navigation path used here is Sites > Websites OR Sites > Funnels Find. This part of the guide covers 5 fields, listed below. Step 4 of 4Path: Sites > Websites OR Sites > Funnels FindImage 8 of 8 How to confirmClick Save
    Fields in this part of the guide Under the Chat Widget section, select your live chat widgetGetting Started with Chat WidgetLive ChatHow to Install GHL Customer Care's Chat WidgetOverview of Chat Widget Customizations
    Buttons and menus referenced SaveSites > WebsitesSites > FunnelsChat WidgetliveNext,Related Articles
    All 4 steps in this procedure
    1. Navigate to Sites > Websites OR Sites > Funnels
    2. Find your desired website or funnel and open its settings
    3. Under the Chat Widget section, select your live chat widget
    4. Click Save this image

Fantastic! You're all set. Next, why not explore advanced customization options to really make the chat experience unique to your brand?

Was this guide helpful?

Related guides

Getting Started - Connect Personal Inbox1 min read · 5 imagesGetting Started - Setup Facebook and Instagram Messenger4 min read · 4 imagesGetting Started - Create and Manage Contacts5 min read · 8 imagesGetting Started - Import Existing Contacts2 min read · 12 images