Add copilot to any text input field on your website

This step-by-step guide explains how to connect a text input field on your website to CustomGPT's Website Copilot. When a user types into the field and presses Enter, Copilot will open and respond to their input automatically.

📘
Note:
Before adding the input field, make sure to integrate Website Copilot into your page by following the Website Copilot deployment instructions. This ensures the necessary scripts and components are properly embedded.

Add the Website Copilot script at the end of your page’s body tag:

Replace AGENT_ID and AGENT_KEY with your actual agent credentials.

Add a text input field with the data-cgpt-ai-assistant-input attribute:

Here is an example of how it should look:

<input id="cool-id" data-cgpt-ai-assistant-input></input>

❗️
Important Notes:
The id must be present and unique. This will be used in the script that triggers Copilot.

Add a script that will listen for the Enter key in the text input and open your AI Agent. Ensure the script uses the same id as your text input field from Step 2.

Here is the script you can use:

<script>
document.addEventListener('DOMContentLoaded', function() {
    const inputElement = document.getElementById('cool-id');

    inputElement.addEventListener('keydown', function(event) {
        if (event.key === 'Enter') {
            const inputValue = inputElement.value;
            document.dispatchEvent(
                new CustomEvent('CustomGPTSendQuery', { detail: inputValue })
            );
            inputElement.value = '';
        }
    });
});
</script>

📘
Note:
The script should be placed after the <body> section of your webpage.
Ensure the id in getElementById matches the id of your input field from Step 2.

Example

Here is a full example combining everything:

<html>
<body>

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

<input id="cool-id" placeholder="Ask me something…" data-cgpt-ai-assistant-input></input>

</body>

<script>
document.addEventListener('DOMContentLoaded', function() {
	const inputElement = document.getElementById('cool-id')

	inputElement.addEventListener('keydown', function(event) {
    	if (event.key === 'Enter') {
        	const inputValue = inputElement.value
        	document.dispatchEvent(
            	new CustomEvent('CustomGPTSendQuery', { detail: inputValue })
        	)
        	inputElement.value = ''
    	}
	})
})
</script>

</html>

Updated 1 day ago