Intercom

Updated January 20, 2023 00:16

Easy Install (Low Code)

The code below uses the Memberstack Extended library to help you integrate with Intercom as simply as possible.

Installation:

Add the following script to the BODY block in the custom code of your global site settings.


<script type="module" src="https://memberstack.github.io/memberstack-x/dist/memberstack-x.es.js"></script>
<script>
$( document ).ready(function() {
const Msx = window.Msx
const INTERCOM_APP_ID = "<app_id>"

let { intercom } = Msx.plugins;

Msx.registerPlugins(({ member, hooks }) => ({
  plugins: [
    intercom({
      app_id: INTERCOM_APP_ID,
      memberSettings: {
        // use hooks.getField("<field-id>") to retrieve custom fields!
        name: hooks.getField("first-name"),
      },
    }),
  ],
}));
});
</script>

💪 There's no need to supply a member ID or Email. The plugin will automatically pass that data to Intercom.

The code snippet above uses the Memberstack Extended (Msx) library. This library is a companion to your existing Memberstack script that helps you keep your Webflow code clean and concise. It also makes working with the Memberstack front-end API much simpler!

Implement from Scratch (For Advanced Users)

If you’re comfortable with JavaScript and prefer to implement Intercom yourself (without the help of an abstraction library), you can follow the steps below.

Identify logged-in members

(With fallback logic for visitors/non-members)

<script>
const INTERCOM_APP_ID = "your app id here";
const memberstack = window.$memberstackDom

function initIntercom(member) {
  window.intercomSettings = {
    // pass in standard Intercom config to identify visitors
    api_base: "REPLACE_ME",
    app_id: "REPLACE_ME",
// pass in config for logged-in users, ONLY if the member object exists
    ...(member && ({
      user_id: member.id,
      email: member.auth.email,
      name: member.customFields["name"],
    }))
  }
}

memberstack.getCurrentMember()
  .then(({ data: member }) => {
// value of 'member' may or may not be null based on session status
   initIntercom(member);
})
</script>

// ... the intercom embed script tag should go here

Here's the page in Intercom where you add JavaScript code — Intercom pre-populates your workspace ID (this appears as your INTERCOM_APP_ID in the code) for you.

Paste the code right before the closing body tag on every page of your website.
We've edited the code to pre-populate the member's name, email address and user ID.
IMPORTANT: If you copy the code snippet above, make sure to manually change your workspace ID (this is called your INTERCOM_APP_ID in the code).

Sending Custom Fields to Intercom

You can pass as many key value pairs of user info that you want. Inside of the initIntercom function, there’s special logic that will only pass a logged-in config object IF the user is logged in.

The config object is just a set of key value pairs where the key represents attributes from intercom and the value represents member data from Memberstack.

{ "intercom_attribute": "memberstack data" }

<aside> ⚠️ Make sure you’re spelling Intercom attributes AND Memberstack custom fields exactly as they say to be referenced. For more info on Intercom attributes, see here.

</aside>

You can access Memberstack custom fields in the following way:

{
	...
	"intercom_attribute": member.customFields["custom field id"]
	...
}