Intercom

Article author
Memberstack Team
  • Updated

You can use the new Memberstack 2.0 front-end API and the following code to automatically identify members on your site. This article applies to static / multi-page sites like Webflow.  See here if you’re using a single-page app framework (like React or Vue).

The following code has been adapted from this Intercom article.

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: "<https://api-iam.intercom.io>",
    app_id: INTERCOM_APP_ID,
		// 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.

  1. Paste the code right before the closing body tag on every page of your website.
  2. We've edited the code to pre-populate the member's name, email address and user ID.
  3. 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>

function initIntercom(member) {
  window.intercomSettings = {
		// pass in standard Intercom config to identify visitors
    api_base: "<https://api-iam.intercom.io>",
    app_id: INTERCOM_APP_ID,
    // pass in config for logged-in users, ONLY if the member object exists
    ...(member && ({
      user_id: member.id, // this is the member id
      email: member.auth.email, // this is the member email
			// this is the custom field 'name', but it only works if you have this field in your account
      name: member.customFields["name"], 
    }))
  }
}

You can access Memberstack custom fields in the following way:

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

The Custom Field ID can be found on each custom field’s setting popup.

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.