Make it easier to close Hubspot Conversations on mobile

[ianpetzer]

We are continuously getting complaints from our customers about their experience with Hubspot chat on mobile as they struggle to close the welcome message for Hubspot Conversations

The tappable area of the 'x' is too small for peoples fingers so they keep on opening the chat instead of closing it. Please could you increase the size of the tappable area for the 'x'.

You don't need to make the 'x' bigger. Just increase the tappable area. This won't change the functioanlity at all of the chatbot at all. It just improves the user experience.

Possible solutions:

1) On our website, we make a div with padding around the 'x' clickable as shown in the screenshot below.

2) Another option is to add an :after element to increase the tappable size as suggested here: https://css-tricks.com/enhancing-the-clickable-area-size/

Please I beg you to make these changes. We are unable to override the hubspot css as the chat widget is in an iframe. I have tried switching off the chat but that dropped our conversion rate. The only thing that stops us from moving to another chat provider is that we love having the history of leads in hubspot and we can target them according to lifecycle stage in hubspot chat.

[ianpetzer]

Hi @WendyGoh ,

Any feedback on this? We are really struggling with this

[WendyGoh]

Hey @ianpetzer,

Thanks for sharing such a detailed use case with us! To further clarify, by the chat widget close button, are you referring to this:

or this:

or both?

Additionally, as I have not heard of similar feedback, I'm curious to understand more about the customers/users of your team that is facing this issue. Do you have an idea of the mobile that they are using? Are all of them facing similar issue? Lastly, do you have an example page that you can share? 

[ianpetzer]

Hi Wendy,

Thanks for the quick response.

I'm referring to the first image, which shows the welcome message.  Please see the following screenshots which show the tappable areas of the two different 'x' buttons for th Hubspot chat widget on our website.

You'll see that the tappable area shown for the welcome message is tiny at 14x26 pixels. THis is highlighted in blue using Chrome dev tools.

However the x to close the actual full screen hubspot conversations window has a larger tappable area around the 'x' of 40x40 pixels. The blue area highlighted by Chrome deve tools is much bigger than the actual x.

 

In fact if you refer to the google developer guidelines on accessiblity they refer to a minimum tappable size of 48x48 px. This is documented here: https://developers.google.com/web/fundamentals/accessibility/accessible-styles but I've included a screenshot below of the relevant section. As you can see by the highlighted area in orange, the idea is that if your icon is smaller in size, you simply increase the tappable area around it for humans using fingers instead of mouse pointers.

You can see this on our site at https://www.timbuktutravel.com/

In summary, what I'm asking for is to change to closing 'x' on the welcome message so that it has a larger tappable area, in the same way as this has been done for the closing 'x' on the full screen chat window.

Many thanks for all your hard work at Hubspot

[tilly]

Hi all! Thanks so much for the feedback, we really appreciate you taking the time. 

Our team just pushed a change to enlarge the tap target for the welcome message's "X" button, so it should now be much easier to click on mobile. Please let me know if you are not seeing the update on your end, or if you have any further feedback on this issue.

[ianpetzer]

HI @tilly amd @WendyGoh ,

I just wanted to say that this is working beautifully. Our customer care and sales team are thrilled.

Thanks so much for making this happen