HubSpot Ideas


More Chat Widget Styling Options

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

HubSpot Updates
In Beta
October 31, 2023 07:57 AM

Hi all,


We're excited to announce that the ability to drag the chat widget across the screen is finally out in private beta!


If you're interested in being part of our beta test or have any questions, please message me directly.


We appreciate your continued feedback and look forward to launching more customization features for the chat widget in the near future.





June 06, 2019 10:57 AM

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. 





In Planning
January 30, 2019 03:55 PM

97 Replies

Inherent to styling, It would be great if we could at least scale or re-size the messages icon. As it is too big on mobile.


Is there a way to drag the message bubble to another area on the page? For instance, if the user needs to move the bubble from the bottom right to the bottom left could they drag the bubble to where it would be ideal for them?


When a user is visiting our site on a desktop and selects a video to watch, then enables full screen, the chat icon is directly over the button to minimize the full-screen video preventing users to easily minimize the video as the button from the YouTube video player is inaccessible. It would be helpful if you can move the chat icon up a little vertically so that it doesn't cover buttons on a full-screen video. It would also be cool if you could have maybe a drag and slide option for HubSpot users to select where the icon could be placed on their website. 


Great idea ! It would be great to have specific css to manage the chat position and style (within considerable edition of course).


Thanks !


My organization currently uses messenger as part of Sales Pro. While we're glad that there's an instant messanging feature available to offer propsects the ability to ask questions and get answers in real time, the little chat bubble part of this feature is not "glitzy" enough.


Ideally, for this feature to become more useful, it would be great if the HS team could make it so HS customers can:


  • Increase the size of the bubble
  • Make the bubble flash / have basic animations
  • Increase the duration that the text bubble displays

At the moment, our team feels like the messenger buble is easily missed.



Contributor | Diamond Partner

At the moment the position of the icon of the messages functionality is fixed on the right bottom side. Many Websites have some "back to the top arrow" on the same place and the lead flows within hubspot work well on the position.

I would suggest to have some more options to position the chat icon. there could be:

- bottom/right

- bottom/left

- bottom/center

- middle/right

- middle/left


I agree.  Our chat button is interviewing with our checkout process for customers, because of no option to reposition the chat bubble. This would be a great help to small business who can't afford custom coding to fix problems like this.


Currently, the live chat ("messages") feature only allows you to select an accent color.  However, the accent color we chose causes the chat icon itself to become a dark blue, which clashes with our landing page color scheme.


Marcus from HubSpot eventually helped us figure out a way to change the icon to white which looks better (ticket 982958) but it would be much better to allow us to choose the color scheme explicitly.  Or better yet, allow us to customize it with CSS to give us even more flexibility.  (CSS from the Landing Page does not apply since it is inside an iframe.)


We need more chatbox customization options.


I love the fact that HubSpot has a chatbox feature available; however, the options to customize it are slim to none. We can choose from a few gradient colors or a solid one, and then our profile pictures from our HubSpot account. 


To be frank, there really isn't a way to customize it at all.


Reasons why we should be able to customize it: 

  1.  It creates a more customized and personal experience for our clients/users.
  2.  It allows us to differentiate ourselves from our competition.
  3.  It helps us provide better customer service by being able to change it to fit their needs.
  4. And much more.

Other chatboxes (Like Olark for example) allow you to use a custom image by adding a line of javascript to your code or from within their platform. 


The chatbox would be SO much more valuable if we had the ability to customize it. I wouldn't be surprised if HubSpot had a ton of people switching over to their service if they added this as an option. 


All of the above!

I have had to remove the chat funciton because it can't be resized and is not in keeping with the style of my website. It also cannot be repositioned easily.

Surely this is expected and standard functionality.


All of the above. Would also love the ability to specify the name displayed on the chatbot, not just have the system pull my first name from the preferences section. As a workaround I've had to change my first name to Comms Guy.


@brandREACH I had to move the ''back to top'' arrow to the left side of the window.


crazy that you can not simple move it to the left (eg)


i have a back to top button there which could be shifted but i can not change my 13 pages forms and the next buttons are just above the 'back to top' button.


Guess i will have to remove it which is a shame


Similar to some of the other people who posted we would need to be able to move the position of the chat bubble. We have a scroll to top option in the bottom right of our theme and would prefer chat to appear in bottom left.


yes, to be able to set it on the right of the window 🙂


At least let us move the chat icon to the bottom left!!!


The chat widget being fixed in the bottom right corner overlaps with another button that is fundamental to the functionality of my site and cannot be moved! I would love to just put the chat widget in the bottom left corner instead. How can I move it?


 Completely agree, the ability to move to the bottom left of the screen and amend what happens on a tablet is important too. At the moment it's far too intrusive on mobile devices! 


You can use this css to move it up or down which is all I needed . 


div#hubspot-messages-iframe-container {
bottom: 55px!important;


You can move it to the left using this


div#hubspot-messages-iframe-container {
bottom: 55px!important;


Doesn't look quite as good, it needs the initial width as it will get resized by a script when chat opened


@neilw that worked for me. Thanks a ton!


For it to not overlap with the button on my site I just had to create one version for desktop screen widths and one for mobile widths using CSS @media. I found neither needed the width command, as that made it float oddly in the middle area of the page.