How to properly reset the conversation widget (chat) on page load?

VetoMP · ‎Nov 3, 2020

Hi,

We have HubSpot conversation chatflows in our Wordpress site and we are using four different chatflows for different pages of the site. Those are individually working as expected. However, the current issue is that if a user visits the home page and begins a chat conversation there, then that chat conversation history gets carried over to other pages on the site. This is an issue because we have a different chatflow for example on the contact page. So, if the user first begins a chat conversation on the home page and then changes the page to the contact page, the same chat history from the home page would still be remembered and visible. What we need is for the conversation widget to reset itself to make sure that the correct chatflow is loaded everytime on page load.

I've read the Conversations SDK documentation: https://developers.hubspot.com/docs/api/conversation/chat-widget-sdk and I believe the following clear method is exactly what we need:

window.HubSpotConversations.clear({resetWidget:true});

Based on the examples shown there, I created the following JavaScript which is being loaded in the <head> of the HTML page:

<script type="text/javascript">
// Define the function which is to be called once the widget is ready
function onConversationsAPIReady() {
        console.log(`1. HubSpot Conversations API: ${window.HubSpotConversations}`);

        // Check and log the widget status
        const status = window.HubSpotConversations.widget.status();
                console.log(`2.` + status);

        if (status.loaded) {
                console.log(`3. HubSpot conversations widget is loaded and will not be cleared`);
        } else {
                console.log(`3. About to clear HubSpot conversations widget and HubSpot cookies`);

                // Delete conversation cookies and return the widget to default state
                // Reason: We do not want to preserve the chat state across different pages
                window.HubSpotConversations.clear({resetWidget:true});
                console.log(`4. HubSpot conversations widget was cleared`);
        }
}

// If external API methods are already available, use them
if (window.HubSpotConversations) {
        // Call the function
        onConversationsAPIReady();
        console.log(`5. Function call`);
} else {
     // Otherwise, callbacks can be added to the hsConversationsOnReady window object.
     // These callbacks will be called once the external API has been initialized.
        window.hsConversationsOnReady = [onConversationsAPIReady];
        console.log(`5. Callback`);
}
</script>

However it is causing a loop in which the onConversationsAPIReady() function seems to be called over and over again which can be seen from the console logs (marked in red). I'm thinking this could be because the window.HubSpotConversations method is also using the window.hsConversationsOnReady event which then calls the function over and over again (?):

If I change the "clear" method to any other method, for example to:

window.HubSpotConversations.widget.refresh();

then the onConversationsAPIReady() function only gets called once as expected. So, something in the

window.HubSpotConversations.clear({resetWidget:true});

method is causing this loop and the documentation does not really explain why. We need to use that method so that the chat conversation gets cleared every time on page load by deleting the associated cookies. Or is there another way?

Could you please assist on how this method is supposed to be used without causing the looping issue? Calling the function repeatedly is increasing page load time until the maximum call stack size gets exceeded and the script finally ends. I could not find any working examples of this.

Disclaimer: Unfortunately, I cannot share a live example on our production site, but I'd expect that my code would give similar results on other sites as well. Also, I am not an actual web developer so in-depth answers are greatly appreciated.

Thank you in advance.

VetoMP · ‎Nov 9, 2020

I ended up making a solution like this. Not perfect but at least it works. The loop was happening because the window.HubSpotConversations.clear({resetWidget:true}); method re-initialized the conversations widget which then would cause the callback to call the function again. I basically added a variable onConversationAPIReady_call_count which I am using to track the amount of times that the function has been called. I then use that to limit the function call count to just 1.

<script type="text/javascript">

// Variable for tracking the function's call count
var onConversationsAPIReady_call_count = 0;

// Define the function which is to be called once the widget is ready
function onConversationsAPIReady() {

console.log("2. Executing onConversationsAPIReady()");

        // Test function call count value
        if (onConversationsAPIReady_call_count > 0) {
                console.log("4. onConversationsAPIReady() function has already been called, ignoring...");
                return;
        } else {
                // Added a delay to make sure that the widget is cleared only after it's first been initialized. This did not work without the delay as old conversation history managed to load too quickly after page change.
                setTimeout(function(){
                        console.log("3. onConversationsAPIReady() first call, about to reset conversations widget and increase call count by 1");
                        onConversationsAPIReady_call_count = 1;
                        window.HubSpotConversations.clear({resetWidget:true});
                        console.log("5. Conversations widget was reset and call count increased by 1");

                        // Makes HubSpot iframe container visible with a delay
                        setTimeout(function(){
                                console.log("6. Conversations widget has been properly reset, so making widget visible");
                                document.getElementById("hubspot-messages-iframe-container").style.visibility="visible";
                        }, 500);
                }, 500);
        }
}

// If external API methods are already available, use them
if (window.HubSpotConversations) {
        // Call the function
        onConversationsAPIReady();
        console.log("1. onConversationsAPIReady() function call");
} else {
     // Otherwise, callbacks can be added to the hsConversationsOnReady window object.
     // These callbacks will be called once the external API has been initialized.
        window.hsConversationsOnReady = [onConversationsAPIReady];
        console.log("1. onConversationsAPIReady() callback");
}
</script>

The issue with that was that the chat widget icon would quickly disappear on the page and then re-appear. This was something that the users would notice and it looked out of place. I hid this in on the site's CSS by changing the ID #hubspot-messages-iframe-container to visibility: hidden by default.

#hubspot-messages-iframe-container {
	visibility: hidden;
}

I then changed that value to visible in the JavaScript. I had to do this with a delay as otherwise the CSS seemed to change visibility to visible before the widget had actually fully reset, which caused the default CSS to again hide the ID.

Not the perfect solution for sure, but I will mark this as answer unless someone provides a better one.

View solution in original post

VetoMP · ‎Nov 5, 2020

In addition, I noticed that when manually deleting the messagesUtk cookie, it gets a new unique value when it is automatically re-created after page refresh. The

window.HubSpotConversations.clear();

method does seem to remove the cookie. But it gets immediately created automatically again with the same value. Shouldn't the cookie value change when the clear method is used?

Cookie value before changing the page when the window.HubSpotConversations.clear() method is used:

Cookie value after changing the page when the window.HubSpotConversations.clear() method is used:

So the value is the same and has not changed.

I also checked the cookie value before changing the page when the window.HubSpotConversations.clear({resetWidget:true}) method is used instead:

Cookie value after changing the page when the window.HubSpotConversations.clear({resetWidget:true}) method is used:

If window.HubSpotConversations.clear({resetWidget:true}) method is used, the value does change. Without {resetWidget:true}, it does not.

VetoMP · ‎Nov 9, 2020

I ended up making a solution like this. Not perfect but at least it works. The loop was happening because the window.HubSpotConversations.clear({resetWidget:true}); method re-initialized the conversations widget which then would cause the callback to call the function again. I basically added a variable onConversationAPIReady_call_count which I am using to track the amount of times that the function has been called. I then use that to limit the function call count to just 1.

<script type="text/javascript">

// Variable for tracking the function's call count
var onConversationsAPIReady_call_count = 0;

// Define the function which is to be called once the widget is ready
function onConversationsAPIReady() {

console.log("2. Executing onConversationsAPIReady()");

        // Test function call count value
        if (onConversationsAPIReady_call_count > 0) {
                console.log("4. onConversationsAPIReady() function has already been called, ignoring...");
                return;
        } else {
                // Added a delay to make sure that the widget is cleared only after it's first been initialized. This did not work without the delay as old conversation history managed to load too quickly after page change.
                setTimeout(function(){
                        console.log("3. onConversationsAPIReady() first call, about to reset conversations widget and increase call count by 1");
                        onConversationsAPIReady_call_count = 1;
                        window.HubSpotConversations.clear({resetWidget:true});
                        console.log("5. Conversations widget was reset and call count increased by 1");

                        // Makes HubSpot iframe container visible with a delay
                        setTimeout(function(){
                                console.log("6. Conversations widget has been properly reset, so making widget visible");
                                document.getElementById("hubspot-messages-iframe-container").style.visibility="visible";
                        }, 500);
                }, 500);
        }
}

// If external API methods are already available, use them
if (window.HubSpotConversations) {
        // Call the function
        onConversationsAPIReady();
        console.log("1. onConversationsAPIReady() function call");
} else {
     // Otherwise, callbacks can be added to the hsConversationsOnReady window object.
     // These callbacks will be called once the external API has been initialized.
        window.hsConversationsOnReady = [onConversationsAPIReady];
        console.log("1. onConversationsAPIReady() callback");
}
</script>

The issue with that was that the chat widget icon would quickly disappear on the page and then re-appear. This was something that the users would notice and it looked out of place. I hid this in on the site's CSS by changing the ID #hubspot-messages-iframe-container to visibility: hidden by default.

#hubspot-messages-iframe-container {
	visibility: hidden;
}

I then changed that value to visible in the JavaScript. I had to do this with a delay as otherwise the CSS seemed to change visibility to visible before the widget had actually fully reset, which caused the default CSS to again hide the ID.

Not the perfect solution for sure, but I will mark this as answer unless someone provides a better one.

dennisedson · ‎Nov 4, 2020

Hey @VetoMP !

Thanks for the very detailed post.

Instead of the nuclear method of

window.HubSpotConversations.clear({resetWidget:true});

which clears all cookies, removes the widget from the page and then inserts a new one (which i think is causing your loop), why not try to just remove the cookies?

window.HubSpotConversations.clear();

Maybe you already tried this?

@himanshurauthan , @DanielSanchez , what do you all think?

VetoMP · ‎Nov 5, 2020

Hi,

Thank you for the reply. I have tried to use

window.HubSpotConversations.clear();

instead, but that does not seem to actually get rid of the conversation history. If I begin a chat conversation on one page, then that chat conversation history still gets carried over to other pages on the site. You're right in that the ({resetWidget:true}); is causing the loop because the looping does not occur without it. However I cannot seem to get rid of the actual conversation history without it.

I did notice that the cookies, e.g. messagesUtk, do still get removed even without ({resetWidget:true});. But for some reason, the chat widget still displays the old conversation on the widget despite the fact that I'm testing with the site's Wordpress caching plugin (WP Rocket) and browser cache disabled.

Any takes on this?

Thank you in advance.

APIs & Integrations