Embedding the Widget

The Rendez-vous.ai widget is designed to be integrated into any website with minimal effort. Because the widget is self-contained and uses a Shadow DOM, you don’t have to worry about library version conflicts or CSS clashing with your existing site styles.

1. The Standard Script Tag

The simplest way to add the AI agent to your website is by placing the following script tag at the end of your <body> section.


<script
  src="[https://cdn.rendez-vous.ai/widget.js](https://cdn.rendez-vous.ai/widget.js)"
  data-client-id="YOUR_CLIENT_ID"
  defer>
</script>

Script Parameters

Attribute	Required	Description
`src`	Yes	The URL to the hosted widget bundle.
`data-client-id`	Yes	Your unique client identifier from the Dashboard Settings.
`data-auto-open`	No	If set to `true`, the chat window will open automatically after a delay.
`data-position`	No	Sets the button location: `bottom-right` (default) or `bottom-left`.

2. Using with Modern Frameworks (React / Next.js)

If you are using a Single Page Application (SPA), you might want to load the widget dynamically or only on specific routes.

In a Next.js (App Router) project:

We recommend using the next/script component in your root layout.tsx:


import Script from 'next/script'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="[https://cdn.rendez-vous.ai/widget.js](https://cdn.rendez-vous.ai/widget.js)"
          data-client-id={process.env.NEXT_PUBLIC_RDV_CLIENT_ID}
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

3. Manual Initialization (Advanced)

If you need more control—such as passing user metadata or identifying a logged-in user to the AI—you can interact with the widget via the global window object.

The widget exposes a window.RDV_WIDGET controller once loaded:


// Example: Open the widget programmatically
window.RDV_WIDGET.open();
 
// Example: Send a hidden context message to the AI
window.RDV_WIDGET.sendContext({
  userName: "John Doe",
  membershipLevel: "Premium",
  lastPurchase: "Invoice #1234"
});

4. Content Security Policy (CSP)

If your website uses a strict Content Security Policy, you will need to whitelist the Rendez-vous.ai domains to allow the widget to load and communicate with the Core API.

Add the following directives to your CSP header:


script-src [https://cdn.rendez-vous.ai](https://cdn.rendez-vous.ai);
connect-src [https://api.rendez-vous.ai](https://api.rendez-vous.ai) wss://api.rendez-vous.ai;
img-src [https://cdn.rendez-vous.ai](https://cdn.rendez-vous.ai) [https://s3.amazonaws.com](https://s3.amazonaws.com);

Note: Replace api.rendez-vous.ai and the S3 URL with the specific endpoints used by your environment (e.g., your local Ngrok URL during development).