Add copilot to any text input field with a send button
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, or clicks on the send button, the Website Copilot window will open right away and your AI Agent will provide them with an answer!
In this guide we will show you how to add input field to your website, which will open Website Copilot when user presses Enter or clicks on a Send button. If you wish a more simpler version without a Send button, check out this guide.
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.
Step 2: Add Attribute to Input Field
Next, choose a text input field and button 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>
<button id="cool-arrow">➤</button>Important Notes:
The id attributes on both input and button are crucial as they will be used in the next step.
Both ids must have a value. In the example above, they are set to "cool-id" and "cool-arrow".
Step 3: Add Event Listeners
The third step is to add a script that will listen for both the Enter key in the text input, and Send button, and use them to open your AI Agent. Ensure the script uses the same ids as your text input field and button from Step 2.
Here is the script you can use:
<script>
document.addEventListener('DOMContentLoaded', function() {
const inputElement = document.getElementById('cool-id')
const buttonElement = document.getElementById('cool-arrow')
function sendQuery() {
const inputValue = inputElement.value
if (inputValue.trim()) {
document.dispatchEvent(
new CustomEvent('CustomGPTSendQuery', { detail: inputValue })
)
inputElement.value = ''
}
}
inputElement.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
sendQuery()
}
})
buttonElement.addEventListener('click', sendQuery)
})
</script>The script should be placed after the "<body>" section of your webpage.
Ensure the ids in "getElementById" matches the "id" of your input field and button from the 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="AGENT_ID" p_key="AGENT_KEY"></script>
<input id="cool-id" placeholder="Ask me something…" data-cgpt-ai-assistant-input></input>
<button id="cool-arrow">➤</button>
</body>
<script>
document.addEventListener('DOMContentLoaded', function() {
const inputElement = document.getElementById('cool-id')
const buttonElement = document.getElementById('cool-arrow')
function sendQuery() {
const inputValue = inputElement.value
if (inputValue.trim()) {
document.dispatchEvent(
new CustomEvent('CustomGPTSendQuery', { detail: inputValue })
)
inputElement.value = ''
}
}
inputElement.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
sendQuery()
}
})
buttonElement.addEventListener('click', sendQuery)
})
</script>
</html>
Congratulations, you have successfully integrated Website Copilot!
Updated about 13 hours ago