# 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… - Source: https://docs.ghlcustomercare.com/docs/getting-started-w-ghl-customer-care/sales-and-conversations/getting-started-set-up-a-live-chat-widget - Section: Getting Started w/ GHL Customer Care / Sales & Conversations - Reading time: 2 min - Images: 8, each explained below - Modified on Tue, 18 Aug at 2:41 PM --- 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 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](#create-live-chat-widget) - [Deploy Live Chat Widget via Embed Code](#deploy-live-chat-widget-via-embed-code) - [Deploy Live Chat Widget via Settings](#deploy-live-chat-widget-via-settings) --- ## **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…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155078737592/original/A_CPwrjS-U_f-QoywQ3FE3AxrC4r98FzuQ.png) **Step 2 of 7: Click New where you can choose one of the following: All-in-one chat…** 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. - Path: Sites > Chat Widget Click New - What to choose: Click New where you can choose one of the following: All-in-one chat, SMS / Email chat, Live chat, WhatsApp. - Fields: Customize your widget to fit your brand - Controls: New, Chat Widget, Live Chat, Sites > Chat Widget, Save, Get Code > Copy, Learn More, Next, - Next: Select Live Chat Full 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](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046960759/original/SRZNNj26lxreHm5VbkHahfNcCrcphc350g.png) **Step 5 of 7: Click Save** 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. - Path: Sites > Chat Widget Click New - How to confirm: Click Save - Fields: Customize your widget to fit your brand - Controls: Save, Chat Widget, Live Chat, Sites > Chat Widget, New, Get Code > Copy, Learn More, Next, - Next: Click Get Code > Copy Full 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](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046960766/original/VoU2x6UeSm_BfBCXsNEwBdH-IvD1n80R3Q.png) **Step 7 of 7: Copy the provided embed code** 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. - Path: Sites > Chat Widget Click New - What to copy: Copy the provided embed code - Fields: Customize your widget to fit your brand - Controls: Chat Widget, Live Chat, Sites > Chat Widget, New, Save, Get Code > Copy, Learn More, Next, Full 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** - [Live Chat](https://docs.ghlcustomercare.com/docs/conversations/conversations/live-chat) \- Learn how Live Chat conversations are routed to and managed inside GHL Customer Care Conversations. - [Overview of Chat Widget Customizations](https://docs.ghlcustomercare.com/docs/sites/chat-widget/overview-of-chat-widget-customizations) - Explore additional options for customizing the appearance and behavior of your Chat Widget. - [Getting Started with Chat Widget](https://docs.ghlcustomercare.com/docs/sites/chat-widget/getting-started-with-chat-widget) - Learn about all available Chat Widget types, setup options, and customization settings. **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](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046960787/original/gl7U7-ugo-EDySww14EHX-4Gj2WR2rk96w.png) **Step 2 of 5: Find your desired website or funnel and open it for editing** 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 (). - Path: Sites > Websites OR Sites > Funnels Find - What this covers: Find your desired website or funnel and open it for editing - Fields: In the editor, click the Tracking Code icon () - Controls: Sites > Websites, Sites > Funnels, Tracking Code, Save, Learn More, Next, - Next: In the editor, click the Tracking Code icon () Full 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](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046960800/original/7j7RzpFPTEufQWAwRrPbk8r82cQKIsBZpg.png) **Step 5 of 5: Click Save** 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. - Path: Sites > Websites OR Sites > Funnels Find - How to confirm: Click Save - Fields: In the editor, click the Tracking Code icon () - Controls: Save, Sites > Websites, Sites > Funnels, Tracking Code, Learn More, Next, Full 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** - [For additional installation methods and troubleshooting, refer toHow to Install GHL Customer Care's Chat Widget](https://docs.ghlcustomercare.com/docs/sites/chat-widget/how-to-install-ghl-customer-care-s-chat-widget). 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](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046960805/original/qO6x3foY4mdlFGpt9mJMtShG_K95UyCF2A.png) **Step 2 of 4: Find your desired website or funnel and open its settings** 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. - Path: Sites > Websites OR Sites > Funnels Find - What this covers: Find your desired website or funnel and open its settings - Fields: Under the Chat Widget section, select your live chat widget, Getting Started with Chat Widget, Live Chat, How to Install GHL Customer Care's Chat Widget, Overview of Chat Widget Customizations - Controls: Sites > Websites, Sites > Funnels, Chat Widget, live, Save, Next,, Related Articles - Next: Under the Chat Widget section, select your live chat widget Full 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](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046960820/original/w-Ubwt6xqJS_-CIIhHTfhfcnFa96K3PU5g.png) **Step 3 of 4: Under the Chat Widget section, select your 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. - Path: Sites > Websites OR Sites > Funnels Find - What to choose: Under the Chat Widget section, select your live chat widget - Fields: Under the Chat Widget section, select your live chat widget, Getting Started with Chat Widget, Live Chat, How to Install GHL Customer Care's Chat Widget, Overview of Chat Widget Customizations - Controls: Chat Widget, live, Sites > Websites, Sites > Funnels, Save, Next,, Related Articles - Next: Click Save Full 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](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155046960834/original/1BsYAyKDH_J3qdvsMEAcrssP0JqZCeQLFA.png) **Step 4 of 4: Click Save** 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. - Path: Sites > Websites OR Sites > Funnels Find - How to confirm: Click Save - Fields: Under the Chat Widget section, select your live chat widget, Getting Started with Chat Widget, Live Chat, How to Install GHL Customer Care's Chat Widget, Overview of Chat Widget Customizations - Controls: Save, Sites > Websites, Sites > Funnels, Chat Widget, live, Next,, Related Articles Full 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? --- ## **Related Articles** - [Getting Started with Chat Widget](https://docs.ghlcustomercare.com/docs/sites/chat-widget/getting-started-with-chat-widget) - [Live Chat](https://docs.ghlcustomercare.com/docs/conversations/conversations/live-chat) - [How to Install GHL Customer Care's Chat Widget](https://docs.ghlcustomercare.com/docs/sites/chat-widget/how-to-install-ghl-customer-care-s-chat-widget) - [Overview of Chat Widget Customizations](https://docs.ghlcustomercare.com/docs/sites/chat-widget/overview-of-chat-widget-customizations) - [Create Multiple Chat Widgets in a Single Location](https://docs.ghlcustomercare.com/docs/sites/chat-widget/how-to-create-multiple-chat-widgets-in-a-single-sub-account) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com