Installer Talkieback avec React Native et Expo

Le paquet @talkieback/react-native dessine le bouton en natif et ouvre le panneau Talkieback. 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 : Ajouter le paquet
Dans le dossier de votre app :
Terminal
```
npx expo install @talkieback/react-native
```
Sans Expo : npm install @talkieback/react-native, puis pod install dans le dossier ios.
2
Étape 2 : Autoriser le micro
Le plugin ajoute la demande d'accès au micro dans Info.plist et AndroidManifest.xml. Écrivez la phrase que vos utilisateurs verront.
app.json
```
{
  "expo": {
    "plugins": [
      ["@talkieback/react-native", {
        "microphonePermission": "Pour laisser un message vocal à l'équipe."
      }]
    ]
  }
}
```
Le micro n'est demandé qu'au premier appui sur le bouton, jamais au lancement.
Sans Expo, ajoutez ces lignes à la main :
ios/MonApp/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" />
```

Étape 3 : Poser le bouton

Entourez votre app du fournisseur, avec votre identifiant, et dites sur quel écran se trouve l'utilisateur. Le nom de l'écran arrive avec chaque retour.

App.tsx

import { TalkiebackProvider, FeedbackButton } from '@talkieback/react-native';

export default function Root() {
  return (
    <TalkiebackProvider
      appKey="pk_live_…"
      place={{ name: routeName, params }}>
      <App />
      <FeedbackButton />
    </TalkiebackProvider>
  );
}

4
Étape 4 : Vérifier
Lancez l'app en développement. La liste des vérifications s'affiche dans la console et sur la page « Installation » de Talkieback. Envoyez ensuite un retour de test.
App.tsx
```
import { Talkieback } from '@talkieback/react-native';

if (__DEV__) Talkieback.check();
```

Pour aller plus loin

Prévenir vos utilisateurs par notification

Déposez votre jeton d'accès Expo, ou vos clés FCM et APNs, dans les réglages de votre app sur Talkieback. Le paquet enregistre l'appareil tout seul, et une notification touchée ouvre le bon fil.

Après l'envoi d'un retour, le panneau propose « Me prévenir de la réponse ». Donnez au fournisseur la demande d'autorisation et le jeton, ici avec expo-notifications :

App.tsx

import * as Notifications from 'expo-notifications';

async function askPush() {
  const { granted } = await Notifications.requestPermissionsAsync();
  if (!granted) return null;
  return (await Notifications.getExpoPushTokenAsync()).data;
}

<TalkiebackProvider appKey="pk_live_…" onPushRequest={askPush}>

Quand l'utilisateur touche une notification, le panneau s'ouvre sur le bon fil :

TypeScript

Notifications.addNotificationResponseReceivedListener((response) => {
  Talkieback.handleNotification(response);
});

Reconnaître vos utilisateurs connectés

Passez user et userHash au fournisseur :

App.tsx

<TalkiebackProvider
  appKey="pk_live_…"
  user={{ id: String(user.id), email: user.email, name: user.name }}
  userHash={hashFromServer}
  place={{ name: routeName, params }}>

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 et suivre les réponses

TypeScript

import { Talkieback } from '@talkieback/react-native';

// joint à chaque retour
Talkieback.context({ plan: 'pro', deck: 'axis' });

// être prévenu quand l'utilisateur voit une réponse de l'équipe
Talkieback.onReply((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, contre lui :

TypeScript

import { useRef } from 'react';
import { Pressable, Text } from 'react-native';
import { Talkieback, useTalkieback } from '@talkieback/react-native';

function IdeaButton() {
  const ref = useRef(null);
  const { unread } = useTalkieback(); // pour une pastille
  return (
    <Pressable ref={ref} onPress={() => Talkieback.open({ anchor: ref })}>
      <Text>Idée ou bug ?{unread ? ` (${unread})` : ''}</Text>
    </Pressable>
  );
}

// ou faire revenir le bouton flottant masqué
Talkieback.show();

Une étape bloque ? Écrivez-nous.

Étape 1 : Ajouter le paquet

Étape 2 : Autoriser le micro

Étape 3 : Poser le bouton

Étape 4 : Vérifier

Pour aller plus loin