onclick action doesn't work

mwada
Participant

We installed blow;

onclick="window.HubSpotConversations.widget.open();"


When the chat-display was turned on,it worked.
But the chat-display was turned off,it didn't work.

Is there any other tasks to work onclick action with display turned off?

0 Upvotes
9 Replies 9
KaoruM
HubSpot Employee

Hi @mwada , thank you for your fist post in HubSpot community! 

 

It looks you followed this post.

https://community.hubspot.com/t5/Tickets-Conversations/Click-to-launch-chat/m-p/405402 

Could you explain the details a bit more? 

Which devices did you want to show the chatbox?

 

@MatthewShepherd , I think he followed your idea in the previous post. Could you help him to solve the problem? 

 

mwada
Participant

Thank you Kaoru.

 

I want to show it on SP.

Our pages have original bottun to open the chatbox without default chat icon of Hubspot.

0 Upvotes
mwada
Participant

IMG_0971.PNG

0 Upvotes
mwada
Participant

If I turn on the display of default icon, pls see above screen shot, onclick action worked.

But I don't want to display the default icon, so I turned off . Then onclick action didn't work.

0 Upvotes
mwada
Participant

@MatthewShepherd ,could you help us?

0 Upvotes
MatthewShepherd
HubSpot Employee

Hi @mwada 

The onclick="window.HubSpotConversations.widget.open();" method will only open a chatflow that has been configured to target your page and is enabled, so it is expected behaviour that this won't work when you turn the chatflow off.

I believe the solution offered by @WendyGoh  in this post may be a solution for your use case:

Set your chat widget to target Query Parameter bot is true

MatthewShepherd_1-1626339491521.png

 

 

This means your chat widget won't load until that URL parameter is detected in the page being viewed. You could then just make the href in your link to open the chat widget videoworks.com?bot=true, but that will make the page reload. To avoid this you can make your link's onclick something like this:

<a href="#" onclick="window.history.pushState({}, 'bot', '?bot=true');window.HubSpotConversations.clear({resetWidget:true});">Open Chat</a>

Then just adjust your chat widget display options to have to chat widget fully open or however you want it to display when the button is clicked.

MatthewShepherd_2-1626339757102.png

 





Matthew Shepherd

Senior Inbound Consultant

Professional Services | HubSpot

He/Him

linkedin.com/in/matthewshepherd/
https://www.hubspot.com/services/professional
mwada
Participant

Hi Matthew, Thank you for your help!

I still have  2 issues . please new message below (7/16)

0 Upvotes
mwada
Participant

Hi Matthew, Thank you for your help!

We want to use the button only on SP View.

In the mobile tab, we selected "chat launcher only"

mwada_3-1626416796239.png

 

We tried ,but we still have 2 issues.

 

1. After click action, the icon of chat was displayed, but chat window was not displayed.

We want this window to be displayed just after click the button.

mwada_0-1626415942727.png

 

2. After click the close button, the icon was not dissapeared. 

 We want to dissapeared the icon after the chat closed.

mwada_2-1626416028464.png

 

0 Upvotes
MatthewShepherd
HubSpot Employee

Hi @mwada 

To open the chat widget fully on mobile try changing your chat link href to include to #hs-chat-open:

<a href="#hs-chat-open" onclick="window.history.pushState({}, 'bot', '?bot=true');window.HubSpotConversations.clear({resetWidget:true});">Open Chat</a>



I couldn't see a native method in the Chat Widget SDK to check if the chat widget is closed. However, I came up with this script (perhaps the not most elegant solution), which listens for the user's first click into the iframe chat widget and then keeps checking the value stored in the hs-messages-is-open cookie until it is false. When the value is false it means the user has closed the chat widget and the widget is removed from the page and the script stops checking the cookie.

<script>
// listen every 100 ms for first iframe click
var monitorFrame = setInterval(function () {
    var elem = document.activeElement;
    if (elem && elem.tagName == 'IFRAME') {
        clearInterval(monitorFrame);

        // Keep checking cookie value every 100 ms for first iframe click
        var monitorCookie = setInterval(function () {

            // Get hs-messages-is-open value
            function getCookie(name) {
                var re = new RegExp(name + "=([^;]+)");
                var value = re.exec(document.cookie);
                return (value != null) ? unescape(value[1]) : null;
            }

            var cookieVal = getCookie("hs-messages-is-open");

			// If cookie value is false remove the chat widget and clear 100 ms listener
            if (cookieVal == "false") {
                window.HubSpotConversations.widget.remove();
                clearInterval(monitorCookie);
            }
        }, 100);

    }
}, 100);
</script>



 

 


Matthew Shepherd

Senior Inbound Consultant

Professional Services | HubSpot

He/Him

linkedin.com/in/matthewshepherd/
https://www.hubspot.com/services/professional