Add copilot button to your website
This step-by-step guide explains how to add a website copilot button to your website.
Website Copilot
Website Copilot is a large-window chat deployment that blends visibility with user control. Unlike Live Chat, Copilot buttons can be placed on any HTML element, giving you more control over when and where the assistant appears.
Add the main code snippet
Place the following script at the end of your websiteโs body
section:
<script src="https://cdn.customgpt.ai/js/ai-assistant.js" defer="" p_id="AGENT_ID" p_key="AGENT_KEY"></script
You should replace AGENT_ID
and AGENT_KEY
with appropriate values for your agent.
Note:
Both Pre-Prompt functionality and CRM Integration are supported with Copilot. You can enable and configure them in your agentโs Copilot settings.
Choose your button type
With the code snippet in place, you have two options to add a button.
Option 1: Use the default CustomGPT.ai button
Paste this code wherever you'd like the Copilot button to appear:
<button data-cgpt-ai-assistant data-cgpt-default-button='true' hidden>
Ask Website Copilot
</button>
- The button text will display once loaded.
- You can customize the button color from the agentโs Copilot settings page.
Option 2: Use any HTML element
Add the data-cgpt-ai-assistant
attribute to any HTML element (e.g., button, link, image) to make it open the Copilot:
data-cgpt-ai-assistant
- When the element is clicked, the Copilot will launch.
- This allows full flexibility in design and positioning.
Note:
If you are interested in a more advanced usage of Copilot, like placing it on a text input field, please check our guide on how to add website copilot to any text input field on your website.
Updated 1 day ago