Prompt Detail:
Sure! Here's the updated code with the Dialogflow integration:
php<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chatbot Example</title>
<style>
/* Chat window styling */
#chat-window {
border: 1px solid black;
height: 300px;
width: 400px;
overflow-y: scroll;
padding: 10px;
}
/* Input field and send button styling */
#input-container {
display: flex;
margin-top: 10px;
}
#message-input {
flex: 1;
margin-right: 5px;
}
#send-button {
background-color: blue;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="chat-window"></div>
<div id="input-container">
<input id="message-input" type="text" placeholder="Type your message here...">
<button id="send-button">Send</button>
</div>
<script src="https://cdn.dialogflow.com/js/es6/dialogflow.js"></script>
<script>
// Set up the Dialogflow client
const projectId = 'YOUR_PROJECT_ID';
const sessionId = 'YOUR_SESSION_ID';
const languageCode = 'en-US';
const sessionClient = new dialogflow.SessionsClient();
const sessionPath = sessionClient.sessionPath(projectId, sessionId);
// Function to send a message to Dialogflow and get a response
function sendMessageToDialogflow(message) {
const request = {
session: sessionPath,
queryInput: {
text: {
text: message,
languageCode: languageCode,
},
},
};
sessionClient
.detectIntent(request)
.then((responses) => {
const result = responses[0].queryResult;
const fulfillmentText = result.fulfillmentText;
// Display the response in the chat window
const chatWindow = document.getElementById('chat-window');
const messageElement = document.createElement('div');
messageElement.innerText = `User: ${message}\nBot: ${fulfillmentText}`;
chatWindow.appendChild(messageElement);
// Clear the input field
document.getElementById('message-input').value = '';
})
.catch((error) => {
console.log(error);
});
}
// Event listener for the send button
const sendButton = document.getElementById('send-button');
sendButton.addEventListener('click', () => {
const message = document.getElementById('message-input').value;
sendMessageToDialogflow(message);
});
</script>
</body>
</html>
Make sure to replace YOUR_PROJECT_ID and YOUR_SESSION_ID with your actual Dialogflow project and session IDs. Also note that the above code assumes you have already set up a Dialogflow agent and trained it to handle user queries.
Add a comment
Add to Chrome - It's free
Add to Firefox - It's free
Add to Edge - It's free