Skip to main content
Última modificación: 10 de octubre de 2025
Puedes crear una página de configuración basada en React para tu aplicación en la última versión (2025.2) de la plataforma para desarrolladores, en la que los usuarios que instalen tu aplicación puedan navegar y personalizarla para su cuenta. Esta guía te explica cómo crear un componente de configuración, utilizando React, que sustituye a la experiencia anterior de configuración. Si implementas tu nuevo componente de configuración, los usuarios que instalen tu aplicación en adelante verán inmediatamente tu nueva extensión de configuración en lugar de cualquier página de configuración creada previamente. Antes de comenzar, sigue la guía de inicio rápido para crear tu primera aplicación en la última versión de la plataforma para desarrolladores.
Nota:Si previamente creaste una página de configuración para tu aplicación, tendrás que refactorizar tu experiencia de configuración utilizando las nuevas opciones de configuración descritas en esta guía. Se recomienda que tomes nota de todos los elementos de la interfaz de la versión de producción actual de tu aplicación antes de que empieces a configurar tu nuevo componente de configuración en la última versión de la plataforma para desarrolladores. Una vez que pases al nuevo componente de configuración de tu aplicación, perderás el acceso a la anterior interfaz de usuario de configuración WYSIWYG que utilizabas antes.

​
Crear y configurar archivos de componentes de configuración

En primer lugar, en tu directorio /app, crea un directorio /settings/, y agrega dentro los tres archivos siguientes: 
├──src
│   ├── app/
│   │   └── settings/
│   │     └── Settings.tsx
│   │     └── settings-hsmeta.json
│   │     └── package.json
└──
Edita estos tres archivos para incluir el código estándar en los fragmentos que aparecen abajo.

​
Settings.tsx

import React from 'react';
import { EmptyState, Text } from '@hubspot/ui-extensions';
import { hubspot } from '@hubspot/ui-extensions';

hubspot.extend <
  'settings' >
  (({ context }) => {
    return <Settings context={context} />;
  });

const Settings = ({ context }) => {
  // TODO: Update this JSX code to include the components that fit your settings page.
  return (
    <EmptyState title="Nothing here yet!" layout="vertical">
      <Text>
        Contact '{context.extension.appName}' for upcoming development plans.
      </Text>
    </EmptyState>
  );
};

​
settings-hsmeta.json

{
  "uid": "settings_extension",
  "type": "settings",
  "config": {
    "entrypoint": "/app/settings/Settings.tsx"
  }
}

​
package.json

{
  "name": "hubspot-settings-extension",
  "version": "0.1.0",
  "license": "MIT",
  "dependencies": {
    "@hubspot/ui-extensions": "latest",
    "react": "^18.2.0"
  },
  "devDependencies": {
    "typescript": "^5.3.3"
  }
}

​
Subir e instalar tu componente de configuración

Para subir tu componente de configuración a tu proyecto:
  • En el directorio de app/, ejecuta hs project install-deps para crear un archivo package-lock.json, que acelerará la creación de la extensión de configuración subida, además de asegurar que cualquier dependencia en tu entorno de desarrollo local y producción coincidan.
  • A continuación, ejecuta hs project upload. Accede a la página de detalles de tu proyecto de desarrollador navegando a Desarrollo > Proyectos, y luego haz clic en el nombre de tu proyecto.
  • Tu componente de configuración debería aparecer ahora en la página de detalles.
Componente de configuración subido en la página de detalles del proyecto

​
Consultar la página de configuración en tu cuenta de prueba de desarrollador

  • Para verificar que el componente de configuración funciona correctamente, navega a una cuenta de prueba de desarrollador en la que hayas instalado tu aplicación, haz clic en el icono de Mercado y haz clic en Aplicaciones conectadas.
Navega a las aplicaciones conectadas en la cuenta de prueba de desarrollador
  • Haz clic en el nombre de tu aplicación, que debería llevarte a la página de configuración de tu aplicación.
Estado vacío para el componente de configuración básica en la cuenta de prueba
Ahora puedes seguir creando tu componente de configuración como harías con una tarjeta de aplicación. Todas las limitaciones existentes en torno a la creación de extensiones de interfaz de usuario se aplican también a la creación de una página de configuración.
  • Utiliza hubspot.fetch para aprovechar tu backend para guardar y recuperar configuraciones. Más información sobre el uso de este enfoque en la documentación anterior.
  • Consulta la documentación de referencia sobre componentes estándar para saber cómo utilizar componentes React al crear tu extensión, o utiliza el componente en el kit de diseño de Figma.
  • Utiliza el comando hs project dev para crear iterativamente tu página de configuración y previsualizar localmente tus cambios.

​
Prácticas recomendadas de los componentes

En las secciones que aparecen abajo se describen varias prácticas recomendadas que debes tener en cuenta al crear la experiencia de configuración de tu aplicación.

​
Organizar el contenido

Si tienes suficiente contenido en tu extensión de configuración como para justificar la necesidad de separar y organizar todos los datos de configuración del usuario, deberías considerar el uso de los componentes Panel, Modal, Acordeón y Pestañas en consecuencia. Considera cómo quieres presentar y organizar tus configuraciones y los datos correspondientes que deben obtenerse para cada componente.

​
Pestañas

Si utilizas pestañas, utiliza la variante de pestaña default. La extensión de configuración ya está contenida dentro de una pestaña variante cerrada, y una segunda capa de pestañas cerradas chocaría visualmente con el diseño.
Ejemplo de pestañas anidadas en la página de configuración
El siguiente fragmento describe cómo estructurar tus pestañas. 
<Tabs>

<Tab title="First Tab">
<Text>Here is the content of the first tab.</Text>
</Tab>
<Tab title="Second Tab">
<Text>This is where the content of the second tab goes.</Text>
</Tab>

</Tabs>
⌘I