Intégration du Chatbot

Démarrage rapide

Ajoutez deux blocs avant la balise fermante </body> — c'est tout :

<script>
  window.JamiiAIWidget = {
    apiUrl: "https://api.jamiiai.com"
  };
</script>
<script src="https://cdn.jamiiai.com/widget/jamiiai-widget.js"></script>

Un bouton de chat flottant apparaît en bas à droite de votre page. Le widget injecte automatiquement ses propres styles CSS — aucune feuille de style supplémentaire n'est nécessaire.

Fonctionnement

Le widget chatbot suit un flux simple :

1. Cliquez sur le bouton flottant pour ouvrir le panneau
2. Connectez-vous avec votre courriel (nom d'utilisateur) et votre réponse secrète
3. Discutez avec l'assistant IA en temps réel
4. Réinitialisez la conversation à tout moment avec le bouton ↻
5. Déconnectez-vous pour effacer la session (jeton stocké dans sessionStorage)

Le widget est entièrement autonome — un seul fichier JavaScript avec styles intégrés, internationalisation, authentification et fonctionnalités de chat. Avec le plan Pro, il offre une interface de chat simple utilisant trois points d'accès principaux. Avec le plan Entreprise, il déverrouille une expérience multi-modalité complète avec 82 points d'accès répartis sur 15 modalités — incluant la génération de code, l'analyse d'images et vidéos, la voix, la génération de documents, la base de connaissances, et bien plus.

Options de configuration

Toutes les options sont définies sur window.JamiiAIWidget avant le chargement du script :

Options de thème Entreprise

Les clients Entreprise peuvent entièrement personnaliser l'apparence visuelle du widget :

window.JamiiAIWidget = {
  apiUrl: "https://api.jamiiai.com",
  plan: "enterprise",
  theme: {
    primaryColor: "#0066ff",
    accentColor: "#00ccaa",
    fontFamily: "'Poppins', sans-serif"
  }
};

Options de marque Entreprise

Les utilisateurs Entreprise peuvent personnaliser le widget avec leur propre marque :

branding: {
  title: "Support Acme",
  subtitle: "Nous sommes là pour vous aider",
  logo: '<svg viewBox="0 0 32 32">...</svg>',
  showPoweredBy: false
}

Comparaison des plans

Exemple — Plan Pro (Minimal)

<script>
  window.JamiiAIWidget = {
    apiUrl: "https://api.jamiiai.com",
    lang: "en"
  };
</script>
<script src="https://cdn.jamiiai.com/widget/jamiiai-widget.js"></script>

Exemple — Plan Pro (Français, à gauche)

<script>
  window.JamiiAIWidget = {
    apiUrl: "https://api.jamiiai.com",
    lang: "fr",
    position: "bottom-left"
  };
</script>
<script src="https://cdn.jamiiai.com/widget/jamiiai-widget.js"></script>

Exemple — Entreprise (Marque blanche)

<script>
  window.JamiiAIWidget = {
    apiUrl: "https://api.votreentreprise.com",
    plan: "enterprise",
    lang: "fr",
    position: "bottom-left",
    theme: {
      primaryColor: "#0066ff",
      accentColor: "#00ccaa",
      fontFamily: "'Poppins', sans-serif"
    },
    branding: {
      title: "Support Acme",
      subtitle: "Nous sommes là pour vous aider",
      logo: '<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="#0066ff"/><text x="16" y="21" text-anchor="middle" fill="#fff" font-size="14" font-weight="bold">A</text></svg>',
      showPoweredBy: false
    }
  };
</script>
<script src="https://cdn.jamiiai.com/widget/jamiiai-widget.js"></script>

Auto-hébergement

Téléchargez jamiiai-widget.js et hébergez-le depuis votre propre domaine :

<script>
  window.JamiiAIWidget = {
    apiUrl: "https://api.jamiiai.com"
  };
</script>
<script src="/assets/jamiiai-widget.js"></script>

Un fichier CSS autonome optionnel (jamiiai-widget.css) est également fourni pour les clients qui préfèrent héberger les styles séparément. Le fichier JS injecte les styles automatiquement par défaut, le fichier CSS n'est pas requis.

Création de compte et abonnement

Avant d'utiliser le widget chatbot, les utilisateurs doivent créer un compte et souscrire à un plan. Le site web propose un formulaire d'inscription qui collecte :

• Nom complet
• Courriel (également utilisé comme nom d'utilisateur — la partie avant @)
• Téléphone
• Question secrète et réponse (utilisée pour la connexion au widget)

Après l'inscription, l'utilisateur est redirigé vers Stripe Checkout pour choisir un plan (Starter 19 $/mois, Pro 49 $/mois, Entreprise 199 $/mois). Après un paiement réussi, l'abonnement est enregistré automatiquement via webhook.

Points d'accès associés

Points d'accès API utilisés

Avec le plan Pro, le widget utilise trois points d'accès principaux. Avec le plan Entreprise, le widget a accès à 82 points d'accès répartis sur 15 modalités — les points d'accès principaux ci-dessous plus ceux listés dans le tableau des modalités.

{
  "username": "jean",
  "secret_answer": "mon-secret"
}

{
  "access_token": "eyJhbGciOi...",
  "token_type": "bearer"
}

{
  "message": "Que pouvez-vous faire ?"
}

{
  "response": "Je peux vous aider avec..."
}

{
  "message": "Chat reset successfully"
}

Points d'accès des modalités Entreprise

Les utilisateurs Entreprise disposent d'une barre de sélection de modalité dans le widget donnant accès à :

Flux d'authentification

1. L'utilisateur clique sur le bouton de chat flottant
2. Un formulaire de connexion demande le courriel (nom d'utilisateur) et la réponse secrète
3. Les identifiants sont envoyés à /auth/customer/login, qui retourne un JWT
4. Le JWT est stocké dans sessionStorage (effacé à la déconnexion ou à la fermeture de l'onglet)
5. Tous les appels API suivants incluent le jeton comme Authorization: Bearer
6. En cas de réponse 401 (jeton expiré), l'utilisateur est redirigé vers le formulaire de connexion

Navigateurs supportés

Dépannage