Embedding Messenger in Websites

Updated by Stephen Boss

Introduction

Messenger was developed for easy deployment to your website or your customers' support sites by embedding HTML.

You can access the embedded code easily through the Thread Admin panel, then you just need to upload it to your site!

Before proceeding, make sure you have completed the following:
1. Finished setting up messenger.
2. Understand the difference between Partner-level and Customer-level deployments.
Be aware of the following:
1. The Sales flow portion is now disabled by default when embedding messenger in your website.
2. You can now enable and disable the sales flow inside the admin panel of inbox under the messenger tab.

How to Embed Messenger on your Website

  1. Navigate to the Thread Admin Panel
    1. If you are deploying the embedded web app for your website (Partner-level), navigate to Messenger -> Installation
    2. If you are deploying the embedded web app for your customer's support site, navigate to Clients -> Use the Magnifying Glass to search -> Select the Client you wish to create the web app for -> Installation
  2. You will see an App ID followed by an HTML code snippet. The App ID is an identifier that is unique to your tenant or client, it tells the iframe which branding and messenger settings to load. The HTML code snippet is the embedded code that you can embed in your website.
  3. Click Copy to clipboard. This will copy the snippet.
  4. Navigate to your website where you can edit the HTML code. Paste the code you copied in step 3 here. A sample of the code can be seen below.
    <script>
      var chatgenieParams = {
        appId: "YOUR-APP-ID-HERE"
      }
      function run(ch){ch.default.messenger().initialize(chatgenieParams);}!function(){var e=window.chatgenie;if(e)run(e);else{function t(){var t=document.createElement("script");t.type="text/javascript",t.async=true,t.readyState?t.onreadystatechange=function(){"loaded"!==t.readyState&&"complete"!==t.readyState||(t.onreadystatechange=null,window.chatgenie&&(e=window.chatgenie,run(e)))}:t.onload=function(){window.chatgenie&&(e=window.chatgenie,run(e))},t.src="https://messenger.chatgenie.io/widget.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)}window.attachEvent?window.attachEvent("onload",t):window.addEventListener("load",t,!1)}}();
    </script>
  5. Save changes. This should display the chat in your page, it will inherit the branding you set at the Partner or Client override-level when you set up Messenger.

Additional Deployment Flags

Code

Usage

flow: "customer"

Add this code to the chatgenieParams array to bypass the initial sales question - "I'm new and I have a question". The system will assume user is already a customer.

fullname: "USER_NAME"
companyName: "USER_COMPANY_NAME"
email: "USER_EMAIL"

This will reduce an extra step of the customer having to type in their email.

Flow Customer Example

<script>
  var chatgenieParams = {
    appId: "YOUR-APP-ID-HERE",
    flow: "customer"
  }
  function run(ch){ch.default.messenger().initialize(chatgenieParams);}!function(){var e=window.chatgenie;if(e)run(e);else{function t(){var t=document.createElement("script");t.type="text/javascript",t.async=true,t.readyState?t.onreadystatechange=function(){"loaded"!==t.readyState&&"complete"!==t.readyState||(t.onreadystatechange=null,window.chatgenie&&(e=window.chatgenie,run(e)))}:t.onload=function(){window.chatgenie&&(e=window.chatgenie,run(e))},t.src="https://messenger.chatgenie.io/widget.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)}window.attachEvent?window.attachEvent("onload",t):window.addEventListener("load",t,!1)}}();
</script>

Email bypass example

<script>
  var chatgenieParams = {
    appId: "YOUR-APP-ID-HERE",
    fullname: "USER_NAME",
    companyName: "USER_COMPANY_NAME",
    email: "USER_EMAIL"
  }
  function run(ch){ch.default.messenger().initialize(chatgenieParams);}!function(){var e=window.chatgenie;if(e)run(e);else{function t(){var t=document.createElement("script");t.type="text/javascript",t.async=true,t.readyState?t.onreadystatechange=function(){"loaded"!==t.readyState&&"complete"!==t.readyState||(t.onreadystatechange=null,window.chatgenie&&(e=window.chatgenie,run(e)))}:t.onload=function(){window.chatgenie&&(e=window.chatgenie,run(e))},t.src="https://messenger.chatgenie.io/widget.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)}window.attachEvent?window.attachEvent("onload",t):window.addEventListener("load",t,!1)}}();
</script>

Embedded Iframe App

Place an iframe in the desired location on your HTML page. You may need to do minor CSS adjustments to align it with the pay layout. Make sure you pass correct query parameters (e.g. appId=YOUR-APP-ID can be retrieved from Thread Admin Panel -> Messenger ->Installation). These parameters are the same as from above examples, i.e. flow=customer) would also work.

Example:

<iframe
 src="https://messenger.chatgenie.io?appId=YOUR-APP-ID"
 class="messenger-inline"
></iframe>

<style>
 /* Only an example */
 .messenger-inline {
     margin: 10px
     ...
 }
</style>

How did we do?