> ## Documentation Index
> Fetch the complete documentation index at: https://helpdocs.getthread.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding Messenger on a Landing Page

> Embed Thread Messenger on general or client-specific landing pages using parent or client App IDs to offer branded, in-browser support and live chat.

You can embed the Thread Messenger widget on any landing page to provide seamless customer support. Depending on your use case, you’ll either use a **parent-level appId** (for general support) or a **client-specific appId** (for tailored experiences). This article walks you through both.

## **Use Cases**

### **1. General Landing Page (All Clients)**

Use this option if you want a single support portal for all your clients—ideal for company-wide or product-agnostic landing pages.

* Use the **parent appId**located in **Thread admin panel → Messenger → Installation**.
* Commonly deployed on your company’s main domain (e.g. `yourcompany.com`)

### **2. Dedicated Client Landing Page**

This setup creates a branded experience for a specific client.

* Use the **unique client\*\*\*\*appId**located in **Thread admin panel → Clients → Select Client → Installation**.
* Must be deployed on a dedicated **subdomain** (e.g. `clientname.yourcompany.com`)

## **How to Embed Messenger**

Add the following code to your landing page’s HTML. You only need to update the **placeholders**:

```
<!-- Support Section -->
<div style="max-width: 400px; padding: 40px; font-family: 'Segoe UI', sans-serif; color: #0c1a30;">
  <h1 style="font-size: 2rem; margin-bottom: 30px;"><strong>Support</strong></h1>

    <!-- Email Support -->
    <div style="margin-bottom: 25px;">
      <div style="display: flex; align-items: center; margin-bottom: 5px;">
        <i class="fas fa-envelope fa-lg" style="margin-right: 12px;"></i>
        <span style="font-weight: 600; font-size: 1.1rem;">Email Support</span>
    </div>
  <div style="margin-left: 32px; color: #7a7a7a;">support@yourdomain.com</div>
</div>

    <!-- Call Support -->
    <div>
      <div style="display: flex; align-items: center; margin-bottom: 5px;">
        <i class="fas fa-phone fa-lg" style="margin-right: 12px;"></i>
        <span style="font-weight: 600; font-size: 1.1rem;">Call Support</span>
    </div>
    <div style="margin-left: 32px; color: #7a7a7a;">(555) 555-5555</div>
  </div>
</div>

<!-- Messenger Embed -->
  <div class="span5 widget-span widget-type-cell" style="">
    <iframe 
      src="https://messenger.chatgenie.io?appId=add-your-appid-here" 
      class="messenger-inline" 
      style="width: 100%; height: 500px; border: none;">
    </iframe>
  </div>
</div>
```

### **Replace Parameters**

* `add-your-appid-here`: with the correct **parent** or **client-specific** Messenger appId (
* `add-your-support-link-here`: link to your Help Center or documentation
* `add-your-email-here`: support email address
* `add-your-feedback-link-here`: optional feedback form or URL

### **Customization Tips**

* **Icons**: You can change the icons using other Font Awesome icons.
* **Colors**: The primary text is dark navy (`#0c1a30`), and the support detail text is gray (`#7a7a7a`), to match the soft contrast from the screenshot.
* **Fonts**: You can swap `Segoe UI` for `Inter`, `Arial`, or anything your brand uses.

## **Overriding Client-Level Messenger Settings**

If you're using a client-specific appId and need to customize their Messenger experience (e.g. change support hours or service queue), follow these steps:

<Steps>
  <Step title="Go to Thread Admin Panel">
    Go to **Thread Admin Panel**
  </Step>

  <Step title="Navigate to Clients">
    Navigate to **Clients**
  </Step>

  <Step title="Select the relevant client">
    Select the relevant client from the list
  </Step>

  <Step title="Click Settings">
    Click **Settings**
  </Step>

  <Step title="Override parent settings">
    Hit \*\*"Override parent settings"\*\*and you can now customize client-level settings such as:

    * Set a custom **Service Board**, **Team**, or **Queue**
    * Change **Messenger Design**
    * Set **Support Hours**
  </Step>
</Steps>

## **Quick Checklist**

| Task              | General Page | Dedicated Client Page |
| ----------------- | ------------ | --------------------- |
| Use correct appId | Parent appId | Client appId          |
| Embed iframe      |              |                       |
| Customize content | Optional     | Recommended           |
| Use a subdomain   |              | Required              |
| Override settings |              | Optional              |

## **Need Help?**

Reach out to us at [help@getthread.com](mailto:help@getthread.com) or go to [**help.getthread.com**](https://help.getthread.com/).


## Related topics

- [Messenger Settings: Configure Chat, Design, and Hours](/inbox/messenger.md)
- [Member and Contact Avatars in Inbox and Messenger](/inbox/avatars.md)
- [Automate PSA Scheduling with Microsoft Bookings](/integrations/microsoft-bookings-integration-for-psa-scheduling.md)