# Facebook and Instagram Chat Widgets

> Add Facebook Messenger and Instagram DM chat widgets to your site. Drive faster replies by routing visitors to Messenger or IG DMs on their preferred channel.

- Source: https://docs.ghlcustomercare.com/docs/sites/chat-widget/facebook-and-instagram-chat-widgets
- Section: Sites / Chat Widget
- Reading time: 3 min
- Images: 5, each explained below

---
Bring real-time Messenger and DM conversations right to your website. The new Facebook Chat and Instagram Chat widget types let you greet visitors on the Meta channel they already use, boosting response rates and streamlining follow-ups.

---

**TABLE OF CONTENTS**

-   [What are Facebook & Instagram Chat Widgets?](#what-are-facebook-and-instagram-chat-widgets)
-   [Key Benefits of Facebook & Instagram Chat](#key-benefits-of-facebook-and-instagram-chat)
-   [How To Setup Facebook & Instagram Chat Widgets](#how-to-setup-facebook-and-instagram-chat-widgets)
-   [Frequently Asked Questions](#frequently-asked-questions)
-   [Related Articles](#related-articles)

---

# **What are Facebook & Instagram Chat Widgets?**

Facebook Chat and Instagram Chat are **channel-specific** options inside the GHL Customer Care Chat Widget. Instead of opening a website messenger, these widget types **redirect** visitors to the selected Meta channel (Messenger or Instagram DM) so conversations continue natively on Facebook or Instagram. Each type comes with a dedicated setup panel in the builder for selecting (or connecting) the correct Facebook Page or Instagram business account.

---

## **Key Benefits of Facebook & Instagram Chat**

-   **Frictionless Engagement**: Visitors continue the conversation in Messenger or IG DM without creating a separate on-site chat thread.
    
-   **Channel Preference**: Meet customers on the social platform they already use for daily messaging.
    
-   **Better Adoption**: Leverages users’ existing Facebook/Instagram logins and apps.
    
-   **Unified Inbox:** Keep every Meta conversation inside GHL Customer Care’s Conversations inbox alongside SMS, email, and WhatsApp.
    
-   **Cross-Device Continuity**: Conversations persist in the user’s Messenger/IG app, so threads follow them across devices without losing history.
    

---

## **How To Setup Facebook & Instagram Chat Widgets**

Follow these steps to quickly and easily create a Facebook or Instagram chat widget that you can install on your website!

#### **Step 1:** Create a New Widget

Navigate to **Sites** → **Chat Widgets** then select the blue **+** **New** button.

![Step 1: Create a New Widget (image 1 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155060348475/original/elOj_5dm-_s2o0sUdzfnGJj623Dq3ovuUw.png)

**Step 1: Create a New Widget (image 1 of 5)**

This screenshot appears in the "Step 1: Create a New Widget" section of "Facebook and Instagram Chat Widgets". The text alongside this image reads: Navigate to Sites → Chat Widgets then select the blue + New button. Immediately after, the guide continues: In the "Select the type of chat” pop-up, choose Facebook Chat or Instagram Chat.
- Where to go: Navigate to Sites → Chat Widgets then select the blue + New button.
- Controls: Sites, Chat Widgets, +, New
- Next: In the "Select the type of chat” pop-up, choose Facebook Chat or Instagram Chat.

#### **Step 2:** Select Chat Type

In the "Select the type of chat” pop-up, choose **Facebook Chat** or **Instagram Chat**.

If a Facebook/Instagram account is connected but no pages are selected, a page selection modal opens up to select the page to be used in the widget.

![Step 2: Select Chat Type (image 2 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155060350088/original/yO7fZsVYCVXXsGVHatbDlcCq6bgQDfR5Vg.jpeg)

**Step 2: Select Chat Type (image 2 of 5)**

This screenshot appears in the "Step 2: Select Chat Type" section of "Facebook and Instagram Chat Widgets". The text alongside this image reads: If a Facebook/Instagram account is connected but no pages are selected, a page selection modal opens up to select the page to be used in the widget. Immediately after, the guide continues: Important: You cannot select Facebook Chat or Instagram Chat here unless a corresponding account is already connected to the sub-account. If you don’t have a connected account yet, the in-modal link will instead prompt you to connect an….
- What to choose: If a Facebook/Instagram account is connected but no pages are selected, a page selection modal opens up to select the page to be used in the widget.
- Controls: Facebook Chat, Instagram Chat
- Next: Important: You cannot select Facebook Chat or Instagram Chat here unless a corresponding account is already connected to the sub-account. If you don’t have a connected account yet, the in-modal link will instead prompt you to connect an account (e.g., Connect Facebook/Instagram under integrations). Open this link, connect your account, then return to this selector to choose the chat type.

**Important:** You cannot select Facebook Chat or Instagram Chat here unless a corresponding account is already connected to the sub-account. If you don’t have a connected account yet, the in-modal link will instead prompt you to connect an account (e.g., Connect Facebook/Instagram under integrations). Open this link, connect your account, then return to this selector to choose the chat type.

![Step 2: Select Chat Type (image 3 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155060350092/original/jsVdwN__K5cjKScy1fhL_BpcM8DtY01HBQ.png)

**Step 2: Select Chat Type (image 3 of 5)**

This screenshot appears in the "Step 2: Select Chat Type" section of "Facebook and Instagram Chat Widgets". The text alongside this image reads: Important: You cannot select Facebook Chat or Instagram Chat here unless a corresponding account is already connected to the sub-account. If you don’t have a connected account yet, the in-modal link will instead prompt you to connect an account (e.g., Connect Facebook/Instagram under…. Immediately after, the guide continues: Customize the Style, Chat Window and Messaging tabs as needed (colors, greeting text, launcher icon) to build a widget that matches your brand. For additional design options, see Overview of Chat Widget Customizations.
- What to fill in: Important: You cannot select Facebook Chat or Instagram Chat here unless a corresponding account is already connected to the sub-account. If you don’t have a connected account yet, the in-modal link will instead prompt you to connect an account (e.g., Connect Facebook/Instagram under integrations). Open this link, connect your account, then return to this selector to choose the chat type.
- Controls: Facebook Chat, Instagram Chat
- Next: Customize the Style, Chat Window and Messaging tabs as needed (colors, greeting text, launcher icon) to build a widget that matches your brand. For additional design options, see Overview of Chat Widget Customizations.

#### **Step 3:** Customize the Widget

Customize the **Style**, **Chat Window** and **Messaging** tabs as needed (colors, greeting text, launcher icon) to build a widget that matches your brand. For additional design options, see [Overview of Chat Widget Customizations.](https://docs.ghlcustomercare.com/docs/sites/chat-widget/overview-of-chat-widget-customizations)

Within the **Chat Window** tab, you can change what Facebook/Instagram account is linked to the widget. If needed, click **Connect a linked Facebook/Instagram account** button to open the new connection modal and add more pages/accounts.

After making all required edits, save your widget.

![Step 3: Customize the Widget (image 4 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155060350150/original/hCpviuit3NtfBrynsJe5_HGgO4PThscLtA.png)

**Step 3: Customize the Widget (image 4 of 5)**

This screenshot appears in the "Step 3: Customize the Widget" section of "Facebook and Instagram Chat Widgets". The text alongside this image reads: After making all required edits, save your widget. Immediately after, the guide continues: To install this widget on a 3rd party site, click Get Code t hen embed the code snippet on your website/funnel where you want the widget to appear. If you are installing it onto a Wordpress site, click Get it for Wordpress. This widget….
- How to confirm: After making all required edits, save your widget.
- Controls: Style, Chat Window, Messaging
- Next: To install this widget on a 3rd party site, click Get Code t hen embed the code snippet on your website/funnel where you want the widget to appear. If you are installing it onto a Wordpress site, click Get it for Wordpress. This widget can also be installed directly within the GHL Customer Care Funnel and Website builders

#### **Step 4:** Share Your Widget

To install this widget on a 3rd party site, click **Get Code t**hen embed the code snippet on your website/funnel where you want the widget to appear. If you are installing it onto a Wordpress site, click **Get it for Wordpress.** This widget can also be installed directly within the GHL Customer Care Funnel and Website builders 

To learn more, check out [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)

![Step 4: Share Your Widget (image 5 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155060349629/original/tkuC8Q7A2ZfTxvzZkN4MegGTa8PChiaJaw.png)

**Step 4: Share Your Widget (image 5 of 5)**

This screenshot appears in the "Step 4: Share Your Widget" section of "Facebook and Instagram Chat Widgets". The text alongside this image reads: To learn more, check out How to Install GHL Customer Care's Chat Widget. Immediately after, the guide continues: Q: Can I enable both Facebook and Instagram in one widget?
- What this covers: To learn more, check out How to Install GHL Customer Care's Chat Widget
- Controls: Get Code t, Get it for Wordpress.
- Next: Q: Can I enable both Facebook and Instagram in one widget?

---

## **Frequently Asked Questions**

**Q: Can I enable both Facebook and Instagram in one widget?**

No. Each widget is tied to a single channel. For multi-channel bubbles, use the All-in-One Chat widget.

**Q: Will conversations show up inside GHL Customer Care’s Conversations tab?**  
Yes, provided your Facebook/Instagram integrations and permissions are correctly connected and messaging access is enabled. 

**Q: Can I run automations on incoming messages?**

Absolutely! Use the Facebook Message or Instagram Message workflow triggers to tag, assign, or route the chat.

**Q: Does the visitor have to be logged in to Facebook or Instagram?**

Yes. If they are not logged in, the Meta login screen opens first.

**Q: Do Style and Messaging settings work differently for FB/IG widgets?**  
No. Styling and placement behave the same as other chat types. The main difference is **where** the conversation occurs (Meta vs on-site).

---

## **Related Articles**

-   [Getting Started with Chat Widget](https://docs.ghlcustomercare.com/docs/sites/chat-widget/getting-started-with-chat-widget)
-   [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)
-   [Step-by-Step Guide to Facebook Integration in GHL Customer Care](https://docs.ghlcustomercare.com/docs/integrations/facebook-integration/step-by-step-guide-to-facebook-integration-in-ghl-customer-care)
-   [Connect Instagram: Facebook-Linked vs. Direct Instagram Integration](https://docs.ghlcustomercare.com/docs/marketing/social-planner/connect-instagram-facebook-linked-vs-direct-instagram-integration)
-   [How to Use the All-in-One Chat Widget](https://docs.ghlcustomercare.com/docs/sites/chat-widget/how-to-use-the-all-in-one-chat-widget)

---

Documentation for GHL Customer Care. Support: support@ghlcustomercare.com