Intercom

If you’re comfortable with JavaScript, you can follow the steps below.

Identify logged-in members

(The widget will only show when a member is logged in and has the required fields.)

<script>
const INTERCOM_APP_ID = "your app id here";
const memberstack = window.$memberstackDom;
const CUSTOM_FIELD_ID = "Your custom field id"; // e.g. "name", "first-name", etc.

async function initIntercom() {
    try {
        const { data: member } = await memberstack.getCurrentMember();

        // Proceed only if member is logged in and required fields are available. 
        if (member && member.id && member.auth?.email && member.customFields?.[CUSTOM_FIELD_ID]) {

            window.intercomSettings = {
                api_base: "https://api-iam.intercom.io",
                app_id: INTERCOM_APP_ID,
                user_id: member.id,
                email: member.auth.email,
                name: member.customFields[CUSTOM_FIELD_ID]
            };

            // Dynamically load the Intercom script after setting the intercomSettings 
            loadIntercomScript();
        }
    } catch (error) {
        console.error("Error initializing Intercom:", error);
    }
}

function loadIntercomScript() {
    const script = document.createElement('script');
    script.async = true;
    script.src = `https://widget.intercom.io/widget/${INTERCOM_APP_ID}`;
    document.body.appendChild(script);
}

initIntercom();
</script>

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>

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.