More Chat Widget Styling Options

There should be more styling options for the messages add on.

HubSpot updates
Jun 6, 2019

Hi all-

 

I am happy to let you know we are addressing one of the issues from this post. We have implemented a way for you to move the chat widget to the left side of the page. This feature was released today and you can find this in your inbox settings. 

 

We will be working on further customizations to the widget later in the year. 

 

Please let me know if you have any feedback. 

 

Thanks! 

 

Cassie

Feb 20, 2019

Would love to see some more ability to customize the design and look of the conversations tool. It is a great tool, but would love to be able to customize it more! 

changed to: In Planning
Jan 30, 2019

69件のコメント
HubSpot製品開発チーム
HubSpot製品開発チーム

Hi all-

 

I am happy to let you know we are addressing one of the issues from this post. We have implemented a way for you to move the chat widget to the left side of the page. This feature was released today and you can find this in your inbox settings. 

 

We will be working on further customizations to the widget later in the year. 

 

Please let me know if you have any feedback. 

 

Thanks! 

 

Cassie

一般投稿者

Awesome! Thank you, Cassie and comrades, of the HubSpot Product Team!

常連投稿者

This is great. Would be nice to get some progress on the scheduling and timing of the bot as well. Upvote these ideas:

https://community.hubspot.com/t5/HubSpot-Ideas/Timing-specifications-for-chat-launcher/idc-p/271882#...

 

 

 

 

新規投稿者

I would have thought this would have already been addressed.  Simple styling - offsets, scales, etc. should be included.

一般投稿者

It would be nice if the page visitors could drag the chat widget around the page themselves - like the facebook messenger bubble.  It would be useful if in some way each visitor could have a degree of control like that, because some of our contacts need the chat but others think it's annoyingly in the way, especially depending on which page they are on.

新規投稿者

Yes more customisable chatbot would be great, as a previous contributor has said it is too big on mobile, I would like it styled like the Hubspot site itself so you know what it is but does not interfer or cover anything else on the page.

新規投稿者

El contenedor del chatbot abierto debería ser del tamaño de la caja, no debería superar ese límite, porque impide el clicado de capas que estén debajo Captura de pantalla 2019-07-17 08.28.41.png

新メンバー

I'd love to at least be able to change the colour of the icon.

Cobalt Icon on our  branded pink\coral looks pretty...drab.

新規投稿者

How do we remove the small logo icon the the "Add free live chat to your site"

常連投稿者

@partycentre  that's  a feature that available with the paid Hubspot plans.  I'm not sure which plans you need to remove the hubspot branding but your account rep can probably help with that 

新規投稿者

@KevinFMTV  Can you lead me where  to edit this? We have a paid Hubspot plan.

常連投稿者

@partycentre  from your Conversations Inbox ... go to inbox settings in the lower left corner and go to chat settings.  This is where you can adjust that setting 

 

Screen Shot 2019-09-05 at 7.36.15 AM.png

常連投稿者

Would be great if we could just pass some css into the chat widget. 

 

The tappable area for the close button is too small on mobile. The size of the close button is fine, just the tappable area needs to be increased. Many people complain that they thry to close the welcome message on mobile and instead it opens it full screen

新規投稿者

One of the things we really would like is to have not only the widget, but also a button that we can place on a page that will open up a chat interface. It would be great if the option to open the chat on the page or redirect to a specified chat page were also available.

新規投稿者

I ended up having to spend over 5 hours designing our pages around this icon, just because we can't get a trigger to open that chat instead of the icon. This should be such an easy fix (hide option) since you already have the hashtag to open the chat with.

常連投稿者

@lazenbyt We use this to open the chat window:

 
window.HubSpotConversations.widget.open()
一般投稿者

Customize which side the chat appears on is a start but not quite enough.

For websites and desktop webapp it is enough I guess, but when it is a webapp on mobile, then it is not enough to choose a side.

For our Gryzzly, we have a menu bar at the bottom of the phone's screen, which doesn't leave room for the hubspot chat that appears over it. 

And we have a + button just above the down menu on the corner down right, like many apps now (material design).

Annotation 2019-11-14 162359.png

Being able to place it just above on the left corner would be great. 
Being able to play with HTML rules as well but right now the JS and the Important rule you place doesn't allow anything.

So yeah, can't wait to see more customization late this year like you said.


Thank you for you efforts

常連投稿者

@Gryzzly_io 

 

We override the css to bump the chat widget on pages that have a bottom bar. For example see this page: https://www.timbuktutravel.com/country/botswana-safari  . We have a bottom bar up to widths of 1100px and we bump up the chat widget with the folliwng css:

 

<style>
#hubspot-messages-iframe-container {
bottom: 80px !important;
max-height: calc(100% - 80px) !important;
}
.bottom-left-widget{
bottom: 100px;
}
</style>

 

I just tried now and using inspect tools, I coudl change the following to put the chat widget in the bottom left:

#hubspot-messages-iframe-container.widget-align-right 
  left: 0!important;
}

Good luck!
If you're using it for mobile. Do you have any problems with the tappable area of the close 'x' for the welcome message. Its so annoying, our users try to close the welcome message which just ends up opening it full screen on mobile.

HubSpot社員
HubSpot社員

I think it'll be great if we could also further style the buttons for bot chat for a greater user experience as well. 

 

E.g. It'll be great if we could change how the CHECK button looks!E.g. It'll be great if we could change how the CHECK button looks!

新規投稿者

It would be great to have the ability to change the large cross icon that appears at the bottom of the chat widget when fully open to a minimise icon. The reason for this is that clicking the cross to close the chat doesn't end the conversation and clear the history - it essentially minimises the conversation as when you reopen the widget you can see the conversation again (the conversations API does not allow us to clear cookies and thus conversation history when a user clicks on the cross icon). Our legal team is concerned about the privacy and security implications of this when on shared devices as users might resonably assume that the conversation has been ended and cleared when clicking a cross as that's a standard desgin pattern for closing a feature down.