talkieback
Try it freeFR

Install Talkieback in a React app

The same line as for a website, in the page that loads your app. The button follows the page changes of your router on its own.

You need your app ID (pk_live_…). You will find it on the “Installation” page of your app, in Talkieback.

  1. Step 1: Copy this code

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

    Replace pk_live_… with your app ID. It isn't secret: it only works on the domains declared in Talkieback.

  2. Step 2: Paste it into index.html, just before </body>

    With Vite, the file is at the root of the project; with Create React App, in the public folder. Nothing to import in your components.

    To pass the signed-in user, make the identify call (below) in a useEffect, once the user is known.

  3. Step 3: Put your site online, then check

    On the “Installation” page of your app, in Talkieback, “Check installation” opens your site in a new tab and shows what works, live. Then send some test feedback.

Going further

Recognize your signed-in users

On pages where the user is signed in, after the install code:

HTML
<script>
  window.talkieback = window.talkieback || [];
  talkieback.push(['identify', { id: '42', email: 'camille@example.com', name: 'Camille' }, '<hash computed by your server>']);
</script>

The hash is computed on your server, with the app secret: HMAC-SHA256(secret, id). Your users then find their feedback on all their devices. Pro and Business plans. The computation for Node, Python, PHP and Supabase.

Attach information to each piece of feedback

What you pass here arrives with each piece of feedback, next to the page and the device.

JavaScript
window.talkieback = window.talkieback || [];
talkieback.push(['context', { plan: 'pro', deck: 'axis' }]);
Control the button from your code

On top of the app settings in Talkieback. Calls made before the script loads are kept and run afterwards.

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

// no button on these pages (start of the path)
talkieback.push(['hideOn', ['/checkout', '/admin']]);

// open the panel from your own button (it opens next to it)
talkieback.push(['open', { anchor: myButton }]);

// bring the floating button back, or hide it, on this device
talkieback.push(['show']);
talkieback.push(['hide']);

// the number of unread replies, for a badge on your button
talkieback.push(['onUnread', function (count) {
  myBadge.hidden = count === 0;
}]);

// get notified when the user sees a reply from the team
talkieback.push(['onReply', function (reply) {
  console.log('Reply seen', reply);
}]);
Your own button, without the floating button

In Settings › Appearance, “When does it show?”: “Always” during a beta; “Always, can be hidden” so your users can drag it onto the cross at the bottom of the screen; “From your app” in production, where the floating button only appears once the team has replied. A button in your app then opens the panel, without a line of JavaScript:

HTML
<!-- opens the panel, next to this button -->
<button data-talkieback-open>Idea or bug?</button>

<!-- brings the floating button back -->
<button data-talkieback-show>Show the feedback button</button>
Notify your users

A browser only accepts notifications from a service worker on your domain. Add this line to your service worker, or create the file /talkieback-sw.js at the root of your site with just this line:

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

On iPhone, notifications only work if the site is installed on the home screen. Otherwise, Talkieback offers email.

Your site has a security policy (CSP)

Add these addresses to your Content-Security-Policy header, next to the ones already there:

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

If your server sends a Permissions-Policy header, let the panel ask for the microphone:

HTTP header
Permissions-Policy: microphone=(self "https://w.talkieback.com")

Stuck on a step? Write to us.