Sélectionnez votre technologie pour voir les instructions d'intégration spécifiques.
Voici un exemple de script à insérer dans vos pages HTML classiques, juste avant </body>.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Démo WelcomIA</title>
<meta name="description" content="Intégration simple du chatbot WelcomIA dans votre site web.">
<style>
body {
font-family: Arial, sans-serif;
}
#welcomia-button {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
border-radius: 50%;
background-image: url('https://welcom-ia.s3.eu-west-3.amazonaws.com/chatbots/67ea19797f865_1743395193.jpg');
background-size: cover;
background-position: center;
border: none;
cursor: pointer;
z-index: 10000;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#welcomia-chatbot {
position: fixed;
bottom: 90px;
right: 20px;
width: 360px;
height: 500px;
border: none;
border-radius: 10px;
z-index: 9999;
display: block;
}
</style>
</head>
<body>
<h1>Bienvenue sur la démonstration WelcomIA</h1>
<p>Testez notre chatbot en cliquant sur l'avatar en bas à droite de l'écran.</p>
<!-- Bouton -->
<button id="welcomia-button" aria-label="Chatbot WelcomIA"></button>
<!-- Iframe du chatbot -->
<iframe
id="welcomia-chatbot"
src="https://chatbot.welcom-ia.com/?token=TON_TOKEN_ICI"
title="Chatbot WelcomIA"
></iframe>
<script>
const button = document.getElementById("welcomia-button");
const iframe = document.getElementById("welcomia-chatbot");
let isVisible = true;
button.addEventListener("click", () => {
isVisible = !isVisible;
iframe.style.display = isVisible ? "block" : "none";
});
</script>
</body>
</html>Une fois intégré, votre chatbot apparaîtra automatiquement en bas à droite de l'écran.
Note : Remplacez TON_TOKEN_ICI par votre token sécurisé obtenu depuis votre espace client.
Pour obtenir votre propre chatbot WelcomIA, créez un compte ici :Inscription WelcomIA