talkieback
Essayer gratuitementEN

Installer Talkieback sur un site HTML

Une ligne à coller dans vos pages, comme un outil de mesure d'audience. Comptez deux minutes.

Il vous faut l'identifiant de votre app (pk_live_…). Il est sur la page « Installation » de votre app, dans Talkieback.

  1. Étape 1 : Copiez ce code

    HTML
    <script src="https://cdn.talkieback.com/w.js" data-app="pk_live_…" async></script>

    Remplacez pk_live_… par l'identifiant de votre app. Il n'est pas secret : il ne marche qu'aux adresses déclarées dans Talkieback.

  2. Étape 2 : Collez-le juste avant </body>

    Sur toutes les pages où le bouton doit apparaître. Le plus simple : dans le modèle commun à toutes vos pages.

  3. Étape 3 : Mettez votre site en ligne, puis vérifiez

    Sur la page « Installation » de votre app, dans Talkieback, « Vérifier l'installation » ouvre votre site dans un nouvel onglet et montre en direct ce qui marche. Envoyez ensuite un retour de test.

Pour aller plus loin

Reconnaître vos utilisateurs connectés

Sur les pages où l'utilisateur est connecté, après le code d'installation :

HTML
<script>
  window.talkieback = window.talkieback || [];
  talkieback.push(['identify', { id: '42', email: 'camille@exemple.fr', name: 'Camille' }, '<hash calculé par le serveur>']);
</script>

Le hash se calcule sur votre serveur, avec le secret de l'app : HMAC-SHA256(secret, id). Vos utilisateurs retrouvent alors leurs retours sur tous leurs appareils. Offres Pro et Business. Le calcul pour Node, Python, PHP et Supabase.

Joindre des informations à chaque retour

Ce que vous passez ici arrive avec chaque retour, à côté de la page et de l'appareil.

JavaScript
window.talkieback = window.talkieback || [];
talkieback.push(['context', { plan: 'pro', deck: 'axis' }]);
Piloter le bouton depuis votre code

En plus des réglages de l'app sur Talkieback. Les appels passés avant le chargement du script sont gardés et joués ensuite.

JavaScript
window.talkieback = window.talkieback || [];

// pas de bouton sur ces pages (début de l'adresse)
talkieback.push(['hideOn', ['/paiement', '/admin']]);

// ouvrir le panneau depuis votre propre bouton (il s'ouvre contre lui)
talkieback.push(['open', { anchor: monBouton }]);

// faire revenir le bouton flottant, ou le masquer, sur cet appareil
talkieback.push(['show']);
talkieback.push(['hide']);

// le nombre de réponses non lues, pour une pastille sur votre bouton
talkieback.push(['onUnread', function (count) {
  monBadge.hidden = count === 0;
}]);

// être prévenu quand l'utilisateur voit une réponse de l'équipe
talkieback.push(['onReply', function (reply) {
  console.log('Réponse vue', reply);
}]);
Votre propre bouton, sans le bouton flottant

Dans Réglages › Apparence, « Quand s'affiche-t-il ? » : « Toujours » pendant une bêta ; « Toujours, masquable » pour que vos utilisateurs le glissent sur la croix en bas de l'écran ; « Depuis votre app » en production, où le bouton flottant n'apparaît que quand l'équipe a répondu. Un bouton de votre app ouvre alors le panneau, sans une ligne de JavaScript :

HTML
<!-- ouvre le panneau, contre ce bouton -->
<button data-talkieback-open>Idée ou bug ?</button>

<!-- fait revenir le bouton flottant -->
<button data-talkieback-show>Afficher le bouton de retours</button>
Prévenir vos utilisateurs par notification

Un navigateur n'accepte les notifications que d'un service worker de votre domaine. Ajoutez cette ligne à votre service worker, ou créez le fichier /talkieback-sw.js à la racine du site avec cette seule ligne :

Service worker
importScripts('https://cdn.talkieback.com/sw.js');

Sur iPhone, les notifications ne marchent que si le site est installé sur l'écran d'accueil. Sinon, Talkieback propose l'e-mail.

Votre site a une politique de sécurité (CSP)

Ajoutez ces adresses à votre en-tête Content-Security-Policy, à côté de celles qui y sont déjà :

En-tête HTTP
Content-Security-Policy: script-src 'self' https://cdn.talkieback.com; frame-src https://w.talkieback.com; connect-src 'self' https://talkieback.com

Si votre serveur envoie un en-tête Permissions-Policy, laissez le panneau demander le micro :

En-tête HTTP
Permissions-Policy: microphone=(self "https://w.talkieback.com")

Une étape bloque ? Écrivez-nous.