Customize widget size Freshchat

[edonb (Edon)]

Hi!

I am currently using freshchat, and have uploaded the widget to a website.
My issue is that i want to increase the height and width of the widget. Ive tried to resize the widget by writing the class in a local CSS file but it doesnt seem to read it (even though ive used !important".

When i edit the class in the developer console i am able to resize the widget, see screenshot below.
Anyone familiar with how i can resize it to desired custom size?

[arunrajkumar235 (Arun Rajkumar)]

Hi @edonb,

The element you’re trying to modify is within the iframe of the Freshchat widget.
Any styles defined on your website will not be applied to the dom of an iframe. That’s how browsers work.

The widget comes with a default size and the option to change it to a compact size in the Messenger Settings page.

Other than that, there are no size-customizations available out-of-the-box.

However, if you insist, there is a cumbersome way to achieve any size you want.

1. Create an iframe of your desired width and height and position it wherever you wish to on your website.
2. In your iframe, load the Freshchat widget script and initialize the widget with additional fullscreen configuration.

window.fcWidget.init({
  token: "<enter token here>",
  host: "<enter host here>",
  open: true,
  config: {
    fullscreen: true,
    headerProperty: {
      hideHeader: true
    }
  }
});

3. The Freshchat widget will now occupy the entire width and height of your enclosing iframe, thereby allowing you to resize the widget according to your needs by modifying your iframe’s height and width.

Hope this helps.

Regards,
Arun Rajkumar

[edonb (Edon)]

Thank you very much! I was not aware of the “full screen” function.

This solved my problem and the widget is now following the iframe’ size as you stated.