Add Custom CSS Code for Click to Chat plugin

/ docs / By

The Click to Chat plugin offers full customization through its settings panel, allowing users to adjust the button’s color, size, padding, hover effects, position, and text. This ensures seamless integration with your website’s design, providing flexible configurations to match your branding.

Advanced Customization with CSS

If the default settings don’t fully meet the website design requirements, we can enhance the widget’s appearance by applying custom CSS. This offers more control, allowing us to style the widget according to your website’s unique design.

Custom CSS provides greater flexibility, enabling you to achieve a look beyond the default options.

How to Add Custom CSS

To apply custom CSS to the widget:

Navigate to the “Click to Chat” –> “Other Settings” settings.

Scroll down to the Custom CSS section.

Enter your custom CSS code in the provided field.

Examples of Codes

To Customize the Size of Greetings Close Button  

.ctc_greetings_close_btn svg {
    width: 25px !important;
    height: 25px !important;
    color: lightgray !important;
}

To add styles to the input in the greetings form

./* to add styles to the input in the greetings form */
.ctc_g_form .ctc_form_field input {
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    padding : 10px !important;
};

To add styles to the label in the greetings form

/* to add styles to the label in the greetings form */
.ctc_g_form .ctc_form_field label {
    font-size: 16px;
    font-weight: bold;
};

To add styles to the number input in the greetings form

/* to add styles to the number input in the greetings form */
.ctc_g_form .ctc_form_field .ctc_intl_number {
   padding: 9px 9px 9px 47px !important;
};

We are actively working on expanding our collection of custom CSS code examples. For any questions or support, feel free to contact us.to add styles to the input in the greetings form