Chat - remove !important CSS rules from chat container


Your chat icon is forcing itself at the very bottom right currently. This could be easily changed with some overriding rules for #hubspot-messages-iframe-container , but in the styles that you inject you put !important after every rule, which makes it hard to override in case we want to create an overriding css rule and move the location of it ourselves. Please consider removing the !important rule from your injected styles.


Hey @nathanbarrett,

Thank you for the feedback! Would you mind creating an idea post on our ideas forum so that our developers can get eyes on this? I do see a potential use case, but will say that we try to make these options as non-customizable as possible to avoid confusion. If you do need to edit the position, what I would suggest is trying to get a bit more specific with your selectors. What I tend to do is just add body before a declaration if it doesn't already have that, then unset the styles provided by HubSpot and go from there. In this case, it looks like you need to move the chat widget up. This should do the trick for you:

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