More Chat Widget Styling Options

[DBellamy]

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

[DBellamy]

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

[DBellamy]

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! 

[cdewey22]

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

[darmlinatchaos]

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

[cursu]

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#...

[JoyVoltenburg]

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

[julia08]

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.

[JonathanIneqe]

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.

[MikelZubi]

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 

[Kraden]

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.

[partycentre]

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

[KevinFMTV]

@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 

[partycentre]

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

[KevinFMTV]

@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 

[ianpetzer]

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

[lazenbyt]

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.

[dcasso]

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.

[ianpetzer]

@lazenbyt We use this to open the chat window:

window.HubSpotConversations.widget.open()

[Gryzzly_io]

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).



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

[ianpetzer]

@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.

[jieyintan]

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!

[Jennieexcell]

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.