Hide a div when user opens the conversations widget using API events?

[JuanCA]

Good morning all.

We are working on implementing a custom prompt message for our chatbot conversation widget. So far we have created the prompt message, using the open method provided in the Conversations API docs. The conversation widget opens when the user clicks on the prompt div. Furthermore, when clicking on the prompt div to open the widget the prompt div itself fades out. 

$(document).ready(function(){
  $('#ca-chat-prompt').on('click',function(){
    window.HubSpotConversations.widget.open();
    $('#ca-chat-prompt').fadeOut(300);
  });
});

The prompt itself is fully functional but we an issue. The issue is that when the user opens the conversation widget using the widget button instead of clicking on the prompt, the prompt will remain there when the widget is closed as the fadeout function only runs when the user clic happens on the prompt div.

To solve this, we have tried to use conversationStarted event as indicated in the API docs so once the conversation starts, the prompt div would go away:

window.HubSpotConversations.on('conversationStarted', payload => {
  // function to hide the prompt would go here
});

But we haven't been able to succeed so far. We tried different variations but either we get "Cannot read property 'on' of undefined " console error or the function won't work and the prompt will remain visible upon closing widget. 

Could someone provide some ideas on how to do this?

Thanks in advance

[Derek_Gervais]

Hey @JuanCA ,

That's an excellent question. At this time, there's no "conversationStarted" event that would allow you to attach a handler when the chat window appears. I can totally understand the use case you're describing, though, and I'd be happy to pass along this feedback to the team for consideration.

While there's no documented functionality, I look forward to hearing from other community members regarding any workarounds!