Chatbot events or alternative method to interact with host page

SOLVE
Regular Contributor

I would like to trigger some Javascript when a user initiates the Chatbot on a particular page.  Does the new chatbot feature fire off an events that I could subscribe to on a hosting page?

 

Alternatively is there any other way to know when a chat has started or anything like that?

 

I have read on another thread that one way to do this would be to subscribe to a resize event on the chat window, which can be assumed as the chat being initiated.  This seems a bit hacky, so I am wondering if there is a better method.

 

 

 

 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Esteemed Advisor

@rowan-reid,

 

nice, this is what I found: https://share.vidyard.com/watch/Q6mhPHBaqn1FvhyAsmLj9q?

 

'div.shadow' toggles the class 'active' and 'div.hubspot-messages-iframe-container' has an inline height and width that change. 

 

Need help? Hire Us Here

- Jonathan Sumner
Reply
0 Upvotes
8 Replies 8
Community Manager

Hi @rowan-reid,

 

You can get notified through emails/notifications when someone intiates a chat through your website. Depending on your end goal, that may or may not be what you are looking for. 

 

Do you mind sharing a bit more about what your end goal is with having the event?

 

If you also have the link to the page where you are looking to implement this, that would be great!

 

Thanks,
Jenny


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Regular Contributor

Hi @jennysowyrda,

 

Thanks for the reply!  I am looking for a javascript event that I can leverage off to disable an animation that is running on the page on which the bot is embedded.  Basically, we are designing a page whereby we will have an HTML animation which brings attention to the bot at the bottom right of the screen.  Once the user clicks on / initiates the bot, I would like to hide the animation.  I anticipate that the best way to do this would be to 'listen' for the Chat Bot to fire an event indicating that it has been initated by the visitor. I hope that makes sense?

 

Regards,
Rowan

Reply
0 Upvotes
Community Manager

Thanks for the additional context, @rowan-reid!

 

I want to pull in some users who may be able to speak to this request better than I can! @Jsum and @tjoyce do you have any thoughts or suggestions for @rowan-reid?

 

Thanks,
Jenny


Did my post help answer your query? Help the Community by marking it as a solution
Top Advisor | Gold Partner

@rowan-reid - A hacky solution is your best solution right now since there is no javascript API's for the chatbot window. Maybe they will come out with one soon, a lot of people are requesting this.

 

 

Esteemed Advisor

@rowan-reid,

 

I do not have any experience with chatbot, however this might be easier than your thinking.

 

Typically, in most cases, it boils down to either an element existing/not existing or class names to show/hide elements. Figure out if the chat box exist before the window is triggered. If not then use the chat boxes existence as your condition. if it always exist then it is most likely some form of class trigger that opens it so that can be your condition. 

 

It might be possible that the elements exist in other places and are injected into the chat box container when the chat box is trigger, I'm saying this for the sake of any possible debugging, but I doubt it works this way. If it does then you can use the existence of an element inside a certain element as your condition. 

If you can share the page I could find a good trigger for you.

 

Need help? Hire Us Here

- Jonathan Sumner
Regular Contributor

@Jsum

 

Thanks for the advice, what you say does make sense.  We have not built the page yet, but here is another one of our pages that integrates a HubSpot Chatbot in the same way that we will implement it on the newpage: https://www.mpull.com

Reply
0 Upvotes
Esteemed Advisor

@rowan-reid,

 

nice, this is what I found: https://share.vidyard.com/watch/Q6mhPHBaqn1FvhyAsmLj9q?

 

'div.shadow' toggles the class 'active' and 'div.hubspot-messages-iframe-container' has an inline height and width that change. 

 

Need help? Hire Us Here

- Jonathan Sumner
Reply
0 Upvotes
Highlighted
Regular Contributor

Thanks very much!