Visit Freshworks.com Visit Freshworks
Question

Hi, is there a way to customize the font type of each field within a widget using custom CSS?

  • 22 December 2023
  • 2 replies
  • 52 views
A
Rank

I’m currently playing around with the customization of the chat widget in freshdesk. I’ve managed to alter the height of the widget, however I’m having trouble changing the font type of each field.

 #freshworks-container #freshworks-frame-wrapper {
     height: 500px !important;
 }

I would also like to have a solid colour (black) for the entire background of the container - not only having it appear the top of the widget, however i cant seem to get this working:

 #freshworks-container #launcher-frame .frame-root .frame-content .elements__ToastsWrapper-sc-1aur6vr-4 bNgSnL .elements__Wrapper-h3m622-0 fdNbsI{
     background-color: black !important;
 }

 

 

Can we override these fields using CSS?

 

Thanks

2 replies

Sujitha Dhanaseelan
Rank
Badge +2

Thank you for reaching out to the Freshworks community @aaron1992. I understand your request to modify the ticket field and widget background color. Regrettably, customization of the help widget is not feasible. Nevertheless, you can collaborate with your developers to create a custom widget or ticket form that meets your customization needs and initiate a POST ticket creation call through Freshdesk API's. Here’s the API document for your reference. 
https://developers.freshdesk.com/api/

Thanks,

Sujitha. 

KhanZain
Rank

Absolutely, you can use custom CSS to override the styles of elements within the chat widget. Let's address each of your requirements:

  1. Changing font type of each field within the widget: You can use CSS to specify the font type for different elements within the chat widget. 
    #freshworks-container #freshworks-frame-wrapper .freshworks-chat-widget {
        font-family: Arial, sans-serif !important; /* Change font family as needed */
    }

    #freshworks-container #freshworks-frame-wrapper .freshworks-chat-widget .freshworks-message, 
    #freshworks-container #freshworks-frame-wrapper .freshworks-chat-widget .freshworks-user-input {
        font-family: Arial, sans-serif !important; /* Change font family as needed */
    }

    This will change the font type for messages sent by both the user and the agent in the chat widget.

  2. Setting solid black background for the entire widget: Your attempt to set the background color is close, but you need to target the correct elements. 
    #freshworks-container #freshworks-frame-wrapper .freshworks-chat-widget {
        background-color: black !important;
    }

    #freshworks-container #freshworks-frame-wrapper .freshworks-chat-widget .freshworks-message, 
    #freshworks-container #freshworks-frame-wrapper .freshworks-chat-widget .freshworks-user-input {
        background-color: black !important;
    }

    Make sure to include these CSS rules after any existing rules you might have for the chat widget, so they override them.

  3. Adjusting the height of the widget: You've already done this correctly. 
    #freshworks-container #freshworks-frame-wrapper {
        height: 500px !important;
    }

    Combining all these rules together:

    #freshworks-container #freshworks-frame-wrapper {
        height: 500px !important;
    }

    #freshworks-container #freshworks-frame-wrapper .freshworks-chat-widget {
        font-family: Arial, sans-serif !important; /* Change font family as needed */
        background-color: black !important;
    }

    #freshworks-container #freshworks-frame-wrapper .freshworks-chat-widget .freshworks-message, 
    #freshworks-container #freshworks-frame-wrapper .freshworks-chat-widget .freshworks-user-input {
        font-family: Arial, sans-serif !important; /* Change font family as needed */
        background-color: black !important;
    }

    These CSS rules should help you customize the chat widget according to your requirements.

    Here are the best CSS onloine learning platforms:
    1. W3School   2. Iqra Technology

     

     

     

     

Khan Zain

Reply


Terms of UseCookie settings