Installation
Embed the DealerAI webchat widget on your dealership website using a single script tag.
The DealerAI webchat widget loads as a custom HTML element via a single JavaScript snippet. Add it once to your website and the widget will appear on every page automatically.
Embed Code
Add the following snippet to every page of your dealership website, just before the closing
</body> tag:
<dealerai-chat data-dealer-id="YOUR_DEALER_ID"></dealerai-chat>
<script type="module" src="https://webchat.dealerai.com/webcomponent-loader.js"></script>Replace YOUR_DEALER_ID with your dealership's ID, which you can find in the DealerAI portal
under Settings → General Info.
Attributes
You can pass optional attributes to pre-fill customer information or adjust widget behaviour:
| Attribute | Required | Description |
|---|---|---|
data-dealer-id | Yes | Your dealership ID — identifies which configuration to load |
data-name | No | Pre-fill the customer's display name in the chat |
data-email | No | Pre-fill the customer's email address |
data-phone | No | Pre-fill the customer's phone number |
data-cid | No | Pass an external customer ID (e.g. CRM contact ID) to associate with the session |
data-expand-mode | No | Opens the widget in an expanded/full-width layout — useful for dedicated chat pages |
data-override-private | No | Present on the element (no value needed) to bypass private-mode restrictions |
data-url | No | Override the base URL the widget loads assets from — defaults to the script origin |
Example with pre-filled customer data
If your website has a logged-in customer portal, you can pass known customer details so they don't have to re-enter them in the chat:
<dealerai-chat
data-dealer-id="YOUR_DEALER_ID"
data-name="Jane Smith"
data-email="jane@example.com"
data-phone="+1 555 000 1234">
</dealerai-chat>
<script type="module" src="https://webchat.dealerai.com/webcomponent-loader.js"></script>Example with expand mode
Use data-expand-mode to embed a full-size chat interface inside a dedicated page or container,
rather than as a floating corner widget:
<dealerai-chat
data-dealer-id="YOUR_DEALER_ID"
data-expand-mode>
</dealerai-chat>
<script type="module" src="https://webchat.dealerai.com/webcomponent-loader.js"></script>Deferred initialisation
By default, the widget initialises as soon as the script loads. To take control of when it
starts, add ?initialize=false to the script src and call
window.DealerAI.load() when you are ready:
<dealerai-chat data-dealer-id="YOUR_DEALER_ID"></dealerai-chat>
<script type="module"
src="https://webchat.dealerai.com/webcomponent-loader.js?initialize=false">
</script>
<script>
// Initialise the widget after login is complete
window.addEventListener('load', function () {
window.DealerAI.load();
});
</script>Placement Recommendations
- Add the snippet to your global site template so it appears on every page
- Place it in the
<body>— avoid placing it in<head> - If you use a tag manager (e.g., Google Tag Manager), inject the snippet via a custom HTML tag fired on All Pages
Verifying the Installation
After adding the snippet:
If the widget does not appear, check that:
- The
data-dealer-idattribute is set correctly - The Webchat channel is enabled in Settings → Activation & Features
- There are no JavaScript errors in the browser console blocking the script
Content Security Policy (CSP)
If your website uses a Content Security Policy, add the following directives to allow the widget to load and connect to the DealerAI services:
script-src 'self' https://webchat.dealerai.com;
connect-src 'self' https://webchat.dealerai.com https://engine.dealerai.com;
frame-src 'self' https://webchat.dealerai.com;
font-src 'self' https://fonts.gstatic.com;
style-src 'self' https://webchat.dealerai.com https://fonts.googleapis.com;The widget runs in an isolated Shadow DOM to prevent CSS conflicts with your website's existing styles. No additional style isolation is needed on your end.