Démonstration d'intégration de WelcomIA

Comment intégrer WelcomIA dans votre site web

1- Créez votre compte

Inscrivez-vous sur la plateforme d'administration WelcomIA

https://admin.welcom-ia.com/auth/sign-up

2- Créez votre chatbot

Configurez l'apparence et le comportement de votre assistant

https://admin.welcom-ia.com/dashboard/chatbots/create

3- Récupérez votre token

Copiez le token unique de votre chatbot

4- Intégrez le code

Choisissez votre technologie et copiez le snippet de code

Sélectionnez votre technologie pour voir les instructions d'intégration spécifiques.

Intégration HTML (site vitrine, WordPress, etc.)

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>Intégration Chatbot WelcomIA</title>
  <style>
    #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);
      transition: transform 0.3s ease;
    }

    #welcomia-button:hover {
      transform: scale(1.1);
    }

    #welcomia-chatbot {
      position: fixed;
      bottom: 80px;
      right: 20px;
      width: 360px;
      height: 500px;
      border: none;
      border-radius: 10px;
      z-index: 9999;
      display: none; 
    }

    #welcomia-help-banner {
      position: fixed;
      bottom: 90px;
      right: 90px;
      background-color: #ffffff;
      color: #333;
      padding: 10px 15px;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      z-index: 10000;
      display: none; /* Cachée par défaut */
      align-items: center;
      border: 1px solid #eee;
      font-size: 14px;
      font-weight: bold;
      animation: fadeInUp 0.5s ease;
    }

    #welcomia-help-banner:hover {
      background-color: #f5f5f5;
    }

    #welcomia-help-banner .badge {
      margin-left: 8px;
      font-size: 12px;
      background-color: #4CAF50;
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</head>
<body>

  <button id="welcomia-button" aria-label="Chatbot WelcomIA"></button>

  <iframe
    id="welcomia-chatbot"
    src="https://chatbot.welcom-ia.com/?token=TON_TOKEN_ICI"
    title="Chatbot WelcomIA"
  ></iframe>

  <div id="welcomia-help-banner">
    Besoin d'aide ?
    <span class="badge">!</span>
  </div>

  <script>
    let isChatVisible = false;
    let helpBannerTimer;

    const chatbotButton = document.getElementById('welcomia-button');
    const chatbotIframe = document.getElementById('welcomia-chatbot');
    const helpBanner = document.getElementById('welcomia-help-banner');

    function toggleChat() {
      isChatVisible = !isChatVisible;
      chatbotIframe.style.display = isChatVisible ? 'block' : 'none';
      
      helpBanner.style.display = 'none';
      clearTimeout(helpBannerTimer);
    }

    function scheduleHelpBanner() {
      helpBannerTimer = setTimeout(() => {
        helpBanner.style.display = 'flex';
      }, 5000);
    }

    document.addEventListener('DOMContentLoaded', () => {
      chatbotButton.addEventListener('click', toggleChat);
      
      helpBanner.addEventListener('click', toggleChat);
      
      scheduleHelpBanner();
    });

    window.addEventListener('beforeunload', () => {
      clearTimeout(helpBannerTimer);
    });
  </script>

</body>
</html>

Informations communes

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

Prêt à révolutionner l'expérience client ? Essayez notre chatbot IA dès maintenant !

Commencez gratuitement ➜

Entreprise

Politique de confidentialité

Nos solutions

Fonctionnalités

Tarification

Contact

Nous contacter