Fixing chat widget to the bottom of the page content, not to bottom of screen

By default, the Freshdesk/Freshchat widget is fixed to the bottom of the screen as the user scrolls.

Has anybody successfully customised the CSS such that the widget stays at the bottom of the page and isn’t necessarily visible until the user scrolls down? If so, can you please share the changes you made?

I want to do this to save screen space for people using my app on mobile!

Thank you very much!

1 Like

Hi Nadia,

Making any element fixed in the same position of the page can be possible by setting its position attribute to absolute instead of fixed.

Could you try this along with where you would like to insert this Widget element? Wherever it is positioned, it will get scrolled from that position. So, if you would want it at the bottom, you would have to set it to that location in the CSS.

Hi Raviraj,

I know how to set an element to the bottom of the page in normal circumstances.

The issue is figuring out which elements to set the classes on as every option I’ve tried doesn’t work, whether that’s absolute positioning on the surrounding div or on the iframe or anything else.

Hence the forum post asking for specific code changes!

However, I’ve gone about this another way for now, so this is no longer a pressing issue. I’ll probably go ahead and delete this post soon.

1 Like

Hi @nadia,

There’s no need to delete the post. You can post your alternate solution if you have avoided this with any other changes to your website or any other way.

That will be helpful for any visitors to this post. Also, anyone can post a solution if they found one.