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!
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](https://files.readme.io/c8822b4-Website_Co-pilot.png)
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 about 1 month ago