Aller au contenu
dismoi

Trame

Documentation

Tout ce qu'il faut pour brancher Trame en production, du copier-coller aux options avancées. Cette page ne bouge pas : on y vient pour lire et pour copier.

Installation

Collez la balise avant la fermeture du body de votre application front.

<script
  src="https://api.trame.dismoi.dev/v1/feedback/widget.js"
  data-widget-key="wk_votre_cle_publique"
  data-types="bug,feature,chat,rating,sales"
  defer></script>
  • Cette clé est publique : elle est faite pour être visible dans votre HTML.
  • Elle n'est acceptée que depuis le domaine que vous avez déclaré.
  • Elle ne sert qu'à déposer un retour, jamais à lire ceux des autres.

Options du widget

Huit attributs data-* sur la balise script. Ni build, ni bundler, ni objet global à configurer.

data-widget-key       clé publique du widget (requis)
data-api              origine de l'API (défaut : celle du script)
data-position         bottom-right | bottom-left | top-right | top-left
data-color            couleur du bouton (défaut : #1c205f)
data-scheme           light | dark (défaut : mesuré sur votre page)
data-lang             fr | en (défaut : détecté sur votre page)
data-types            natures proposées (défaut : les quatre premières)
data-capture-requests false pour couper la capture réseau

Choisir les natures de retour

Par défaut le widget propose les quatre premières. data-types restreint la liste et fixe son ordre ; c'est aussi le seul moyen d'afficher la conversation. La première nature est présélectionnée.

data-types="bug,feature"     problème et amélioration seuls
data-types="rating"          la note seule, présélectionnée
data-types="sales,bug"       le contact d'abord, puis le problème
data-types="bug,chat"        le problème, puis la conversation

Valeurs : bug | feature | rating | sales | chat
Une valeur inconnue est ignorée ; une liste vide rétablit les quatre premières.

Content Security Policy

Les directives à ajouter si votre application applique une CSP stricte.

script-src  https://api.trame.dismoi.dev
connect-src https://api.trame.dismoi.dev
img-src     data:
style-src   'unsafe-inline'