Quick start
Configure the widget
Define window.CaraWidget.config before loading the script. This tells Cara who you are.
<!-- Set config BEFORE loading the widget -->
<script>
window.CaraWidget = {
config: {
apiKey: 'YOUR_API_KEY_HERE',
partnerName: 'Your Company Name',
// userId: 'YOUR_USER_ID', // Optional
// buttonSize: 64, // Optional (default: 56)
}
};
</script>Load the script
Add the widget script tag immediately after your configuration block.
<!-- Load widget script -->
<script src="https://embedd.cara.certchain.net/cara-widget.umd.js"></script>Order matters. Configuration must be defined before the script loads. The widget initialises automatically — no manual setup required.
Configuration
| Property | Description | Status |
|---|---|---|
| apiKey | Your Cara API key for authentication. Provided when you register your application. Required | |
| partnerName | Your organisation or company name, shown to users inside the widget. Optional | |
| userId | User ID forwarded to conversation creation for session tracking. Optional | |
| buttonSize | Widget floating button width & height in pixels. Defaults to 56. Optional |
How it works
Auto-initialisation
When the script loads, Cara checks for window.CaraWidget.config. If found and valid, the widget mounts itself to the page automatically — no constructor calls, no DOM queries, nothing extra to wire up.
<!-- Place anywhere in your <body> -->
<script>
window.CaraWidget = {
config: {
apiKey: 'YOUR_API_KEY_HERE',
partnerName: 'Your Company',
// userId: 'YOUR_USER_ID', // Optional
// buttonSize: 64, // Optional (default: 56)
}
};
</script>
<script src="https://embedd.cara.certchain.net/cara-widget.umd.js"></script>Live demo: Cara is running on this page. Look for the chat icon in the bottom-right corner.
What's included
getElementById bridge
ensures third-party libraries like Radix UI work seamlessly inside
the Shadow Root.
prefers-reduced-motion support.