mintlify__docs/es/customize/custom-scripts.mdx

---
title: "Scripts personalizados"
description: "Agrega JavaScript y CSS personalizados a tu documentación para analíticas, widgets, estilos, integraciones y variables de servidor del API Playground."
keywords: ["CSS", "JavaScript", "Tailwind CSS", "personalización de estilo", "API Playground", "variables de servidor"]
---

Usa CSS para dar estilo a los elementos HTML o agrega CSS y JavaScript personalizados para adaptar por completo el aspecto y la experiencia de tu documentación.

<div id="style-with-tailwind-css">
  ## Estiliza con Tailwind CSS
</div>

Usa Tailwind CSS v3 para dar estilo a elementos HTML. Puedes controlar el diseño, el espaciado, los colores y otras propiedades visuales. Algunas clases comunes son:

* `w-full` - Ancho completo
* `aspect-video` - Relación de aspecto 16:9
* `rounded-xl` - Esquinas redondeadas grandes
* `block`, `hidden` - Control de visualización
* `dark:hidden`, `dark:block` - Visibilidad en modo oscuro

Los valores arbitrarios de Tailwind CSS no están admitidos. Para valores personalizados, usa la prop `style`.

```html
<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />
```

<Warning>
  Usar la prop `style` puede causar un desplazamiento del diseño al cargar la página, especialmente en páginas en modo personalizado. En su lugar, usa clases de Tailwind CSS o archivos CSS personalizados para evitar desplazamientos o parpadeos.
</Warning>

<div id="add-custom-css">
  ## Añadir CSS personalizado
</div>

Mintlify incluye automáticamente cualquier archivo `.css` dentro de tu directorio de contenido en todas las páginas de tu sitio de documentación, del mismo modo que incluye los archivos `.js` personalizados. No necesitas importar ni referenciar el archivo desde `docs.json` ni desde tus archivos MDX.

Para añadir estilos personalizados, crea un archivo `.css` (por ejemplo, `style.css`) en cualquier nivel de tu directorio de contenido. Cualquier nombre de clase, selector de ID o selector de elemento que definas quedará disponible en todos tus archivos MDX.

Por ejemplo, define una clase en `style.css`:

```css
.my-callout {
  border-radius: 1rem;
  background: #f0f9ff;
  padding: 1rem;
}
```

Luego úsala en cualquier archivo MDX con la prop `className`:

```mdx
<div className="my-callout">
  Contenido aquí.
</div>
```

Puedes combinar nombres de clase personalizados con clases de [Tailwind CSS](/es/customize/custom-scripts#style-with-tailwind-css) en el mismo elemento.

El CSS personalizado se aplica a todas las páginas de tu sitio, incluidas las páginas en modo personalizado y las páginas de aterrizaje. Para limitar los estilos a una página o sección específica, usa el selector de atributo `html[data-current-path="..."]` descrito en [Atributos de datos](#data-attributes).

Las referencias y el estilo de los elementos comunes están sujetos a cambios. Usa estilos personalizados con precaución, ya que pueden producirse cambios incompatibles en futuras actualizaciones.

Por ejemplo, puedes agregar el siguiente archivo `style.css` para personalizar los estilos de la barra de navegación y el pie de página.

```css
#navbar {
  background: #fffff2;
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}
```

Mintlify expone dos tipos de hooks CSS para segmentación:

- **Selectores de ID**: elementos únicos a nivel de página que se apuntan con `#value { }` en CSS
- **Selectores de elemento**: elementos de componente y diseño que se apuntan con `value { }` en CSS (sin prefijo `#` o `.`)

<Tip>
  Usa Inspeccionar elemento para encontrar referencias a los elementos que quieres personalizar.
</Tip>

<div id="id-selectors">
  ### Selectores de ID
</div>

Cada ID aparece una vez por página. Úsalos como `#value` en CSS. Por ejemplo, `#navbar { background: red; }`.

<AccordionGroup>
<Accordion title="Diseño de página">
  - `#body-content` — Contenedor exterior del cuerpo de la página.
  - `#content-area` — Área de contenido principal, excluyendo la barra lateral y la tabla de contenidos.
  - `#content` — Elemento de contenido interno dentro del área de contenido.
  - `#header` — Elemento de encabezado a nivel de página.
  - `#banner` — Banner de anuncios que se muestra sobre la barra de navegación.
  - `#footer` — Pie de página. También se puede apuntar como selector de elemento: `footer`.
  - `#page-title` — El encabezado `<h1>` en la parte superior de cada página.
  - `#pagination` — Barra de paginación inferior con enlaces a la página anterior y siguiente.
  - `#panel` — Panel flotante superpuesto. También se puede apuntar como selector de elemento: `panel`.
  - `#background-color` — Elemento de color de fondo de la página.
</Accordion>
<Accordion title="Navegación">
  - `#navbar` — Barra de navegación superior.
  - `#topbar-cta-button` — Botón de llamada a la acción en la barra superior.
  - `#mobile-nav` — Superposición de navegación móvil.
  - `#mobile-nav-content` — Área de contenido dentro de la superposición de navegación móvil.
</Accordion>
<Accordion title="Barra lateral">
  - `#sidebar` — Panel de navegación de la barra lateral.
  - `#sidebar-content` — Área de contenido con desplazamiento dentro de la barra lateral.
</Accordion>
<Accordion title="Tabla de contenidos">
  - `#table-of-contents` — Panel de tabla de contenidos en el lado derecho de la página.
  - `#table-of-contents-layout` — Contenedor de diseño para la tabla de contenidos.
  - `#table-of-contents-content` — Contenido con desplazamiento dentro de la tabla de contenidos.
</Accordion>
<Accordion title="Búsqueda">
  - `#search-bar-entry` — Disparador de la barra de búsqueda en la barra superior.
  - `#search-bar-entry-mobile` — Disparador de la barra de búsqueda en móvil.
  - `#search-input` — Campo de entrada de texto dentro del modal de búsqueda.
</Accordion>
<Accordion title="Asistente IA">
  - `#assistant-entry` — Botón del asistente IA en la barra superior.
  - `#assistant-entry-mobile` — Botón del asistente IA en móvil.
  - `#chat-assistant-sheet` — Panel del chat del asistente IA.
  - `#chat-assistant-textarea` — Entrada de texto dentro del panel del asistente IA.
</Accordion>
<Accordion title="Referencia de API">
  - `#request-example` — Panel de ejemplo de solicitud en el playground de API.
  - `#response-example` — Panel de ejemplo de respuesta en el playground de API.
  - `#api-playground-input` — Sección de entrada del playground de API.
  - `#endpoints-menu-trigger` — Botón que abre el desplegable del selector de endpoints.
</Accordion>
<Accordion title="Bloques de código">
  - `#ask-assistant-code-block-button` — Botón "Preguntar al asistente" que aparece en los bloques de código.
  - `#code-snippet-feedback-button` — Botón de retroalimentación en los fragmentos de código.
  - `#code-snippet-feedback-textarea` — Área de texto dentro del formulario de retroalimentación de fragmentos de código.
</Accordion>
<Accordion title="Retroalimentación">
  - `#feedback-thumbs-up` — Botón de pulgar arriba en la parte inferior de la página.
  - `#feedback-thumbs-down` — Botón de pulgar abajo en la parte inferior de la página.
  - `#feedback-form` — Formulario de retroalimentación mostrado después de una respuesta negativa.
  - `#feedback-form-input` — Campo de texto dentro del formulario de retroalimentación.
  - `#feedback-form-cancel` — Botón de cancelar dentro del formulario de retroalimentación.
  - `#feedback-form-submit` — Botón de enviar dentro del formulario de retroalimentación.
</Accordion>
<Accordion title="Menú contextual de la página">
  - `#page-context-menu` — Menú de opciones contextuales para la página actual.
  - `#page-context-menu-button` — Botón que abre el menú contextual de la página.
</Accordion>
<Accordion title="Localización">
  - `#localization-select-trigger` — Botón que abre el selector de idioma.
  - `#localization-select-content` — Contenido del desplegable del selector de idioma.
  - `#localization-select-item` — Opción individual de idioma dentro del selector.
</Accordion>
<Accordion title="Registro de cambios">
  - `#changelog-filters` — Controles de filtro en una página de registro de cambios.
  - `#changelog-filters-content` — Área de contenido dentro del panel de filtros del registro de cambios.
</Accordion>
<Accordion title="Multi-vista">
  - `#multi-view-dropdown` — Desplegable para cambiar entre vistas de documentación.
</Accordion>
<Accordion title="Selección de texto">
  - `#text-selection-tooltip` — Tooltip que aparece al seleccionar texto en la página.
  - `#text-selection-tooltip-button` — Botón de acción dentro del tooltip de selección de texto.
</Accordion>
</AccordionGroup>

<div id="element-selectors">
  ### Selectores de elemento
</div>

Pueden aparecer múltiples instancias de estos elementos en una página. Úsalos como `value` en CSS. Por ejemplo, `accordion { border: 1px solid red; }`.

<AccordionGroup>
  <Accordion title="Componentes de contenido">
    - `accordion` — Elemento de acordeón desplegable.
    - `accordion-group` — Contenedor que agrupa múltiples acordeones.
    - `callout` — Bloque de llamada de atención (Note, Warning, Tip, etc.).
    - `card` — Elemento de tarjeta individual.
    - `card-group` — Contenedor que agrupa múltiples tarjetas. Obsoleto a favor de `columns`, pero conservado por compatibilidad.
    - `columns` — Contenedor de diseño multicolumna.
    - `code-block` — Elemento de bloque de código.
    - `code-block-icon` — Icono mostrado en el encabezado de un bloque de código.
    - `code-group` — Grupo con pestañas de bloques de código.
    - `expandable` — Elemento de sección expandible.
    - `frame` — Contenedor de marco para imágenes o contenido incrustado.
    - `icon` — Elemento de icono en línea.
    - `mermaid` — Contenedor de diagrama Mermaid.
    - `step` — Paso individual dentro de una secuencia de pasos.
    - `steps` — Contenedor de pasos numerados.
    - `tab-icon` — Icono mostrado dentro de una pestaña.
    - `tabs` — Contenedor de contenido con pestañas.
    - `tile` — Elemento de componente tile.
    - `tooltip` — Elemento de tooltip.
    - `update` — Entrada de actualización del registro de cambios.
  </Accordion>
  <Accordion title="Diseño de página">
    - `mdx-content` — Área de contenido MDX renderizado.
    - `panel` — Componente de panel flotante. También se puede apuntar como selector de ID: `#panel`.
    - `eyebrow` — Pequeña etiqueta que se muestra sobre el título de la página.
    - `link` — Elemento de enlace anchor.
    - `breadcrumb-list` — Lista de navegación por migas de pan.
    - `breadcrumb-item` — Elemento individual de miga de pan.
  </Accordion>
  <Accordion title="Navegación de la barra superior">
    - `nav-logo` — Logo en la barra de navegación.
    - `navbar-link` — Elemento de enlace dentro de la barra de navegación.
    - `nav-anchors` — Contenedor de enlaces de anclaje en la barra superior.
    - `nav-anchor` — Enlace de anclaje individual en la barra superior.
    - `nav-tabs` — Barra de pestañas en la navegación superior.
    - `nav-tabs-item` — Elemento de pestaña individual en la barra de pestañas de la navegación superior.
    - `mobile-nav-tabs-item` — Elemento de pestaña en la barra de pestañas de la navegación móvil.
    - `topbar-right-container` — Sección derecha de la barra superior.
    - `nav-tag-pill` — Etiqueta tipo píldora en la navegación.
    - `nav-tag-pill-text` — Texto dentro de una etiqueta tipo píldora de navegación.
  </Accordion>
  <Accordion title="Desplegable de la barra superior">
    - `nav-dropdown-trigger` — Botón que abre un desplegable de navegación.
    - `nav-dropdown-content` — Contenedor de contenido de un desplegable de navegación.
    - `nav-dropdown-item` — Elemento individual dentro de un desplegable de navegación.
    - `nav-dropdown-item-text-container` — Contenedor de texto dentro de un elemento del desplegable.
    - `nav-dropdown-item-title` — Texto del título dentro de un elemento del desplegable.
    - `nav-dropdown-item-description` — Texto de descripción dentro de un elemento del desplegable.
    - `nav-dropdown-item-icon` — Icono dentro de un elemento del desplegable.
  </Accordion>
  <Accordion title="Selector de productos">
    - `nav-dropdown-products-selector-trigger` — Botón que abre el desplegable del selector de productos.
    - `nav-dropdown-products-selector-content` — Contenedor de contenido del selector de productos.
    - `nav-dropdown-products-selector-item` — Producto individual en el selector.
    - `nav-dropdown-products-selector-item-title` — Título de un elemento del selector de productos.
    - `nav-dropdown-products-selector-item-description` — Descripción de un elemento del selector de productos.
    - `nav-dropdown-products-selector-item-icon` — Icono de un elemento del selector de productos.
  </Accordion>
  <Accordion title="Barra lateral">
    - `sidebar-group` — Grupo de enlaces relacionados en la barra lateral.
    - `sidebar-group-icon` — Icono de un grupo de la barra lateral.
    - `sidebar-group-header` — Etiqueta de encabezado de un grupo de la barra lateral.
    - `sidebar-title` — Título de nivel superior en la barra lateral.
    - `sidebar-nav-group-divider` — Divisor entre grupos de navegación de la barra lateral.
  </Accordion>
  <Accordion title="Tabla de contenidos">
    - `toc` — Contenedor de la tabla de contenidos.
    - `toc-item` — Entrada individual de encabezado en la tabla de contenidos.
  </Accordion>
  <Accordion title="Pie de página">
    - `footer` — Pie de página estándar. También se puede apuntar como selector de ID: `#footer`.
    - `advanced-footer` — Pie de página extendido con columnas o contenido adicional.
  </Accordion>
  <Accordion title="Paginación">
    - `pagination-prev` — Enlace a la página anterior en la barra de paginación.
    - `pagination-next` — Enlace a la página siguiente en la barra de paginación.
    - `pagination-title` — Título de página que se muestra en la barra de paginación.
  </Accordion>
  <Accordion title="Referencia de API">
    - `api-section` — Sección completa para un endpoint de API.
    - `api-section-heading` — Área de encabezado de una sección de endpoint de API.
    - `api-section-heading-title` — Título dentro del encabezado de una sección de endpoint de API.
    - `api-section-heading-subtitle` — Subtítulo dentro del encabezado de una sección de endpoint de API.
    - `field` — Campo de parámetro o propiedad en la referencia de API.
    - `option-dropdown` — Desplegable para seleccionar entre opciones de API.
    - `tryit-button` — Botón "Try it" que abre el playground de API.
    - `method-pill` — Insignia de método HTTP (GET, POST, etc.) en un endpoint.
    - `method-nav-pill` — Insignia de método HTTP que se muestra en la navegación de la barra lateral.
    - `prompt` — Componente de prompt en la referencia de API.
  </Accordion>
  <Accordion title="Asistente IA">
    - `chat-assistant-sheet` — Contenedor del panel del asistente IA.
    - `chat-assistant-sheet-header` — Encabezado del panel del asistente IA.
    - `chat-assistant-sheet-content` — Área de contenido del panel del asistente IA.
    - `chat-assistant-input` — Entrada de texto dentro del panel del asistente IA.
    - `chat-assistant-floating-input` — Variante de entrada flotante del asistente IA.
    - `chat-assistant-send-button` — Botón de enviar en el panel del asistente IA.
    - `chat-assistant-disclaimer-text` — Texto de descargo de responsabilidad en el panel del asistente IA.
    - `chat-assistant-payload-item` — Mensaje o resultado individual en el panel del asistente.
    - `starter-question-text` — Pregunta sugerida de inicio mostrada en un panel de asistente vacío.
  </Accordion>
  <Accordion title="Retroalimentación">
    - `feedback-toolbar` — Barra de herramientas que contiene controles de retroalimentación de la página.
    - `contextual-feedback-container` — Contenedor para retroalimentación contextual en línea.
    - `contextual-feedback-form` — Formulario de retroalimentación contextual en línea.
    - `contextual-feedback-form-title` — Título del formulario de retroalimentación contextual.
    - `contextual-feedback-input` — Campo de texto dentro del formulario de retroalimentación contextual.
    - `contextual-feedback-button` — Botón de acción dentro del formulario de retroalimentación contextual.
    - `contextual-feedback-form-submit-button` — Botón de envío del formulario de retroalimentación contextual.
  </Accordion>
  <Accordion title="Retroalimentación de fragmentos de código">
    - `code-snippet-feedback-popover-content` — Contenido del popover para retroalimentación de fragmentos de código.
    - `code-snippet-feedback-form` — Formulario de retroalimentación para un fragmento de código.
    - `code-snippet-feedback-textarea` — Área de texto dentro del formulario de retroalimentación del fragmento de código.
    - `code-snippet-feedback-form-title` — Título del formulario de retroalimentación del fragmento de código.
    - `code-snippet-feedback-form-description` — Texto descriptivo en el formulario de retroalimentación del fragmento de código.
    - `code-snippet-feedback-form-submit-button` — Botón de envío del formulario de retroalimentación del fragmento de código.
  </Accordion>
  <Accordion title="Autenticación">
    - `login-link` — Enlace que inicia el flujo de inicio de sesión.
    - `logout-link` — Enlace que inicia el flujo de cierre de sesión.
  </Accordion>
  <Accordion title="Multi-vista">
    - `multi-view-item` — Opción de vista individual en un conmutador de multi-vista.
    - `multi-view-dropdown` — Desplegable para seleccionar entre múltiples vistas.
    - `multi-view-dropdown-trigger` — Botón que abre el desplegable de multi-vista.
    - `multi-view-dropdown-content` — Área de contenido del desplegable de multi-vista.
    - `multi-view-dropdown-item` — Elemento individual dentro del desplegable de multi-vista.
  </Accordion>
  <Accordion title="Directorio">
    - `directory` — Contenedor raíz para una página de directorio.
    - `directory-group` — Grupo de páginas relacionadas dentro de un directorio.
    - `directory-page` — Entrada de página individual en un directorio.
    - `directory-card` — Entrada de página tipo tarjeta en un directorio.
  </Accordion>
  <Accordion title="Página 404">
    - `not-found-container` — Contenedor raíz de la página 404.
    - `not-found-status-code` — Visualización del código de estado en la página 404.
    - `not-found-title` — Encabezado del título en la página 404.
    - `not-found-description` — Texto descriptivo en la página 404.
    - `not-found-recommended-pages-list` — Lista de páginas recomendadas mostradas en la página 404.
    - `not-found-recommended-page-link` — Enlace individual en la lista de páginas recomendadas.
  </Accordion>
  <Accordion title="Color">
    - `color` — Elemento de muestra de color.
    - `color-row` — Fila que agrupa muestras de color.
    - `color-item` — Elemento de color individual dentro de una fila de colores.
  </Accordion>
  <Accordion title="Árbol">
    - `tree` — Contenedor de árbol de archivos.
    - `tree-folder` — Entrada de carpeta dentro de un árbol de archivos.
    - `tree-file` — Entrada de archivo dentro de un árbol de archivos.
  </Accordion>
  <Accordion title="Atributos de datos">
    Algunos elementos exponen atributos de datos que puedes usar como selectores CSS.

    Estado activo (`data-active`):

    - `nav-dropdown-item[data-active]` — Elemento activo en un desplegable de navegación.
    - `mobile-nav-tabs-item[data-active]` — Pestaña activa en la navegación móvil.
    - `sidebar-group[data-active]` — Grupo activo de la barra lateral.
    - `#sidebar-content li[data-active]` — Enlace activo de la barra lateral.
    - `.nav-tabs-item[data-active]` — Pestaña activa de la navegación superior. Solo se aplica a pestañas simples; las pestañas con menús desplegables no reciben `data-active`. Nota el `.` inicial: esto apunta a una clase en un elemento `<a>` estándar, a diferencia de la mayoría de los otros componentes que usan nombres de elementos personalizados.
    - `toc-item[data-active]` — Elemento activo de la tabla de contenidos.
    - `toc-item[data-active-deepest]` — Elemento más profundo activo de la tabla de contenidos. Solo presente en el encabezado exacto actualmente visible, a diferencia de `data-active` que también se establece en sus encabezados padres.

    Nombre de componente (`data-component-name`):

    Usa `data-component-name` para apuntar a componentes de interfaz específicos con un selector estable que persiste si los nombres de clases internos cambian.

    - `[data-component-name="mermaid-container"]` — Contenedor de diagrama Mermaid, incluyendo la superposición de controles de zoom.
    - `[data-component-name="mermaid-controls-wrapper"]` — Controles de zoom y desplazamiento de Mermaid.
    - `[data-component-name="primary-header-button"]` — Botón principal del encabezado. Solo en el tema Sequoia.
    - `[data-component-name="theme-toggle"]` — Interruptor de tema.

    Parte de componente (`data-component-part`):

    Usa `data-component-part` para apuntar a sub-elementos dentro de un componente.

    - `[data-component-part="contact-support-button"]` — El wrapper `<a>` alrededor del enlace de contacto de soporte en el panel del asistente.
    - `[data-component-part="contact-support-icon"]` — El `<span>` que envuelve el icono.
    - `[data-component-part="contact-support-text"]` — El elemento `<p>` que contiene la etiqueta.

    Atributos de Badge:

    - `[data-badge]` — Cualquier elemento de badge.
    - `[data-badge][data-color="blue"]` — Badge filtrado por color.
    - `[data-badge][data-size="sm"]` — Badge filtrado por tamaño.

    Ruta actual (`data-current-path`):

    Usa `data-current-path` para aplicar CSS personalizado en páginas o subrutas específicas.

    - `html[data-current-path="/"]` — Coincide con la página raíz.
    - `html[data-current-path="/quickstart"]` — Coincide con una página específica.
    - `html[data-current-path^="/api-reference/"]` — Coincide con cualquier página dentro de una sección.
  </Accordion>
</AccordionGroup>

<div id="custom-javascript">
  ## JavaScript personalizado
</div>

El JavaScript personalizado te permite agregar código ejecutable a nivel global. Es equivalente a insertar una etiqueta `<script>` con código JS en cada página.

Mintlify incluye cualquier archivo `.js` dentro de tu directorio de contenido en cada página de tu sitio de documentación, incluidas las páginas en modo personalizado y las páginas de aterrizaje. Los archivos JavaScript personalizados se ejecutan después de que la página se vuelve interactiva. No puedes limitarlos a páginas específicas y, cuando hay varios archivos `.js` presentes, todos se ejecutan sin un orden garantizado.

Para cargar un script de terceros, inyecta un elemento `<script>` desde tu archivo JavaScript personalizado en lugar de agregar etiquetas `<script src="...">` directamente en MDX:

```js
const script = document.createElement('script');
script.src = 'https://example.com/widget.js';
script.async = true;
document.head.appendChild(script);
```

Por ejemplo, puedes agregar el archivo `ga.js` siguiente para habilitar [Google Analytics](https://marketingplatform.google.com/about/analytics) en toda la documentación.

```js
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');
```

<Warning>
  Úsalo con precaución para no introducir vulnerabilidades de seguridad.
</Warning>

<div id="set-api-playground-server-variables">
  ### Configura las variables de servidor del API Playground
</div>

Usa `window.mintlify.api.playground.setServerVariables` para rellenar previamente [las variables de servidor de OpenAPI](/es/api-playground/openapi-setup) desde JavaScript personalizado. Úsalo cuando los valores estén disponibles después de cargar la página, por ejemplo, al inicializarse un SDK de autenticación o cambiar un inquilino. El método actualiza los API Playgrounds abiertos y se aplica a los que abras después.

Pasa un objeto con valores de tipo string. Cada llamada reemplaza por completo la sobreescritura en tiempo de ejecución. Las claves omitidas se eliminan y los valores no válidos se ignoran. Los valores en tiempo de ejecución tienen prioridad sobre los valores predeterminados de OpenAPI y las variables de servidor guardadas.

```js Set API Playground server variables
window.mintlify.api.playground.setServerVariables({
  tenantDomain: 'example.us.auth0.com',
});
```

Llama a `window.mintlify.api.playground.clearServerVariables()` cuando los valores ya no se apliquen, por ejemplo, después de cerrar sesión. Después de borrarlos, el API Playground vuelve a sus otros valores configurados.

```js Clear API Playground server variables
window.mintlify.api.playground.clearServerVariables();
```

Las llamadas realizadas antes de que se inicialice el cliente se ponen en cola y se aplican cuando se inicializa. La sobreescritura se mantiene en memoria durante la sesión de la página. No escribe en `localStorage` ni en el almacenamiento de credenciales. Una actualización completa de la página la elimina.

<Warning>
  Configura únicamente valores que no sean secretos desde el código del cliente. No incluyas claves de API, tokens ni otras credenciales en las variables de servidor.
</Warning>

<div id="access-authenticated-user-data">
  ### Acceder a los datos del usuario autenticado
</div>

Si tu sitio utiliza [autenticación](/es/deploy/authentication-setup), los scripts personalizados pueden leer el usuario con sesión iniciada desde `window.mintlify.user`. Es el mismo objeto que se expone en las páginas MDX como la [variable `user`](/es/create/personalization#dynamic-mdx-content), por lo que refleja el campo `content` de tus datos de usuario.

Como los scripts personalizados se ejecutan antes de que la información del usuario se resuelva, escucha el evento `mintlify:user` para reaccionar en cuanto el objeto de usuario esté disponible. El evento se dispara cuando la información del usuario se resuelve y también cada vez que cambia. Su `detail` es el objeto de usuario, o `null` cuando el visitante no ha iniciado sesión.

```js Read the user after it resolves
window.addEventListener('mintlify:user', (event) => {
  const user = event.detail;
  if (!user) return; // Signed out.

  renderAppLauncher(user);
});
```

Si el usuario ya se ha resuelto cuando se ejecuta tu script, lee `window.mintlify.user` directamente.

```js Read the current user
const user = window.mintlify?.user;
if (user) {
  renderAppLauncher(user);
}
```

`window.mintlify.user` es `undefined` hasta que la información del usuario se resuelva y también cuando el visitante no ha iniciado sesión. Utiliza el encadenamiento opcional al leer campos anidados.

<Warning>
  Todo lo que incluyas en el campo `content` del usuario queda expuesto a los scripts del lado del cliente. No incluyas secretos ni credenciales que no deban ser legibles en el navegador.
</Warning>