# General Translation Integrations: Quickstart
URL: https://generaltranslation.com/es/docs/integrations/rrweb/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Instala gt-rrweb, graba un recorrido del producto una sola vez y reprodúcelo en cada configuración regional a partir de tus traducciones publicadas.

`gt-rrweb` convierte un único recorrido del producto grabado en una reproducción que puedes publicar en todas las configuraciones regionales. Graba un flow una vez, asocia su texto con tus catálogos de traducción existentes y los espectadores lo verán en su idioma.

## Antes de empezar [#before-start]

Necesitas:

* React y React DOM 18 o posterior. El entry de reproducción compartido también requiere estas dependencias entre pares cuando usas únicamente su API de DOM.
* Una aplicación de navegador que publique sus catálogos de traducción.
* Una función que cargue un catálogo publicado según la configuración regional, el mismo loader que usa tu aplicación.

## Quickstart [#quickstart]

### 1. Instala `gt-rrweb`

Instala `gt-rrweb` junto con los packages de rrweb que utiliza para la captura y la reproducción.

<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. Exponer los hashes de traducción

El grabador asocia el contenido renderizado de [`<T>`](/docs/react/reference/components/t) con su traducción publicada mediante el hash del DOM. Activa [`_tagIds`](/docs/react/reference/config#tag-ids) en tu config actual para que esos hashes lleguen al DOM.

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

### 3. Añade el grabador

Monta [`GTRecorder`](/docs/integrations/rrweb/reference/recorder#gt-recorder) una sola vez dentro de tu proveedor de traducción y pásale el cargador de catálogos que utiliza tu aplicación. A partir de ahí, cualquier descendiente puede controlar la sesión con [`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}
      />
    </>
  );
}
```

La primera configuración regional que pasas a `start()` es aquella en la que grabas; todas las demás se recopilan de tus catálogos. Al detener la grabación, se espera a que termine esa recopilación, se llama a `onComplete` con el bundle final y se devuelve ese mismo bundle.

### 4. Graba el recorrido

Haz clic en **Record**, completa el flow en la configuración regional de origen y luego haz clic en **Stop**. Se capturan los clics, la navegación, los cambios en el DOM, la posición del scroll y el contenido de la página. Los valores de los campos de formulario se enmascaran y se omite la telemetría de movimiento del ratón. Revisa la grabación antes de publicarla; consulta [Almacenar el bundle](/docs/integrations/rrweb/guides/recording-walkthroughs#store-bundle).

### 5. Reproduce el bundle

Importa el JSON guardado y renderiza [`GTReplayer`](/docs/integrations/rrweb/reference/replayer#gt-replayer) allí donde deba aparecer el recorrido.

```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' }} />;
}
```

El reproductor se inicia en la configuración regional de origen grabada y muestra los controles de las configuraciones regionales incluidas en el bundle.

La aserción de tipo describe el archivo JSON generado por el grabador; no valida cualquier archivo subido. Asigna a las grabaciones sin frame una altura de reproducción explícita, como en el ejemplo.

## 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.