More Chat Widget Styling Options

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

70 Comentários
Colaborador Ocasional

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.

Colaborador Ocasional

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?

Novo membro

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. 

Colaborador Iniciante

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

 

Thanks !

Novo membro

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.

 

 

Colaborador Ocasional | Parceiro Elite
Colaborador Ocasional | Parceiro Elite

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

Colaborador Ocasional

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.

Colaborador Ocasional

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

Colaborador Frequente

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. 

Colaborador Ocasional

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.

Colaborador Iniciante

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.

Colaborador Iniciante

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

Colaborador Iniciante

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

Colaborador Frequente

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.

Colaborador Ocasional

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

Colaborador Ocasional

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

Colaborador Frequente

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?

Colaborador Iniciante

 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! 

Colaborador Iniciante

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

Colaborador Frequente

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