More Chat Widget Styling Options

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

HubSpot updates
More Chat Widget Styling OptionsHubSpot Product Team
06-06-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

More Chat Widget Styling OptionsHubSpot Product Team
changed to: In Planning
01-30-2019

More Chat Widget Styling OptionsHubSpot Moderator
02-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! 

59 Replies
partycentre
New Contributor

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

KevinFMTV
Top Contributor

@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

ianpetzer
Regular Contributor

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
New Contributor

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
New Contributor

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
Regular Contributor

@lazenbyt We use this to open the chat window:

 
window.HubSpotConversations.widget.open()
Gryzzly_io
Occasional Contributor

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

ianpetzer
Regular Contributor

@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
Occasional Contributor

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

 

Screenshot 2019-11-15 at 10.58.29 am.pngE.g. It'll be great if we could change how the CHECK button looks!