# More Chat Widget Styling Options

**URL:** <https://community.hubspot.com/t/more-chat-widget-styling-options/1830>\
**Category:** HubSpot Ideas\
**Tags:** conversations-inbox\
**Created:** [May 1, 2017, 7:09pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830 "2017-05-01T19:09:59Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![DBellamy](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dbellamy/32/18929_2.png) [@DBellamy](https://community.hubspot.com/u/DBellamy)\
**Post date:** [May 1, 2017, 7:09pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/1 "2017-05-01T19:09:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![archilogic](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/archilogic/32/23505_2.png) [@archilogic](https://community.hubspot.com/u/archilogic)\
**Post date:** [June 16, 2017, 7:39am UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/2 "2017-06-16T07:39:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RV](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rv/32/18373_2.png) [@RV](https://community.hubspot.com/u/RV)\
**Post date:** [July 5, 2017, 1:48pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/3 "2017-07-05T13:48:09Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [November 3, 2017, 4:46pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/4 "2017-11-03T16:46:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [December 11, 2017, 3:38pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/5 "2017-12-11T15:38:45Z")

</div>

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

Thanks !

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [December 12, 2017, 6:16am UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/6 "2017-12-12T06:16:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![brandREACH](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/brandreach/32/522_2.png) [@brandREACH](https://community.hubspot.com/u/brandREACH)\
**Post date:** [January 17, 2018, 10:14am UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/7 "2018-01-17T10:14:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Briceclark](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/briceclark/32/21752_2.png) [@Briceclark](https://community.hubspot.com/u/Briceclark)\
**Post date:** [January 19, 2018, 7:10pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/8 "2018-01-19T19:10:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dhayward](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dhayward/32/22074_2.png) [@dhayward](https://community.hubspot.com/u/dhayward)\
**Post date:** [March 21, 2018, 12:38pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/9 "2018-03-21T12:38:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ipowell](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ipowell/32/71993_2.png) [@ipowell](https://community.hubspot.com/u/ipowell)\
**Post date:** [June 21, 2018, 11:12pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/10 "2018-06-21T23:12:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ScottyT](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/scottyt/32/9140_2.png) [@ScottyT](https://community.hubspot.com/u/ScottyT)\
**Post date:** [June 24, 2018, 6:16pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/11 "2018-06-24T18:16:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Derro\_SA](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/derro_sa/32/52876_2.png) [@Derro\_SA](https://community.hubspot.com/u/Derro_SA)\
**Post date:** [July 2, 2018, 9:27am UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/12 "2018-07-02T09:27:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ABMTL](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/abmtl/32/43030_2.png) [@ABMTL](https://community.hubspot.com/u/ABMTL)\
**Post date:** [September 7, 2018, 7:47pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/13 "2018-09-07T19:47:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rvanuden](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rvanuden/32/99678_2.png) [@rvanuden](https://community.hubspot.com/u/rvanuden)\
**Post date:** [September 24, 2018, 12:03pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/14 "2018-09-24T12:03:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![robert1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/robert1/32/68653_2.png) [@robert1](https://community.hubspot.com/u/robert1)\
**Post date:** [October 31, 2018, 1:46pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/15 "2018-10-31T13:46:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![maris7](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/maris7/32/32521_2.png) [@maris7](https://community.hubspot.com/u/maris7)\
**Post date:** [November 16, 2018, 3:35pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/16 "2018-11-16T15:35:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![loungelizardmac](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/loungelizardmac/32/75439_2.png) [@loungelizardmac](https://community.hubspot.com/u/loungelizardmac)\
**Post date:** [November 19, 2018, 10:35pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/17 "2018-11-19T22:35:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![WiseTrainingOwl](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/wisetrainingowl/32/29368_2.png) [@WiseTrainingOwl](https://community.hubspot.com/u/WiseTrainingOwl)\
**Post date:** [November 26, 2018, 12:46am UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/18 "2018-11-26T00:46:17Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![MBRBecky](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mbrbecky/32/92090_2.png) [@MBRBecky](https://community.hubspot.com/u/MBRBecky)\
**Post date:** [December 11, 2018, 4:27pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/19 "2018-12-11T16:27:48Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![neilw](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/neilw/32/2490_2.png) [@neilw](https://community.hubspot.com/u/neilw)\
**Post date:** [December 19, 2018, 1:40pm UTC](https://community.hubspot.com/t/more-chat-widget-styling-options/1830/20 "2018-12-19T13:40:42Z")

</div>

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;  
left:0px!important;  
width:416px!important;  
}

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

[Next page](https://community.hubspot.com/t/more-chat-widget-styling-options/1830.md?page=2)
