Problems linking user data between Rudderstack and Hubspot in React app

Other Questions HubSpot
1

I’m trying to set up Hubspot live chat in my React app. The issue is that Rudderstack isn’t passing user info to Hubspot correctly. Even though I’m sending user data, Hubspot shows the chat as coming from an “Unknown Visitor”.

Here’s what I’ve done:

// In App.js
import { useState, useEffect } from 'react';

function App() {
  useEffect(() => {
    const hubspotScript = document.createElement('script');
    hubspotScript.src = '//js-na1.hs-scripts.com/myid.js';
    hubspotScript.async = hubspotScript.defer = true;
    document.body.appendChild(hubspotScript);
    return () => document.body.removeChild(hubspotScript);
  }, []);

  // Rest of the component...
}

// In LoginForm.js
function LoginForm() {
  const handleLogin = () => {
    // After successful login
    const userData = {
      name: 'John Doe',
      email: '[email protected]',
      companyId: 12345,
      companyName: 'ACME Inc'
    };
    rudderstack.identify(userId, userData);
  };

  // Rest of the component...
}

I’ve set up Rudderstack to use the email as the lookup field and I’m using the correct API token. The identify events show up in Rudderstack and the Hubspot API calls seem to work. But when I use the chat, it still shows as an unknown visitor. Any ideas what I’m doing wrong?

2

hey mate, have u tried checkin ur network requests? sometimes the timing of when stuff loads can mess things up. make sure rudderstack’s loaded before hubspot. also, double-check ur hubspot settings - there might be a toggle for usin external data. if all else fails, u could try addin a small delay before loadin the hubspot script. good luck!

3

I’ve encountered similar issues when integrating Hubspot chat with Rudderstack in React. One thing that helped me was ensuring the Hubspot script loads after Rudderstack is initialized and the user is identified. You might want to try moving the Hubspot script loading logic into your login flow, right after the Rudderstack identify call.

Another trick that worked for me was explicitly setting the Hubspot identity using their API. After your Rudderstack identify call, you could try something like:

window.hsq = window.hsq || [];
window.hsq.push(['identify', {
  email: userData.email,
  firstname: userData.name.split(' ')[0],
  lastname: userData.name.split(' ')[1]
}]);

This directly tells Hubspot about the user, which might bypass any potential issues with the Rudderstack integration. Also, double-check your Hubspot settings to ensure the ‘Identify known visitors’ option is enabled in the chat widget configuration.

Lastly, remember that sometimes there’s a slight delay in data syncing between platforms. If you’re testing immediately after login, try waiting a few minutes before initiating a chat to see if that makes a difference.

4

I’ve faced this issue before, and it can be frustrating. One crucial aspect you might want to check is the timing of your Rudderstack identify call. Ensure it’s happening before the Hubspot script loads and initializes. Consider using a custom event or a flag to trigger the Hubspot script load only after the user data has been sent to Rudderstack.

Additionally, verify that your Rudderstack destination for Hubspot is correctly configured. Sometimes, the mapping between Rudderstack properties and Hubspot fields can be off, leading to data not being passed correctly. It might be worth double-checking your Rudderstack dashboard settings for the Hubspot integration.

If these don’t resolve the issue, you might want to implement a fallback method using Hubspot’s own identify API directly in your React app, as a temporary solution while you troubleshoot the Rudderstack integration.