1. Advance Settings
AI Agent Customer Support Docs
  • Default module
    • Product
      • Changelog
    • AI Agents
      • Create AI Agent
      • Edit AI Agent
      • Delete Agent
    • Leads
      • Lead Settings
      • Lead Report
    • AI Agent Installation
      • Overview
      • Custom Website
      • WordPress
      • Link WhatsApp with AI Agent
      • Setup New WhatsApp Account
      • Google Tag Manager
      • Shopify
      • Squarespace
      • Wix
      • Webflow
      • Bubble
      • PrestaShop
      • GoDaddy
    • Billing & Pricing
    • Partner
      • Partner Management
    • Roadmap
      • Upcoming Features
    • Intelligence Settings
      • Intelligence Settings
    • Advance Settings
      • Overview
      • Header & Labels
      • Widget Tabs
      • Lead Capture Form
      • Quick Questions
      • Custom CSS and JS
      • Branding & Tracking
      • Behaviour Settings
      • Consent & Overlay
    • Partner Dashboard
      • How to Create White-Label
      • License Management
    • Message Credits
      • Message Credits
  1. Advance Settings

Custom CSS and JS

This section lets you add custom styling (CSS) and custom behavior (JavaScript) for the widget.

Custom CSS#

What it’s for#

Use CSS to adjust widget spacing, fonts, borders, or visibility of specific elements.

Where to write it#

Custom CSS → CSS Code

Recommended approach#

Target widget-specific classes to avoid affecting your whole site
Start small, change one rule at a time, and verify in preview
Example (safe starting point):

Custom JavaScript#

What it’s for#

Use JavaScript to extend widget behavior or connect it to other scripts on your site.

Where to write it#

Custom JavaScript → JS Code
The editor includes an example pattern like:

Best practices#

Keep scripts lightweight
Avoid blocking operations (large loops, heavy DOM scans)
Test in a staging site if possible

Steps#

1.
Open Advanced Settings → Custom CSS and JS
2.
Add your CSS rules in CSS Code
3.
Add your JS logic in JS Code
4.
Click Save changes
5.
Refresh the preview page

Verify#

Confirm visual changes reflect in the widget preview
If using JS, trigger the behavior you added (for example, send a message if you’re listening to message events)

Troubleshooting#

Widget looks broken after CSS changes#

Remove the latest CSS block you added
Re-add changes gradually and test after each save

JavaScript causes the widget to become slow#

Remove recent JS changes and retest
Avoid frequent timers and heavy event handlers

CSS changes don’t reflect#

Click Save changes
Hard refresh the page where the widget loads
Modified at 2026-02-19 09:49:50
Previous
Quick Questions
Next
Branding & Tracking
Built with