Back to Blog
Advanced Widget Configuration
Unlock the full potential of your support widget with advanced configuration options and event handling.
A
Anthony Riera
Ready to go beyond the basics? This guide covers advanced configuration options for power users.
Event System
Track every interaction with the event system:
<Support
onEvent={(event) => {
switch (event.type) {
case "widget:open":
analytics.track("Support Opened");
break;
case "message:sent":
analytics.track("Message Sent", {
messageLength: event.data.length,
});
break;
case "escalation:requested":
notifyTeam(event.data);
break;
}
}}
/>Smart Collision Avoidance
The widget automatically avoids UI collisions:
<Support avoidCollisions={true} collisionPadding={20} />Lazy Loading
Optimize initial load with lazy loading:
import { lazy } from "react";
const Support = lazy(() =>
import("@cossistant/react").then((m) => ({ default: m.Support }))
);Server-Side Considerations
For SSR frameworks like Next.js:
import dynamic from "next/dynamic";
const Support = dynamic(
() => import("@cossistant/react").then((m) => m.Support),
{ ssr: false }
);