How to Add Custom CSS for FormyChat Widgets

Overview: #

The Custom CSS feature in FormyChat allows you to personalize the look and feel of your chat widgets. With this option, you can easily change colors, fonts, sizes, and other design elements to match your website’s style.

How to Add Custom CSS #

Navigate to the “FormyChat” –> “Custom CSS”(under the Floating Widgets settings).

Open the Custom CSS. Enter your CSS code in the text box and click ‘Save Changes‘ to apply it.

The new styles will automatically appear on your website. #

Example Usage: #

🎨 Style All Widgets #

This changes the background color for all FormyChat widgets:

.formychat-widget-form {
  background-color: #000; /* You can use any hex, RGB, or color name */
}

🎯 Style a Specific Widget

This changes the background color for only one widget, identified by its ID.

Example: Widget with ID formychat-widget-1:

#formychat-widget-1 .formychat-widget-form {
  background-color: #purple; /* purple background */
}

💡 Tips for Customization #

• Use your browser’s Developer Tools (right-click → Inspect) to find the widget’s ID or class name.
  
• If you make a mistake, simply remove or edit the CSS code and save again.