#chatbox {
width: 400px;
height: 300px;
background-color: black;
border: 2px solid #33FF33;
color: #33FF33;
font-family: monospace;
overflow-y: scroll;
margin: 20px auto;
padding: 10px;
}
#messages {
height: 250px;
overflow-y: auto;
margin-bottom: 10px;
}
#userInput {
width: 70%;
padding: 5px;
background-color: black;
color: #33FF33;
border: 1px solid #33FF33;
font-family: monospace;
}
button {
padding: 5px 10px;
background-color: #33FF33;
color: black;
border: none;
cursor: pointer;
}
function sendMessage() {
const userMessage = document.getElementById('userInput').value;
if (userMessage.trim() !== "") {
const messageDiv = document.createElement('div');
messageDiv.textContent = `You: ${userMessage}`;
document.getElementById('messages').appendChild(messageDiv);
document.getElementById('userInput').value = "";
// Placeholder Botpress API call
fetch('YOUR_BOTPRESS_API_URL', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
text: userMessage,
})
})
.then(response => response.json())
.then(data => {
const botResponse = document.createElement('div');
botResponse.textContent = `Bot: ${data.reply}`;
document.getElementById('messages').appendChild(botResponse);
})
.catch(error => console.error('Error:', error));
}
}
top of page
bottom of page
