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

Other Questions HubSpot
1

Hey folks, I’m struggling with a React app integration. I’m trying to get Hubspot live chat to show user info, but it’s not working right.

Here’s what I’ve done:

  1. Set up Hubspot chat in my React app
  2. Used Rudderstack to track user data
  3. Sent user details to Hubspot after login

But when I use the chat, it still shows “Unknown Visitor” instead of the user’s name and email. I’m pretty sure the data is being sent correctly - I can see the identify event in Rudderstack and the Hubspot API calls seem fine.

Here’s a simplified version of my code:

// In App.js
useEffect(() => {
  const chatScript = document.createElement('script');
  chatScript.src = '//chat-loader.hubspot.com/12345.js';
  document.body.appendChild(chatScript);
}, []);

// After login
function onLoginSuccess(userData) {
  rudderTracker.identify(userData.id, {
    name: userData.name,
    email: userData.email,
    company: userData.company
  });
}

Any ideas why Hubspot isn’t picking up the user info? Am I missing something obvious? Thanks for any help!

2

Having dealt with similar Hubspot integrations, I’d suggest checking your Rudderstack event mapping. Ensure that the properties you’re sending align exactly with what Hubspot expects. Sometimes, minor discrepancies in field names can cause issues.

Another potential culprit could be caching. Try clearing your browser cache or testing in an incognito window to rule out any cached data interfering with the new user information.

If you’re still stuck, it might be worth implementing some logging or using browser dev tools to track the data flow. This can help pinpoint where exactly the user information is getting lost in transit.

Lastly, consider reaching out to Rudderstack support. They might have insights into common integration pitfalls with Hubspot that aren’t immediately obvious.

3

I’ve faced a similar issue with Hubspot integration before. From my experience, the problem might be in the timing of when you’re sending the user data to Hubspot.

Try moving your Rudderstack identify call to just before you initialize the Hubspot chat widget. This ensures that the user data is available when the chat loads.

Also, double-check your Hubspot portal settings. Sometimes, there’s a delay in data syncing between Rudderstack and Hubspot. You might need to wait a bit or manually trigger a sync.

One more thing - make sure your Hubspot chat widget is configured to display visitor information. It’s a separate setting in the Hubspot dashboard that’s easy to overlook.

If none of these work, you might want to try using Hubspot’s own identify method directly after the chat widget loads. It’s not ideal, but it could be a workaround while you troubleshoot the Rudderstack integration.