Embedding the widget on qcdauto.co.uk (Squarespace)
The widget is one tiny <script> tag. It creates an isolated iframe so it cannot conflict with the Squarespace theme.
1. Decide the host
Replace https://your-agent.example.com below with your real deployment URL (such as https://agent.qcdauto.co.uk).
2. Add the script to Squarespace
1. In Squarespace, go to Settings -> Advanced -> Code Injection -> Footer. 2. Paste:
<script
src="https://your-agent.example.com/embed/qcd-agent.js"
data-widget-id="qcd-default"
data-base-url="https://your-agent.example.com"
data-position="bottom-right"
data-theme="dark"
async
></script>
3. Save. Reload the website and the launcher should appear in the bottom-right corner.
3. Allowed domains
In the QCD AI Agent deployment, set:
WIDGET_ALLOWED_ORIGINS=qcdauto.co.uk,www.qcdauto.co.uk
This is enforced server-side by /api/chat and /api/leads.
4. Configuration in the admin dashboard
Most look-and-feel options can be edited at /admin/widget without changing the embed code:
- Launcher label, welcome title, welcome subtitle.
- Quick-action chips.
- Primary and accent colours.
- Consent text.
These flow through /api/embed/config?id=... which the widget fetches on load.
5. Programmatic API
The widget exposes a tiny global:
window.QCDAgent.open(); // open the panel
window.QCDAgent.close(); // close the panel
window.QCDAgent.restart(); // wipe the current conversation
This is useful if QCD wants a "Chat to us" button in the header that opens the widget directly:
<a href="#" onclick="event.preventDefault(); window.QCDAgent.open()">Chat to us</a>
6. Removing the widget
Delete the <script> tag from the Squarespace footer. Nothing else is needed.
7. Standalone booking page
The booking request flow is also available at /embed/booking for situations where a full-screen experience is preferable (for example, a "Request a booking" link from a marketing email). It uses the same back-end, the same consent rules and the same wording ("booking request", never "booking confirmed").