Embedding Messenger on a Landing Page

Updated by Bryan Chapman

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:

  1. Go to Thread Admin Panel
  2. Navigate to Clients
  3. Select the relevant client from the list
  4. Click Settings
  5. 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

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 or go to help.getthread.com.

How did we do?