Intégration du Widget

Intégrez votre bot AskIA sur n'importe quel site web avec une seule ligne de code.

Vue d'ensemble

Le widget AskIA est un composant JavaScript léger qui ajoute une interface de chat à votre site web. Il est facile à installer, entièrement personnalisable et fonctionne sur n'importe quel site.

Installation de Base

La façon la plus simple d'ajouter AskIA à votre site web est avec une seule balise script :

index.html

<script src="askiabot.com/api/widget/embed.js?botId=YOUR_BOT_ID"></script>

Important : Remplacez YOUR_BOT_ID par l'ID réel de votre bot. Vous le trouverez sur la page Snippet de votre bot.

Où placer le code

Ajoutez la balise script juste avant la balise fermante </body> de votre HTML :

index.html

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- AskIA Widget -->
  <script src="askiabot.com/api/widget/embed.js?botId=YOUR_BOT_ID"></script>
</body>
</html>

Configuration de la Liste Blanche de Domaines

Pour des raisons de sécurité, vous devez configurer les domaines autorisés à intégrer le widget de votre bot.

Configurer les Domaines Autorisés

Allez dans la page Paramètres de votre bot
Faites défiler jusqu'à la section "Domaines autorisés"
Entrez votre domaine (par ex. example.com)
Cliquez sur "Ajouter"
Cliquez sur "Enregistrer les domaines autorisés"

Note : askiabot.com est automatiquement inclus pour la prévisualisation et les tests. Vous n'avez pas besoin de l'ajouter manuellement.

Règles de Domaine

Sous-domaines : Si vous autorisez example.com, tous les sous-domaines comme app.example.com sont automatiquement autorisés
Variantes WWW : www.example.com et example.com sont traités de la même façon
Insensible à la casse : Les domaines sont automatiquement normalisés en minuscules
Sans protocole : Entrez les domaines sans http:// ni https://

Sécurité : Sans domaines autorisés configurés, votre bot ne peut pas être activé. Ajoutez toujours votre domaine de production avant la mise en ligne.

Intégration par Framework

React / Next.js

Pour les applications React, utilisez le composant Script de Next.js :

app/layout.tsx

import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="askiabot.com/api/widget/embed.js?botId=YOUR_BOT_ID"
        strategy="lazyOnload"
      />
    </>
  )
}

Vue.js

App.vue

<template>
  <div id="app">
    <!-- Your app content -->
  </div>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement('script')
    script.src = 'askiabot.com/api/widget/embed.js?botId=YOUR_BOT_ID'
    script.async = true
    document.body.appendChild(script)
  }
}
</script>

WordPress

Ajoutez à votre functions.php du thème :

functions.php

function add_askia_widget() {
    $bot_id = 'YOUR_BOT_ID';
    $script_url = 'askiabot.com/api/widget/embed.js?botId=' . $bot_id;
    ?>
    <script src="<?php echo esc_url($script_url); ?>" async></script>
    <?php
}
add_action('wp_footer', 'add_askia_widget');

Comportement du Widget

Apparence par Défaut

La bulle de chat apparaît dans le coin inférieur droit
S'ouvre comme une fenêtre de chat au clic
S'adapte automatiquement au thème clair/sombre
Entièrement responsive sur les appareils mobiles

Expérience Mobile

Sur les appareils mobiles, le chat s'ouvre en mode plein écran pour une meilleure expérience utilisateur.

Tester Votre Intégration

Ajoutez le code du widget à votre site web
Assurez-vous que votre domaine est en liste blanche dans les paramètres du bot
Activez votre bot
Rechargez votre site web
Cherchez la bulle de chat dans le coin
Cliquez pour ouvrir et tester le chat

Mode Prévisualisation

Vous pouvez tester votre bot avant d'ajouter votre domaine en utilisant le mode prévisualisation :

Activez votre bot (même sans domaines utilisateur)
Visitez la page de prévisualisation : /widget/preview?botId=YOUR_BOT_ID
Testez les fonctionnalités de votre bot
Ajoutez votre domaine quand vous êtes prêt pour la production

Dépannage

Widget Non Affiché

Vérifiez que votre bot est activé
Vérifiez que votre domaine est en liste blanche
Vérifiez les erreurs dans la console du navigateur
Assurez-vous que la balise script est avant </body>

Domaine Non Autorisé

Vérifiez que le domaine est ajouté dans les paramètres du bot
Vérifiez le format du domaine (sans protocole, en minuscules)
Assurez-vous que le domaine est enregistré
Attendez quelques secondes que les changements se propagent

Prochaines Étapes

Exemples de Code

Voir des exemples d'intégration pour React, Vue, et plus encore

REST API

Créez des intégrations personnalisées avec notre API