Add 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.