Customizing Your Support Widget

Your support widget should feel like a natural part of your application. Here's how to customize every aspect of the Cossistant widget.

Theme Customization

Match your brand colors and typography:

Copy<Support
  theme={{
    primaryColor: "#6366f1",
    fontFamily: "Inter, sans-serif",
    borderRadius: "12px",
  }}
/>

Positioning

Control where the widget appears:

Copy<Support position="bottom-right" offset={{ x: 20, y: 20 }} />

Custom Trigger

Use your own button instead of the default:

Copy<Support
  customTrigger={({ open }) => <button onClick={open}>Need help?</button>}
/>

Controlled Mode

Take full control of the widget state:

Copyconst [isOpen, setIsOpen] = useState(false);
 
<Support open={isOpen} onOpenChange={setIsOpen} />;

This is particularly useful when you want to:

• Open the widget programmatically
• Track widget interactions
• Integrate with your analytics