So I’ve tried #hs-chat-open but it is problematic in that it only opens once. If a user clicks the link (in my case a button), the chat window opens, but if they close the chat window, that link no longer functions.
Perhaps a different script?
Hi @JWharton,
One way to reopen the chat when the chat window is close is to ensure that #hs-chat-open is remove from the link. So the flow would be like this > user go to link i.e. www.test.com > click button to open chat window > link become www.test.com#hs-chat-open > close chat window > click button to open chat window > in order for chat to open, link must become www.test.com before changing back to www.test.com#hs-chat-open.
Alternatively, you can use our Conversations Live Chat Widget API, where this function open the widget:
window.HubSpotConversations.widget.open();
Thanks Wendy. I don’t know how I would change the link back when the page isn’t refreshing.
The JS function might work but I’m no coder and working in Squarespace. I know how to load the script etc. but not the syntax for the JS file itself.
Hi @JWharton,
While I’m not too familar with Squarespace, I do have one suggestion that I’d love to share with you.
You can use the click event handler to listen for button click and add the following code:
window.HubSpotConversations.widget.open();
in it.
An example:
document.getElementById('{{button id}}').onclick = function() {
window.HubSpotConversations.widget.open();
};
Referencing this discussion here: dom events - How to check whether a Button is clicked by using JavaScript - Stack Overflow
How does one set up / implement this suggested flow? That’s exactly how my non-programmer brain thinks it should work!
So the flow would be like this > user go to link i.e. www.test.com > click button to open chat window > link become www.test.com#hs-chat-open > close chat window > click button to open chat window > in order for chat to open, link must become www.test.com before changing back to www.test.com#hs-chat-open.
Hey this worked perfectly for me. Credit goes to f’insweet.
Just target the button class using this JS script.
One reason I used this as opposed to the onlick script is that I develop in Webflow which reserves that attribute.
<!-- F’in sweet Webflow Hacks -->
<script>
// when the DOM is ready
$(document).ready(function() {
// get the anchor link buttons
const menuBtn = $('.hack15-menu-button');
// when each button is clicked
menuBtn.click(()=>{
// set a short timeout before taking action
// so as to allow hash to be set
setTimeout(()=>{
// call removeHash function after set timeout
removeHash();
}, 5); // 5 millisecond timeout in this case
});
// removeHash function
// uses HTML5 history API to manipulate the location bar
function removeHash(){
history.replaceState('', document.title, window.location.origin + window.location.pathname + window.location.search);
}
});
/**
* another way to skin the same cat
*
* $('.links').click(function(e){
* $('html, body').animate({
* scrollTop: $( $.attr(this, 'href') ).offset().top - $('.nav').height()
* }, 1000);
* return false;
* });
*/
</script>
Where do we place this code in the Webflow site developer though?
Just place it in before closing body tag in your website settings. Then all you have to do is make sure the button you want to launch the chat has that class associate with it.