APIs & Integrations

JWharton
Contributor

Launch Chat from button or link

SOLVE

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?

0 Upvotes
1 Accepted solution
SVeldhuizen
Solution
Member

Launch Chat from button or link

SOLVE

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>

 

 

View solution in original post

7 Replies 7
SVeldhuizen
Solution
Member

Launch Chat from button or link

SOLVE

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>

 

 

VHariyani
Member

Launch Chat from button or link

SOLVE

Where do we place this code in the Webflow site developer though?

0 Upvotes
SVeldhuizen
Member

Launch Chat from button or link

SOLVE

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.

0 Upvotes
WendyGoh
HubSpot Employee
HubSpot Employee

Launch Chat from button or link

SOLVE

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();  
JNeubrander
Participant

Launch Chat from button or link

SOLVE

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.

0 Upvotes
JWharton
Contributor

Launch Chat from button or link

SOLVE

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.

0 Upvotes
WendyGoh
HubSpot Employee
HubSpot Employee

Launch Chat from button or link

SOLVE

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

0 Upvotes