# General Translation Integrations: démarrage rapide
URL: https://generaltranslation.com/fr/docs/integrations/rrweb/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Installez gt-rrweb, enregistrez une démonstration produit une seule fois, puis rejouez-la dans chaque paramètre régional à partir de vos traductions publiées.

`gt-rrweb` transforme une seule démonstration produit enregistrée en une rediffusion que vous pouvez publier dans chaque paramètre régional. Enregistrez un parcours une fois, associez son texte à vos catalogues de traduction existants, et les spectateurs le regardent dans leur langue.

## Avant de commencer [#before-start]

Vous avez besoin :

* de React et React DOM 18 ou version ultérieure. Le point d'entrée de replay partagé requiert également ces peers lorsque vous n'utilisez que son API DOM ;
* d'une application navigateur qui publie ses catalogues de traduction ;
* d'une fonction qui charge un catalogue publié pour un paramètre régional donné, le même loader que celui utilisé par votre application.

## Démarrage rapide [#quickstart]

### 1. Installer `gt-rrweb`

Installez `gt-rrweb` ainsi que les packages rrweb qu'il utilise pour la capture et la relecture.

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>
</Tabs>

### 2. Exposer les hachages de traduction

Le recorder associe le contenu [`<T>`](/docs/react/reference/components/t) affiché à sa traduction publiée grâce au hachage du DOM. Activez [`_tagIds`](/docs/react/reference/config#tag-ids) dans votre config existante afin que ces hachages soient présents dans le DOM.

```json title="gt.config.json"
{
  "_tagIds": true
}
```

### 3. Ajouter le recorder

Montez [`GTRecorder`](/docs/integrations/rrweb/reference/recorder#gt-recorder) une seule fois à l&#39;intérieur de votre provider de traduction et transmettez-lui le loader de catalogue utilisé par votre application. Tout composant descendant peut alors contrôler la session avec [`useRecorder()`](/docs/integrations/rrweb/reference/recorder#use-recorder).

```tsx title="src/RecordingTools.tsx"
'use client';

import { GTRecorder, useRecorder, type RecorderBundle } from 'gt-rrweb';
import loadTranslations from './loadTranslations';

function download(bundle: RecorderBundle) {
  const url = URL.createObjectURL(
    new Blob([JSON.stringify(bundle)], { type: 'application/json' })
  );
  const link = document.createElement('a');
  link.href = url;
  link.download = 'walkthrough.json';
  link.click();
  URL.revokeObjectURL(url);
}

function Controls() {
  const { start, stop, status } = useRecorder();

  return (
    <div>
      <button onClick={() => start({ locales: ['en', 'es', 'fr'] })}>
        Record
      </button>
      <button onClick={stop} disabled={status !== 'recording'}>
        Stop
      </button>
    </div>
  );
}

export default function RecordingTools() {
  return (
    <>
      <Controls />
      <GTRecorder
        harvest={{ loadTranslations, sourceLocale: 'en' }}
        onComplete={download}
      />
    </>
  );
}
```

Le premier paramètre régional que vous passez à `start()` est celui dans lequel vous enregistrez ; tous les paramètres régionaux suivants sont collectés à partir de vos catalogues. L&#39;arrêt attend la fin de cette collecte, appelle `onComplete` avec le bundle finalisé et renvoie ce même bundle.

### 4. Enregistrer la démonstration

Cliquez sur **Record**, effectuez le parcours dans le paramètre régional source, puis cliquez sur **Stop**. Les clics, la navigation, les modifications du DOM, la position de défilement et le contenu de la page sont capturés. Les valeurs saisies dans les formulaires sont masquées et la télémétrie des mouvements de souris est exclue. Relisez l&#39;enregistrement avant de le publier ; voir [Stocker le bundle](/docs/integrations/rrweb/guides/recording-walkthroughs#store-bundle).

### 5. Rejouer le bundle

Importez le JSON enregistré et affichez [`GTReplayer`](/docs/integrations/rrweb/reference/replayer#gt-replayer) à l&#39;endroit où la démonstration doit apparaître.

```tsx title="src/Walkthrough.tsx"
'use client';

import { GTReplayer, type GTReplayerBundle } from 'gt-rrweb/replay';
import recording from './walkthrough.json';

const bundle = recording as GTReplayerBundle;

export default function Walkthrough() {
  return <GTReplayer bundle={bundle} style={{ height: '480px' }} />;
}
```

Le player démarre dans le paramètre régional source enregistré et affiche les contrôles pour les locales listées dans le bundle.

L&#39;assertion de type décrit le fichier JSON produit par le recorder ; elle ne valide pas un fichier téléversé arbitraire. Donnez aux enregistrements sans cadre une hauteur de lecture explicite, comme dans l&#39;exemple.

## Next steps

- /docs/integrations/rrweb/guides/configuring-recordings
- /docs/integrations/rrweb/guides/recording-walkthroughs
- /docs/integrations/rrweb/guides/replaying-recordings

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.