Chat users not changing using Visitor Identification API

[ChrisNZ]

The short version: When we log into our app as one user and send a message, the chat will be correctly associated with that user in the Hubspot inbox. But if we then log out, log back in as a different user and send a message, the message is still associated with the first user.

The long version: We're testing out implementing Hubspot chat in our Vue app. We only want the chat to be visible to logged in users.

We set the "loadImmediately" setting to false in hsConversationsSettings, then load up the Hubspot scripts.

When a user logs in, we fetch the authentication token from Hubspot using the Visitor Identification API, and save the token. We set identificationToken and identificationEmail in hsConversationsSettings, then call window.HubspotConversations.widget.load(). When the user logouts we call window.HubspotConversations.widget.clear() and window.HubspotConversations.remove and set window.hsConversationsSettings back to loadImmediately: false.

From what I've seen the first time I open the app and login in on a normal broswer tab, it associates the login with a hubspot user. If I logout and log back in as a different user, messages will seem to come from the first user. I can close the tab, reopen the tab, login as a different user, and the messages will seem to come from the first user. But if I can login to the app through an incognito window (where there are no saved cookies) then I can log in as a different user the first time I try it.

The Hubspot documentation is unclear on when the Hubspot widget loads up the settings from hsConversationsSettings, whether the identificationToken and identificationEmail can be set to different values once the widget is loaded, or how to reinitialize  the widget with fresh hsConversationsSettings. The documentation suggests that the Visitor Identification API overrides some of the cookies set by Hubspot to normally identify users in chat, but the evidence seems to suggest some of the cookies are still used somehow.

Can anyone shed some light on how make the chat widget recognize that the app user has changed?

Some code blocks:

Login

ServerBridge.authenticateHubspotUser()
  .then(() => {
    console.log('User authenticated with Hubspot')
    window.hsConversationsSettings = {
      identificationEmail: this.$store.state.player.email,
      identificationToken: this.$store.state.player.hubspotToken
    }
    console.log('Hubspot conversations settings', window.hsConversationsSettings);
    window.HubSpotConversations.widget.load()
 })
 .catch(() => {
  console.log('Error authenticating user with Hubspot')
  })

Logout:

if (window.HubSpotConversations) {
 window.HubSpotConversations.widget.remove()
 window.HubSpotConversations.clear()
 window.hsConversationsSettings = {
  loadImmediately: false
  }
}

[ChrisNZ · Accepted solution]

I finally found the solution to this issue, so posting here in case anyone else has similar issues. We made a couple of changes to our Hubspot integration. We turned off the "contact capture from non-Hubspot" forms option, and we now make a call using the Forms API to ensure that a contact is created in Hubspot for each user.

The key change we made however related to Vue router. Previously on logout we were re-directing users to the login page via the Vue-Router "replace" command (this.$router.replace('/login'). Changing it to this.$router.go('/login') triggered a full re-render of the page including the Hubspot scripts which is apparently what was needed to properly reset the chat widget.

[Jaycee_Lewis]

Hi, @ChrisNZ 👋 Thanks for reaching out. Let's invite some community members to join the conversation. Hey, @zaklein @Teun, do you have any experience here? 

Thank you very much for taking a look.

Best,

Jaycee