Documentation

Everything you need to run Trame in production, from copy-paste to advanced options. This page does not move: you come here to read and to copy.

Installation

Paste the tag before the closing body tag of your front-end app.

<script
  src="https://api.trame.dismoi.dev/v1/feedback/widget.js"
  data-widget-key="wk_your_public_key"
  data-types="bug,feature,chat,rating,sales"
  defer></script>

This key is public: it is meant to be visible in your HTML.
It is only accepted from the domain you declared.
It only ever submits a report, never reads anyone else’s.

Widget options

Eight data-* attributes on the script tag. No build, no bundler, no global object to configure.

data-widget-key       public widget key (required)
data-api              API origin (defaults to the script’s own)
data-position         bottom-right | bottom-left | top-right | top-left
data-color            launcher colour (default: #1c205f)
data-scheme           light | dark (default: measured on your page)
data-lang             fr | en (default: detected on your page)
data-types            kinds offered (default: the first four)
data-capture-requests false to turn network capture off

Choosing the kinds of report

By default the widget offers the first four. data-types narrows the list and sets its order; it is also the only way to show chat. The first one is preselected.

data-types="bug,feature"     problem and improvement only
data-types="rating"          rating alone, preselected
data-types="sales,bug"       callback first, then problem
data-types="bug,chat"        problem, then chat

Values: bug | feature | rating | sales | chat
An unknown value is ignored; an empty list restores the first four.

Content Security Policy

Directives to add if your app enforces a strict CSP.

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

Start with Trame I already have an account