HubSpot Ideas

PatrykJ

Possibility to open the chat window by using custom button/js

It could be nice to have a possibility to open/expand the chat window by clicking on a custom button. Plenty of people would like to have (and need) this option.

 

You can also see this topic: https://community.hubspot.com/t5/Content-Design-Questions/Chat-Messages-custom-button-open-chat-wind...

HubSpot Updates
Re: Possibility to open the chat window by using custom button/js - changed to: Delivered
September 28, 2018 07:20 AM

Hi all, I'm very pleased to announce that we now have the ability to open the chat launcher by appending #hs-chat-open to your URLs, or by adding that as an anchor link tag on any buttons/links/etc. on your page. The team is also working on some more sophisticated solutions to enable the same behavior with custom CSS elements. I will update here when that goes live as well, but please enjoy the new functionality if you've been waiting for it! Details here: https://knowledge.hubspot.com/articles/kcs_article/conversations/how-to-use-conversations#automatically-open.

34 Replies
markpetty
Member

So I found an undocumented API:

 

window.hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen()

 

This triggers the chat window to open, which might be useful to some of you.

 

That is the only piece of the 'experimental API' that exists. There is no way to close the window and there are no callbacks to notify you if the chat window is opened, closed, resized etc. or to toggle targeted messages. I had to implement a resize observer to achieve those.

Onur
Contributor | Diamond Partner

@markpetty

 

-

--------------------------------------------------------------------------------------------

 

window.hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen()

 

 

-------------------------------------------------------------------------------------------

 

Thanks for the share. For the non-developers among us, how would you use it?

How do we get it to work? Would it just be a case of adding this code as a submit action to the button?

Onur
Contributor | Diamond Partner

We just solved it!

 

For anyone that would like a solution to this, get your developers to look at our implementation on Commino.co.uk

 

 

Onur
Contributor | Diamond Partner

We just solved it!

 

For anyone that wants to get this working, take a look at our implementation on commino.co.uk

 

My developer did a fantastic job!

SaltyAlex
Contributor | Elite Partner

Wow. How'd they find that?

markpetty
Member

@Onur it is just native javascript, so you can paste that into an onclick function. Something like:

 

 

<button onclick="window.hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen()">Click me</button>

should work for native HTML.

 

yaroinfo
Participant

+1 for sure.
It is so simple to implement this from HubSpot side, I don't understand why it is not implemented yet. 😞

ndwilliams3
Key Advisor

It would also be nice to embed the bot directly in the page instead of a popup.

hroberts
HubSpot Product Team

Hi all, I'm very pleased to announce that we now have the ability to open the chat launcher by appending #hs-chat-open to your URLs, or by adding that as an anchor link tag on any buttons/links/etc. on your page. The team is also working on some more sophisticated solutions to enable the same behavior with custom CSS elements. I will update here when that goes live as well, but please enjoy the new functionality if you've been waiting for it! Details here: https://knowledge.hubspot.com/articles/kcs_article/conversations/how-to-use-conversations#automatica....

raphaelarias
Contributor

@hroberts Any plans to support javascript? Because I believe sophisticated solutions are easier with Javascript than CSS.

yaroinfo
Participant

Hello everyone!

 

We have found a very easy solution. Watch the video to see the solution.

You can use the Javascript code below:

// logo-btn is ID for the element assigned with click event to show Hubspot chat window

// jQuery (ES6)
$('#logo-btn').on('click', () => {
	// check if Hubspot chat is installed
	if (window.hubspot_live_messages_running && window.hubspot && window.hubspot.messages) {
		window.hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen();
	} else {
		console.log('Please install HubSpot WordPress plugin');
	}
});

// VanillaJs (ES5)
document.getElementById('logo-btn').addEventListener('click', function(event) {
	// removef if it is no need to prevent default event such as url redirect in the <a> element
	event.preventDefault(true);
	// check if Hubspot chat is installed
	if (window.hubspot_live_messages_running && window.hubspot && window.hubspot.messages) {
		window.hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen();
	} else {
		console.log('Please install HubSpot WordPress plugin');
	}
});

 

hroberts
HubSpot Product Team

Hi all, I missed that there was a duplicate idea filed here. Please check out the update over on https://community.hubspot.com/t5/HubSpot-Ideas/Possibility-to-open-the-chat-window-by-using-custom-b.... If you have additional requests of a similar nature (I see some about a dedicated bot page, etc.) feel free to file new ideas posts for us to track community interest!

subin
Top Contributor | Gold Partner
<button onclick="window.hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen()">Click me</button>

This will work 

lukerunnells
Participant

this seems necessary in order to track chat clicks in GA or GTM. upvote!