How to Add Website Copilot Button to your Website

Website Copilot is a modern, large window deployment that provides a balance between visibility and user control over the interaction, allowing for deep dives into conversations when the user is ready.

Visually it looks exactly like Live Chat window mode with one significant difference - instead of the icon in the bottom right corner of the screen, Copilot can be added to any HTML element. In this article we will show you how to add Copilot-enabled button to your website.

Add the main code snippet

You should start by adding the following code at the end of your site’s <body> section:

<script src="https://cdn.customgpt.ai/js/ai-assistant.js" defer="" p_id="PROJECT_ID" p_key="PROJECT_KEY"></script

You should replace "PROJECT_ID" and "PROJECT_KEY" with appropriate values for your project.

Both Pre-Prompt functionality and CRM Integration are available with Copilot, and should be set up following their respective guide - including enabling them in the project’s settings on the Copilot’s page.

With the code snippet in place, you have two options to add a button.

Option 1: Use the default CustomGPT.ai button

Simply copy the following code and paste it at the location on your website where you want the button to appear

<button data-cgpt-ai-assistant data-cgpt-default-button='true' hidden>
	Ask Website Copilot
</button>

If you use this option, you can set the button color in the project’s settings on the Copilot’s page.

Option 2: Use any HTML element

Alternatively, you can simply add this attribute to the element you want to serve as the trigger.

data-cgpt-ai-assistant

The element's click event will be overridden by the Copilot, and it will open when a user clicks on it. It can be any HTML element, such as a button, link, or image.

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

Add the main code snippet

Option 1: Use the default CustomGPT.ai button

Option 2: Use any HTML element

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

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