talkieback
Essayer gratuitementEN

Installer Talkieback avec Capacitor et Ionic

La balise web marche telle quelle dans la WebView de votre app : rien d'autre à installer. Comptez dix 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 dans index.html, juste avant </body>

    Dans src/index.html (Ionic avec Angular, React ou Vue) ou www/index.html.

  3. Étape 3 : Autorisez l'adresse de la WebView

    Dans l'app, la WebView de Capacitor a pour adresse localhost. Ajoutez localhost aux adresses de votre app sur Talkieback.

  4. Étape 4 : Autorisez le micro

    Le système le demande à l'utilisateur au premier appui sur le bouton parler. Ajoutez ces lignes :

    ios/App/App/Info.plist
    <key>NSMicrophoneUsageDescription</key>
<string>Pour laisser un message vocal à l'équipe.</string>
    android/app/src/main/AndroidManifest.xml
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

    Puis npx cap sync pour copier les changements dans les projets iOS et Android.

  5. Étape 5 : Vérifiez dans le navigateur

    Lancez l'app dans le navigateur (ionic serve), ajoutez son adresse (par exemple localhost:8100) aux adresses de l'app, puis testez cette adresse.

    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.