Guides

How to Add Website Copilot to Any Text Input Field on Your Website

In this guide we will show you how to add Website Copilot to any text input field on your website. When a user types something into that field and presses Enter, the Website Copilot window will open right away and your AI Agent will provide them with an answer!

Suggest Edits

Step 1: Add Website Copilot to Your Page

The first step is to integrate Website Copilot into your page using the application's deployment instructions. Follow the instructions provided by Website Copilot to embed the necessary scripts and components into your webpage.

Website Co-pilot

Step 2: Add Attribute to Input Field

Next, choose a text input field that will be used to trigger the AI Agent. You need to add the attribute "data-cgpt-ai-assistant-input" to this input field.

Here is an example of how it should look:

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

❗️

Important Notes:

The id attribute is crucial as it will be used in the next step.
The id must have a value. In the example above, it is set to "cool-id".

Step 3: Add Event Listener

The third step is to 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>

📘

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.

By following these steps, you can easily add Website Copilot to any text input field on your website, enabling your AI Agent to respond to user queries seamlessly.


Example

Here is how an example page would look like:

<html>
<body>

<script src="https://cdn.customgpt.ai/js/ai-assistant.js" defer="" p_id="PROJECT_ID" p_key="PROJECT_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>

👍

Congratulations, you have successfully integrated Website Copilot!

Updated 3 months ago