185 lines
6.3 KiB
HTML
185 lines
6.3 KiB
HTML
Voici un exemple de chatbot complet avec les fonctionnalités que vous avez demandées. Ce chatbot est construit dans un seul fichier HTML, avec des éléments de design moderne sombre, un widget flottant, un historique des messages et une connection à une API.
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WEVCODE Chatbot</title>
|
|
<style>
|
|
/* Ajoutez de la police et du padding au body */
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
background-color: #333;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Créez un layout moderne avec du sombre */
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 40px auto;
|
|
background-color: #444;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Configurez la fenêtre flottante */
|
|
.floating-window {
|
|
position: fixed;
|
|
top: 40px;
|
|
right: 40px;
|
|
background-color: #333;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Stylez la boîte de dialogue */
|
|
.popup {
|
|
position: fixed;
|
|
top: 100px;
|
|
right: 40px;
|
|
background-color: #444;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
display: none;
|
|
}
|
|
|
|
/* Stylez l'historique des messages */
|
|
.message-list {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.message {
|
|
padding: 10px;
|
|
border-bottom: 1px solid #777;
|
|
}
|
|
|
|
.message:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Stylez les éléments de l'historique des messages */
|
|
.message-author {
|
|
font-weight: bold;
|
|
color: #999;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.message-text {
|
|
color: #fff;
|
|
}
|
|
|
|
/* Stylez les éléments de l'API */
|
|
.api-data {
|
|
padding: 10px;
|
|
border-bottom: 1px solid #777;
|
|
}
|
|
|
|
.api-data:last-child {
|
|
border-bottom: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Fenêtre flottante -->
|
|
<div class="floating-window" onclick="showPopup()">
|
|
<i class="fa fa-comment"></i>
|
|
</div>
|
|
|
|
<!-- Boîte de dialogue -->
|
|
<div class="popup" id="popup">
|
|
<h2>Chatbot</h2>
|
|
<input type="text" id="input" placeholder="Ecrivez votre message...">
|
|
<button onclick="send_message()">Envoyer</button>
|
|
<div id="message-list"></div>
|
|
</div>
|
|
|
|
<!-- Historique des messages -->
|
|
<div class="container">
|
|
<h1>Historique des messages</h1>
|
|
<div class="message-list" id="message-list-api"></div>
|
|
</div>
|
|
|
|
<!-- API -->
|
|
<div class="api-data" id="api-data"></div>
|
|
|
|
<!-- Script JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/fetch@2.0.3/dist/fetch.min.js"></script>
|
|
<script>
|
|
// Fonction pour afficher la boîte de dialogue
|
|
function showPopup() {
|
|
document.getElementById("popup").style.display = "block";
|
|
}
|
|
|
|
// Fonction pour cacher la boîte de dialogue
|
|
function hidePopup() {
|
|
document.getElementById("popup").style.display = "none";
|
|
}
|
|
|
|
// Fonction pour envoyer un message
|
|
function send_message() {
|
|
// Récupérez le message en cours
|
|
var message = document.getElementById("input").value;
|
|
|
|
// Vérifiez si le message n'est pas vide
|
|
if (message != "") {
|
|
// Envoyer le message à l'API
|
|
fetch('/api/sendmessage', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
message: message
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Afficher le message dans l'historique
|
|
var message_div = document.createElement("div");
|
|
message_div.classList.add("message");
|
|
message_div.innerHTML = `
|
|
<div class="message-author">Vous</div>
|
|
<div class="message-text">${message}</div>
|
|
`;
|
|
document.getElementById("message-list").appendChild(message_div);
|
|
|
|
// Vider le champ d'input
|
|
document.getElementById("input").value = "";
|
|
|
|
// Récupérer les réponses à l'API
|
|
fetch('/api/getresponses')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Afficher les réponses à l'historique
|
|
data.forEach(response => {
|
|
var response_div = document.createElement("div");
|
|
response_div.classList.add("message");
|
|
response_div.innerHTML = `
|
|
<div class="message-author">Chatbot</div>
|
|
<div class="message-text">${response}</div>
|
|
`;
|
|
document.getElementById("message-list-api").appendChild(response_div);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
// Masquer la boîte de dialogue
|
|
hidePopup();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
Cet exemple de chatbot utilise des éléments de JavaScript, CSS3 et HTML5 pour créer une interface utilisateur moderne et intéragir avec une API. Le chatbot peut envoyer des messages et recevoir des réponses à partir de la base de données, qui sont affichées dans l'historique des messages.
|
|
|
|
C'est un exemple de base. Vous devriez personnaliser et améliorer l'interface utilisateur, le design et les fonctionnalités en fonction de vos besoins.
|
|
|
|
N'oubliez pas d'implémenter l'API et de personnaliser le projet pour votre application spécifique. |