Hello,
I’ve recently implemented a custom integration of HubSpot’s chat feature into my web application. To remove the floating chat button and instead open the chat via a button in my application’s sidebar, I utilized the inlineEmbedSelector parameter and assigned it the ID of my wrapper element. This setup successfully embeds the chat within my specified element.
However, I’m encountering an issue with closing the chat window. The ‘X’ icon, typically seen in the chat header for closing the window, is not appearing. This issue persists across both desktop and mobile views. I’m looking for a way to ensure that the ‘X’ close icon is consistently visible, allowing users to easily close the chat window.
Could anyone provide guidance or suggestions on how to resolve this? Is there a specific setting or method in the HubSpot API to enforce the visibility of the ‘X’ close icon, especially when using inlineEmbedSelector?
Any insights or advice would be greatly appreciated.
Thank you in advance for your assistance!
Hey, @kplachecki 
Thanks for your question.
It sounds like you’re facing a unique challenge with the HubSpot chat feature. While the documentation — Chat widget SDK, doesn’t specifically mention this type of limitation, there are a few basic checks you can perform:
- Have you confirmed that there are not any CSS issues?
- Checked for JavaScript errors that might be affecting the chat widget’s functionality?
Considering that you’ve customized the chat behavior by embedding it in your app’s sidebar, you might need to add a custom ‘close’ button within your chat widget container. This button would then be programmed to trigger the chat window to close.
Without a link to a live example or other way to “see” the issue, it’s challenging for the community to give an answer with any level of certainty.
Best,
Jaycee
Hey Jaycee,
Thank you for your response and the suggestions provided. To clarify the issue further, the problem arises when I use my custom wrapper for the chat. I’ve noticed that the “VisitorWidgetStyleWrapper” div does not receive the “mobile” class addition, meaning the chat code doesn’t recognize that it’s opened in a mobile version. This seems to be the root cause of the missing ‘X’ icon.
Additionally, I am looking for a way to enforce the mobile version of the chat at all times. This is important for the user experience I’m aiming to achieve.
While I could potentially add a custom ‘X’ close icon to my wrapper, it leads to another challenge. Since the chat is an iframe, I am unable to position ‘open new chat’ icon. This limitation with iframes is proving to be a significant hurdle.
Is there a way to force the chat widget to always recognize it’s in a mobile state, or a method to manipulate the iframe content for better control over these icons? Any further guidance or alternative solutions would be greatly appreciated.
Thank you again for your time and assistance.
