Trouble linking user data in React app with Rudderstack and Hubspot chat

Other Questions HubSpot
1

I’m having a problem with my React app. I’ve set up Hubspot live chat, but it’s not showing user info correctly. Even though I’m using Rudderstack to identify users, the chat still shows them as “Unknown Visitor”.

Here’s what I’ve done:

// ChatLoader.js
import { useEffect } from 'react';

function useChatWidget() {
  useEffect(() => {
    const chatScript = document.createElement('script');
    chatScript.src = '//chat-cdn.example.com/widget.js';
    chatScript.async = true;
    document.body.appendChild(chatScript);

    return () => document.body.removeChild(chatScript);
  }, []);
}

// UserAuth.js
function trackUserLogin(userData) {
  const userInfo = {
    name: userData.fullName,
    emailAddress: userData.email,
    organization: {
      orgId: userData.companyId,
      orgName: userData.companyName
    }
  };
  analytics.identifyUser(userData.userId.toString(), userInfo);
}

I’ve set up Rudderstack to use the email as the lookup field and added the right API token. The identify events show up in Rudderstack, and the API calls to Hubspot seem to work fine.

Any ideas why the chat still shows “Unknown Visitor”? I’m stuck and could use some help. Thanks!

2

hey there happydancer99, i had this issue too. make sure ur rudderstack events are firing before the chat loads. try moving the chat script to load after user identification. also, double check ur hubspot settings - sometimes theres a delay in processing user data. if nothing works, maybe try a diff chat solution? good luck!

3

I encountered a similar issue when integrating Hubspot chat with our React application. The problem might be related to timing or data synchronization between Rudderstack and Hubspot.

One solution that worked for us was to implement a short delay after the user identification event before initializing the chat widget. This gave Hubspot’s systems time to process the user data.

Additionally, ensure that the Hubspot chat widget is initialized after the Rudderstack identification event. You might want to modify your ChatLoader component to accept a prop indicating whether the user has been identified, and only load the chat script once that prop is true.

Lastly, double-check that the email field names match exactly between Rudderstack and Hubspot. Even a small discrepancy like ‘email’ vs ‘emailAddress’ can cause issues.

If these steps don’t resolve the problem, I’d recommend reaching out to Hubspot’s support team for further assistance.