Installation - MrTopic Widget

Installation Simple

Ajoutez ce code dans votre page HTML. Vous pouvez le placer dans le <head> ou avant la balise </body> :

<script 
  src="https://askme.mrtopic.com/widget.js" 
  data-site-id="default" 
  data-mode="float"
></script>

💡 Placement flexible

Le script détecte automatiquement si le DOM est chargé. Vous pouvez le placer dans le <head> pour un chargement anticipé, ou avant </body> pour de meilleures performances.

Modes d'affichage

Le widget supporte deux modes d'affichage :

Mode Float (par défaut)

Widget flottant en bas à droite de la page :

<script 
  src="https://askme.mrtopic.com/widget.js" 
  data-site-id="default" 
  data-mode="float"
></script>

Mode Fixed

Interface fixe pleine page :

<script 
  src="https://askme.mrtopic.com/widget.js" 
  data-site-id="default" 
  data-mode="fixed"
></script>

🔧 Dépannage

⚠️ Si le widget ne s'affiche pas

Dans certains cas, le script peut avoir du mal à détecter automatiquement son origine. Si vous voyez une erreur "Invalid URL" dans la console, ajoutez l'attribut data-widget-origin :

<script 
  src="https://askme.mrtopic.com/widget.js" 
  data-site-id="default" 
  data-mode="float"
  data-widget-origin="https://askme.mrtopic.com"
></script>

🔒 Protection par Domaine

⚠️ Important

Pour empêcher d'autres sites d'utiliser votre widget sans autorisation, vous devez configurer les domaines autorisés dans les variables d'environnement.

Configurez la variable ALLOWED_DOMAINS avec vos domaines autorisés séparés par des virgules :

ALLOWED_DOMAINS=monsite.com,www.monsite.com,autresite.fr

🛡️ Comment ça fonctionne

Seuls les domaines configurés peuvent utiliser le widget
Les requêtes depuis d'autres domaines reçoivent une erreur 403
En développement, localhost est automatiquement autorisé
Les credentials Cloudflare restent sécurisés côté serveur

Installation Multi-Sites

Si vous gérez plusieurs sites, donnez à chaque site un identifiant unique :

 Site 1 avec mode float 
<script 
  src="https://askme.mrtopic.com/widget.js" 
  data-site-id="site1" 
  data-mode="float"
></script>

 Site 2 avec mode fixed 
<script 
  src="https://askme.mrtopic.com/widget.js" 
  data-site-id="site2" 
  data-mode="fixed"
></script>

🔒 Sécurité

Les credentials Cloudflare restent sécurisés sur votre serveur. Seul l'identifiant du site est transmis, et le serveur utilise cet ID pour choisir les bonnes credentials depuis les variables d'environnement.

Configuration Serveur

Sur votre serveur (Vercel, etc.), configurez les variables d'environnement :

Pour le site par défaut

CLOUDFLARE_ACCOUNT_ID=votre_account_id
CLOUDFLARE_API_TOKEN=votre_api_token
CLOUDFLARE_RAG_ID=votre_rag_id
ALLOWED_DOMAINS=monsite.com,www.monsite.com

Pour des sites supplémentaires

SITE1_CLOUDFLARE_ACCOUNT_ID=account_id_site1
SITE1_CLOUDFLARE_API_TOKEN=api_token_site1
SITE1_CLOUDFLARE_RAG_ID=rag_id_site1
SITE1_ALLOWED_DOMAINS=site1.com,www.site1.com

SITE2_CLOUDFLARE_ACCOUNT_ID=account_id_site2
SITE2_CLOUDFLARE_API_TOKEN=api_token_site2
SITE2_CLOUDFLARE_RAG_ID=rag_id_site2
SITE2_ALLOWED_DOMAINS=site2.com,www.site2.com

Puis modifiez le fichier lib/site-config.ts pour ajouter vos sites :

export const SITE_CONFIGS: Record<string, SiteConfig> = {
  default: {
    accountId: process.env.CLOUDFLARE_ACCOUNT_ID || "",
    apiToken: process.env.CLOUDFLARE_API_TOKEN || "",
    ragId: process.env.CLOUDFLARE_RAG_ID || "",
    name: "Default Site",
    allowedDomains: process.env.ALLOWED_DOMAINS?.split(",") || [],
  },
  site1: {
    accountId: process.env.SITE1_CLOUDFLARE_ACCOUNT_ID || "",
    apiToken: process.env.SITE1_CLOUDFLARE_API_TOKEN || "",
    ragId: process.env.SITE1_CLOUDFLARE_RAG_ID || "",
    name: "Site 1",
    allowedDomains: process.env.SITE1_ALLOWED_DOMAINS?.split(",") || [],
  },
  site2: {
    accountId: process.env.SITE2_CLOUDFLARE_ACCOUNT_ID || "",
    apiToken: process.env.SITE2_CLOUDFLARE_API_TOKEN || "",
    ragId: process.env.SITE2_CLOUDFLARE_RAG_ID || "",
    name: "Site 2",
    allowedDomains: process.env.SITE2_ALLOWED_DOMAINS?.split(",") || [],
  },
}

Obtenir vos credentials Cloudflare

Connectez-vous à votre compte Cloudflare
Accédez à AI → Vectorize
Créez ou sélectionnez votre RAG
Récupérez l'Account ID et le RAG ID
Créez un API Token avec les permissions nécessaires

Référence des attributs

`data-site-id`

Type : string | Requis : Oui | Défaut : "default"

Identifiant unique du site. Utilisé pour charger la configuration Cloudflare appropriée depuis les variables d'environnement.

`data-mode`

Type : "float" | "fixed" | Requis : Non | Défaut : "float"

Mode d'affichage du widget. "float" pour un bouton flottant, "fixed" pour une interface pleine page.

`data-widget-origin`

Type : string | Requis : Non

URL d'origine du widget. Utilisé uniquement si la détection automatique échoue. Doit inclure le protocole (https://) mais pas de slash final.

Besoin d'aide ?

Consultez nos autres ressources :

Installation du Widget MrTopic