Guide d'installation du widget conversationnel MrTopic

1) Installation rapide

Copiez/collez ce script dans votre page (idéalement juste avant </body>).
Sans paramètre, le widget s'affiche en mode basic.

<script defer type="module" src="https://askme.mrtopic.com/scripts/mr-topic-web-conversational-widget.js"></script>

2) Choisir le mode d'affichage

Le widget propose plusieurs modes, via l'attribut data-mode.

2.1 Mode chat (widget compact)

Affichage type "chat" compact.

<script
  defer
  type="module"
  data-mode="chat"
  src="https://askme.mrtopic.com/scripts/mr-topic-web-conversational-widget.js"
></script>

2.2 Mode full (plein écran / pleine largeur)

Affichage étendu, adapté à une page dédiée.

<script
  defer
  type="module"
  data-mode="full"
  src="https://askme.mrtopic.com/scripts/mr-topic-web-conversational-widget.js"
></script>

2.3 Mode basic (par défaut)

Si data-mode n'est pas défini, le widget reste en mode basic.

<script defer type="module" src="https://askme.mrtopic.com/scripts/mr-topic-web-conversational-widget.js"></script>

3) Personnaliser les questions suggérées

Vous pouvez remplacer les questions suggérées via data-suggested-questions.

• Les questions sont séparées par le caractère |.
• Le widget les affichera dans la section "Questions suggérées".

Exemple :

<script
  defer
  type="module"
  data-suggested-questions="Que fait ce widget ? | Comment rendre mon site visible par ChatGPT ? | Est ce que c'est compliqué à mettre en place ?"
  src="https://askme.mrtopic.com/scripts/mr-topic-web-conversational-widget.js"
></script>

Bonnes pratiques :

• Évitez les phrases trop longues (meilleure lisibilité).
• Gardez des formulations orientées utilisateur ("Comment...", "Où...", "Quels...").

4) Personnaliser le message de bienvenue

Vous pouvez modifier le message initial affiché par le widget via data-greeting-message.

Exemple :

<script
  defer
  type="module"
  data-greeting-message="Bonjour ! Je suis là pour vous aider. Comment puis-je vous assister aujourd'hui ?"
  src="https://askme.mrtopic.com/scripts/mr-topic-web-conversational-widget.js"
></script>

Notes importantes :

• Le texte est placé dans un attribut HTML : si vous insérez des guillemets " dans le message, il faut les échapper ou les éviter.
• Préférez un message court, clair, orienté "action" (inviter à poser une question).

5) Personnaliser l'icône du widget

Vous pouvez remplacer l'icône par défaut par votre propre logo ou icône via l'attribut data-icon-url.

Exemple :

<script
  defer
  type="module"
  data-icon-url="https://askme.mrtopic.com/mr-topic-icon.png"
  src="https://askme.mrtopic.com/scripts/mr-topic-web-conversational-widget.js"
></script>

6) Personnaliser l'apparence (variables UI)

Le widget expose des variables d'interface (CSS variables) que vous pouvez surcharger via data-ui-variables pour personnaliser les couleurs, les tailles et les positions.

6.1 Variables disponibles et valeurs par défaut

/* Personnalisation principale */
--w-primary : #ed6df8; /* icône du widget, couleur des liens au survol, fond du bouton d'action */
--w-primary-fg : #fff; /* couleur du titre, couleur bouton réduire, couleur message utilisateur, couleur texte bouton envoyer */
--w-fg : #0a0a0a; /* couleur texte message IA, couleur bouton feedback, couleur bouton réinitialiser, couleur texte saisie, couleur questions suggérées */
--w-muted-fg : #363847; /* couleur titre questions suggérées, couleur indicateur réflexion IA */
--w-bg : #232535; /* fond en-tête, fond message utilisateur, fond bouton envoyer */
--w-ai-bg : #fff; /* fond message IA */
--w-main-bg : #fff; /* fond du widget */

--w-icon-size: 24px; /* taille icône du widget */
--w-icon-minimized-size: 32px; /* taille icône du widget lorsqu'il est minimisé */

--w-position-left: 16px; /* distance du bord gauche */
--w-position-right: 16px; /* distance du bord droit */
--w-position-top: 16px; /* distance du bord haut */
--w-position-bottom: 16px; /* distance du bord bas */


/* Personnalisation avancée */
--w-message-user-fg : #fff; /* couleur texte message utilisateur */
--w-message-user-bg : #232535; /* fond message utilisateur */
--w-message-ai-fg : #0a0a0a; /* couleur texte message IA */
--w-message-ai-bg : #fff; /* fond message IA */
--w-message-ai-thinking-fg : #ed6df8; /* couleur réflexion IA (points animés) */
--w-icon-fg : #ed6df8; /* couleur icône */
--w-header-fg : #fff; /* couleur texte en-tête (titre, bouton réduire) */
--w-header-bg : #232535; /* fond en-tête (widget réduit ou étendu) */
--w-button-submit-fg : #fff; /* couleur texte bouton envoyer */
--w-button-submit-bg : #232535; /* fond bouton envoyer */
--w-button-stop-fg : #fff; /* couleur texte bouton stop */
--w-button-stop-bg : #f89faf; /* fond bouton stop */
--w-button-action-fg : #fff; /* couleur texte bouton action */
--w-button-action-bg : #ed6df8; /* fond bouton action */
--w-suggested-questions-bg : #f5f5f5; /* fond questions suggérées */
--w-suggested-questions-fg : #232535; /* couleur texte questions suggérées */

6.2 Exemple de personnalisation

<script
  defer
  type="module"
  data-ui-variables="--w-primary : #64c43c; --w-ai-bg : #f8f9fa;"
  src="https://askme.mrtopic.com/scripts/mr-topic-web-conversational-widget.js"
></script>

Règles de format à respecter :

• Chaque variable est déclarée sous la forme --nom : valeur;
• Séparez plusieurs variables par un espace (ou directement en enchaînant), l'important est d'avoir des ; entre elles.

7) Configurer les paramètres UTM

Le widget permet d'ajouter automatiquement des paramètres UTM aux liens générés dans les réponses de l'assistant. Ces paramètres sont utiles pour le suivi analytique des clics.

7.1 Règles importantes

Paramètres obligatoires ensemble : Si vous souhaitez utiliser le tracking UTM, vous devez fournir les 3 paramètres suivants ensemble :

• data-utm-source : Source du trafic (ex: google, newsletter)
• data-utm-medium : Support marketing (ex: cpc, email, widget)
• data-utm-campaign : Nom de la campagne

Paramètres optionnels : Ces paramètres peuvent être ajoutés en complément (ou omis) :

• data-utm-id : Identifiant unique de la campagne
• data-utm-term : Mots-clés associés
• data-utm-content : Contenu ou variante (ex: header, footer)

Si aucun paramètre UTM n'est fourni, les liens restent inchangés.

7.2 Exemple d'utilisation

<script
  defer
  type="module"
  data-utm-source="monsite"
  data-utm-medium="widget"
  data-utm-campaign="assistance-2024"
  src="https://askme.mrtopic.com/scripts/mr-topic-web-conversational-widget.js"
></script>

Avec cette configuration, un lien comme https://example.com/page deviendra :

https://example.com/page?utm_source=monsite&utm_medium=widget&utm_campaign=assistance-2024

8) Positionnement du widget

Le positionnement du widget peut être configuré via l'attribut data-position. Le comportement dépend du mode choisi.

8.1 En mode basic

Par défaut, le widget s'affiche en bas au centre.
Valeurs acceptées pour data-position : top, left, right, bottom-left, top-right, top-left, bottom-right, bottom-center.

8.2 En mode full

En mode full, le widget occupe tout l'écran lorsqu'il est ouvert. Lorsqu'il est minimisé, sa position est définie par data-position.
Valeurs acceptées : top, left, right, bottom (défaut).

8.3 En mode chat (avec support responsive)

Le mode chat supporte le positionnement responsive. La position par défaut est bottom-right.

Positions disponibles :

• bottom, top, left, right
• bottom-left, bottom-right, top-left, top-right

Syntaxe responsive

Vous pouvez définir des positions différentes selon la taille de l'écran en utilisant le format breakpoint:position. Les déclarations sont séparées par des espaces. Le widget utilisera le breakpoint actif le plus grand.

Breakpoints par défaut (basés sur Tailwind CSS) :

• sm : 640px
• md : 768px
• lg : 1024px
• xl : 1280px
• 2xl : 1536px

Exemple : "En haut à gauche sur grand écran (lg), mais en bas à droite par défaut"

<script
  defer
  type="module"
  data-mode="chat"
  data-position="bottom-right lg:top-left"
  src="https://askme.mrtopic.com/scripts/mr-topic-web-conversational-widget.js"
></script>

8.4 Personnalisation des breakpoints

Pour le mode chat, vous pouvez redéfinir les valeurs des breakpoints via l'attribut data-position-breakpoints. Séparez les définitions par |.

Exemple : Redéfinir lg à 900px et md à 700px.

<script
  defer
  type="module"
  data-mode="chat"
  data-position="bottom-right lg:top-left"
  data-position-breakpoints="lg:900|md:700"
  src="https://askme.mrtopic.com/scripts/mr-topic-web-conversational-widget.js"
></script>

9) Conseils d'intégration

• Conservez type="module" et defer comme dans les exemples : cela garantit un chargement propre et non bloquant.
• Si votre site utilise une politique de sécurité (CSP), assurez-vous que le domaine askme.mrtopic.com est autorisé pour charger le script.

10) Récapitulatif des paramètres configurables

Paramètre	Type	Exemple	Effet
data-mode	string	chat, full	Change le mode d'affichage (basic si absent)
data-suggested-questions	string	Question 1 | Question 2	Remplace la liste des questions suggérées (séparées par | )
data-greeting-message	string	Bonjour ! ...	Remplace le message de bienvenue
data-icon-url	string	https://...	URL de l'icône
data-ui-variables	string	--w-primary : #...;	Surcharge les couleurs via variables UI
data-utm-id	string	abc123	Ajoute utm_id aux liens (optionnel)
data-utm-source	string	mrtopic	Source du trafic (requis avec medium+campaign)
data-utm-medium	string	widget	Support marketing (requis avec source+campaign)
data-utm-campaign	string	launch2024	Nom de campagne (requis avec source+medium)
data-utm-term	string	chatbot	Ajoute utm_term aux liens (optionnel)
data-utm-content	string	footer	Ajoute utm_content aux liens (optionnel)
data-position	string	bottom-right lg:top-left	Position du widget (dépend du mode)
data-position-breakpoints	string	lg:900|md:700	Personnalisation des breakpoints (mode chat)