# Add GHL Customer Care's Chat Widget to Your Weebly Website > Are you looking for an easy way to connect with your website visitors and convert them into customers? GHL Customer Care Webchat for Weebly is the perfect solution for you! - Source: https://docs.ghlcustomercare.com/docs/sites/chat-widget/add-ghl-customer-care-s-chat-widget-to-your-weebly-website - Section: Sites / Chat Widget - Reading time: 1 min - Images: 5, each explained below - Modified on Fri, 11 Oct, 2024 at 10:15 AM --- Are you looking for an easy way to connect with your website visitors and convert them into customers? GHL Customer Care Webchat for Weebly is the perfect solution for you! In this article, we'll walk you through the steps to start with GHL Customer Care Webchat for Weebly. #### **Covered in the article** #### [**How to obtain the embed code for web chat for the website:**](#how-to-obtain-the-embed-code-for-web-chat-for-the-website) #### [**Here are detailed steps on how to add a custom chat widget to a Weebly website using different methods:**](#here-are-detailed-steps-on-how-to-add-a-custom-chat-widget-to-a-weebly-website-u) #### [Method 1: Adding a Custom Chat Widget with Weebly's Header Code Injection Feature](#method-1-adding-a-custom-chat-widget-with-weeblys-header-code-injection-feature) #### [Method 2: Adding a Custom Chat Widget with Weebly's Custom HTML/ Embed Code Element](#method-2-adding-a-custom-chat-widget-with-weeblys-custom-html-embed-code-element) --- # **How to obtain the embed code for web chat for the website:** Copy the embed code from **Sites** > **Chat Widget** > **Get Code** ![How to obtain the embed code for web chat for the website: (image 1 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48297287141/original/_OQtFli-JPFoV94EyOxp5SVBt35ozqrJ9w.gif) **How to obtain the embed code for web chat for the website: (image 1 of 5)** This animation appears in the "How to obtain the embed code for web chat for the website:" section of "Add GHL Customer Care's Chat Widget to Your Weebly Website". The text alongside this image reads: Copy the embed code from Sites > Chat Widget > Get Code. The navigation path used here is Sites > Chat Widget > Get Code. Immediately after, the guide continues: Log in to your Weebly account and navigate to the website editor. Click on "Settings". - Path: Sites > Chat Widget > Get Code - What to copy: Copy the embed code from Sites > Chat Widget > Get Code - Controls: Sites, Chat Widget, Get Code - Next: Log in to your Weebly account and navigate to the website editor. Click on "Settings" --- ## **Here are detailed steps on how to add a custom chat widget to a Weebly website using different methods:** ### **Method 1:** Adding a Custom Chat Widget with Weebly's Header Code Injection Feature - Log in to your Weebly account and navigate to the website editor. - Click on "Settings"  ![Method 1: Adding a Custom Chat Widget with Weebly's Header Code Injection Feature (image 2 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48297280726/original/_MAQaHtpb9-qXJ4aoqdEUsIuPy78wgX_jQ.jpeg) **Method 1: Adding a Custom Chat Widget with Weebly's Header Code Injection Feature (image 2 of 5)** This screenshot appears in the "Method 1: Adding a Custom Chat Widget with Weebly's Header Code Injection Feature" section of "Add GHL Customer Care's Chat Widget to Your Weebly Website". The text alongside this image reads: Log in to your Weebly account and navigate to the website editor. Click on "Settings". Immediately after, the guide continues: In the left-hand menu and select "SEO" from the options. - What to click: Log in to your Weebly account and navigate to the website editor. Click on "Settings" - Next: In the left-hand menu and select "SEO" from the options. Full procedure: 1. Log in to your Weebly account and navigate to the website editor. 2. Click on "Settings" - In the left-hand menu and select "SEO" from the options. ![Method 1: Adding a Custom Chat Widget with Weebly's Header Code Injection Feature (image 3 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48297280723/original/vgjwqVj1oZOeepZ0pIjTe4994G_T6EHb9g.jpeg) **Method 1: Adding a Custom Chat Widget with Weebly's Header Code Injection Feature (image 3 of 5)** This screenshot appears in the "Method 1: Adding a Custom Chat Widget with Weebly's Header Code Injection Feature" section of "Add GHL Customer Care's Chat Widget to Your Weebly Website". The text alongside this image reads: In the left-hand menu and select "SEO" from the options. Immediately after, the guide continues: Scroll down to the "Header Code Injection" section and click "Edit". Paste the code into the "Header Code Injection" box in Weebly. - What to choose: In the left-hand menu and select "SEO" from the options. - Next: Scroll down to the "Header Code Injection" section and click "Edit". Paste the code into the "Header Code Injection" box in Weebly. Full procedure: 1. Log in to your Weebly account and navigate to the website editor. 2. Click on "Settings" - Scroll down to the "Header Code Injection" section and click "Edit". - Paste the code into the "Header Code Injection" box in Weebly. ![Method 1: Adding a Custom Chat Widget with Weebly's Header Code Injection Feature (image 4 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48297280724/original/Dt2bkzxdUvhDnfiVfX39l2TcIUbKHsZq_Q.jpeg) **Method 1: Adding a Custom Chat Widget with Weebly's Header Code Injection Feature (image 4 of 5)** This screenshot appears in the "Method 1: Adding a Custom Chat Widget with Weebly's Header Code Injection Feature" section of "Add GHL Customer Care's Chat Widget to Your Weebly Website". The text alongside this image reads: Scroll down to the "Header Code Injection" section and click "Edit". Paste the code into the "Header Code Injection" box in Weebly. Immediately after, the guide continues: Click "Save" to save your changes. - What to copy: Scroll down to the "Header Code Injection" section and click "Edit". Paste the code into the "Header Code Injection" box in Weebly. - Next: Click "Save" to save your changes. Full procedure: 1. Log in to your Weebly account and navigate to the website editor. 2. Click on "Settings" - Click "Save" to save your changes. --- ### **Method 2:** Adding a Custom Chat Widget with Weebly's Custom HTML/ Embed Code Element - Log in to your Weebly account and navigate to the website editor. - Click on "Elements" in the left-hand menu and select "Custom HTML/Embed Code" from the options. - Drag and drop the Custom HTML element onto your page where you want the chat widget to appear. ![Method 2: Adding a Custom Chat Widget with Weebly's Custom HTML/ Embed Code Element (image 5 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48297280725/original/P8tKnHQ9CnrLaJr_ZYiWHjVZWplVlSVrtQ.jpeg) **Method 2: Adding a Custom Chat Widget with Weebly's Custom HTML/ Embed Code Element (image 5 of 5)** This screenshot appears in the "Method 2: Adding a Custom Chat Widget with Weebly's Custom HTML/ Embed Code Element" section of "Add GHL Customer Care's Chat Widget to Your Weebly Website". The text alongside this image reads: Log in to your Weebly account and navigate to the website editor. Click on "Elements" in the left-hand menu and select "Custom HTML/Embed Code" from the options. Drag and drop the Custom HTML element onto your page where you want the chat widget to appear. Immediately after, the guide continues: Paste the Chat code into the Custom HTML element in Weebly. Click "Publish" to save your changes. - What to choose: Log in to your Weebly account and navigate to the website editor. Click on "Elements" in the left-hand menu and select "Custom HTML/Embed Code" from the options. Drag and drop the Custom HTML element onto your page where you want the chat widget to appear. - Next: Paste the Chat code into the Custom HTML element in Weebly. Click "Publish" to save your changes. Full procedure: 1. Log in to your Weebly account and navigate to the website editor. 2. Click on "Elements" in the left-hand menu and select "Custom HTML/Embed Code" from the options. 3. Drag and drop the Custom HTML element onto your page where you want the chat widget to appear. - Paste the Chat code into the Custom HTML element in Weebly. - Click "Publish" to save your changes. --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com