# Agregar telemetría (BETA)
Source: https://developers.hubspot.es/docs/apps/developer-platform/add-features/add-telemetry
Aprende a configurar la telemetría.
Puedes configurar la telemetría para tu aplicación, que actúa como un colector de registros para canalizar los datos de registro a un proveedor externo de supervisión. Actualmente, solo [Honeycomb](https://www.honeycomb.io/) y [Sentry](https://sentry.io/welcome/) son compatibles como proveedores de terceros.
## Crear y configurar archivos de componentes de telemetría
En el directorio `app/` de tu proyecto, crea un directorio `telemetry/`, y agrega en él un archivo de configuración `telemetry-hsmeta.json`.
```shell theme={null}
└── src/
└── app/
└── telemetry/
└── telemetry-hsmeta.json
```
Edita el archivo `telemetry-hsmeta.json` para configurar tu proveedor, los ajustes del nivel de registro y mucho más. Abajo se proporciona un archivo de ejemplo, junto con una tabla que detalla cada uno de los campos disponibles.
> [!WARNING]
>
> **Nota**: por defecto, todos los tipos y niveles de registro se sincronizarán con tu proveedor a través de los campos `logTypes` y `logLevels`, lo que puede provocar que se envíe un volumen muy elevado de datos. Se recomienda encarecidamente que empieces configurando solo los tipos de registro que te interesan y estableciendo los niveles de registro para filtrar solo los errores.
### telemetry-hsmeta.json
```json theme={null}
{
"uid": "telemetry",
"type": "telemetry",
"config": {
"providerType": "SENTRY",
"datasetName": "my-app-telemetry",
"logTypes": ["API_CALL", "EXTENSION_LOG", "EXTENSION_RENDER", "DATA_FETCH"],
"logLevels": ["ERROR", "WARN", "INFO"]
}
}
```
| Campo | Tipo | Descripción |
| - | - | - |
| `uid` | Cadena | Un identificador único para tu configuración de telemetría. Se puede establecer en cualquier valor, pero aparecerá en la configuración del proyecto en tu cuenta, por lo que debe ser diferente de otros valores de `uid` de otros componentes de la aplicación. |
| `type` | Cadena | El tipo de componente, que en este caso debe ser `telemetry`. |
| `config` | Objeto | Un objeto que contiene los detalles de la configuración. Consulta las subpropiedades enumeradas en las filas de abajo. |
| `providerType` | Cadena | El nombre de tu proveedor de telemetría externo. Actualmente, solo son compatibles `SENTRY` y `HONEYCOMB`. |
| `datasetName` | Cadena | Una etiqueta que se asociará a tus datos de registro, si tu proveedor admite esa opción. |
| `logTypes` | Matriz | Lista de tipos de registro enviados a tu proveedor externo. Por defecto, todos los registros se propagan a tu proveedor. Los tipos de registro disponibles son: `["CRM_LEGACY_CARD", "CRM_EXTENSIBILITY_CARD", "WEBHOOKS", "API_CALL", "APP_SETTINGS", "SERVERLESS_EXECUTION", "PROXY_EXECUTION", "EXTENSION_RENDER", "EXTENSION_LOG", "SERVERLESS_GATEWAY_EXECUTION"]`. |
| `logLevels` | Matriz | Lista de niveles de gravedad por los que filtrar los registros. Los niveles de registro admitidos son: `["ERROR", "WARNING", "INFO"]` |
## Agregar la autenticación externa como secreto a través de la CLI
Además de crear el archivo de configuración `telemetry-hsmeta.json` anterior, también tendrás que agregar un secreto que corresponda a la clave de autenticación de tu proveedor:
* Si utilizas Sentry, agregarás el DSN (Nombre Fuente de Datos) como secreto.
* Si utilizas Honeycomb, agregarás una clave de API como secreto.
### Localizar un DSN de Sentry
Si utilizas Sentry, sigue los pasos que se indican a continuación para obtener tu DSN:
* Accede a tu [cuenta de Sentry](https://sentry.io/welcome/auth/login/).
* Navega hasta la configuración de tu proyecto.
* En la sección *Claves de cliente* o *DSN*, encontrarás un DSN único para tu proyecto. Debe parecerse a lo siguiente:
```
https://sentry-key@sentry-identifier.ingest.us.sentry.io/project-id
```
### Localizar una clave de API de Honeycomb
Si utilizas Honeycomb como proveedor externo de supervisión, se utiliza una clave de API para autenticar y reenviar los datos. Esta clave de API está asociada a tu cuenta y proyecto de Honeycomb específicos.
Para generar una clave de API de Honeycomb:
* Accede a tu [cuenta de Honeycomb](https://ui.honeycomb.io/login).
* Navega hasta la configuración de tu proyecto.
* Busca la sección *Claves de API* y genera una nueva clave.
* Copia la clave de API generada.
### Agregar un secreto utilizando la CLI de HubSpot
Una vez que hayas obtenido tu DSN de Sentry o tu clave de API de Honeycomb, ejecuta el siguiente comando para agregar el valor como secreto. Cuando se te pida el nombre del secreto, debes utilizar `TELEMETRY_SECRET` para que los datos de registro se sincronicen correctamente.
```shell theme={null}
hs app secrets add
```
# Crear una herramienta de agente
Source: https://developers.hubspot.es/docs/apps/developer-platform/add-features/agent-tools/create-an-agent-tool
Sigue este tutorial para construir una herramienta de agente, que es una acción de workflow personalizada adaptada a los agentes de IA.
En HubSpot, puedes crear un agente de IA que realizará diversas acciones basándose en tus instrucciones. Por ejemplo, puedes crear un agente que te envíe un correo electrónico cada mañana con notas sobre las próximas reuniones del día.
Para realizar las tareas, los agentes se apoyan en las herramientas de agente. Las herramientas son como las funciones de un lenguaje de programación: tienen parámetros que pasas a la herramienta y la herramienta devuelve un output. Las herramientas en HubSpot son similares al concepto de herramientas en MCP (Protocolo de contexto del modelo). Una herramienta de agente incluirá las llamadas a la API, pasos para el LLM y otro contexto de apoyo para que la IA pueda hacer su función. Las herramientas están diseñadas para realizar tareas específicas y definidas, como consultar una base de datos, realizar operaciones CRUD (Crear, Leer, Actualizar, Eliminar) o utilizar la IA generativa para resumir contenido.
En términos de implementación, una herramienta de agente es una versión mejorada de una acción de workflow personalizada, que crearás utilizando la estructura de proyectos para desarrolladores de HubSpot. Este tutorial te guiará sobre cómo empezar a crear una herramienta de agente.
## Requisitos previos
Antes de empezar, necesitarás:
* Instalar la última versión beta de la CLI de HubSpot ejecutando `npm i -g @hubspot/cli@next`.
* Crear una [cuenta de prueba de desarrollador](/docs/getting-started/account-types#developer-test-accounts) desde la cuenta de desarrollador que está inscrita en la beta.
* Autenticar la cuenta de prueba con la CLI ejecutando el [comando `hs auth` ](/docs/developer-tooling/local-development/hubspot-cli/reference#authenticate-an-account) en tu terminal.
**1. Crear un proyecto**
Si empiezas desde cero, primero tendrás que crear un nuevo proyecto. Alternativamente, si quieres utilizar un proyecto existente, puedes [pasar a la siguiente sección](#2.-add-an-agent-tool-to-the-project) (se requiere la versión del proyecto `2025.2`).
Para crear un nuevo proyecto:
1. En la terminal, ejecuta el siguiente comando para crear un nuevo proyecto a partir de una de las plantillas de inicio rápido.
```shell theme={null}
hs project create --platform-version 2025.2
```
2. Sigue las indicaciones de la terminal para configurar el nombre y la ubicación del proyecto y selecciona una plantilla. Se proporcionan varias opciones de plantillas dependiendo de cómo planees [distribuir](/docs/apps/developer-platform/build-apps/app-configuration#distribution) tu aplicación. A efectos de este tutorial, selecciona el proyecto **Comenzar el proyecto con la plantilla del mercado de aplicaciones**.
3. La plantilla del proyecto se descargará en tu directorio de trabajo, donde podrás ver su contenido.
Esta plantilla de proyecto incluye todos los archivos necesarios para subir un proyecto con una aplicación que incluya algunas funciones de aplicación de ejemplo. Estas funciones incluyen una [tarjeta de aplicación](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/create-an-app-card), un [webhook](/docs/apps/developer-platform/add-features/configure-webhooks) y una [acción de workflow](/docs/apps/developer-platform/add-features/custom-workflow-actions). A efectos de este tutorial, estos componentes no son necesarios, pero puede ser útil repasarlos por si quieres experimentar con ellos más adelante.
**2. Agregar una herramienta de agente al proyecto**
Entre bastidores, las herramientas de agente son acciones de workflow personalizadas que se configuran específicamente para el contexto del agente. Para que un agente pueda ejecutar la herramienta, de forma similar a como un workflow ejecutaría una acción, tendrás que habilitar la acción para que esté disponible en los agentes mediante el campo `supportedClients`.
* En el directorio `workflow-actions`, crea un nuevo archivo JSON para la configuración de la herramienta. El archivo puede tener cualquier nombre, pero debe terminar en `-hsmeta.json` (por ejemplo, `my-agent-tool-hsmeta.json`).
* Crea la configuración de la acción utilizando la [documentación de referencia de las herramientas del agente](/docs/apps/developer-platform/add-features/agent-tools/reference). Asegúrate de incluir el cliente `AGENTS` en el campo `supportedClients`, como se muestra en el código de ejemplo de abajo.
```json theme={null}
{
"uid": "agent_tool_action",
"type": "workflow-action",
"config": {
"actionUrl": "https://example.com",
"toolType": "GET_DATA",
"llmDescription": "A description that helps the LLM understand what this tool does.",
"isPublished": false,
"supportedClients": [
{
"client": "AGENTS"
},
{
"client": "WORKFLOWS"
}
],
"inputFields": [
{
"typeDefinition": {
"name": "message",
"type": "string",
"fieldType": "textarea"
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": false
}
],
"labels": {
"en": {
"actionName": "My custom agent tool",
"actionDescription": "A description of the tool.",
"actionCardContent": "Send a notification",
"inputFieldLabels": {
"message": "Notification Message"
},
"inputFieldDescriptions": {
"message": "Enter the message to be sent in the notification"
}
}
},
"objectTypes": ["CONTACT"]
}
}
```
Cuando crees tu herramienta, ten en cuenta lo siguiente:
* Cuando estés desarrollando activamente, no debes establecer tus campos de entrada como obligatorios, ya que los campos obligatorios no pueden actualizarse ni eliminarse una vez subidos.
* Las solicitudes a los endpoints públicos se realizarán como solicitudes a `POST`.
Cuando estés listo para subirlos a tu cuenta de prueba, guarda los archivos y ejecuta `hs project upload`. Si has empezado con un proyecto nuevo, se te pedirá que pulses `y` para crear el proyecto en la cuenta.
> [!WARNING]
>
> ### Nota:
>
> HubSpot sigue desarrollando activamente funciones para permitir pruebas de herramientas de agente. Esta página se actualizará con más instrucciones una vez que estas funciones de prueba estén disponibles.
# Resumen de los agentes y las herramientas
Source: https://developers.hubspot.es/docs/apps/developer-platform/add-features/agent-tools/overview
Encuentra más información sobre cómo crear herramientas para agentes y personalizar la experiencia del agente en HubSpot.
En HubSpot, puedes crear un agente de IA que realizará diversas acciones basándose en tus instrucciones. Por ejemplo, puedes crear un agente que te envíe un correo electrónico cada mañana con notas sobre las próximas reuniones del día.
Para realizar las tareas, los agentes se apoyan en las herramientas de agente. Las herramientas son como las funciones de un lenguaje de programación: tienen parámetros que pasas a la herramienta y la herramienta devuelve un output. Las herramientas en HubSpot son similares al concepto de herramientas en MCP (Protocolo de contexto del modelo). Una herramienta de agente incluirá las llamadas a la API, pasos para el LLM y otro contexto de apoyo para que la IA pueda hacer su función. Las herramientas están diseñadas para realizar tareas específicas y definidas, como consultar una base de datos, realizar operaciones CRUD (Crear, Leer, Actualizar, Eliminar) o utilizar la IA generativa para resumir contenido.
En términos de implementación, una herramienta de agente es una versión mejorada de una acción de workflow personalizada, que crearás utilizando la estructura de proyectos para desarrolladores de HubSpot.
> [!NOTE]
>
> Ten en cuenta los siguientes límites (en este momento) de la beta:
>
> * El agente no tiene acceso a los datos del CRM a menos que se le den herramientas para obtener esos datos.
> * el agente no podrá solicitar más datos al usuario después de ser activado, si no recibe suficiente información para completar la tarea.
## Herramientas de creación
Para crear una herramienta, consulta la [guía para crear una herramienta de agente](/docs/apps/developer-platform/add-features/agent-tools/create-an-agent-tool) junto con la [documentación de referencia](/docs/apps/developer-platform/add-features/agent-tools/reference), que incluye información sobre opciones de configuración, prácticas recomendadas y validación de solicitudes.
> [!WARNING]
>
> ### Nota:
>
> HubSpot sigue desarrollando constantemente características para permitir la prueba de la herramienta de agente. Esta página se actualizará con más instrucciones una vez que estas características de prueba estén disponibles.
# Referencia de las herramientas del agente (BETA)
Source: https://developers.hubspot.es/docs/apps/developer-platform/add-features/agent-tools/reference
Aprende a crear herramientas de agente, que son acciones de workflow personalizadas que pueden utilizar los agentes de IA.
Los agentes de HubSpot son asistentes de IA con los que los usuarios pueden chatear para realizar tareas. Cada agente incluye una serie de acciones, llamadas herramientas, que utilizará según las instrucciones del usuario. Como desarrollador, puedes crear herramientas de agente personalizadas para realizar tareas específicas y bien definidas en función del caso de uso previsto del agente.
Entre bastidores, las herramientas son acciones de workflow personalizadas que se configuran para que estén disponibles en el contexto del agente. Las herramientas pueden utilizarse en varios agentes, y pueden configurarse para funcionar tanto en agentes como en workflows.
A gran escala, crear una herramienta de agente consiste en:
* Agregar un componente de acción de workflow a una aplicación incluyendo un [directorio `workflow-actions` en el proyecto](#project-setup), junto con un archivo de configuración `*-hsmeta.json` para la herramienta. Cada herramienta y acción de workflow que crees debe tener su propio archivo de configuración `*-hsmeta.json`.
* [Configurar la acción](#agent-tool-definition) para que esté disponible en los agentes de IA a través del campo `supportedClients`.
Al crear tus herramientas, también debes tener en cuenta una serie de [prácticas recomendadas](#best-practices) para garantizar un rendimiento de mayor calidad.
## Configuración del proyecto
Para construir herramientas, tu `hsproject.json` debe tener su `platformVersion` ajustado a `2025.2`. Esta versión se establece automáticamente en todas las [plantillas de inicio rápido](/docs/apps/developer-platform/build-apps/create-an-app), pero deberá actualizarse manualmente en los proyectos de versiones anteriores.
Ten en cuenta que, al actualizar un proyecto a la versión `2025.2`, tendrás que adherirte a las nuevas normas del archivo de configuración `*-hsmeta.json` para la [configuración de tu aplicación](/docs/apps/developer-platform/build-apps/app-configuration) y sus funciones.
Tanto las herramientas de agente como las acciones de workflow personalizadas se encuentran en el directorio `workflow-actions` de la aplicación.
```shell theme={null}
├──src
│ ├── hsproject.json
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── workflow-actions/
│ │ └── agent-tool-action-hsmeta.json
└──
```
## Definición de las herramienta de agente
El archivo de configuración de tus herramientas debe estar en el directorio `workflow-actions` para que funcione. Las opciones de configuración para las herramientas de agente son las mismas que las [acciones de workflow personalizadas](/docs/apps/developer-platform/add-features/custom-workflow-actions#custom-workflow-action-definition), con el requisito añadido de que el campo `supportedClients` debe incluir el cliente `AGENTS`.
```json theme={null}
{
"uid": "agent_tool_action",
"type": "workflow-action",
"config": {
"actionUrl": "https://example.com",
"toolType": "GET_DATA",
"llmDescription": "A description that helps the LLM understand what this tool does.",
"isPublished": false,
"supportedClients": [
{
"client": "AGENTS"
},
{
"client": "WORKFLOWS"
}
],
"inputFields": [
{
"typeDefinition": {
"name": "message",
"type": "string",
"fieldType": "textarea"
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
},
{
"typeDefinition": {
"name": "priority",
"type": "enumeration",
"fieldType": "select",
"options": [
{
"value": "high",
"label": "High Priority"
},
{
"value": "normal",
"label": "Normal Priority"
},
{
"value": "low",
"label": "Low Priority"
}
]
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
}
],
"labels": {
"en": {
"actionName": "My custom agent tool",
"actionDescription": "A description of the tool.",
"actionCardContent": "Send {{priority}} priority notification",
"inputFieldLabels": {
"message": "Notification Message",
"priority": "Priority Level"
},
"inputFieldDescriptions": {
"message": "Enter the message to be sent in the notification",
"priority": "Select the priority level for this notification"
}
}
},
"objectTypes": ["CONTACT"]
}
}
```
Los campos marcados con \* son obligatorios
| Campo | Tipo | Descripción |
| - | - | - |
| `uid`\* | Cadena | Un identificador único interno para la acción de workflow. |
| `type`\* | Cadena | El tipo de componente, que en este caso debe ser `workflow-action`. |
| `actionUrl`\* | Cadena | La URL a la que la herramienta hará una solicitud de `POST`. La URL debe ser un endpoint de acceso público y no puede ser una función sin servidor definida dentro del proyecto del desarrollador. |
| `toolType`\* | Cadena | La categoría de funcionalidad de la herramienta. Puede ser una de las siguientes:
`GET_DATA`: recupera información de HubSpot o de fuentes externas.
`GENERATE`: genera contenido, resúmenes, análisis o sugerencias basadas en las entradas proporcionadas.
`TAKE_ACTION`: realiza acciones de CRM, como crear notas o asignar tareas a los propietarios.
|
| `llmDescription`\* | Cadena | Una descripción que ayude al LLM a entender lo que hace la herramienta. |
| `isPublished` | Booleano | Determina si la definición es visible en las cuentas que instalaron tu aplicación. Por defecto, está configurado como `false`. |
| `supportedClients`\* | Matriz | Matriz de objetos que especifica los clientes a los que da asistencia la acción de workflow personalizada. Cada objeto de la matriz debe tener una clave `client` con un valor de cadena que indique el tipo de cliente. Los valores incluyen:
`WORKFLOWS`: activa la acción para los workflows.
`AGENTS`: activa la acción para los agentes.
|
| `inputFields` | Matriz | Los valores de las entradas que el usuario ha rellenado. Más información sobre las [prácticas recomendadas de cantidad de campo](#be-mindful-of-the-number-of-input-fields). |
| `typeDefinition.name` | Cadena | El nombre o clave del campo de entrada. |
| `typeDefinition.type` | Cadena | El tipo de valor que debe esperar el campo de entrada. |
| `typeDefinition.fieldType` | Cadena | El tipo de campo que aparece a los usuarios que crean el workflow. |
| `typeDefinition.options` | Matriz | Para los tipos de enumeración, este campo proporciona una lista de opciones. Cada opción debe tener un `value`, basado en la entrada que proporciona el usuario, y un `label`, que identifica la opción en la herramienta workflows. |
| `inputFieldDependencies` | Matriz | Una lista de reglas que definen las relaciones entre dos o más entradas, basándose en su `dependencyType`. Más información en [este ejemplo ](/docs/api-reference/automation-actions-v4-v4/guide#example-%233). |
| `labels.`\* | Cadena | Clave de configuración regional que se asigna a la definición de configuración regional. Como mínimo, debe definirse una etiqueta en inglés (`en`) y su definición. |
| `labels..inputFieldDescriptions` | Objeto | Un objeto que define los detalles de las entradas de tu acción. En el ejemplo de arriba, este objeto incluye los campos `message` y `priority`. |
| `labels..inputFieldOptionLabels` | Objeto | Un objeto necesario si tus campos de entrada tienen opciones. Proporciona un mapa de las etiquetas de las opciones de los campos de entrada, codificadas por el valor o la etiqueta de la opción. |
| `labels..outputFieldLabels` | Objeto | Objeto que asigna las definiciones de `outputFields` a las etiquetas correspondientes que aparecen en la herramienta de workflows. |
| `labels..actionName`\* | Cadena | El nombre de la acción tal y como se muestra en el panel *Elegir una acción* del editor de workflows. |
| `labels..appDisplayName`\* | Cadena | El nombre de la sección del panel *Elegir una acción* donde aparecen todas las acciones de la aplicación. Si se define `appDisplayName` para varias acciones, se utilizará la primera que se encuentre. |
| `labels..actionCardContent` | Cadena | Una descripción resumida que aparece en la ficha de la acción. |
| `labels..executionRules` | Objeto | Un objeto que asigna las definiciones de tus `executionRules` a los mensajes que aparecerán para los resultados de la ejecución en el historial del workflow. |
| `objectTypes` | Matriz | Los tipos de objetos del CRM disponibles con los que se puede utilizar esta acción. Si está vacía, la acción estará disponible para todos los tipos de objetos. |
| `outputFields` | Matriz | Los valores que se mostrarán en la acción y que pueden ser utilizados por acciones posteriores del agente o workflow. Una acción personalizada puede tener 0, 1 o muchas salidas. |
| `executionRules` | Objeto | Una lista de definiciones que puedes especificar para mostrar los errores de tu servicio al usuario que crea el workflow. |
## Prácticas recomendadas
Cuando construyas herramientas de agentes, ten en cuenta la siguiente lista de comprobación de prácticas recomendadas:
* Empieza con campos opcionales, y luego ponlos como obligatorios solo cuando sean estables.
* Etiqueta y describe los campos tanto para los humanos como para la IA.
* Prueba con menos instrucciones de agente al principio para entender cómo interpreta la IA una herramienta.
* Mantén las herramientas centradas y ten en cuenta la cantidad de campo.
* Utiliza las descripciones de los campos para controlar la creatividad de los agentes.
Más información sobre cada una de las prácticas recomendadas en las secciones de abajo.
> [!WARNING]
>
> **Nota:**
>
> Aunque algunas de las orientaciones que aparecen abajo incluyen información sobre las herramientas de comprobación de los agentes, estas funciones de comprobación están aún en fase de desarrollo. La documentación de las herramientas del agente se actualizará cuando estén disponibles los métodos de prueba.
### Desarrollar con campos opcionales
No establezcas campos de acción (`inputFields`) como obligatorios durante el desarrollo activo. Una vez que un campo se ha establecido como obligatorio y se ha subido el proyecto, no puedes eliminar ni actualizar el campo. Solo debes establecer un campo como obligatorio cuando estés seguro de los detalles del campo, como su `name` y `type`. La razón de esta limitación es que cambiar los campos obligatorios rompería cualquier workflow activo que incluya la acción.
### Construir para la comprensión humana y de la IA
`actionName`, `inputFields` y `labels` deben comunicar claramente su uso y utilidad tanto a los humanos como al agente. Estos campos en concreto los utiliza el agente para saber cuándo invocar la acción y cómo pasar los datos a la herramienta. Cuando construyas tus herramientas, ten en cuenta que los LLM pueden necesitar descripciones más explícitas que los usuarios humanos. Por ejemplo, mientras que un humano podría entender intuitivamente un campo etiquetado `Date`, un LLM podría preferir `Event start date (YYYY-MM-DD)`.
Lo ideal es que las herramientas se construyan de forma que los agentes no necesiten instrucciones adicionales para utilizarlas. Sin embargo, hay casos en los que los datos de campo por sí solos pueden no ser suficientes para el agente. Por ejemplo, puede que no comprenda el orden previsto de las operaciones para ejecutar herramientas que dependen de la salida de otras herramientas (por ejemplo, una herramienta "Enviar correo electrónico" puede depender de que primero se ejecute una herramienta "Obtener información de contacto").
Cuando construyas una herramienta, deberías probarla primero en el agente sin agregarle instrucciones, para entender mejor cómo interpreta la herramienta. Mediante las pruebas, podrás determinar si el motor de razonamiento funciona correctamente por sí solo o si necesita instrucciones adicionales.
### Ten en cuenta el número de campos de entrada
Los agentes pueden manejar un elevado número de campos de entrada en cada herramienta (máximo 26 entradas únicas). Sin embargo, cuantos más campos de entrada haya en una herramienta, más claro deberás ser a la hora de asignar los valores `actionName`, `inputField` y `label`. Las herramientas son más eficaces y fiables cuando se diseñan para tareas específicas con un conjunto de parámetros bien definidos. Para operaciones complejas, plantéate si sería más eficaz crear varias herramientas más sencillas que una única herramienta con un número excesivo de entradas.
> [!WARNING]
>
> **Nota:**
>
> Es posible que HubSpot restrinja el número de entradas en el futuro basándose en los comentarios sobre la calidad de los agentes que manejan un gran número de entradas.
### Creatividad e improvisación del agente de control
En algunos casos, puede que quieras que un agente sea creativo e improvisador. Sin embargo, puede haber situaciones en las que no quieras que el agente improvise. Experimenta dando instrucciones al LLM en los nombres, etiquetas y descripciones de tus campos de entrada. Si necesitas una orientación más estricta, agrega instrucciones al agente para establecer expectativas claras.
Por ejemplo, supongamos que encomiendas a un agente la tarea de generar una publicación de blog, siendo uno de los campos el título de la entrada. Dependiendo de cuánto quieras que improvise el agente, podrías etiquetar el campo de forma permisiva o más restrictiva:
* **Permisivo:** `"Blog title"`
* **Restrictivo:** `"Blog title (must include the product name 'HubSpot CRM')"`
Como otro ejemplo, considera las siguientes etiquetas de campo de entrada destinadas al contenido de publicaciones en redes sociales:
* **Permisivo:** `"Social post content"`
* **Moderado:** `"Social post content (keep under 280 characters)"`
* **Restrictivo:** `"Social post content (must mention our Q4 sale, include #HubSpot, and stay under 280 characters)"`
## Verificar el origen de la solicitud de la herramienta de agente
Cuando un agente utiliza una herramienta para hacer una solicitud, realiza una solicitud de `POST` a la `actionUrl` de la herramienta. La invocación de la herramienta de agente se autentica validando el título `X-HubSpot-Signature` enviado con la solicitud. Es el mismo sistema que utiliza HubSpot para [validar las solicitudes de webhook](/docs/apps/legacy-apps/authentication/validating-requests#validate-the-v3-request-signature).
> [!WARNING]
>
> **Nota:**
>
> No deberías crear campos de entrada para secretos o claves de API, ya que esto es inseguro y no es el patrón de autenticación previsto, especialmente porque el LLM necesitaría recibir el secreto/clave de API en sus instrucciones o recibirlo de otra herramienta.
# Crear y gestionar tipos de eventos (BETA)
Source: https://developers.hubspot.es/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types
Aprende a definir los tipos de eventos de la aplicación para que puedas enviar los datos de ocurrencia de eventos a HubSpot.
Para enviar datos de eventos de la aplicación a HubSpot, primero crearás un tipo de evento utilizando un proyecto de desarrollador. El tipo de evento es un esquema JSON que define la estructura, las propiedades y las reglas de validación de los datos de ocurrencia del evento que vas a enviar. Esto incluye el nombre del evento, la etiqueta de visualización, el objeto del CRM de destino y las propiedades del evento. Los tipos de evento también incluyen definiciones de plantillas de visualización para la representación de la cronología de los registros del CRM.
> [!WARNING]
>
> Los eventos de aplicación descritos en esta documentación están pensados para aplicaciones creadas para el [mercado de aplicaciones](https://ecosystem.hubspot.com/marketplace/apps) mediante proyectos de desarrollador. Para crear informes de eventos personalizados para otros tipos de integraciones, puedes utilizar [eventos personalizados](/docs/api-reference/events-manage-event-definitions-v3/guide).
## Requisitos previos
Para incluir una definición de tipo de evento de aplicación en tu proyecto:
* Debes estar utilizando la CLI de HubSpot versión `7.5.4` o posterior. Puedes comprobar qué versión de la CLI tienes ejecutando `hs --version`, y actualizarla ejecutando `npm i -g @hubspot/cli@next`.
* Tu proyecto debe estar implementando antes de que puedas actualizarlo para incluir un componente de eventos de aplicación.
## Configurar los archivos del proyecto
> [!NOTE]
>
> Si anteriormente creaste una aplicación pública con un evento de cronología, obtén más información sobre cómo [migrarla a la plataforma para desarrolladores](#migrate-an-existing-timeline-event-type).
**1. Configuración de la aplicación y estructura del proyecto**
Para crear una nueva definición de tipo de evento de aplicación en tu proyecto, actualiza el archivo `hsmeta.json` de [configuración de la aplicación ](/docs/apps/developer-platform/build-apps/app-configuration) para incluir el permiso `timeline` en el campo `requiredScopes`. Esto es necesario para que los datos de los eventos de la aplicación aparezcan en las cronologías de los registros del CRM. Los instaladores deben conceder este permiso para que tus datos de eventos se envíen correctamente.
```json theme={null}
"requiredScopes": [
"timeline"
],
```
> [!NOTE]
>
> Ten en cuenta que puede que necesites agregar otros [permisos](/docs/apps/legacy-apps/authentication/scopes#list-of-available-scopes), dependiendo de las funciones que incluya tu aplicación.
A continuación, en el directorio `app/` de tu proyecto, agrega un directorio `app-events`. En `app-events/`, agrega un archivo de configuración JSON para definir el tipo de evento de la aplicación. Este archivo puede tener cualquier nombre, pero debe terminar en `*-hsmeta.json`. Puedes incluir hasta 750 tipos de eventos por aplicación, y cada uno tiene su propio archivo `*-hsmeta.json`.
```shell theme={null}
project-folder/
└── src/
└── app/
├── app-hsmeta.json
└── app-events/
└── my-event-type-hsmeta.json
```
**2. Configurar el esquema del tipo de evento**
En el archivo de tipo de evento `*-hsmeta.json`, configura tu [esquema de tipo de evento](/docs/apps/developer-platform/add-features/app-events/reference#event-type-schema). Este esquema configurará los atributos del tipo de evento, como el nombre, la plantilla de visualización de la cronología del registro del CRM y el tipo de objeto del CRM al que asociar los datos del evento.
Aunque algunos de estos campos pueden actualizarse después de la creación, los campos `name` y `objectType` no pueden modificarse una vez creado el tipo de evento.
Por ejemplo, se podría utilizar el siguiente esquema de tipo de evento para hacer un seguimiento de los eventos de inicio de sesión de los clientes.
```json theme={null}
{
"uid": "customer_login_event",
"type": "app-event",
"config": {
"name": "Customer login",
"headerTemplate": "{{customerName}} logged in",
"detailTemplate": "{{customerName}} logged in via the {{loginLocation}}.",
"objectType": "CONTACT",
"properties": [
{
"name": "customerName",
"label": "Customer Name",
"type": "string"
},
{
"name": "loginLocation",
"label": "Login location",
"type": "enumeration",
"options": [
{
"value": "mobileApp",
"label": "Mobile app"
},
{
"value": "website",
"label": "Website"
}
]
}
]
}
}
```
Los campos marcados con \* son obligatorios.
| Campo | Tipo | Descripción |
| - | - | - |
| `uid`\* | Cadena | Un identificador único interno para el tipo de evento. |
| `type`\* | Cadena | El tipo de componente. Debe ser `app-event`. |
| `name`\* | Cadena | La etiqueta que se muestra en HubSpot (hasta 50 caracteres). Este valor no se puede actualizar después de la creación. |
| `objectType`\* | Cadena | El nombre completo del tipo de objeto del CRM al que se pueden asociar los eventos. Este valor no se puede cambiar después de la creación. Puede ser uno de los siguientes: `COMPANY`, `CONTACT`, `CUSTOM_OBJECT`, `DEAL`, `TICKET`, `APP_OBJECT`. |
| `headerTemplate` | Cadena | La [plantilla de representación](/docs/apps/developer-platform/add-features/app-events/reference#rendering-templates) del encabezado de la tarjeta de actividad de la cronología del CRM. Puede tener hasta 1000 caracteres de longitud. |
| `detailTemplate` | Cadena | La [plantilla de representación](/docs/apps/developer-platform/add-features/app-events/reference#rendering-templates) para el cuerpo de la tarjeta de actividad de la cronología del CRM. Puede tener hasta 10.000 caracteres de longitud. |
| `properties` | Matriz | Propiedades definidas para el tipo de evento en el que vas a almacenar los datos de ocurrencia del evento. Cada tipo de evento puede tener hasta 500 propiedades. Más información sobre las propiedades, incluidos los requisitos y las limitaciones, en la [documentación de referencia de los eventos de la aplicación](/docs/apps/developer-platform/add-features/app-events/reference). |
**3. Subir tus cambios a HubSpot**
Sube tu proyecto a HubSpot con el comando `hs project upload`.
```shell theme={null}
hs project upload
```
Durante la fase de construcción, HubSpot validará el tipo de evento. Si hay algún error de validación del esquema, la CLI devolverá un error indicando lo que hay que corregir.
Por defecto, tras una compilación correcta, HubSpot implementará automáticamente el proyecto. Si lo has desactivado en la [configuración del proyecto](/docs/apps/developer-platform/build-apps/manage-apps-in-hubspot#view-your-app-on-the-project-details-page), puedes implementarlo manualmente utilizando `hs project deploy`.
Tras la implementación, el tipo de evento de tu aplicación estará ahora disponible y podrá utilizarse para recibir datos de sucesos de eventos.
## Recuperar el fullyQualifiedName
Para enviar los datos de ocurrencia del tipo de evento, tendrás que recuperar el `fullyQualifiedName` a través de la API de eventos de la aplicación. Este nombre identifica el tipo de evento, y deberá incluirse en todas las operaciones de la API de eventos de la aplicación.
Para recuperar el `eventTypeName`, haz una solicitud `POST` a `https://api.hubapi.com/integrators/timeline/v4/types/projects`. En el cuerpo de la solicitud, incluye lo siguiente:
* Un campo `projectName`, que debe ajustarse al valor `name` del archivo `hsproject.json` de tu proyecto.
* Un campo `developerSymbol`, que debe ajustarse al valor `uid` del archivo de configuración del tipo de evento `*-hsmeta.json`.
```json theme={null}
{
"projectName": "my-marketplace-app",
"developerSymbol": "customer_login_event"
}
```
La respuesta devolverá el nombre del proyecto, el nombre del tipo de evento y el `fullyQualifiedName`.
```json highlight={6} theme={null}
{
"developerQualifiedSymbol": {
"projectName": "marketplace",
"developerSymbol": "customer_login_event"
},
"fullyQualifiedName": "ae000000_integrators-timeline-event-type-id-0000000"
}
```
El valor `fullyQualifiedName` no cambiará nunca, por lo que puedes codificarlo con seguridad en tu implementación. La API limita el número de veces que puedes recuperar este valor al día, y no puede utilizarse mediante programación.
## Gestión de tipos de eventos
Para actualizar un tipo de evento después de crearlo, solo tendrás que actualizar el esquema del tipo de evento en tu proyecto, y luego volver a subirlo para crear e implementar la aplicación.
Si ya no quieres utilizar un tipo de evento, puedes eliminarlo de tu proyecto. Sin embargo, antes de eliminar un tipo de evento, ten en cuenta lo siguiente:
* Eliminar un tipo de evento es una acción permanente e irreversible.
* Eliminar un tipo de evento elimina tanto el tipo de evento como todas las ocurrencias de ese tipo de todas las cuentas que hayan instalado la aplicación.
* Si eliminas un tipo de evento, se romperán otras herramientas de HubSpot que dependen de ese tipo de evento, como los informes y los workflows.
Para eliminar el tipo de evento, borra el archivo de configuración del tipo de evento `*-hsmeta.json` de tu proyecto, luego sube e implementa el proyecto.
## Migrar un tipo de evento de cronología existente
Si ya tienes una aplicación pública con un evento de cronología, puedes migrarla a la plataforma para desarrolladores utilizando la CLI.
> [!WARNING]
>
> Antes de migrar tu aplicación:
>
> * Consulta la [guía pública de migración de aplicaciones](/docs/apps/developer-platform/build-apps/migrate-an-app/migrate-an-existing-public-app) para revisar las consideraciones y limitaciones actuales de la beta de la plataforma para desarrolladores.
> * Una vez que hayas migrado un tipo de evento de cronología existente (`v1`/`v3`) a la plataforma para desarrolladores, dispondrás de 7 días para cambiar las solicitudes existentes de la API de eventos de cronología `v1`/`v3` a los nuevos endpoints `v4`, incluidas las solicitudes de la API de ocurrencia/instancia de ambos tipos de eventos. Transcurridos 7 días, cualquier llamada existente a los endpoints de ocurrencia de eventos `v1`/`v3` devolverá errores `401`.
> * Para crear y actualizar tipos de eventos y plantillas, ya no necesitarás utilizar la API. En su lugar, los gestionarás directamente en el proyecto a través del [archivo de configuración del tipo de evento](/docs/apps/developer-platform/add-features/app-events/reference#event-type-schema).
> * Para enviar datos de sucesos, tendrás que utilizar los endpoints de `v4`, que ofrece [endpoints de envío único y por lotes](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences).
Para migrar tu aplicación:
* En la terminal, ejecuta `hs app migrate`, luego sigue las indicaciones del terminal para migrar tu aplicación y el evento de cronología.
* Una vez finalizado el proceso de migración, tu aplicación estará ahora en un proyecto de desarrollador, y se creará un directorio de proyecto local para ti.
* Para abrir el proyecto en HubSpot, navega hasta el directorio local del proyecto y ejecuta `hs project open`.
Ten en cuenta que los archivos de configuración generados (`*-hsmeta.json`) pueden contener campos con valores `null`. Estos campos son un artefacto de la migración, y es seguro eliminarlos.
## Pasos siguientes
Después de crear un tipo de evento, aprende a [enviar datos de ocurrencia de eventos a través de la API](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences).
También puedes consultar la [documentación de referencia de los eventos de la aplicación](/docs/apps/developer-platform/add-features/app-events/reference) para seguir creando y personalizando los eventos de tu aplicación.
# Visión general de los eventos de la aplicación (BETA)
Source: https://developers.hubspot.es/docs/apps/developer-platform/add-features/app-events/overview
Aprende a definir eventos de la aplicación en la última versión de la plataforma para desarrolladores.
Mediante los eventos de la aplicación, puedes enviar datos de actividad enriquecidos desde tus sistemas externos directamente a HubSpot. Los datos de los eventos de la aplicación están asociados a los registros del CRM y pueden utilizarse en las herramientas de automatización, análisis e informes de HubSpot.
A continuación, aprende más sobre cómo funcionan los eventos de las aplicaciones. Para empezar a crear eventos de la aplicación en tu proyecto:
* [Crear un tipo de evento](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types)
* [Enviar datos de ocurrencias de eventos](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences)
* Revisa la [documentación de referencia de los eventos de la aplicación](/docs/apps/developer-platform/add-features/app-events/reference)
> [!WARNING]
>
> Los eventos de la aplicación descritos en esta documentación están pensados para aplicaciones creadas para el [mercado de aplicaciones](https://ecosystem.hubspot.com/marketplace/apps) mediante proyectos de desarrollador. Para crear informes de eventos personalizados para otros tipos de integraciones, puedes utilizar [eventos personalizados](/docs/api-reference/events-manage-event-definitions-v3/guide).
## Cómo funcionan los eventos de la aplicación
Los eventos son puntos de datos que capturan lo que ocurrió en un momento concreto, a menudo relacionados con acciones del usuario, como enviar un formulario, un mensaje SMS o consultar una página. A diferencia de los registros del CRM, que pretenden mostrar el estado actual de una entidad, los eventos pueden darte una mejor comprensión de los patrones de actividad, los cambios de comportamiento a lo largo del tiempo y otras tendencias.
> [!TIP]
>
> Los eventos de la aplicación son ideales cuando tus datos:
>
> * Representan acciones o actividades que ocurren repetidamente.
> * Tienen que ser analizados para consultar los cambios o el volumen a lo largo del tiempo.
> * No requieren actualización después de la creación.
A gran escala, un evento de la aplicación consiste en:
* **Definición del tipo de evento:** un esquema JSON que define la estructura, propiedades y reglas de validación del evento. Esto incluye el nombre del evento, la etiqueta de visualización, el objeto del CRM de destino y las propiedades del evento. Los tipos de evento también incluyen definiciones de plantillas de visualización para la representación de la cronología de los registros del CRM. Los tipos de eventos se definen mediante proyectos de desarrollador.
* **Ocurrencias de eventos:** instancias individuales de eventos que contienen datos reales, validados según tu esquema de tipos de eventos. Los datos de ocurrencia de eventos se envían a través de la API de eventos de la aplicación, e incluyen el identificador del tipo de evento, valores de propiedad, marcas de tiempo y metadatos adicionales, y datos de referencia de objetos del CRM para la asociación de registros del CRM.
> [!NOTE]
>
> **Eventos de la cronología vs. eventos de la aplicación**
>
> Anteriormente, HubSpot lanzó los eventos de cronología para permitirte mostrar datos de eventos en cronologías de objetos del CRM. Los eventos de la aplicación permiten esa misma funcionalidad en una lista ampliada de objetos compatibles, al tiempo que también están disponibles en otras herramientas de HubSpot. Los eventos de la aplicación también tienen ahora su propia página de índice junto con los eventos personalizados, lo que proporciona una visión unificada de las actividades del evento.
>
> Las integraciones de eventos de cronología existentes seguirán funcionando y serán visibles en los mismos lugares que los eventos de la aplicación. Sin embargo, para crear nuevos tipos de evento o hacer cambios en los existentes, debes volver a crearlo como evento de aplicación en tu proyecto de desarrollador.
## Objetos y herramientas compatibles
Al definir un tipo de evento, lo configurarás para que se asocie a un objeto del CRM específico, lo que te permitirá vincular los datos del evento a su origen, como los contactos que se conectan a tu sitio web. Las ocurrencias de eventos pueden asociarse a registros del CRM de ese tipo. Los eventos de la aplicación pueden asociarse a los siguientes objetos del CRM:
* Contactos
* Empresas
* Negocios
* Tickets
* Objetos personalizados
* Objetos de la aplicación
Los eventos de la aplicación se pueden utilizar en las siguientes herramientas de HubSpot:
* **Interfaz de gestión de eventos:** visualiza y analiza los datos de eventos de la aplicación en el panel de eventos personalizados junto con los datos de eventos personalizados navegando a **Gestión de datos** > **Eventos personalizados** en tu cuenta.
* **Cronologías de los registros del CRM:** visualiza cronológicamente la actividad de los eventos de la aplicación en las cronologías de los registros del CRM asociados a las ocurrencias de los eventos.
* **Herramientas de elaboración de informes:** utiliza los datos de los eventos de la aplicación para crear informes personalizados, analíticas del recorrido del cliente y conjuntos de datos para análisis y visualización.
* **Calificación de leads, listas y workflows:** segmenta tu base de datos del CRM utilizando eventos para listas dinámicas, calificación de leads y desencadenantes de workflows.
## Prácticas recomendadas
Cuando construyas tipos de eventos:
* Utiliza nombres claros y descriptivos para los [tipos de eventos](/docs/apps/developer-platform/add-features/app-events/reference#event-type-schema) y [propiedades](/docs/apps/developer-platform/add-features/app-events/reference#event-properties), ya que aparecerán como filtros en los workflows, listas, informes y en el panel de eventos personalizados.
* Elige los tipos de propiedad apropiados (cadena, número, fecha y hora, etc.) que se ajusten a tus datos y permitan un filtrado y análisis adecuados.
* Incluye propiedades que sean útiles para la segmentación, los informes y los desencadenantes de automatización (por ejemplo, cantidades de transacciones, funciones de usuario, categorías de acciones).
* Diseña los tipos de eventos teniendo en cuenta los casos de uso de informes y workflows, considerando cómo filtrarán y agruparán los usuarios los datos de los eventos.
* Evita hacer cambios de última hora en los esquemas de tipos de eventos existentes, ya que esto puede alterar los workflows e informes existentes que dependen de la estructura de eventos.
Para mantener una alta calidad de los datos de eventos:
* Revisa cualquier solicitud programática de datos de ocurrencia de eventos para asegurarte de que se validarán correctamente con tu esquema de tipo de evento.
* Utiliza un formato coherente para los valores de las propiedades de los eventos, especialmente para fechas, números y datos categóricos.
* Asegúrate de que los eventos se asocian a [identificadores de registro del CRM válidos](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences#crm-record-association).
* Supervisa los índices de éxito en el envío de eventos y las [respuestas de error](/docs/apps/developer-platform/add-features/app-events/reference#occurrence-send-errors).
* Revisa periódicamente los datos de los eventos en las cronologías de los registros del CRM y en el panel de eventos personalizados para comprobar su exactitud.
Optimiza el rendimiento del envío de eventos al:
* [Agrupar múltiples ocurrencias de eventos](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences#sending-event-occurrences) en una sola solicitud de la API cuando sea posible (hasta 500 eventos por lote).
* Mantener reducidas las cargas útiles de ocurrencias de eventos incluyendo solo los datos de propiedad necesarios.
* Implementar una lógica de reintento exponencial para los envíos de eventos fallidos.
## Limitaciones
Ten en cuenta las siguientes limitaciones cuando planifiques y construyas eventos de aplicación.
### Requisitos de la versión
* Los eventos de la aplicación solo pueden crearse a través de la última versión de la plataforma de proyectos para desarrolladores (`2025.2`).
* Para los tipos de eventos existentes, puedes seguir utilizando la API de eventos de cronología [v1](/docs/api-reference/legacy/crm-timeline-v1/get-integrations-v1-application-id-timeline-event-event-typeid-event-id) y [v3](/docs/api-reference/crm-timeline-v3/guide). Sin embargo, no puedes crear nuevos tipos de eventos utilizando las API `v1` y `v3`.
### Restricciones de tipos de eventos
* Las ocurrencias de eventos deben ajustarse al esquema de tipos de sucesos definido o serán rechazadas.
* Algunos [campos de tipos de eventos](/docs/apps/developer-platform/add-features/app-events/reference#event-type-schema) no pueden actualizarse después de crear el tipo de evento (por ejemplo, `name` y `objectType`).
* Los nuevos tipos de eventos están sujetos a un proceso de revisión antes de que puedan ser activados.
### Limitaciones de datos
* Las propiedades individuales están limitadas a 510 KB, y el tamaño total del evento está limitado a 1 MB.
* Los eventos de la aplicación están destinados a los proveedores del mercado de aplicaciones, y solo funcionarán con aplicaciones configuradas para utilizar la autenticación de OAuth. En su lugar, los sistemas internos deben utilizar [eventos personalizados](/docs/api-reference/events-manage-event-definitions-v3/guide.mdx).
## Primeros pasos
Para empezar a trabajar con eventos de la aplicación, necesitarás
* [Crear un tipo de evento](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types) para definir la estructura de tus datos de evento mediante un proyecto de desarrollador.
* [Enviar datos de eventos](/docs/apps/developer-platform/add-features/app-events/send-event-occurrences#send-a-single-occurrence) a la aplicación utilizando la [API de eventos de la aplicación]().
* Aprovechar los datos de HubSpot según sea necesario utilizando herramientas de informes, automatización o análisis.
# Referencia de eventos de aplicación (BETA)
Source: https://developers.hubspot.es/docs/apps/developer-platform/add-features/app-events/reference
Información de referencia para los eventos de la aplicación en la última versión de la plataforma para desarrolladores.
A continuación, encontrarás información de referencia para utilizar los eventos de la aplicación, incluidos esquemas de tipos de eventos, plantillas de representación de cronologías de eventos, campos de ocurrencia de eventos y mucho más.
## Estructura del proyecto
En el contexto de un proyecto, pondrás las definiciones de los tipos de eventos en un directorio `app-events` dentro de `app/`. El directorio `app-events` debe contener un archivo de definición del esquema JSON para cada tipo de evento (`*-hsmeta.json`).
```shell theme={null}
project-folder/
└── src/
└── app/
├── app-hsmeta.json
└── app-events/
└── my-event-type-hsmeta.json
```
Para incluir definiciones de tipo de evento en un proyecto se requiere lo siguiente:
* Tu aplicación debe utilizar la autenticación de OAuth y estar configurada para su distribución en el mercado de aplicaciones. Además, la aplicación debe incluir `timeline` en su `requiredScopes`. Más información sobre la [configuración de aplicaciones](/docs/apps/developer-platform/build-apps/app-configuration).
* Tu proyecto debe desplegarse correctamente antes de que puedas incluir un componente de eventos de aplicación.
## Esquema del tipo de evento
Abajo se indican las opciones de configuración disponibles para los esquemas de tipo de evento (`*-hsmeta.json`). Ten en cuenta que algunos de los atributos que aparecen no se pueden cambiar una vez creado el tipo de evento.
> [!WARNING]
>
> Cada aplicación está limitada a 750 tipos de eventos.
```json theme={null}
{
"uid": "customer_login_event",
"type": "app-event",
"config": {
"name": "Customer login",
"headerTemplate": "{{customerName}} logged in.",
"detailTemplate": "{{customerName}} logged in via the {{loginLocation}}.",
"objectType": "CONTACT",
"properties": [
{
"name": "customerName",
"label": "Customer Name",
"type": "string"
},
{
"name": "loginLocation",
"label": "Login location",
"type": "enumeration",
"options": [
{
"value": "mobileApp",
"label": "Mobile app"
},
{
"value": "website",
"label": "Website"
}
]
}
]
}
}
```
Los campos marcados con \* son obligatorios.
| Campo | Tipo | Descripción |
| - | - | - |
| `uid`\* | Cadena | Un identificador único interno para el tipo de evento. |
| `type`\* | Cadena | El tipo de componente. Debe ser `app-event`. |
| `name`\* | Cadena | La etiqueta que se muestra en HubSpot (hasta 50 caracteres). Este valor no se puede actualizar después de la creación. |
| `objectType`\* | Cadena | El nombre completo del tipo de objeto del CRM al que se pueden asociar los eventos. Este valor no se puede cambiar después de la creación. Puede ser uno de los siguientes: `COMPANY`, `CONTACT`, `CUSTOM_OBJECT`, `DEAL`, `TICKET`, `APP_OBJECT`. |
| `headerTemplate` | Cadena | La [plantilla de representación](#rendering-templates) del encabezado de la tarjeta de actividad de la cronología del CRM. Puede tener hasta 1000 caracteres de longitud. |
| `detailTemplate` | Cadena | La [plantilla de representación](#rendering-templates) para el cuerpo de la tarjeta de actividad de la cronología del CRM. Puede tener hasta 10.000 caracteres de longitud. |
| `properties` | Matriz | Propiedades definidas para el tipo de evento en el que vas a almacenar los datos de ocurrencia del evento. Cada tipo de evento puede tener hasta 500 propiedades. Más información sobre las propiedades personalizadas del evento a continuación. |
### Propiedades de eventos
Cuando definas el esquema de sucesos, utiliza la matriz `properties` para definir los campos a los que enviarás los datos de eventos. Cada tipo de evento puede tener hasta 500 propiedades.
```json theme={null}
"properties": [
{
"name": "customerName",
"label": "Customer Name",
"type": "string"
},
{
"name": "loginLocation",
"label": "Login location",
"type": "enumeration",
"options": [
{
"value": "mobileApp",
"label": "Mobile app"
},
{
"value": "website",
"label": "Website"
}
]
}
]
```
Los campos marcados con \* son obligatorios.
| Campo | Tipo | Descripción |
| - | - | - |
| `name`\* | Cadena | El nombre interno de la propiedad. Debe estar en minúsculas y tener entre 1 y 500 caracteres. Los nombres de las propiedades deben ser únicos por tipo de evento. Este valor no puede coincidir con la expresión regular `"[A-Za-z0-9_\\-.]+"` ni empezar por `hs_`. |
| `label`\* | Cadena | La etiqueta que se muestra en HubSpot. Debe estar en minúsculas y tener entre 1 y 500 caracteres. |
| `type`\* | Cadena | Tipo de datos capturados en la propiedad. Puede ser uno de los siguientes: `STRING`, `NUMBER`, `DATE`, `ENUMERATION`. |
| `options` | Matriz | Para las propiedades de tipo `ENUMERATION`, este campo proporciona las opciones disponibles. Debe contener al menos una opción. Cada opción es un objeto que contiene:
`name`: la etiqueta de la opción mostrada en HubSpot.
`value`: el valor interno proporcionado por la ocurrencia del evento.
Los `name` y `label` deben ser únicos dentro del tipo de evento. |
| `objectPropertyName` | Cadena | Si se incluye, el nombre de la propiedad del objeto del CRM que debe actualizarse cuando se envíen los datos del evento a HubSpot. El valor de esta propiedad sobrescribirá cualquier valor existente en esa propiedad. Más información sobre el sellado de propiedades de registros del CRM abajo. |
### Sellado de propiedades
En algunos casos, puede que quieras modificar los valores de las propiedades del registro del CRM basándote en los datos de ocurrencia del evento de la aplicación. Por ejemplo, puede que quieras actualizar el nombre y apellidos de un contacto con los nuevos valores establecidos por la ocurrencia (por ejemplo, envío de formularios).
Para actualizar las propiedades de los registros del CRM mediante ocurrencias de eventos, puedes vincular una propiedad de evento a una propiedad de CRM dentro del esquema del tipo de evento. En los campos de definición de una determinada propiedad de evento, incluye el campo `objectPropertyName` y especifica la propiedad del CRM a enlazar. Una vez vinculada una propiedad, HubSpot siempre actualizará el valor de la propiedad en el registro del CRM utilizando el valor de la aparición más reciente basado en el campo `timestamp`.
Por ejemplo, el siguiente esquema de tipo de evento vincula la propiedad de evento `customerName` con una propiedad de contacto personalizada denominada `custom_property_name`. Cuando los datos de ocurrencia del evento incluyan un valor para `customerName`, se actualizará `custom_property_name` para el registro del CRM asociado.
```json theme={null}
"properties": [
{
"name": "customerName",
"label": "Customer Name",
"type": "string",
"objectPropertyName": "custom_property_name"
}
]
```
### Plantillas de renderizado
Los esquemas de tipo de evento pueden incluir los campos `headerTemplate` y `detailTemplate` para configurar cómo se muestran los eventos en las cronologías de los registros del CRM.
* `headerTemplate`: una descripción de una línea del acontecimiento en la parte superior de la tarjeta de actividad (hasta 1.000 caracteres).
* `detailTemplate`: los detalles del evento en el cuerpo de la tarjeta de actividad (hasta 10.000 caracteres).
Las plantillas de renderizado se escriben utilizando plantillas [Markdown](https://www.markdownguide.org/basic-syntax/) con [Handlebars](https://handlebarsjs.com/guide/). Estas plantillas pueden representar los datos de ocurrencias eventos de la siguiente manera:
* En ambas plantillas, puedes acceder a cualquier dato de `property` pasado por la ocurrencia del evento utilizando la sintaxis `{{propertyName}}`.
* En `detailTemplate`, puedes acceder adicionalmente a los valores `extraData` pasados por la ocurrencia del evento utilizando la sintaxis `{{extraData.fieldName}}`. Puedes acceder a cualquier nivel de atributo en `extraData` mediante la notación con puntos, como `{{extraData.person1.preferredName}}`.
> [!WARNING]
>
> El objeto `extraData` solo puede contener JSON válido. Si el JSON está malformado, la ocurrencia será rechazada y recibirás una respuesta de error.
Por ejemplo, las plantillas siguientes utilizan los datos de las propiedades `customerName` y `loginLocation`, junto con el campo `surveyData` de `extraData` [enviado a través de la ocurrencia del evento](#event-occurrences).

```json theme={null}
"headerTemplate": "{{customerName}} logged in via the {{loginLocation}}.",
"detailTemplate": "#### Post-login survey\n{{#each extraData.surveyData}}\n- **{{question}}**: {{answer}}\n{{/each}}",
```
Como las plantillas se construyen con Markdown y Handlebars, puedes aprovechar los ayudantes de Handlebars para que el contenido sea más dinámico. Por ejemplo, la `detailTemplate` incluye el [`#if` ayudante](https://handlebarsjs.com/guide/builtin-helpers.html#if) para renderizar condicionalmente el contenido en función de si los datos de ocurrencia del evento incluyen el campo `surveyData` en `extraData`.
* Si `extraData` contiene `surveyData`, muestra las respuestas de las encuestas posteriores al inicio de sesión.
* Si no había ningún `surveyData` en la ocurrencia del evento, muestra `No additional information.`.

```json theme={null}
"detailTemplate": "{{#if extraData.surveyData}}#### Post-login survey\n{{#each extraData.surveyData}}\n- **{{question}}**: {{answer}}\n{{/each}}{{else}}No additional information."
```
### Usar iframes
Cuando los datos de ocurrencia del evento contengan el campo `timelineIFrame`, la tarjeta de actividad de cronología incluirá un hipervínculo en el que los usuarios podrán hacer clic para abrir el contenido vinculado en un iframe.

```json theme={null}
"timelineIFrame": {
"linkLabel": "Click me",
"headerLabel": "This is an iframe",
"url": "https://hubspot.mintlify.io/en-us/apps/developer-platform/build-apps/overview",
"width": 300,
"height": 300
}
```
| Campo | Tipo | Descripción |
| - | - | - |
| `linkLabel` | Cadena | El texto del hipervínculo que lanzará el iframe al hacer clic. |
| `headerLabel` | Cadena | La etiqueta de la ventana modal que muestra el contenido del iframe. |
| `url` | Cadena | La URL del contenido del iframe. |
| `width` | Entero | La anchura del modal del iframe. |
| `height` | Entero | La altura del modal del iframe. |
## Ocurrencias del evento
Para enviar ocurrencias de evento de un tipo de evento determinado, haz una petición a `POST` a los puntos finales que se indican a continuación. La API de eventos de la aplicación incluye endpoints para enviar ocurrencias de eventos individuales y lotes de ocurrencias de eventos múltiples. Para ambos endpoints, los datos de ocurrencia del evento tendrán que validarse con respecto a un esquema de tipo de evento existente, que especificarás con `eventTypeName` en el cuerpo de la solicitud.
**Enviar una ocurrencia única**
Para enviar una ocurrencia de evento única, haz una solicitud de `POST` a `/integrators/timeline/v4/events`.
En el cuerpo de la solicitud, incluye los datos de la ocurrencia del evento, respetando el esquema definido para el tipo de suceso.
```json theme={null}
{
"eventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"objectId": "123456",
"id": "login-1",
"properties": {
"customerName": "Mark S.",
"loginLocation": "mobileApp"
}
},
```
**Enviar un lote de ocurrencias**
Para enviar un lote de ocurrencias, haz una solicitud de `POST` a `/integrators/timeline/v4/events/batch`.
En el cuerpo de la solicitud, incluye hasta 500 objetos de ocurrencias de eventos separadas por comas dentro de una matriz `inputs`. Si alguna ocurrencia no se valida, las ocurrencias validadas con éxito seguirán aceptándose y persistiendo.
```json theme={null}
{
"inputs": [
{
"EventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"id": "login_event_100",
"objectId": "769851",
"properties": {
"customerName": "Tim",
"loginLocation": "mobileApp"
},
"extraData": {
"surveyData": [
{
"question": "How was your login experience?",
"answer": "Fine!"
},
{
"question": "How likely are you to recommend logging in to a co-worker?",
"answer": "Extremely likely"
}
]
}
},
{
"EventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"id": "login_event_101",
"objectId": "769851",
"properties": {
"customerName": "Tim",
"loginLocation": "website"
},
"extraData": {}
}
]
}
```
En el cuerpo de la solicitud, incluye datos basados en el esquema de tipo de evento definido. El cuerpo de la solicitud debe incluir la dirección `eventTypeName`, que puedes [recuperar a través de la API](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types#retrieve-the-fullyqualifiedname).
```json theme={null}
{
"eventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"objectId": "8675309",
"properties": {
"customerName": "Mark S.",
"loginLocation": "mobileApp"
},
"id": "login-1529a3gda23",
"extraData": {
"surveyData": [
{
"question": "How was your login experience?",
"answer": "Fine!"
},
{
"question": "How likely are you to recommend logging in to a co-worker?",
"answer": "Extremely likely"
}
]
}
}
```
Los campos marcados con \* son obligatorios.
| Campo | Tipo | Descripción |
| - | - | - |
| `eventTypeName`\* | Cadena | El nombre completo del tipo de evento, que utilizarás para identificarlo a través de la API. Este valor lo establece automáticamente HubSpot y se puede [obtener a través de la API](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types#retrieve-the-fullyqualifiedname) después de crear el tipo de evento. Este valor no se puede cambiar después de la creación. |
| `objectId`\* | Cadena | El ID del registro del CRM a asociar con la ocurrencia del evento. Este campo puede utilizarse para todos los tipos de registros de CRM, y es el identificador recomendado. Más información sobre [la asociación de registros del CRM](#crm-record-association). |
| `email` | Cadena | Para la asociación de contactos, puedes proporcionar la dirección de correo electrónico del contacto a asociar. Más información sobre [la asociación de registros del CRM](#crm-record-association). |
| `utk` | Cadena | Para la asociación de contactos, puedes proporcionar la ficha de usuario de un contacto existente para asociarlo. Más información sobre [la asociación de registros del CRM](#crm-record-association). |
| `domain` | Cadena | Para la asociación de empresas, puedes proporcionar el dominio del sitio web de una empresa existente. Más información sobre [la asociación de registros del CRM](#crm-record-association). |
| `timestamp` | Cadena | Establece la hora de ocurrencia del evento (formato[ISO 8601](https://en.wikipedia.org/wiki/ISO_8601)). Si no se proporciona, HubSpot utilizará por defecto la marca de tiempo de cuando se envían los datos de ocurrencia del evento. |
| `properties` | Objeto | Pares clave-valor de nombres y valores de [propiedades](/docs/apps/developer-platform/add-features/app-events/reference#event-properties) que has definido en el tipo de evento. |
| `extraData` | Matriz | Cuando se incluye, proporciona información adicional para la representación de la cronología. Debe ser JSON válido. Más información sobre [los datos adicionales en las plantillas de representación](#rendering-templates). |
| `timelineIFrame` | Objeto | Cuando se incluya, la tarjeta de cronología incluirá un hipervínculo que permitirá a los usuarios abrir los contenidos enlazados en un iframe. Más información sobre [el uso de iframes](#using-iframes). |
| `id` | Cadena | Un identificador único para la ocurrencia del evento. Debe ser único dentro del tipo de evento. Si no se proporciona, HubSpot generará un UUID aleatorio. Cuando varios eventos tengan el mismo ID, se aceptará el primero y se rechazarán todos los demás. |
Si alguna ocurrencia no se valida, las ocurrencias validadas con éxito seguirán aceptándose y persistiendo. El mensaje de error de la respuesta te proporcionará información sobre lo que tendrás que arreglar.

### Asociación de registros del CRM
Cada suceso debe estar asociado a un registro del CRM, con el tipo de objeto del CRM definido por el esquema de tipo de evento. La API de eventos de la aplicación incluye múltiples campos para asociar los datos de ocurrencia de eventos con los registros del CRM. Para todos los objetos del CRM compatibles, se recomienda utilizar el campo `objectId`. Sin embargo, hay algunas situaciones en las que puede que quieras utilizar los otros campos.
* `utk`/`email`: si no conoces el ID del contacto, utiliza el campo `utk` y/o `email` para identificarlo. Proporcionar estos dos identificadores también te permite crear y actualizar contactos. Por ejemplo:
* Si `utk` coincide con un contacto existente pero `email` no coincide, HubSpot actualizará el contacto con la nueva dirección de correo electrónico.
* Si no se proporciona `objectId`, el evento se asociará a un contacto existente que coincida con `utk`/`email`, o HubSpot creará un nuevo contacto si no se encuentra ninguna coincidencia.
* Ten en cuenta que `utk` por sí solo no puede crear nuevos contactos. Siempre debes incluir `email` con `utk` para garantizar una asociación adecuada.
* `domain`: para la asociación de empresas, debes proporcionar la dirección `objectId`, pero también puedes incluir `domain` para actualizar la propiedad `domain` de esa empresa.
# Enviar ocurrencias de eventos (BETA)
Source: https://developers.hubspot.es/docs/apps/developer-platform/add-features/app-events/send-event-occurrences
Aprende a enviar datos de ocurrencia de eventos a HubSpot utilizando tus esquemas de tipos de eventos definidos.
Tras [definir un esquema de tipo de evento](en-us/apps/developer-platform/build-apps/features/app-events/create-and-manage-event-types) y [recuperar su fullyQualifiedName](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types#retrieve-the-fullyqualifiedname), puedes enviar datos de ocurrencia de eventos a través de la API de eventos de la aplicación. Cuando envíes datos de eventos, tendrás que respetar el esquema que creaste anteriormente. Las solicitudes que no coincidan con el esquema fallarán en la validación y no serán capturadas por la aplicación.
## Envío de ocurrencias de eventos
**Enviar una ocurrencia única**
Para enviar una ocurrencia de evento única, haz una solicitud de `POST` a `/integrators/timeline/v4/events`.
En el cuerpo de la solicitud, incluye los datos del evento siguiendo el esquema definido para el tipo de evento junto con el valor `fullyQualifiedName` en un campo `eventTypeName`.
```json theme={null}
{
"eventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"objectId": "123456",
"id": "login-1",
"properties": {
"customerName": "Mark S.",
"loginLocation": "mobileApp"
}
},
```
**Enviar un lote de ocurrencias**
Para enviar un lote de ocurrencias, haz una solicitud de `POST` a `/integrators/timeline/v4/events/batch`.
En el cuerpo de la solicitud, incluye hasta 500 objetos de ocurrencias de eventos separadas por comas dentro de una matriz `inputs`. Si alguna ocurrencia no se valida, las ocurrencias validadas con éxito seguirán aceptándose y persistiendo.
```json theme={null}
{
"inputs": [
{
"EventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"id": "login_event_100",
"objectId": "769851",
"properties": {
"customerName": "Tim",
"loginLocation": "mobileApp"
},
"extraData": {
"surveyData": [
{
"question": "How was your login experience?",
"answer": "Fine!"
},
{
"question": "How likely are you to recommend logging in to a co-worker?",
"answer": "Extremely likely"
}
]
}
},
{
"EventTypeName": "ae000000_integrators-timeline-event-type-id-0000000",
"id": "login_event_101",
"objectId": "769851",
"properties": {
"customerName": "Tim",
"loginLocation": "website"
},
"extraData": {}
}
]
}
```
Los campos marcados con \* son obligatorios.
| Campo | Tipo | Descripción |
| - | - | - |
| `eventTypeName`\* | Cadena | El nombre completo del tipo de evento, que utilizarás para identificarlo a través de la API. Este valor lo establece automáticamente HubSpot y se puede [obtener a través de la API](/docs/apps/developer-platform/add-features/app-events/create-and-manage-event-types#retrieve-the-fullyqualifiedname) después de crear el tipo de evento. Este valor no se puede cambiar después de la creación. |
| `objectId`\* | Cadena | El ID del registro del CRM a asociar con la ocurrencia del evento. Este campo puede utilizarse para todos los tipos de registros de CRM, y es el identificador recomendado. Más información sobre [la asociación de registros del CRM](#crm-record-association). |
| `email` | Cadena | Para la asociación de contactos, puedes proporcionar la dirección de correo electrónico del contacto a asociar. Más información sobre [la asociación de registros del CRM](#crm-record-association). |
| `utk` | Cadena | Para la asociación de contactos, puedes proporcionar la ficha de usuario de un contacto existente para asociarlo. Más información sobre [la asociación de registros del CRM](#crm-record-association). |
| `domain` | Cadena | Incluye este campo además de `objectId` para establecer el valor de la propiedad `domain` de la empresa. Más información sobre [la asociación de registros del CRM](#crm-record-association). |
| `timestamp` | Cadena | Establece la hora de ocurrencia del evento (formato[ISO 8601](https://en.wikipedia.org/wiki/ISO_8601)). Si no se proporciona, HubSpot utilizará por defecto la marca de tiempo de cuando se envían los datos de ocurrencia del evento. |
| `properties` | Objeto | Pares clave-valor de nombres y valores de propiedades que has configurado para el tipo de evento. Más información sobre las [propiedades del evento](/docs/apps/developer-platform/add-features/app-events/reference#event-properties). |
| `extraData` | Objeto | Información adicional que estará disponible para las [plantillas de representación de la cronología](/docs/apps/developer-platform/add-features/app-events/reference#rendering-templates). Debe estar en formato JSON válido. |
| `timelineIFrame` | Objeto | Cuando se incluya, la tarjeta de cronología incluirá un hipervínculo que permitirá a los usuarios abrir los contenidos enlazados en un iframe. Más información sobre [el uso de iframes](/docs/apps/developer-platform/add-features/app-events/reference#using-iframes). |
| `id` | Cadena | Un identificador único para la ocurrencia del evento. Debe ser único dentro del tipo de evento. Si no se proporciona, HubSpot generará un UUID aleatorio. Cuando varios eventos tengan el mismo ID, se aceptará el primero y se rechazarán todos los demás. |
## Asociación de registros del CRM
Cada suceso debe estar asociado a un registro del CRM, con el tipo de objeto del CRM definido por el esquema de tipo de evento. La API de eventos de la aplicación incluye múltiples campos para asociar los datos de ocurrencia de eventos con los registros del CRM. Para todos los objetos del CRM compatibles, se recomienda utilizar el campo `objectId`. Sin embargo, hay algunas situaciones en las que puede que quieras utilizar los otros campos.
* `utk`/`email`: si no conoces el ID del contacto, utiliza el campo `utk` y/o `email` para identificarlo. Proporcionar estos dos identificadores también te permite crear y actualizar contactos. Por ejemplo:
* Si `utk` coincide con un contacto existente pero `email` no coincide, HubSpot actualizará el contacto (mediante `utk`) con la nueva dirección de correo electrónico.
* Si no se proporciona `objectId`, el evento se asociará a un contacto existente que coincida con `utk`/`email`, o HubSpot creará un nuevo contacto si no se encuentra ninguna coincidencia.
* Ten en cuenta que `utk` por sí solo no puede crear nuevos contactos. Siempre debes incluir `email` con `utk` para garantizar una asociación adecuada.
* `domain`: para la asociación de empresas, debes proporcionar la dirección `objectId`, pero también puedes incluir `domain` para actualizar la propiedad `domain` de esa empresa.
A continuación se muestra el orden de prioridad de las propiedades de la asociación de registros del CRM, siendo el número más bajo el de mayor prioridad:
| Campo | Prioridad | Descripción |
| - | - | - |
| `objectId` | 1 | El ID del registro del CRM (recomendado). |
| `utk` | 2 | La ficha de usuario del contacto (solo contactos). |
| `email` | 3 | La dirección de correo electrónico del contacto (solo contactos). |
| `domain` | 4 | Dominio de la empresa (solo empresas). |
## Envío de datos adicionales
Además de enviar datos a las [propiedades de los eventos](/docs/apps/developer-platform/add-features/app-events/reference#event-properties) y [actualizar las propiedades de CRM a través de las ocurrencias de los eventos](/docs/apps/developer-platform/add-features/app-events/reference#property-stamping), puedes incluir datos adicionales para la [representación de la cronología](/docs/apps/developer-platform/add-features/app-events/reference#rendering-templates) a través del objeto `extraData`.
> [!WARNING]
>
> El objeto `extraData` solo puede contener JSON válido. Si el JSON está malformado, la ocurrencia será rechazada y recibirás una respuesta de error.
Se puede acceder a los valores del campo `extraData` del tipo de evento `detailTemplate` utilizando la sintaxis `{{extraData.fieldName}}`. Todos los niveles de atributo de `extraData` están disponibles a través de la notación por puntos, como `{{extraData.person1.preferredName}}`.
Por ejemplo, las plantillas siguientes utilizan los datos de las propiedades `customerName` y `loginLocation`, junto con el campo `surveyData` de `extraData` [enviado a través de la ocurrencia del evento](#event-occurrences).

**Datos de la ocurrencia de evento**
```json theme={null}
{
"eventTemplateId": "5488733",
"objectId": "769851",
"tokens": {
"customerName": "Tim",
"loginLocation": "mobileApp"
},
"extraData": {
"surveyData": [
{
"question": "How was your login experience?",
"answer": "Fine!"
},
{
"question": "How likely are you to recommend logging in to a co-worker?",
"answer": "Extremely likely"
}
]
}
}
```
**Configuración de la plantilla de cronología**
```json theme={null}
"headerTemplate": "{{customerName}} logged in via the {{loginLocation}}.",
"detailTemplate": "#### Post-login survey\n{{#each extraData.surveyData}}\n- **{{question}}**: {{answer}}\n{{/each}}",
```
# Resumen de Primeros pasos
Source: https://developers.hubspot.es/docs/apps/developer-platform/add-features/app-objects/overview
Aprende los primeros pasos para desarrollar en HubSpot.
'Aprende los primeros pasos para desarrollar en HubSpot.';
Tanto si eres un nuevo desarrollador de HubSpot como si quieres ampliar tus conocimientos, esta sección te guiará a través del proceso de puesta en marcha. Explorarás las distintas vías de desarrollo disponibles, así como las herramientas y cuentas específicas que necesitarás para alcanzar tus metas.
## Las ventajas de una plataforma conectada
Primero, es útil considerar qué hace de HubSpot una potente plataforma para desarrolladores.
La base de toda cuenta de HubSpot es la plataforma [CRM](/docs/guides/crm/understanding-the-crm) (Customer Relationship Management), una base de datos de relaciones y procesos de negocios. HubSpot ofrece diferentes vías para que desarrolladores y partners externos trabajen con el CRM y puedan crear valor agregado para los usuarios finales de HubSpot. Esto incluye:
* Crear integraciones y/o extensiones con las API de HubSpot para sincronizar datos entre HubSpot y plataformas externas.
* Construir sitios web personalizados utilizando el CMS (Sistema de gestión de contenido) de HubSpot. Además de un conjunto completo de herramientas de gestión de contenido, el CMS se integra totalmente con el CRM. Esto facilita el lanzamiento de campañas, la captación de leads y las comunicaciones continuas con los clientes.
* Personalización del CRM con extensiones de IU. Los desarrolladores pueden utilizar React para crear tarjetas personalizadas flexibles que se integran perfectamente con HubSpot.
En la siguiente sección, obtendrás un resumen de las herramientas que están disponibles para los desarrolladores de HubSpot. A continuación, elegirás una ruta para continuar tu viaje como desarrollador de HubSpot.
## 1. Instala herramientas que te ayuden a construir
Hay una amplia gama de herramientas disponibles para los desarrolladores de HubSpot. La combinación de herramientas que necesitarás dependerá de tus metas específicas.
* **CLI de HubSpot:** Instalar la CLI de HubSpot para el desarrollo local es un gran punto de partida para muchas tareas de desarrollo. La CLI se utiliza al crear extensiones de IU y recursos de CMS, y puede utilizarse para crear y gestionar secretos, tablas de HubDB y datos de objetos personalizados de tu cuenta. Necesitarás tener instalado [Node.js](https://nodejs.org/en/) (se requiere la versión 18 o superior, y se recomienda la versión LTS). Para instalar el CLI globalmente, ejecuta el siguiente comando:
```shell theme={null}
npm i -g @hubspot/cli
```
* **Visual Studio Code:** Instalar [Visual Studio Code](https://code.visualstudio.com/) significa que puedes aprovechar la extensión [Visual Studio Code de HubSpot](https://developers.hubspot.com/docs), lo cual te permite centralizar tu workflow de desarrollo.
* **Bibliotecas de clientes**: HubSpot proporciona bibliotecas de clientes para [Node](https://github.com/HubSpot/hubspot-api-nodejs), [PHP](https://github.com/HubSpot/hubspot-api-php), [Ruby](https://github.com/HubSpot/hubspot-api-ruby) y [Python](https://github.com/HubSpot/hubspot-api-python).
* **Postman:** utiliza [Postman](https://www.postman.com/) para acceder a [Colecciones de Postman de HubSpot](https://www.postman.com/hubspot). A lo largo de la documentación de la API de HubSpot, encontrarás botones para ejecutar llamadas utilizando la colección.

Más información sobre [herramientas para desarrolladores de de HubSpot](/docs/developer-tooling/overview).
## 2. Decide qué construir
No hay un camino único para desarrollar con HubSpot. Es una plataforma flexible que puede satisfacer una amplia gama de necesidades.
Una de las cuatro amplias categorías que se enumeran a continuación debería cubrir la mayoría de estas necesidades. Puedes elegir la que sea más relevante para ti en este momento para una breve introducción, junto con algunos pasos inmediatos para empezar. También puedes hacerte una idea de cuáles son las mejores herramientas para el trabajo, y si se requiere un [tipo específico de cuenta de HubSpot](/docs/getting-started/account-types).
* [Utilizar API y crear integraciones](https://developers.hubspot.com#use-apis-and-build-integrations)
* [Crear aplicaciones para el mercado](https://developers.hubspot.com#build-for-the-app-marketplace)
* [Personalizar la IU de HubSpot](https://developers.hubspot.com#customize-the-hubspot-ui)
* [Crear sitios web personalizados](https://developers.hubspot.com#build-custom-websites)
## 3. Únete a tus pares
Conecta con tus pares que ya están construyendo en HubSpot. Haz preguntas, comparte conocimientos, construye una comunidad e incluso puede que hagas amigos por el camino.
* [Slack para desarrolladores](https://developers.hubspot.com/community)
* [Foros de desarrolladores](https://community.hubspot.com/t5/HubSpot-Developers/ct-p/developers)
* [Developer Advocacy GitHub](https://github.com/hubspotdev)
## 4. Obtén más información, a tu manera
Una vez que estés en marcha, hay muchos recursos disponibles para ayudarte a profundizar. Puedes acceder a guías detalladas, documentos de referencia detallados o a los cursos de [HubSpot Academy](https://academy.hubspot.com/courses), según tu estilo de aprendizaje preferido.
# Comenzar a usar los objetos de la aplicación (BETA)
Source: https://developers.hubspot.es/docs/apps/developer-platform/add-features/app-objects/quickstart-guide-to-app-objects
Aprende a crear una nueva aplicación unificada de prueba de concepto (BETA).
> [!NOTE]
>
> Esta función requiere la aprobación de HubSpot para su uso. Si estás interesado en solicitar acceso a los objetos de la aplicación, o si quieres saber más sobre la funcionalidad, envía [este formulario de interés](https://developers.hubspot.com/docs/apps/developer-platform/add-features/app-objects/overview).
Aprende a crear una aplicación de prueba de concepto en la que configurarás un objeto de aplicación que podrás probar y utilizar en una cuenta de prueba de desarrollador.
**1. Instalar la última versión de la CLI de HubSpot**
Necesitarás la última versión beta de la [CLI de HubSpot](/docs/developer-tooling/local-development/hubspot-cli/reference) para crear una aplicación unificada. En una ventana de terminal, ejecuta el siguiente comando:
```shell theme={null}
npm install -g @hubspot/cli@next
```
La CLI debe ser de la versión `7.4.4-beta.0` o posterior. Puedes comprobar qué versión de la CLI tienes ejecutando `hs --version`.
**2. Autenticar tu cuenta de desarrollador**
A continuación, tendrás que autenticar tu cuenta de desarrollador ejecutando el siguiente comando:
```shell theme={null}
hs auth
```
* Sigue las indicaciones para generar una clave de acceso personal en tu cuenta, luego cópiala y pégala en la terminal para guardar tu configuración.
* Durante este período beta, se recomienda que hagas de esta cuenta tu cuenta predeterminada en la CLI. Esto evitará posibles errores con el acceso de la cuenta que has inscrito en la beta.
**3. Crear un nuevo proyecto estándar**
Ejecuta el siguiente comando en tu terminal para crear un nuevo proyecto y una aplicación de mercado con las funciones compatibles actualmente o un esquema de referencia de objetos de aplicación.
```shell theme={null}
hs project create --templateSource robrown-hubspot/hubspot-project-components-ua-app-objects-beta
```
**4. Configura el proyecto recién creado y súbelo a tu cuenta de desarrollador**
El marco de proyectos traslada las funciones de la aplicación que antes se configuraban en la interfaz de usuario o a través de la API a archivos de código fuente, normalmente definidos como archivos de configuración de `-hsmeta.json`.
A continuación, las funciones de la aplicación se crean utilizando una combinación de subcarpetas del directorio principal `/src/app` y otros archivos de configuración, según sea necesario. Para configurar tu proyecto:
* Agrega una o varias URL de redireccionamiento válidas al archivo `app-hsmeta.json` en función de la configuración de tu servidor OAuth local (u otro que no esté en producción).
> [!TIP]
>
> ### Nota:
>
> Para empezar, puedes utilizar el [ejemplo OAuth Node.js](http://github.com/hubspot/oauth-quickstart-nodejs) y ejecutarlo localmente. Ya está configurado para funcionar con `https://localhost:3000/oauth-callback` como la URL de redireccionamiento configurada en el código de ejemplo del comando `hs project create` que ejecutaste en el paso anterior.
* Cambia la propiedad `uid` de la aplicación en el archivo `app-hsmeta.json` y en los demás archivos de configuración `*-hsmeta.json` de tu proyecto.
> [!WARNING]
>
> Los UID se utilizan como identificador único para todos los componentes y características de tu proyecto. Una vez creados una función y un UID, cambiar o modificar el UID en implantaciones posteriores forzará a la plataforma a reconocerlo como diferente de las funciones anteriores, lo que puede no ser intencionado.
* Cuando utilices objetos de aplicación para tu aplicación unificada, solo se permitirán las definiciones de propiedad "nombre" autorizadas en función de tu solicitud de objeto. Como parte de esta beta privada, deberías haber recibido por separado la confirmación del "nombre" aprobado de tu aplicación, que debe utilizarse en la configuración de `*-object-hsmeta.json`. Como referencia, el nombre completo (FQN) de tu objeto de aplicación será `a_`. Por ejemplo, si tu `appId` es `16858319` y tu `name` propiedad era `CARS`, entonces tu FQN sería `a16858319_cars`.
* Una vez guardados los cambios, ejecuta el comando de CLI `hs project upload` para subir tu proyecto a la plataforma de desarrolladores de HubSpot y desencadenar automáticamente una nueva compilación.
* En una ventana del navegador, navega a `https://app.hubspot.com/developer_projects/` para visitar la interfaz de usuario del proyecto y confirmar que la aplicación y el proyecto se han creado, construido y desplegado correctamente.
**5. Agrega a tu aplicación el ID de cliente y el secreto de cliente de tu aplicación**
* Después de subir tu proyecto, tendrás que obtener los detalles de autenticación de tu aplicación para copiarlos en tu configuración de OAuth:
* Haz clic en **Proyectos** en el menú de navegación *Desarrollo*.
* Haz clic en el **nombre** de la aplicación.
* Haz clic en **UID** de tu aplicación y, a continuación, en la pestaña **Autenticación**.
* Copia el *ID de cliente* y el *secreto de cliente* de tu nueva aplicación y pégalos en las ubicaciones correspondientes de la configuración de tu servidor OAuth local, luego reinicia tu servidor OAuth.
**6. Configurar el esquema de objetos de la aplicación**
A continuación configurarás el esquema de objetos de tu aplicación:
* Agrega un nuevo objeto de la aplicación creando un directorio dentro del directorio `/src/app` y nómbralo `app-objects`. La ruta resultante al nuevo directorio debe ser `/src/app/app-objects`.
* Crea un nuevo archivo de configuración para representar el esquema de tu objeto, Debes utilizar el nombre del objeto concedido a tu aplicación durante el proceso de previsualización como prefijo para el nombre del archivo, seguido de `-object-hsmeta.json`. Por ejemplo, en la plantilla del proyecto de referencia, el nombre del objeto de la aplicación es "CAR", por lo que el archivo de configuración resultante se llama `car-object-hsmeta.json`.
* Consulta el archivo de referencia de [definición del componente del objeto de la aplicación](/docs/apps/developer-platform/add-features/app-objects/reference#app-schema) y personaliza los campos con los valores correspondientes a tu objeto de la aplicación.
* Dentro del objeto `config` de tu definición, el campo `name` debe coincidir con el nombre que se concedió a tu aplicación durante el proceso de revisión, formateado en `UPPER_SNAKE_CASE`.
* Ten en cuenta que una vez que las propiedades y los campos se han agregado al esquema del objeto de tu aplicación y se han subido a tu proyecto en el paso siguiente, no se pueden eliminar.
> [!TIP]
>
> ### Nota:
>
> Para mayor comodidad durante las pruebas, se puede utilizar el mismo nombre de objeto de aplicación en varias aplicaciones para apoyar tu ciclo de vida de desarrollo. Empieza con esta aplicación de prueba de concepto y, a medida que las migraciones estén disponibles, podrás utilizar el mismo nombre y las mismas definiciones de esquema en tus aplicaciones de desarrollo, ensayo y producción. Los UID de cada una de estas instancias deberán ser únicos.
* Cuando hayas terminado de editar la definición del esquema del objeto de tu aplicación y estés listo para confirmar los cambios, ejecuta los siguientes comandos para guardar los cambios:
```shell theme={null}
hs project upload
hs project deploy
```
* En una ventana del navegador, navega a `https://app.hubspot.com/developer_projects/` para visitar la interfaz de usuario del proyecto y confirmar que la aplicación y el proyecto se han creado, construido y desplegado correctamente.
**7. Actualizar la aplicación**
Ahora que has subido el esquema de objetos de tu aplicación, tendrás que actualizar los permisos definidos en tu archivo `app-hsmeta.json` para que reflejen los permisos creados en el paso anterior. Estos permisos deberían ser visibles en los registros de la CLI después de ejecutar `hs project upload`.
* Edita el archivo `app-hsmeta.json` y agrega los nuevos permisos a la matriz de `requiredScopes` dentro de la definición de `auth`. Por ejemplo, si tu `appId` fuera `a12345`, entonces editarías la definición de `auth` a lo siguiente:
```json theme={null}
"auth": {
"type" : "oauth",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": [
"crm.objects.contacts.read",
"crm.objects.contacts.write",
"crm.app.objects.a12345_my_app_object.view",
"crm.app.objects.a12345_my_app_object.create",
"crm.app.objects.a12345_my_app_object.edit",
"crm.app.schemas.a12345_my_app_object.read",
"crm.app.objects.a12345_my_app_object.merge",
"crm.app.objects.a12345_my_app_object.delete",
"crm.app.schemas.a12345_my_app_object.properties.write"
],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
```
> [!WARNING]
>
> ### Nota:
>
>
>
> Los clientes solo podrán ver el objeto de tu aplicación si el permiso `schemas.read`
> se incluye en la configuración de tu aplicación, y se solicita durante el flujo
> de instalación/autorización de OAuth. Es muy recomendable incluir
> todos los permisos de objetos de la aplicación en tu configuración, pero `schemas.read` es obligatorio para
> que los clientes puedan acceder a ella. Por ejemplo, para una `appId` de `12345`,
> incluirías `crm.app.schemas.a12345_MY_APP_OBJECT.read` como un permiso
> obligatorio.
>
>
>
> Dependiendo de la aplicación con la que estés probando (prototipo, desarrollo, preparación,
> producción), tendrás que tener en cuenta dónde agregas las definiciones
> de tu permiso. Aunque todavía no se puede implementar una aplicación de producción durante
> esta fase de la beta privada, suele ser más seguro incluir estos
> permisos como `conditionallyRequiredScopes` cuando estés listo para la producción.
> Más información sobre estos tipos de permisos en la [documentación de la aplicación pública
> ](/docs/apps/legacy-apps/public-apps/overview#scope-types).
>
>
* Cuando hayas terminado de agregar estos permisos y hayas guardado los cambios, ejecuta los siguientes comandos para confirmar los cambios en la plataforma:
```shell theme={null}
hs project upload
hs project deploy
```
Una vez completada la implementación, tu aplicación y el objeto de aplicación correspondiente ya están listos para probar con una cuenta instalada.
**8. Crear una cuenta de prueba de desarrollador (opcional) e instalar la aplicación**
Si aún no tienes una [cuenta de prueba](/docs/getting-started/account-types#developer-test-accounts), puedes crear una en HubSpot:
* Navega hasta **Cuentas de prueba** en el menú de navegación *Desarrollo* y haz clic en **Crear cuenta de prueba de desarrollador**. Sigue las indicaciones para crear tu nueva cuenta de prueba.
* En el menú de la barra lateral izquierda, navega hasta **Proyectos**, haz clic en el **nombre** de tu nuevo proyecto y haz clic en el **UID** de tu aplicación en la lista de componentes.
* En la pestaña *Autenticación* , copia el enlace de instalación de tu aplicación.
* Utiliza este enlace para instalar la aplicación en tu cuenta de prueba de desarrollador.
* Abre la cuenta de prueba y ve a la página de *Aplicaciones conectadas*, donde deberías ver tu aplicación instalada.
* En tu cuenta de prueba, navega hasta **CRM** > **Contactos**, y haz clic en el menú desplegable objeto del CRM y confirma que el objeto de tu aplicación está disponible.
* A continuación, puedes confirmar que tu definición del esquema se ajusta a tu archivo de configuración creando un nuevo registro de tu objeto de la aplicación.

**9. Acceso programático a datos mediante la API de objetos de HubSpot**
Ahora que has creado con éxito tu objeto de aplicación y lo has probado en una cuenta de prueba de desarrollador, puedes utilizar el token de acceso OAuth asociado a la cuenta de prueba instalada para realizar solicitudes de actualización de datos en la cuenta directamente a través de la API de objetos.
Lee la [API de objetos](/docs/guides/crm/using-object-apis) para obtener más información sobre la API, pero cualquier solicitud específica del objeto de tu aplicación seguirá las mismas convenciones que otros objetos estándar de HubSpot. Tendrás que utilizar la dirección `objectTypeId` o `fullyQualifiedName` de tu objeto de aplicación como parámetro de la ruta `objectType` en tu solicitud.
Por ejemplo, el siguiente bloque de código demuestra cómo hacer una petición a cURL para crear un nuevo registro del objeto de tu aplicación:
```shell theme={null}
curl --request POST \
--url https://api.hubapi.com/crm/v3/objects/ \
--header 'authorization: Bearer YOUR_ACCESS_TOKEN' \
--header 'content-type: application/json' \
--data '{
"properties": {
"additionalProp1": "string",
"additionalProp2": "string",
"additionalProp3": "string"
}
}'
```
Puedes encontrar el `objectTypeId` de tu objeto de aplicación navegando a la página del índice de registros:
* Navega a **CRM** > **Contactos** en la cuenta de prueba de desarrollador en la que instalaste tu aplicación.
* Haz clic en el menú **desplegable** de la parte superior de la página y selecciona tu **objeto de aplicación**.
* El `objectTypeId` aparecerá en la URL entre la parte `/objects//views`.
## Próximos pasos
Consulta la [documentación de referencia](/docs/apps/developer-platform/add-features/app-objects/reference) para saber cómo utilizar los objetos de aplicación con las distintas funciones de la plataforma de desarrollo:
* [Configurar una tarjeta de aplicación](/docs/apps/developer-platform/add-features/app-objects/reference#app-card-schema)
* [Configurar suscripciones de webhook](/docs/apps/developer-platform/add-features/app-objects/reference#webhooks-component-definition)
* [Habilitar asociaciones con otros tipos de objetos del CRM](/docs/apps/developer-platform/add-features/app-objects/reference#app-object-associations)
# Referencia de objetos de aplicación (BETA)
Source: https://developers.hubspot.es/docs/apps/developer-platform/add-features/app-objects/reference
Información de referencia para construir objetos de aplicación, incluyendo opciones de configuración para aplicaciones, objetos de aplicación y más.
> [!NOTE]
>
> Esta función requiere la aprobación de HubSpot para su uso. Si estás interesado en solicitar acceso a los objetos de la aplicación, o si quieres saber más sobre la funcionalidad, envía [este formulario de interés](/docs/apps/developer-platform/add-features/app-objects/overview).
Abajo encontrarás información de referencia sobre las características de las aplicaciones de la plataforma de desarrollo con objetos de aplicación, incluidas las definiciones de los archivos de configuración, los detalles de los permisos y mucho más.
## Estructura del proyecto
* Todos los componentes del proyecto deben estar dentro del directorio `src` especificado en el archivo de configuración `hsproject.json`.
* Todas las funciones y componentes de la aplicación deben estar en el directorio `app/`.
* Las asociaciones de objetos de la aplicación se definen en el directorio `app-object-associations/`.
* Las suscripciones a webhooks se definen en el directorio `webhooks/`.
* Las acciones de workflow personalizadas se definen en el directorio `workflow-actions/`.
* Todas las funciones de la tarjeta deben estar en el directorio `cards/`.
* Todas las instancias de componentes y características se declaran utilizando los archivos `*-hsmeta.json`. Debes anteponer al nombre del archivo algo significativo (por ejemplo, `my-app-hsmeta.json`). Estos archivos deben estar en el nivel raíz de sus respectivas carpetas (por ejemplo, `app/my-app-hsmeta.json`, `cards/my-card-hsmeta.json`).
El ejemplo de estructura de directorios que aparece abajo describe todas las funciones disponibles.
```shell theme={null}
my-folder/
├── hsproject.json
├──src
│ ├── app/
│ │ └── app-hsmeta.json/
│ │ └── app-objects/
│ │ └── my-app-object-hsmeta.json
│ │ └── app-object-associations/
│ │ └── my-app-object-association-hsmeta.json
│ │ └── webhooks/
│ │ └── webhooks-hsmeta.json
│ │ └── cards/
│ │ └── my-app-card-hsmeta.json
│ │ └── MyCard.jsx
└──
```
> **[Ver ejemplo en GitHub](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/tree/main/projects/app-object-getting-started-template)**
## Objetos de aplicación
Para crear un objeto de aplicación, incluye un directorio de componentes `app-objects` en el proyecto, junto con un archivo de configuración.
```shell theme={null}
...
├──src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── app-objects/
│ │ └── my-app-object-hsmeta.json
└──
```
Abajo se indican las opciones de configuración disponibles para `*-object-hsmeta.json`.
```json theme={null}
{
"uid": "car-app-object",
"type": "app-object",
"config": {
"name": "CAR",
"appPrefix": "Vroom",
"description": "An automobile in our warehouse.",
"singularForm": "Car",
"pluralForm": "Cars",
"primaryDisplayLabelPropertyName": "model",
"secondaryDisplayLabelPropertyNames": ["make"],
"settings": {
"hasRecordPage": true,
"allowsUserCreatedRecords": true,
"hasEngagements": true
},
"properties": [
{
"type": "string",
"fieldType": "text",
"name": "model",
"label": "Model",
"description": "The model of the car"
},
{
"type": "enumeration",
"fieldType": "select",
"name": "make",
"label": "Make",
"description": "The manufacturer of the car.",
"options": [
{
"label": "Ford",
"value": "ford",
"displayOrder": 0
},
{
"label": "Toyota",
"value": "toyota",
"displayOrder": 1
},
{
"label": "Chevrolet",
"value": "chevrolet",
"displayOrder": 2
}
]
}
]
}
}
```
> **[Ver ejemplo en GitHub](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/app-object-getting-started-template/src/app/app-objects/car-object-hsmeta.json)**
Los campos marcados con \* son obligatorios.
| Campo | Tipo | Descripción |
| - | - | - |
| `uid`\* | Cadena | Un identificador único para el objeto de la aplicación. Debe ser globalmente único dentro del proyecto. |
| `type`\* | Cadena | El tipo de componente. Debe coincidir con el nombre de la carpeta primaria (`app-object`). |
| `name`\* | Cadena | El nombre de tu objeto de aplicación. Utiliza el nombre aprobado que recibiste en la confirmación de tu aplicación aprobada. Debe ser en mayúscula y snake case (`MY_OBJECT_NAME`). |
| `appPrefix` | Cadena | Una cadena que precede al nombre singular o plural del objeto en la interfaz de HubSpot para ayudar a diferenciarlo de otros objetos. En este ejemplo, `appPrefix` de `Vroom` y `singularForm` de `Car` harían que en la interfaz de usuario apareciera "Vroom Car". |
| `description`\* | Cadena | la descripción del objeto, que se mostrará en HubSpot. |
| `singularForm`\* | Cadena | La forma singular del nombre del objeto. |
| `pluralForm`\* | Cadena | La forma plural del nombre del objeto. |
| `properties`\* | Matriz | Lista de propiedades del CRM definidas para el objeto. Las propiedades se definen utilizando los mismos campos que la [API de propiedades](/docs/api-reference/crm-properties-v3/guide). A las propiedades resultantes se les agregará automáticamente `a_` (por ejemplo, `a12345_make`) en el momento de la creación. No debes incluir el prefijo en el archivo de configuración. |
| `primaryDisplayLabelPropertyName`\* | Cadena | El nombre de la propiedad que debe utilizarse como [propiedad de visualización principal](https://knowledge.hubspot.com/object-settings/create-custom-objects#:~:text=object%27s%20singular%20name.-,Primary%20display%20property,-%3A%20the%20property%20used). El valor debe coincidir con el nombre proporcionado en la lista `properties` (es decir, no debe incluir el prefijo generado `a_`.) |
| `secondaryDisplayLabelPropertyNames`\* | Matriz | La lista de propiedades que deben utilizarse como [propiedades de visualización secundarias](https://knowledge.hubspot.com/object-settings/create-custom-objects#:~:text=Secondary%20properties%3A). El valor debe coincidir con el nombre proporcionado en la lista `properties` (es decir, no debe incluir el prefijo generado `a_`.) |
| `settings`\* | Objeto | Un objeto que contiene ajustes del objeto. |
| `hasRecordPage`\* | Booleano | Si existen páginas de registro para las instancias de este objeto de aplicación. Si se configura en `false`, la página de índice seguirá existiendo, pero no incluirá enlaces a páginas de registros individuales. |
| `allowsUserCreatedRecords`\* | Booleano | Si los usuarios finales podrán crear registros utilizando el objeto. Si se configura en `false`, los usuarios no podrán crear registros en HubSpot |
| `hasEngagements`\* | Booleano | Si el objeto de la aplicación registra actividades/interacciones de asistencia. Si se establece en `false`, las páginas de registro de objetos de la aplicación no incluirán ninguna funcionalidad de interacción, como la pestaña de actividad o los filtros de cronología relacionados con la actividad. |
> [!NOTE]
>
> El nombre completo (FQN) de tu objeto de aplicación será `a_`. Por ejemplo: si tu `appId` es `16858319` y el nombre del objeto de la aplicación es `CARS`, entonces el FQN sería `a16858319_CARS`. Utilizarás el FQN cuando establezcas valores de alcance para los objetos de tu aplicación.
## Esquema de la aplicación
Para crear un objeto de aplicación, incluye un archivo de configuración `app-hsmeta.json` en el directorio `app`.
```shell theme={null}
...
├──src
│ ├── app/
│ │ └── app-hsmeta.json/
└──
```
Abajo se indican las opciones de configuración disponibles para `app-hsmeta.json`.
> **Resumen de cambios**
>
> Ten en cuenta los siguientes cambios en los archivos de configuración de las tarjetas de aplicación:
>
> * Agregados los campos de nivel superior `uid`, `type` y `config`.
> * Eliminado el campo `extensions`.
> * Agregado el campo `distribution`.
```json theme={null}
{
"uid": "app_object_poc_app",
"type": "app",
"config": {
"description": "An example to demonstrate how to build an app with an app object on developer projects.",
"name": "my first app object app",
"distribution": "marketplace",
"auth": {
"type": "oauth",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": ["crm.objects.contacts.read", "crm.objects.contacts.write"],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
"permittedUrls": {
"fetch": ["https://api.hubapi.com"],
"iframe": [],
"img": []
},
"support": {
"supportEmail": "support@example.com",
"documentationUrl": "https://example.com/docs",
"supportUrl": "https://example.com/support",
"supportPhone": "+18005555555"
}
}
}
```
> **[Ver ejemplo en GitHub](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/app-object-getting-started-template/src/app/app-hsmeta.json)**
### Esquema de la aplicación \*-hsmeta.json campos
Los campos marcados con \* son obligatorios
| Campo | Tipo | Descripción |
| - | - | - |
| `uid`\* | Cadena | Un identificador único interno para la aplicación. Debe ser globalmente único dentro del proyecto. Puede ser cualquier cadena de hasta 64 caracteres. Los caracteres pueden ser mayúsculas o minúsculas, y pueden incluir números, guiones bajos (`_`), guiones (`-`) y puntos (`.`). |
| `type`\* | Cadena | El tipo de componente. Debe coincidir con el nombre de la carpeta primaria (`app`). |
| `description`\* | Cadena | Descripción de lo que hace la aplicación para el usuario que la instala. Puede ser cualquier cadena de hasta 8192 caracteres. |
| `name`\* | Cadena | El nombre de la aplicación, que se mostrará en HubSpot. Puede ser cualquier cadena de hasta 200 caracteres. No debe empezar ni terminar con un carácter de espacio en blanco. |
| `distribution`\* | Cadena | El método de distribución de la aplicación. Debe estar configurado en `marketplace` para que la aplicación pueda aparecer en el mercado de aplicaciones. |
| `auth`\* | Objeto | Un objeto que contiene los detalles del método de autenticación de la aplicación. Consulta la [tabla de autenticación](#auth-fields) para más detalles. |
| `permittedUrls` | Objeto | Una matriz que contiene las URL a las que la aplicación puede llamar. Las URL deben utilizar el esquema HTTPS y deben contener una [autoridad](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL#authority), seguida de un prefijo de ruta opcional si es necesario. |
| `supportEmail` | Cadena | Una dirección de correo electrónico válida con la que los usuarios puedan ponerse en contacto para recibir asistencia. |
| `documentationUrl` | Cadena | La URL externa a la que los usuarios pueden navegar para obtener documentación de apoyo. Debe utilizar HTTPS. |
| `supportUrl` | Cadena | La URL externa a la que los usuarios pueden navegar para obtener asistencia adicional. Debe utilizar HTTPS. |
| `supportPhone` | Cadena | El número de teléfono al que pueden dirigirse los usuarios para solicitar asistencia. Debe empezar por el signo más (`+`). |
### campos de autenticación
Los campos marcados con \* son obligatorios.
| Campo | Tipo | Descripción |
| - | - | - |
| `type`\* | Cadena | El tipo de autenticación. Debe estar configurado como `oauth` para que la aplicación utilice la autenticación con OAuth. |
| `redirectUrls`\* | Matriz | Lista de URL a las que el proceso de OAuth puede redirigir. Cada aplicación debe tener al menos una URL de redireccionamiento de autenticación, y debe utilizar HTTPS. La única excepción es que se permite `http://localhost` para las pruebas. |
| `requiredScopes`\* | Matriz | Una lista de los permisos necesarios para tu aplicación. Cada aplicación debe incluir al menos un permiso, y el usuario que la instala debe conceder estos permisos para que la aplicación se instale correctamente. [Más información sobre los permisos a continuación](#scopes). |
| `optionalScopes` | Matriz | Una lista de los permisos opcionales de tu aplicación. Estos permisos pueden excluirse de la autorización durante la instalación si la cuenta o el usuario que instala la aplicación no tiene los permisos adecuados. En ese caso, el permiso no se incluirá en el token de actualización o de acceso resultante. [Más información sobre los permisos abajo](#scopes). |
| `conditionallyRequiredScopes` | Matriz | Lista de permisos que solo son necesarios cuando se incluyen en el parámetro de consulta `scope` de la URL de instalación. [Más información sobre los permisos abajo](#scopes). |
### Permisos
En el campo `auth` del archivo de configuración de una aplicación, puedes especificar tres [tipos de permisos](/docs/apps/legacy-apps/public-apps/overview#scope-types): permisos requeridos, permisos requeridos condicionalmente y permisos opcionales. Para esta etapa de la beta, solo debes incluir los permisos de los objetos de tu aplicación como `conditionallyRequiredScopes`. Esto te permitirá aislar tus nuevas funciones para clientes específicos incluyendo los permisos de los objetos de la aplicación en la URL de instalación.
Los permisos de los objetos de la aplicación utilizan el siguiente formato:
`crm.app.schemas..read`
Por ejemplo, para un objeto de aplicación con el FQN `a16858319_cars`, el permiso `read` sería:
`crm.app.schemas.a16858319_cars.read`.
Como mínimo, tu aplicación debe incluir el permiso `read` de arriba para que los clientes puedan acceder al objeto. Se recomienda incluir todos los permisos de objetos de aplicación en tu aplicación, como se muestra abajo.
```json theme={null}
"auth": {
"type" : "oauth",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": [
"crm.objects.contacts.read",
"crm.objects.contacts.write",
"crm.app.objects.a12345_MY_APP_OBJECT.view",
"crm.app.objects.a12345_MY_APP_OBJECT.create",
"crm.app.objects.a12345_MY_APP_OBJECT.edit",
"crm.app.schemas.a12345_MY_APP_OBJECT.read",
"crm.app.objects.a12345_MY_APP_OBJECT.merge",
"crm.app.objects.a12345_MY_APP_OBJECT.delete",
"crm.app.schemas.a12345_MY_APP_OBJECT.properties.write"
],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
```
Para obtener una lista completa de los permisos disponibles, consulta la [referencia de permisos](/docs/apps/legacy-apps/authentication/scopes).
## Definición del componente de webhooks
Para definir un conjunto de suscripciones a webhook para tu aplicación, incluye un directorio `webhooks` en el proyecto, junto con un archivo de configuración `*-hsmeta.json`.
```shell theme={null}
├──src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── webhooks/
│ │ └── webhooks-hsmeta.json
└──
```
Abajo se indican las opciones de configuración disponibles para el archivo `*-hsmeta.json`.
```json theme={null}
{
"uid": "webhooks",
"type": "webhooks",
"config": {
"settings": {
"targetUrl": "https://example.com/webhook",
"maxConcurrentRequests": 10
},
"subscriptions": {
"crmObjects": [
{
"subscriptionType": "object.creation",
"objectType": "contact",
"active": true
},
{
"subscriptionType": "object.propertyChange",
"objectType": "car_app_object",
"propertyName": "carProperty",
"active": true
}
],
"legacyCrmObjects": [
{
"subscriptionType": "contact.propertyChange",
"propertyName": "lastname",
"active": true
},
{
"subscriptionType": "contact.deletion",
"active": true
}
],
"hubEvents": [
{
"subscriptionType": "contact.privacyDeletion",
"active": true
}
]
}
}
}
```
### Webhook \*-hsmeta.json campos
Los campos marcados con \* son obligatorios.
| Campo | Tipo | Descripción |
| - | - | - |
| `uid`\* | Cadena | Un identificador único interno para el componente webhook. |
| `type`\* | Cadena | El tipo de componente, que en este caso debe ser `webhooks`. |
| `settings`\* | Objeto | Un objeto que especifica dos campos: `targetUrl`, que es la URL disponible públicamente para que HubSpot llame a donde se entregarán las cargas de eventos, y `maxConcurrentRequests`, que es el límite de peticiones HTTP que HubSpot realizará en un período determinado. |
| `subscriptions`\* | Objeto | Un objeto que especifica los tipos de suscripción a los que se suscribirá tu aplicación. |
| `crmObjects` | Matriz | Matriz que contiene definiciones de suscripción a eventos. Esta es la matriz estándar que hay que incluir, y debe utilizarse para todos los eventos en el nuevo formato (`object.*`). En cambio, los tipos de suscripción webhook clásicos deben incluirse en las matrices `legacyCrmObjects` y `hubEvents`, dependiendo del evento. |
| `legacyCrmObjects` | Matriz | Matriz que contiene tipos de suscripción clásicos, como `contact.creation` y `deal.deletion`. |
| `hubEvents` | Matriz | Matriz que contiene los tipos de suscripción clásicos `contact.privacyDeletion` y `conversation.*` |
Para cada objeto `subscription`, se pueden especificar los siguientes campos, en función del tipo de definición de suscripción al que estés suscrito (es decir, `crmObjects`, `legacyCrmObjects` o `hubEvents`) o de si estás suscrito a un cambio de propiedad específico (por ejemplo, `contact.propertyChange`).
| Campo | Tipo | Descripción |
| - | - | - |
| `subscriptionType` | Cadena | El tipo de evento al que se está suscrito. |
| `objectType` | Cadena | Para las suscripciones especificadas en la matriz `crmObjects`, especifica el objeto del CRM al que se está suscribiendo tu aplicación. Para suscribirte a los cambios de un objeto de aplicación, incluye el nombre de tu objeto de aplicación para este campo (por ejemplo, `car_app_object`). |
| `propertyName` | Cadena | Para las suscripciones de cambio de propiedad, especifica qué propiedad desencadenará el evento de webhook. |
| `active` | Booleano | Si se desencadenarán eventos de webhook para esta suscripción. |
## Esquema de la tarjeta de la aplicación
Para crear una tarjeta de aplicación que aparezca en una página de registro de objetos de aplicación, incluye un directorio de componentes `cards` en el proyecto, junto con un archivo de configuración.
```shell theme={null}
├──src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── cards/
│ │ └── my-app-card-hsmeta.json
│ │ └── MyCard.jsx
└──
```
* Asegúrate de que has ejecutado `hs project upload` después de crear tu componente de objeto de aplicación y los archivos de configuración asociados.
* En tu archivo `my-app-card-hsmeta.json`, agrega el UID del objeto de tu aplicación a la matriz `objectTypes` (por ejemplo, `"app_object_uid"` en este ejemplo). Cada uno de los campos disponibles en el archivo `.json` se detalla en la [tabla](#app-card-*-hsmeta.json-fields) siguiente.
> **Resumen de cambios**
>
> Ten en cuenta los siguientes cambios en los archivos de configuración de las tarjetas de aplicación:
>
> * Agregados los campos de nivel superior `uid`, `type` y `config`.
> * El campo `module` ha pasado a llamarse `entrypoint`.
> * El campo `title` ha pasado a llamarse `name`.
> * El campo `objectTypes` se ha simplificado para aceptar una matriz de cadenas.
```json theme={null}
{
"uid": "my-app-card",
"type": "card",
"config": {
"name": "My app card",
"description": "An example description of the card, which lives on contact records.",
"previewImage": {
"file": "./preview.png",
"altText": "A short description of the preview image"
},
"entrypoint": "/app/cards/MyCard.jsx",
"location": "crm.record.tab",
"objectTypes": ["contacts", "app_object_uid"]
}
}
```
* Cuando hayas guardado los cambios en tu archivo `example-card-hsmeta.json`, ejecuta `hs project upload`.
Las tarjetas se agregan automáticamente a la vista predeterminada de los objetos de la aplicación. Si la tarjeta no aparece automáticamente, aprende a [agregar tarjetas a los registros de CRM](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/create-an-app-card#view-the-card-in-hubspot).
> **[Ver ejemplo en GitHub](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/app-object-getting-started-template/src/app/app-hsmeta.json)**
### Tarjeta de aplicación \*-hsmeta.json campos
Los campos marcados con \* son obligatorios.
| Campo | Tipo | Descripción |
| - | - | - |
| `uid`\* | Cadena | El identificador único de la tarjeta. Puede ser cualquier cadena, pero debe identificar significativamente a la tarjeta. HubSpot identificará la tarjeta por este ID para que puedas cambiar el título de la tarjeta sin eliminar datos históricos o de estado, como la posición en el registro del CRM. |
| `type` | Cadena | El tipo de componente, que en este caso debe ser `card`. |
| `config` | Objeto | Un objeto que contiene detalles de configuración. |
| `name`\* | Cadena | El título de la tarjeta, tal y como se muestra en la interfaz de usuario de HubSpot. |
| `description` | Cadena | Descripción de la tarjeta. |
| `previewImage` | Objeto | Objeto que contiene los campos `file` y `altText`. El campo `file` es la ruta relativa a la imagen de previsualización. Las extensiones de archivo válidas son png, jpeg, jpg o gif. El tamaño máximo del archivo es de 5.0 MB. El campo `altText` es una breve descripción de la imagen. |
| `entrypoint`\* | Cadena | La ruta del archivo del código React del front-end de la tarjeta. |
| `location`\* | `crm.record.tab` \| `crm.record.sidebar` \| `helpdesk.sidebar` | Dónde aparece la tarjeta en la interfaz de usuario de HubSpot. Más información sobre [la ubicación de la extensión](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/reference#extension-location). |
| `objectTypes`\* | Matriz | Los tipos de registros del CRM en los que aparecerá la tarjeta. |
## Asociaciones de objetos de la aplicación
Para habilitar las asociaciones entre el objeto de tu aplicación y otros objetos del CRM, incluye un directorio de componentes `app-object-associations` en el proyecto, junto con un archivo de configuración.
```shell theme={null}
├── src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── app-object-associations/
│ │ └── my-app-object-association-hsmeta.json
└──
```
Abajo se indican las opciones de configuración del objeto de la aplicación disponibles (`*-association-hsmeta.json`).
```json theme={null}
{
"uid": "car_to_contact_association",
"type": "app-object-association",
"config": {
"firstObjectType": "car-app-object",
"secondObjectType": "CONTACT"
}
}
```
### Asociación \*-asociación-hsmeta.json campos
Los campos marcados con \* son obligatorios.
| Campo | Tipo | Descripción |
| - | - | - |
| `uid`\* | Cadena | Un identificador único interno para la aplicación. Debe ser globalmente único dentro del proyecto. |
| `type`\* | Cadena | El tipo de componente. Debe coincidir con el nombre de la carpeta primaria (`app-object-association`). |
| `config`\* | Objeto | Objeto que contiene la configuración de la asociación de objetos. |
| `firstObjectType`\* | Cadena | El primer objeto de la asociación. Puede ser un objeto de aplicación o un objeto del CRM de HubSpot. Se hace referencia a los objetos de la aplicación por su `uid` especificado en su archivo fuente. Los objetos estándar se denominan por su `fullyQualifiedName`. La asociación resultante será bidireccional, por lo que el orden de los valores de estos campos es arbitrario. |
| `secondObjectType`\* | Cadena | El segundo objeto de la asociación. Consulta `firstObjectType` para más detalles. |
# Configurar suscripciones a webhooks (BETA)
Source: https://developers.hubspot.es/docs/apps/developer-platform/add-features/configure-webhooks
Encuentra más información sobre cómo definir suscripciones a webhooks en la última versión de la plataforma para desarrolladores (BETA).
Para definir un conjunto de suscripciones a webhooks para una aplicación en la nueva plataforma para desarrolladores, incluye el directorio `webhooks` en el proyecto, junto con un archivo de configuración `*-hsmeta.json`.
## Estructura del directorio
```shell theme={null}
├──src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── webhooks/
│ │ └── webhooks-hsmeta.json
└──
```
## Configuración del webhook
A continuación, están las opciones de configuración disponibles para el archivo `*-hsmeta.json`.
```json theme={null}
{
"uid": "webhooks",
"type": "webhooks",
"config": {
"settings": {
"targetUrl": "https://example.com/webhook",
"maxConcurrentRequests": 10
},
"subscriptions": {
"crmObjects": [
{
"subscriptionType": "object.creation",
"objectType": "contact",
"active": true
}
],
"legacyCrmObjects": [
{
"subscriptionType": "contact.propertyChange",
"propertyName": "lastname",
"active": true
},
{
"subscriptionType": "contact.deletion",
"active": true
}
],
"hubEvents": [
{
"subscriptionType": "contact.privacyDeletion",
"active": true
}
]
}
}
}
```
Los campos marcados con \* son obligatorios.
| Campo | Tipo | Descripción |
| - | - | - |
| `uid`\* | Cadena | Un identificador único interno para el componente del webhook. |
| `type`\* | Cadena | El tipo de componente, que en este caso debe ser `webhooks`. |
| `settings`\* | Objeto | Un objeto que especifica dos campos: `targetUrl`, que es la URL disponible públicamente para que HubSpot llame a donde se entregarán los datos de eventos, y `maxConcurrentRequests`, que es el umbral superior de peticiones HTTP que HubSpot realizará en un período de tiempo determinado. |
| `subscriptions`\* | Objeto | Un objeto que especifica los tipos de suscripción a los que se suscribirá la aplicación. |
| `crmObjects` | Matriz | Matriz que contiene definiciones de suscripción a eventos. Esta es la matriz estándar que hay que incluir, y debe utilizarse para todos los eventos en el [nuevo formato](/docs/apps/legacy-apps/public-apps/create-generic-webhook-subscriptions) (`object.*`). Por otra parte, los [tipos de suscripción a webhook anteriores](/docs/api-reference/webhooks-webhooks-v3/guide#webhook-subscriptions) deben incluirse en las matrices `legacyCrmObjects` y `hubEvents`, dependiendo del evento. |
| `legacyCrmObjects` | Matriz | Matriz que contiene los [tipos de suscripción anteriores](/docs/api-reference/webhooks-webhooks-v3/guide#webhook-subscriptions), como `contact.creation` y `deal.deletion`. |
| `hubEvents` | Matriz | Una matriz que contiene los tipos de suscripción anteriores `contact.privacyDeletion` y `conversation.*` |
Para cada objeto `subscription`, se pueden especificar los siguientes campos, dependiendo del tipo de definición de suscripción al que estés suscrito (es decir, `crmObjects`, `legacyCrmObjects` o `hubEvents`) o de si estás suscrito a un cambio de propiedad específico (por ejemplo, `contact.propertyChange`).
| Campo | Tipo | Descripción |
| - | - | - |
| `subscriptionType` | Cadena | El tipo de evento al que se está suscrito. |
| `objectType` | Cadena | Para las suscripciones especificadas en la matriz `crmObjects`, especifica el objeto del CRM al que se está suscribiendo tu aplicación. |
| `propertyName` | Cadena | Para las suscripciones de cambio de propiedad, especifica qué propiedad desencadenará el evento del webhook. |
| `active` | Booleano | Si se desencadenarán eventos webhook para esta suscripción. |
# Definir una acción de workflow personalizada (BETA)
Source: https://developers.hubspot.es/docs/apps/developer-platform/add-features/custom-workflow-actions
Aprende a definir una acción de workflow personalizada en la última versión de la plataforma de desarrolladores (BETA).
Para definir una [acción de workflow personalizada](/docs/api-reference/automation-actions-v4-v4/guide) para una aplicación en la nueva plataforma de desarrolladores, incluye un directorio `workflow-actions` en el proyecto, junto con un archivo de configuración `*-hsmeta.json`.
## Estructura del directorio del proyecto
```shell theme={null}
├──src
│ ├── app/
│ │ └── app-hsmeta.json
│ │ └── ...
│ │ └── workflow-actions/
│ │ └── custom-action-hsmeta.json
└──
```
## Definición de acciones de workflow personalizadas
Abajo se indican las opciones de configuración disponibles para el archivo `*-hsmeta.json`.
```json theme={null}
{
"uid": "simple_notification_action",
"type": "workflow-action",
"config": {
"actionUrl": "https://example.com",
"isPublished": false,
"supportedClients": [
{
"client": "WORKFLOWS"
}
],
"inputFields": [
{
"typeDefinition": {
"name": "message",
"type": "string",
"fieldType": "textarea"
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
},
{
"typeDefinition": {
"name": "priority",
"type": "enumeration",
"fieldType": "select",
"options": [
{
"value": "high",
"label": "High Priority"
},
{
"value": "normal",
"label": "Normal Priority"
},
{
"value": "low",
"label": "Low Priority"
}
]
},
"supportedValueTypes": ["STATIC_VALUE"],
"isRequired": true
}
],
"labels": {
"en": {
"actionName": "My Custom Action (via Projects V2)",
"actionDescription": "Sends a notification with custom message and priority level",
"actionCardContent": "Send {{priority}} priority notification",
"inputFieldLabels": {
"message": "Notification Message",
"priority": "Priority Level"
},
"inputFieldDescriptions": {
"message": "Enter the message to be sent in the notification",
"priority": "Select the priority level for this notification"
}
}
},
"objectTypes": ["CONTACT"]
}
}
```
Los campos marcados con \* son obligatorios.
| Campo | Tipo | Descripción |
| - | - | - |
| `uid`\* | Cadena | Un identificador único interno para la acción de workflow. |
| `type`\* | Cadena | El tipo de componente, que en este caso debe ser `workflow-action`. |
| `actionUrl`\* | Cadena | La URL del webhook de la API para entregar una solicitud de ejecución de workflow. |
| `isPublished` | Booleano | Determina si la definición es visible en las cuentas que instalaron tu aplicación. Por defecto, está configurado como `false`. |
| `supportedClients`\* | Matriz de objetos | Especifica los clientes a los que da asistencia la acción de workflow personalizada. Cada objeto de la matriz debe tener una clave de cliente con un valor de cadena que indique el tipo de cliente (por ejemplo, `WORKFLOWS`). |
| `inputFields` | Matriz | Los valores de las entradas que ha rellenado el usuario. |
| `typeDefinition.name` | Cadena | El nombre o clave del campo de entrada. |
| `typeDefinition.type` | Cadena | El tipo de valor que debe esperar el campo de entrada. |
| `typeDefinition.fieldType` | Cadena | El tipo de campo que aparece a los usuarios que crean el workflow. |
| `typeDefinition.options` | Matriz | Para los tipos de enumeración, este campo proporciona una lista de opciones. Cada opción debe tener un `value`, basado en la entrada que proporciona el usuario, y un `label`, que identifica la opción en la herramienta workflows. |
| `inputFieldDependencies` | Matriz | Una lista de reglas que definen las relaciones entre dos o más entradas, basándose en su `dependencyType`. Más información en [este ejemplo ](/docs/api-reference/automation-actions-v4-v4/guide#example-%233). |
| `labels.`\* | Cadena | Clave de configuración regional que se asigna a la definición de configuración regional. Como mínimo, debe definirse una etiqueta en inglés (`en`) y su definición. |
| `labels..inputFieldDescriptions` | Objeto | Un objeto que define los detalles de las entradas de tu acción. En el ejemplo de arriba, este objeto incluye los campos `message` y `priority`. |
| `labels..inputFieldOptionLabels` | Objeto | Un objeto necesario si tus campos de entrada tienen opciones. Proporciona un mapa de las etiquetas de las opciones de los campos de entrada, codificadas por el valor o la etiqueta de la opción. |
| `labels..outputFieldLabels` | Objeto | Objeto que asigna las definiciones de `outputFields` a las etiquetas correspondientes que aparecen en la herramienta de workflows. |
| `labels..actionName`\* | Cadena | El nombre de la acción tal y como se muestra en el panel *Elegir una acción* del editor de workflows. |
| `labels..appDisplayName`\* | Cadena | El nombre de la sección del panel *Elegir una acción* donde aparecen todas las acciones de la aplicación. Si se define `appDisplayName` para varias acciones, se utilizará la primera que se encuentre. |
| `labels..actionCardContent` | Cadena | Una descripción resumida que aparece en la ficha de la acción. |
| `labels..executionRules` | Objeto | Un objeto que asigna las definiciones de tus `executionRules` a los mensajes que aparecerán para los resultados de la ejecución en el historial del workflow. |
| `objectTypes` | Matriz | Los tipos de objetos del CRM disponibles con los que se puede utilizar esta acción. Si está vacía, la acción estará disponible para todos los tipos de objetos. |
| `outputFields` | Matriz | Los valores que emitirá la acción y que pueden ser utilizados por acciones posteriores del workflow. Una acción personalizada puede tener 0, 1 o muchas salidas. |
| `executionRules` | Objeto | Una lista de definiciones que puedes especificar para mostrar los errores de tu servicio al usuario que crea el workflow. |
# Configurar SCIM para tu aplicación (BETA)
Source: https://developers.hubspot.es/docs/apps/developer-platform/add-features/scim
# Configuración de la aplicación (BETA)
Source: https://developers.hubspot.es/docs/apps/developer-platform/build-apps/app-configuration
Información de referencia para las opciones de configuración de las aplicaciones creadas en la nueva plataforma para desarrolladores (BETA)
Abajo encontrarás información de referencia sobre las funciones de las aplicaciones de la plataforma para desarrolladores, incluidas las definiciones de los archivos de configuración, los detalles de los permisos y mucho más.
## Estructura del proyecto
* Todos los componentes del proyecto deben estar dentro del directorio `src` especificado en el archivo de configuración de nivel superior `hsproject.json`.
* Todas las funciones y componentes de la aplicación deben estar en el directorio `src/app/`. Dentro de este directorio `app/`, definirás subdirectorios para cada función que quieras que admita tu aplicación:
* Los eventos de la aplicación se configuran en `app-events/`.
* Los objetos de la aplicación se definen en `app-objects/`.
* Todas las características de la tarjeta se definen en `cards/`.
* Las funciones de la página de configuración se definen en `settings/`.
* La telemetría se configura en `telemetry/`.
* Las suscripciones de webhooks se definen en `webhooks/`.
* Las acciones de workflow personalizadas se definen en `workflow-actions/`.
* Dentro de cada subdirectorio de características, configurarás la característica mediante un archivo `*-hsmeta.json`. Puedes anteponer al nombre del archivo algo significativo para tu aplicación (por ejemplo, `my-app-hsmeta.json`), siempre que el archivo termine en `-hsmeta.json`. Estos archivos deben estar en el nivel base de sus respectivas carpetas (por ejemplo, `app/my-app-hsmeta.json`, `cards/my-card-hsmeta.json`).
El ejemplo de estructura de directorios que aparece abajo describe todas las funciones disponibles. Los detalles para configurar el archivo `app-hsmeta.json` del esquema de la aplicación de nivel superior se proporcionan en la [sección sobre el esquema de la aplicación](#app-schema) que aparece abajo. Cuando estés listo para agregar funciones a la aplicación, consulta la sección [agregar funciones a la aplicación](#adding-app-features).
```shell theme={null}
my-project-folder/
└── hsproject.json
└── src
└── app/
└── app-hsmeta.json/
└── app-events/
└── my-event-type-hsmeta.json
└── cards/
└── MyCard.jsx
└── my-app-card-hsmeta.json
└── package.json
└── settings/
└── Settings.tsx
└── settings-hsmeta.json
└── package.json
└── telemetry/
└── telemetry-hsmeta.json
└── webhooks/
└── webhooks-hsmeta.json
└── workflow-actions/
└── custom-action-hsmeta.json
```
> **[Ver ejemplo en GitHub](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/tree/main/projects/app-object-getting-started-template)**
La extensión de HubSpot Visual Studio Code proporciona [comprobación de tipos](/docs/developer-tooling/local-development/vs-code-extension#validate-hs-meta-json-config-files) para cada una de las propiedades de tus archivos de configuración `*-hsmeta.json`.
## Especificar UID
El campo `uid` es un identificador único interno para tu aplicación específica, y también debe ser único globalmente dentro del proyecto. Cada una de las [funciones de la aplicación](#adding-app-features) tendrá su propio `uid` definido en sus respectivos archivos `*-hsmeta.json`, que deben ser distintos del `uid` de nivel superior que elijas en el archivo `app-hsmeta.json` de tu aplicación.
## Esquema de la aplicación
La configuración de nivel superior de tu aplicación se especifica en un archivo de configuración `app-hsmeta.json` en el directorio `app`.
```shell theme={null}
my-project-folder/
└── src
└── app/
└── app-hsmeta.json/
```
Abajo se indican las opciones de configuración disponibles para `app-hsmeta.json`.
```json theme={null}
{
"uid": "new_developer_platform_app",
"type": "app",
"config": {
"description": "An example to demonstrate how to build an app with developer projects.",
"name": "my first app",
"distribution": "marketplace",
"auth": {
"type": "oauth",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": ["crm.objects.contacts.read", "crm.objects.contacts.write"],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
"permittedUrls": {
"fetch": ["https://api.hubapi.com"],
"iframe": [],
"img": []
},
"support": {
"supportEmail": "support@example.com",
"documentationUrl": "https://example.com/docs",
"supportUrl": "https://example.com/support",
"supportPhone": "+18005555555"
}
}
}
```
> **[Ver ejemplo en GitHub](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/app-object-getting-started-template/src/app/app-hsmeta.json)**
Cada una de las opciones de configuración se detalla en la tabla de abajo. En las secciones que hay debajo de la tabla se proporciona más contexto sobre la [distribución de tu aplicación](#distribution), la configuración de la [autenticación](#authentication) y la especificación de los [permisos](#scopes).
Los campos marcados con \* son obligatorios.
| Campo | Tipo | Descripción |
| - | - | - |
| `uid`\* | Cadena | Un identificador único interno para la aplicación. Debe ser globalmente único dentro del proyecto. Puede ser cualquier cadena de hasta 64 caracteres. Los caracteres pueden ser mayúsculas o minúsculas, y pueden incluir números, guiones bajos (`_`), guiones (`-`) y puntos (`.`). |
| `type`\* | Cadena | El tipo de componente. Debe coincidir con el nombre de la carpeta primaria (`app`). |
| `description`\* | Cadena | Descripción de lo que hace la aplicación para el usuario que la instala. Puede ser cualquier cadena de hasta 8192 caracteres. |
| `name`\* | Cadena | El nombre de la aplicación, que se mostrará en HubSpot. Puede ser cualquier cadena de hasta 200 caracteres. No debe empezar ni terminar con un carácter de espacio en blanco. |
| `distribution`\* | Cadena | El método de distribución de la aplicación, que puede establecerse como uno de los siguientes:
`marketplace`: se utiliza si quieres que la aplicación sea apta para aparecer en el mercado de aplicaciones de HubSpot.
`private`: se utiliza si solo quieres instalar tu aplicación en un conjunto específico de cuentas permitidas, o en una sola cuenta a la vez.
Más información en la sección de [distribución](#distribution). |
| `auth`\* | Objeto | Un objeto que contiene los detalles del método de autenticación de la aplicación. Para más detalles, consulta la [sección de autenticación](#authentication). |
| `permittedUrls` | Objeto | Una matriz que contiene las URL a las que la aplicación puede llamar. Las URL deben utilizar el esquema HTTPS y deben contener una [autoridad](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL#authority), seguida de un prefijo de ruta opcional si es necesario. |
| `supportEmail` | Cadena | Una dirección de correo electrónico válida con la que los usuarios puedan ponerse en contacto para recibir asistencia. |
| `documentationUrl` | Cadena | La URL externa a la que los usuarios pueden navegar para obtener documentación de apoyo. Debe utilizar HTTPS. |
| `supportUrl` | Cadena | La URL externa a la que los usuarios pueden navegar para obtener asistencia adicional. Debe utilizar HTTPS. |
| `supportPhone` | Cadena | El número de teléfono al que pueden dirigirse los usuarios para solicitar asistencia. Debe empezar por el signo más (`+`). |
### Distribución
El campo `distribution` del esquema de tu aplicación te permite configurar cómo quieres distribuir tu aplicación:
* Si piensas publicar tu aplicación en el [mercado de aplicaciones de HubSpot](https://ecosystem.hubspot.com/marketplace/apps), establece el campo `distribution` en `"marketplace"`. Puedes encontrar un esquema de aplicación de ejemplo para esta opción [aquí](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/public-app-getting-started-template/src/app/app-hsmeta.json). Si eliges esta opción, asegúrate de establecer el `type` dentro de la propiedad `auth` en `oauth`, tal y como se detalla en la sección de [autenticación](#authentication) más adelante.
* Si quieres permitir que tu aplicación se instale en un conjunto específico de cuentas permitidas, o si quieres restringir la instalación a una sola cuenta cada vez, configura `distribution` en `"private"`. Asegúrate de configurar el `type` dentro de la propiedad `auth` en consecuencia:
* Si quieres instalar tu aplicación en varias cuentas basándote en [una lista de permisos que configures en los ajustes de tu proyecto](/docs/apps/developer-platform/build-apps/manage-apps-in-hubspot#manage-authentication-for-your-app), establece la autenticación `type` en `oauth`. Consulta el esquema de aplicación de ejemplo para [esta opción](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/private-app-oauth-getting-started-template/src/app/app-hsmeta.json).
* Para restringir la instalación a una sola cuenta, ya sea la misma que utilizas para el desarrollo u otra cuenta a la que tenga acceso el usuario instalador, establece la autenticación `type` en `static`. Puedes encontrar un esquema de aplicación de ejemplo para la [autenticación estática](https://github.com/robrown-hubspot/hubspot-project-components-ua-app-objects-beta/blob/main/projects/private-app-static-getting-started-template/src/app/app-hsmeta.json).
### Autenticación
La autenticación de tu aplicación se configura mediante la propiedad `auth` del esquema de tu aplicación. Puedes especificar los permisos de tu aplicación, las URL de redireccionamiento y el tipo de autenticación.
Los campos marcados con \* son obligatorios.
| Campo | Tipo | Descripción |
| - | - | - |
| `type`\* | Cadena | El tipo de autenticación, que puede establecerse en una de las siguientes opciones:
`oauth`: permitir la instalación mediante OAuth, ya sea a un conjunto específico de cuentas permitidas o incluyéndola en el mercado de aplicaciones de HubSpot.
`static`: restringir la instalación de tu aplicación a una única cuenta a la que tenga acceso el usuario que la instale.
|
| `redirectUrls`\* | Matriz | Una lista de URL a las que el proceso OAuth puede redirigir. Cada aplicación debe tener al menos una URL de redireccionamiento de autenticación, y debe utilizar HTTPS. La única excepción es que se permite `http://localhost` para las pruebas. |
| `requiredScopes`\* | Matriz | Una lista de los permisos necesarios para tu aplicación. Cada aplicación debe incluir al menos un permiso, y el usuario que la instala debe conceder estos permisos para que la aplicación se instale correctamente. [Más información sobre los permisos a continuación](#scopes). |
| `optionalScopes` | Matriz | Una lista de los permisos opcionales de tu aplicación. Estos permisos pueden excluirse de la autorización durante la instalación si la cuenta o el usuario que instala la aplicación no tiene los permisos adecuados. En ese caso, el permiso no se incluirá en el token de actualización ni en el token de acceso resultantes. [Más información sobre los permisos abajo](#scopes). |
| `conditionallyRequiredScopes` | Matriz | Lista de permisos que solo son necesarios cuando se incluyen en el parámetro de consulta `scope` de la URL de instalación. [Más información sobre los permisos a continuación](#scopes). |
### Permisos
En el campo `auth` del archivo de configuración de una aplicación, puedes especificar tres [tipos de permisos](/docs/apps/legacy-apps/public-apps/overview#scope-types): permisos requeridos, permisos requeridos condicionalmente y permisos opcionales.
Como mínimo, tu aplicación debe incluir el permiso `read` para que los clientes puedan acceder al tipo de objeto del CRM asociado.
```json theme={null}
"auth": {
"type" : "oauth",
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": [
"crm.objects.contacts.read",
"crm.objects.contacts.write"
],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
```
Para obtener una lista completa de los permisos disponibles, consulta la [referencia de permisos](/docs/apps/legacy-apps/authentication/scopes).
## Agregando funciones a la aplicación
Para configurar las funciones de la aplicación, como las suscripciones de webhooks, las acciones de workflow personalizadas y las tarjetas de la aplicación, consulta las guías de abajo para saber cómo agregar los archivos `*-hsmeta.json` asociados a tu proyecto:
* [Crear una tarjeta de aplicación](/docs/apps/developer-platform/add-features/ui-extensibility/app-cards/create-an-app-card)
* [Definir eventos de aplicación](/docs/apps/developer-platform/add-features/app-events/overview)
* [Crear objetos de aplicación](/docs/apps/developer-platform/add-features/app-objects/quickstart-guide-to-app-objects)
* [Crear un componente de configuración](/docs/apps/developer-platform/add-features/ui-extensibility/create-a-settings-component)
* [Configurar una acción de workflow personalizada](/docs/apps/developer-platform/add-features/custom-workflow-actions)
* [Configurar una suscripción de webhook](/docs/apps/developer-platform/add-features/configure-webhooks)
* [Agregar telemetría](/docs/apps/developer-platform/add-features/add-telemetry)
# Cómo usar OAuth | Guía rápida de inicio de OAuth
Source: https://developers.hubspot.es/docs/apps/developer-platform/build-apps/authentication/oauth/oauth-quickstart-guide
Aprende a configurar OAuth para tu aplicación utilizando esta guía rápida y una aplicación Node.js de ejemplo.
'Aprende a configurar OAuth para tu aplicación utilizando esta guía rápida y una aplicación Node.js de ejemplo.';
## Antes de comenzar
Antes de comenzar a usar OAuth con HubSpot, necesitarás:
* [Una cuenta de desarrollador](https://app.hubspot.com/signup-hubspot/crm?intent=developer)
* [Una aplicación](/docs/apps/legacy-apps/public-apps/overview) asociada con tu cuenta de desarrollador
* Una cuenta de HubSpot para instalar tu aplicación (puedes usar una cuenta existente o [crear una cuenta de prueba](/docs/getting-started/account-types))
Debes ser un [superadministrador](https://knowledge.hubspot.com/es/user-management/hubspot-user-permissions-guide#super-admin) para instalar una aplicación en una cuenta de HubSpot.
### Cómo funciona
HubSpot admite el [tipo de autorización con código en OAuth 2.0](https://developer.okta.com/blog/2018/04/10/oauth-authorization-code-grant-type), que puede dividirse en cuatro pasos básicos:
1. Tu aplicación abre una ventana del navegador para enviar al usuario al servidor de HubSpot OAuth 2.0
2. El usuario revisa los permisos solicitados y otorga el acceso a la aplicación
3. El usuario es redirigido a la aplicación con un código de autorización en la cadena de consulta
4. La aplicación envía una solicitud al servidor de OAuth 2.0 para intercambiar el código de autorización por un token de acceso
### En esta guía:
* [Aplicación de inicio rápido](#quickstart-app): Es una aplicación de demostración en Node.js que se autentica con el servidor OAuth 2.0 de HubSpot
* [Obtener tokens de OAuth 2.0](#getting-oauth-tokens): Cómo autorizar tu aplicación con los usuarios
* [Usar los tokens de OAuth 2.0](#using-oauth-tokens): Cómo realizar consultas con un token
* [Actualización de tokens de OAuth 2.0](#refreshing-oauth-tokens): Cómo usar el token de actualización proporcionado por HubSpot
Todos los ejemplos de código de esta guía están escritos en JavaScript (Node.js)
## Aplicación de inicio rápido
Si es la primera vez que usas la autenticación OAuth con las API de HubSpot, te recomendamos que consultes la [Aplicación de inicio rápido de OAuth 2.0](https://github.com/HubSpot/oauth-quickstart-nodejs), escrita en Node.js. Esta aplicación está diseñada para que puedas comenzar a usar OAuth 2.0 lo más rápido posible mediante la demostración de todos los pasos que se detallan a continuación en la sección [Obtener tokens de OAuth 2.0](#getting-oauth-tokens).

[Obtener la aplicación de inicio rápido](https://github.com/HubSpot/oauth-quickstart-nodejs)
## Obtener tokens de OAuth 2.0
### 1. Crea la URL de autorización y dirige al usuario al servidor OAuth 2.0 de HubSpot
Al enviar un usuario al servidor OAuth 2.0 de HubSpot, el primer paso es crear la URL de autorización. Esto identificará tu aplicación y definirá los recursos (los permisos) a los que solicita acceso en nombre del usuario. Los parámetros de consulta que puedes pasar como parte de una URL de autorización se muestran a continuación. Para obtener información más detallada sobre este paso, lee el [documento de referencia](/docs/apps/legacy-apps/authentication/working-with-oauth).
Los campos marcados con \* son
obligatorios.
| Parámetro | Descripción | Ejemplo |
| - | - | - |
| `client_id`\* | El ID del cliente identifica tu aplicación. Encuéntralo en la página de configuración de tu aplicación. | `7fff1e36-2d40-4ae1-bbb1-5266d59564fb` |
| `scope`\* | Los [permisos](/docs/apps/legacy-apps/authentication/scopes#list-of-available-scopes) que tu aplicación solicita, separados por espacios codificados de URL (`%20`). | `oauth%20crm.objects.contacts.read` |
| `redirect_uri`\* | La URL a la que el usuario será redirigido después de autorizar a tu aplicación para los permisos solicitados. **Para aplicaciones en producción, se requiere `https`.** | `https://www.example.com/auth-callback` |
| `optional_scope` | Los permisos que son opcionales para tu aplicación y se eliminarán si el portal de HubSpot seleccionado no tiene acceso a esos productos | `automation` |
| `state` | Un valor de cadena que se puede usar para mantener el estado del usuario cuando se redirecciona de regreso a tu aplicación. | `WeHH_yy2irpl8UYAvv-my` |
Una vez que hayas creado tu URL, envía al usuario a OAuth 2.0 para iniciar el proceso.
Los bloques de código que aparecen a continuación ofrecen ejemplos de utilización de distintos tipos de redireccionamiento:
**Usando una redirección del lado del servidor:**
```js theme={null}
// Build the auth URL
const authUrl =
"https://app.hubspot.com/oauth/authorize" +
`?client_id=${encodeURIComponent(CLIENT_ID)}` +
`&scope=${encodeURIComponent(SCOPES)}` +
`&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
`&state=${encodeURIComponent(STATE)}`;
// Redirect the user
return res.redirect(authUrl);
```
**Usando un enlace HTML:**
```html theme={null}
Install
```
**Codificación de un estado adicional de redirección del usuario**
Algunas aplicaciones pueden necesitar redirigir al usuario a diferentes ubicaciones. Por ejemplo, es posible que una aplicación desee redirigir a los usuarios a diferentes subdominios de su integración (por ejemplo, `userA.integration.com` y `userB.integration.com`). Para ello, utiliza el parámetro `state` para codificar más información sobre el estado del usuario:
1\. Genera y almacena un valor "nonce" para el parámetro de estado.
2\. Almacena el estado del usuario en un almacén de datos local utilizando el "nonce" como su clave.
3\. Incluye el valor "nonce" como el parámetro de estado en la URL de autorización.
4\. Cuando el usuario se autentica y es redirigido a tu URL de redirección, valida el parámetro de estado y úsalo como la clave para recuperar el estado de usuario que estaba almacenado.
5\. Desde allí, redirige al usuario según sea necesario (por ejemplo, redirige de nuevo a una URL específica del usuario).
### 2. HubSpot solicita al usuario su consentimiento
HubSpot muestra una ventana de consentimiento al usuario que muestra el nombre de tu aplicación y una breve descripción de los servicios de la API de HubSpot a los que solicita permiso para acceder. El usuario puede otorgar acceso a tu aplicación.

**Nota:** El usuario que instala la aplicación debe tener acceso a todos los permisos solicitados. Si no tienen el acceso requerido, la instalación fallará y serán dirigidos a una página de error. Si un usuario ve esta página de error de permisos, necesitará que un superadministrador instale la aplicación.
Tu aplicación no hace nada en esta etapa. Una vez que se otorga el acceso, el servidor de OAuth 2.0 de HubSpot enviará una solicitud a la URI de devolución de llamada definida en la URL de autorización.
### 3. Manejar la respuesta del servidor OAuth
Cuando el usuario haya completado la solicitud de consentimiento del paso 2, el servidor OAuth 2.0 envía una solicitud `GET` al URI de redireccionamiento especificado en tu URL de autenticación. Si no hay problemas y el usuario aprueba la solicitud de acceso, la solicitud al URI de redireccionamiento se devolverá con un parámetro de consulta de `code` adjunto. Si el usuario no otorga el acceso, no se enviará ninguna solicitud.
**Ejemplo:**
```js theme={null}
app.get("/oauth-callback", async (req, res) => {
if (req.query.code) {
// Handle the received code
}
});
```
### 4. Intercambiar el código de autorización por tokens
Después de que tu aplicación reciba un código de autorización del servidor OAuth 2.0, puede intercambiar ese código por un token de acceso y actualización al enviar una solicitud `POST` codificada en formato de formulario URL a `https://api.hubapi.com/oauth/v1/token` con los valores que se muestran a continuación. Para obtener información más detallada sobre este paso, puedes leer este [documento de referencia](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth).
| Parámetro | Descripción | Ejemplo |
| - | - | - |
| `grant_type` | Debe ser `authorization_code` | `authorization_code` |
| `client_id` | ID de cliente de tu aplicación | `7fff1e36-2d40-4ae1-bbb1-5266d59564fb` |
| `client_secret` | La clave de cliente de tu aplicación | `7c3ce02c-0f0c-4c9f-9700-92440c9bdf2d` |
| `redirect_uri` | El URI de redireccionamiento desde el momento en que el usuario autorizó tu aplicación | `https://www.example.com/auth-callback` |
| `code` | El código de autorización recibido del servidor OAuth 2.0 | `5771f587-2fe7-40e8-8784-042fb4bc2c31` |
**Ejemplo:**
```js theme={null}
const formData = {
grant_type: 'authorization_code',
client_id: CLIENT_ID,
client_secret: CLIENT_SECRET,
redirect_uri: REDIRECT_URI,
code: req.query.code
};
request.post('https://api.hubapi.com/oauth/v1/token', { form: formData }, (err, data) => {
// Handle the returned tokens
}
```
El cuerpo de la respuesta del token serán datos JSON con la estructura:
```json theme={null}
{
"refresh_token": "6f18f21e-a743-4509-b7fd-1a5e632fffa1",
"access_token": "CN2zlYnmLBICAQIYgZXFLyCWp1Yoy_9GMhkAgddk-zDc-H_rOad1X2s6Qv3fmG1spSY0Og0ACgJBAAADAIADAAABQhkAgddk-03q2qdkwdXbYWCoB9g3LA97OJ9I",
"expires_in": 1800
}
```
El token de acceso vencerá después de la cantidad de segundos indicada en el campo `expires_in` de la respuesta, actualmente, 30 minutos. Para más detalles sobre cómo obtener un nuevo token de acceso, consulta la sección [Actualizar tokens OAuth](#refreshing-oauth-tokens) más abajo.
## Uso de tokens de OAuth 2.0
Una vez que se complete el proceso de autorización, tu aplicación está autorizada para realizar solicitudes en nombre del usuario. Para ello, proporciona el token como token de portador en el encabezado HTTP `Authorization`. Los detalles específicos se pueden encontrar en el [documento de referencia](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth).
**Ejemplo:**
```js theme={null}
request.get(
"https://api.hubapi.com/contacts/v1/lists/all/contacts/all?count=1",
{
headers: {
Authorization: `Bearer ${ACCESS_TOKEN}`,
"Content-Type": "application/json",
},
},
(err, data) => {
// Handle the API response
}
);
```
Los tokens de acceso reflejan los permisos solicitados desde la aplicación y no reflejan los permisos o limitaciones de lo que un usuario puede hacer en su cuenta de HubSpot. Por ejemplo, si un usuario tiene permisos para ver solo los contactos de su propiedad, pero autoriza una solicitud para el permiso `crm.objects.contacts.read`, el token de acceso resultante puede ver todos los contactos de la cuenta y no solo los que son propiedad del usuario que autoriza.
## Actualización de tokens de OAuth 2.0
Los tokens de acceso de OAuth caducan periódicamente. Así se limita el acceso de los atacantes a un corto plazo si se produce una vulneración. La vida útil del token en segundos se especifica en el campo `expires_in` cuando se intercambia un código de autorización por un token de acceso.
Tu aplicación puede intercambiar el token de actualización recibido por un nuevo token de acceso enviando una solicitud `POST` codificada en formato de formulario URL a `https://api.hubapi.com/oauth/v1/token` con los siguientes valores. Para obtener información más detallada sobre este paso, consulta el [documento de referencia](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth).
| Parámetro | Descripción | Ejemplo |
| - | - | - |
| `grant_type` | Debe ser `refresh_token` | `refresh_token` |
| `client_id` | ID de cliente de tu aplicación | `7fff1e36-2d40-4ae1-bbb1-5266d59564fb` |
| `client_secret` | La clave de cliente de tu aplicación | `7c3ce02c-0f0c-4c9f-9700-92440c9bdf2d` |
| `redirect_uri` | El URI de redireccionamiento desde el momento en que el usuario autorizó tu aplicación | `https://www.example.com/auth-callback` |
| `refresh_token` | El token de actualización recibido cuando el usuario autorizó a tu aplicación | `b9443019-30fe-4df1-a67e-3d75cbd0f726` |
**Ejemplo:**
```js theme={null}
const formData = {
grant_type: 'refresh_token',
client_id: CLIENT_ID,
client_secret: CLIENT_SECRET,
redirect_uri: REDIRECT_URI,
refresh_token: REFRESH_TOKEN
};
request.post('https://api.hubapi.com/oauth/v1/token', { form: formData }, (err, data) => {
// Handle the returned tokens
}
```
El cuerpo de la respuesta del token serán datos JSON con la estructura:
```json theme={null}
{
"refresh_token": "6f18f21e-a743-4509-b7fd-1a5e632fffa1",
"access_token": "CN2zlYnmLBICAQIYgZXFLyCWp1Yoy_9GMhkAgddk-zDc-H_rOad1X2s6Qv3fmG1spSY0Og0ACgJBAAADAIADAAABQhkAgddk-03q2qdkwdXbYWCoB9g3LA97OJ9I",
"expires_in": 1800
}
```
El nuevo token de acceso puede usarse para hacer llamadas en nombre del usuario. Cuando el nuevo token caduque, puedes seguir los mismos pasos nuevamente para generar uno nuevo.
## Artículos relacionados
[Métodos de autenticación en HubSpot](/docs/apps/developer-platform/build-apps/authentication/overview)
[Cómo usar OAuth](/docs/apps/legacy-apps/authentication/working-with-oauth)
[Administrar tokens](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth)
# Usar OAuth
Source: https://developers.hubspot.es/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth
OAuth es un método seguro de autenticación para tu aplicación. Utiliza tokens de autorización en lugar de una contraseña para conectar tu aplicación a una cuenta de usuario.
'OAuth es un método seguro de autenticación para tu aplicación. Utiliza tokens de autorización en lugar de una contraseña para conectar tu aplicación a una cuenta de usuario. ';
OAuth es un método seguro de autenticación que usa tokens de autorización en lugar de una contraseña para conectar tu aplicación a una cuenta de usuario. Iniciar el acceso de OAuth es el primer paso para permitir a los usuarios [instalar tu aplicación](/docs/apps/legacy-apps/public-apps/overview#install-an-app) en sus cuentas de HubSpot.
* Cualquier aplicación diseñada para ser instalada por varias cuentas de HubSpot o que se anuncie en el mercado de aplicaciones debe usar OAuth.
* Los usuarios que instalen aplicaciones en su cuenta de HubSpot deben ser [superadministradores](https://knowledge.hubspot.com/es/user-management/hubspot-user-permissions-guide#super-admin) o tener permisos de [acceso al mercado de aplicaciones](https://knowledge.hubspot.com/es/user-management/hubspot-user-permissions-guide#settings).
## Recursos recomendados
* La [guía de inicio de OAuth](/docs/apps/legacy-apps/authentication/oauth-quickstart-guide) te ayudará a comenzar con una aplicación de ejemplo.
* Este [tutorial de HubSpot Academy](https://app.hubspot.com/l/academy/tracks/71/593/2967) ofrece una introducción rápida en el uso de OAuth con HubSpot, incluyendo un desglose del flujo de HubSpot a OAuth y cómo actualizar un token de acceso.
## Configurar la autenticación OAuth
Para configurar la autenticación OAuth para tu aplicación:
* En primer lugar, [crea una aplicación](/docs/apps/legacy-apps/public-apps/overview) en una [cuenta de desarrollador de HubSpot](/docs/getting-started/account-types#developer-accounts). Después de crear la aplicación, podrás encontrar el ID de cliente de la aplicación y el secreto del cliente en la página de *autenticación* de la configuración de tu aplicación.

* Usa el ID de cliente y el secreto del cliente, junto con los [parámetros de consulta](#query-parameters) y los [permisos](#scopes) que se describen a continuación, para crear la URL de autorización.
* Envía a los usuarios que deseen instalar la aplicación la URL de autorización, donde tendrán una pantalla que les permitirá seleccionar su cuenta y acceder a la integración. Puedes establecer que la URL de autorización sea para una cuenta de HubSpot específica agregando el ID de cuenta entre `/oauth/` y `/authorize`, como se muestra a continuación. Después de permitir el acceso, se redireccionarán a tu aplicación mediante una `redirect_url`, que tendrá un parámetro adjunto de consulta de código. Usarás ese código y el secreto del cliente para obtener un [access\_token y refresh\_token](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth) de HubSpot.
* **Ejemplos de URL de autorización**
* **Cualquier cuenta:** `https://app.hubspot.com/oauth/authorize?client_id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&scope=contacts%20automation&redirect_uri=https://www.example.com/`
* **Cuenta específica (ID 123456):** `https://app.hubspot.com/oauth/123456/authorize?client_id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&scope=contacts%20automation&redirect_uri=https://www.example.com/`
* **Ejemplo de URL de redireccionamiento:** `https://example.com/?code=xxxx`
* **Ejemplo de error:** `https://www.example.com/?error=error_code&error_description=Human%20readable%20description%20of%20the%20error`
* Usa el `access_token` para autenticar las llamadas a la API realizadas a esa cuenta de HubSpot.
* Una vez que expire el `access_token`, usa el `refresh_token` para generar un nuevo `access_token`.
- La aplicación no aparecerá como *Aplicación conectada* en la cuenta de un usuario a menos que generes el token de actualización y el token de acceso inicial.
- Los tokens de acceso reflejan los permisos solicitados desde la aplicación y no reflejan los permisos o limitaciones de lo que un usuario puede hacer en su cuenta de HubSpot. Por ejemplo, si un usuario tiene permisos para ver solo los contactos de su propiedad, pero autoriza una solicitud para el permiso `crm.objects.contacts.read`, el token de acceso resultante puede ver todos los contactos de la cuenta y no solo los que son propiedad del usuario que autoriza.
## Parámetros de consulta
Los siguientes parámetros de solicitud son obligatorios al crear una URL de autorización para tu aplicación:
| **Parámetro** | **Descripción** | **Cómo se usa** |
| - | - | - |
| `client_id` | Un ID que sirve como identificador único para tu aplicación. | Obténlo desde la página de configuración de autorización o "Auth" de tu aplicación (como se ha descrito anteriormente). |
| `redirect_uri` | La URL a la que serán redireccionados los visitantes al recibir acceso a la aplicación. | También designarás esto en la página de configuración de autenticación de tu aplicación. **Nota:** Por razones de seguridad, esta URL debe utilizar `https` en producción. (Si realizas la prueba con `localhost`, puedes utilizar `http`.) También debes usar un dominio, ya que las direcciones IP no son compatibles. |
| `scope` | Un conjunto de permisos separados por espacios a los que tu aplicación necesita acceder. | Todos los permisos que hayas marcado en la configuración de *Autenticación* de la aplicación se tratarán como obligatorios, por lo que deberás incluirlos en este parámetro. De lo contrario, la página de autorización mostrará un error. Además, los usuarios recibirán un error si intentan instalar tu aplicación en una cuenta que no tiene acceso a un permiso incluido. Ve la [documentación de referencia de permisos](/docs/apps/legacy-apps/authentication/scopes#list-of-available-scopes) para conocer más detalles sobre los endpoints que pueden tener permisos específicos. |
Los siguientes parámetros son opcionales:
| **Parámetro** | **Cómo usar** | **Descripción** |
| - | - | - |
| `optional_scope` | Un conjunto separado por espacios de permisos opcionales para tu aplicación. | Los permisos opcionales se eliminarán automáticamente de la solicitud de autorización si el usuario selecciona una cuenta de HubSpot que no tiene acceso a esa herramienta (por ejemplo, autorizar el acceso a ***Content Hub** Enterprise* en una cuenta gratuita de HubSpot). Si estás usando permisos opcionales, deberás verificar el token de acceso o el token de actualización para ver cuáles se otorgaron. Consulta la [documentación de referencia sobre permisos](/docs/apps/legacy-apps/authentication/scopes) para obtener más detalles. |
| `state` | Si este parámetro está incluido en la URL de autorización, el valor se incluirá en un parámetro de consulta de estado cuando el usuario sea dirigido a `redirect_uri`. | Un valor de cadena que se puede usar para mantener el estado del usuario cuando se redirecciona de regreso a la aplicación. |
## Configurar permisos
OAuth requiere que configures permisos o alcances, para tu aplicación. Cada permiso proporciona acceso a un conjunto de endpoints de la API de HubSpot y permite a los usuarios otorgar a la aplicación acceso a herramientas específicas en su cuenta de HubSpot.

El acceso a las API o endpoints específicos depende del nivel de la cuenta de HubSpot. Si tu aplicación puede funcionar con varios tipos de cuentas de HubSpot, puedes usar el parámetro `optional_scope` para incluir los permisos con los que trabajas. De esta manera, los clientes que usan las cuentas gratuitas de HubSpot aún pueden autorizar la aplicación, incluso si no pueden acceder a todos los permisos. La aplicación debe verificar y manejar cualquier permiso para el que no esté autorizada.
La lista completa de permisos está disponible [aquí](/docs/apps/legacy-apps/authentication/scopes).
## Documentos relacionados
[Métodos de autenticación en HubSpot](/docs/apps/developer-platform/build-apps/authentication/overview)
[Guía de inicio de OAuth](/docs/apps/legacy-apps/authentication/oauth-quickstart-guide)
[Gestión de tokens](/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth)
# Resumen de Primeros pasos
Source: https://developers.hubspot.es/docs/apps/developer-platform/build-apps/authentication/overview
Aprende los primeros pasos para desarrollar en HubSpot.
'Aprende los primeros pasos para desarrollar en HubSpot.';
Tanto si eres un nuevo desarrollador de HubSpot como si quieres ampliar tus conocimientos, esta sección te guiará a través del proceso de puesta en marcha. Explorarás las distintas vías de desarrollo disponibles, así como las herramientas y cuentas específicas que necesitarás para alcanzar tus metas.
## Las ventajas de una plataforma conectada
Primero, es útil considerar qué hace de HubSpot una potente plataforma para desarrolladores.
La base de toda cuenta de HubSpot es la plataforma [CRM](/docs/guides/crm/understanding-the-crm) (Customer Relationship Management), una base de datos de relaciones y procesos de negocios. HubSpot ofrece diferentes vías para que desarrolladores y partners externos trabajen con el CRM y puedan crear valor agregado para los usuarios finales de HubSpot. Esto incluye:
* Crear integraciones y/o extensiones con las API de HubSpot para sincronizar datos entre HubSpot y plataformas externas.
* Construir sitios web personalizados utilizando el CMS (Sistema de gestión de contenido) de HubSpot. Además de un conjunto completo de herramientas de gestión de contenido, el CMS se integra totalmente con el CRM. Esto facilita el lanzamiento de campañas, la captación de leads y las comunicaciones continuas con los clientes.
* Personalización del CRM con extensiones de IU. Los desarrolladores pueden utilizar React para crear tarjetas personalizadas flexibles que se integran perfectamente con HubSpot.
En la siguiente sección, obtendrás un resumen de las herramientas que están disponibles para los desarrolladores de HubSpot. A continuación, elegirás una ruta para continuar tu viaje como desarrollador de HubSpot.
## 1. Instala herramientas que te ayuden a construir
Hay una amplia gama de herramientas disponibles para los desarrolladores de HubSpot. La combinación de herramientas que necesitarás dependerá de tus metas específicas.
* **CLI de HubSpot:** Instalar la CLI de HubSpot para el desarrollo local es un gran punto de partida para muchas tareas de desarrollo. La CLI se utiliza al crear extensiones de IU y recursos de CMS, y puede utilizarse para crear y gestionar secretos, tablas de HubDB y datos de objetos personalizados de tu cuenta. Necesitarás tener instalado [Node.js](https://nodejs.org/en/) (se requiere la versión 18 o superior, y se recomienda la versión LTS). Para instalar el CLI globalmente, ejecuta el siguiente comando:
```shell theme={null}
npm i -g @hubspot/cli
```
* **Visual Studio Code:** Instalar [Visual Studio Code](https://code.visualstudio.com/) significa que puedes aprovechar la extensión [Visual Studio Code de HubSpot](https://developers.hubspot.com/docs), lo cual te permite centralizar tu workflow de desarrollo.
* **Bibliotecas de clientes**: HubSpot proporciona bibliotecas de clientes para [Node](https://github.com/HubSpot/hubspot-api-nodejs), [PHP](https://github.com/HubSpot/hubspot-api-php), [Ruby](https://github.com/HubSpot/hubspot-api-ruby) y [Python](https://github.com/HubSpot/hubspot-api-python).
* **Postman:** utiliza [Postman](https://www.postman.com/) para acceder a [Colecciones de Postman de HubSpot](https://www.postman.com/hubspot). A lo largo de la documentación de la API de HubSpot, encontrarás botones para ejecutar llamadas utilizando la colección.

Más información sobre [herramientas para desarrolladores de de HubSpot](/docs/developer-tooling/overview).
## 2. Decide qué construir
No hay un camino único para desarrollar con HubSpot. Es una plataforma flexible que puede satisfacer una amplia gama de necesidades.
Una de las cuatro amplias categorías que se enumeran a continuación debería cubrir la mayoría de estas necesidades. Puedes elegir la que sea más relevante para ti en este momento para una breve introducción, junto con algunos pasos inmediatos para empezar. También puedes hacerte una idea de cuáles son las mejores herramientas para el trabajo, y si se requiere un [tipo específico de cuenta de HubSpot](/docs/getting-started/account-types).
* [Utilizar API y crear integraciones](https://developers.hubspot.com#use-apis-and-build-integrations)
* [Crear aplicaciones para el mercado](https://developers.hubspot.com#build-for-the-app-marketplace)
* [Personalizar la IU de HubSpot](https://developers.hubspot.com#customize-the-hubspot-ui)
* [Crear sitios web personalizados](https://developers.hubspot.com#build-custom-websites)
## 3. Únete a tus pares
Conecta con tus pares que ya están construyendo en HubSpot. Haz preguntas, comparte conocimientos, construye una comunidad e incluso puede que hagas amigos por el camino.
* [Slack para desarrolladores](https://developers.hubspot.com/community)
* [Foros de desarrolladores](https://community.hubspot.com/t5/HubSpot-Developers/ct-p/developers)
* [Developer Advocacy GitHub](https://github.com/hubspotdev)
## 4. Obtén más información, a tu manera
Una vez que estés en marcha, hay muchos recursos disponibles para ayudarte a profundizar. Puedes acceder a guías detalladas, documentos de referencia detallados o a los cursos de [HubSpot Academy](https://academy.hubspot.com/courses), según tu estilo de aprendizaje preferido.
# Validando solicitudes
Source: https://developers.hubspot.es/docs/apps/developer-platform/build-apps/authentication/request-validation
# Permisos
Source: https://developers.hubspot.es/docs/apps/developer-platform/build-apps/authentication/scopes
# Crear una nueva aplicación utilizando la CLI (BETA)
Source: https://developers.hubspot.es/docs/apps/developer-platform/build-apps/create-an-app
# Gestionar aplicaciones en HubSpot (BETA)
Source: https://developers.hubspot.es/docs/apps/developer-platform/build-apps/manage-apps-in-hubspot
Más información sobre cómo gestionar la autenticación y otros ajustes de tu aplicación en la nueva plataforma para desarrolladores
Después de subir tu aplicación a HubSpot utilizando la [guía de inicio rápido](/docs/apps/developer-platform/build-apps/create-an-app), migrándola desde una aplicación anterior o ejecutando manualmente el comando `hs project upload`, puedes gestionar tu aplicación en la página de índice de proyectos de tu cuenta de HubSpot. En la página de detalles de tu aplicación, puedes ver su historial de creación y despliegue, validar las características de la aplicación y gestionar la autenticación.
## Ver tu aplicación en la página de detalles del proyecto
Para revisar los detalles de tu aplicación:
* En tu cuenta de HubSpot, dirígete a **Desarrollo**.
* En la página **Proyectos**, haz clic en el **nombre** de tu proyecto. En la página de detalles del proyecto, revisa y gestiona tu aplicación:
* En el menú de la barra lateral izquierda, puedes hacer clic en **Detalles** para saltar directamente al historial de creación y despliegues recientes, o hacer clic en la característica de una aplicación para validar la configuración tal y como se detalla en el archivo `*-hsmeta.json` asociado.
* Haz clic en la pestaña **Configuración** para cambiar la configuración de despliegue automático o si necesitas eliminar la aplicación.
* En *Componentes del proyecto*, haz clic en el nombre de la aplicación (tal como se indica en el [esquema de nivel superior](/docs/apps/developer-platform/build-apps/app-configuration#app-schema)) para revisar el esquema desplegado más recientemente, las funciones actualmente configuradas y gestionar los ajustes de autenticación.

## Gestiona la autenticación de tu aplicación
Para ver las credenciales de tu aplicación y gestionar la autenticación:
* En la pestaña *Resumen* de la página de detalles del proyecto, en la sección *Componentes del proyecto*, haz clic en el nombre de la aplicación de nivel superior como se define en el campo `name` del [esquema de nivel superior](/docs/apps/developer-platform/build-apps/app-configuration#app-schema).
* Haz clic en la pestaña **Autenticación** para ver las credenciales de tu aplicación, los permisos configurados y las URL de redireccionamiento.

Si la distribución de tu aplicación está configurada en `private` en el [archivo de esquema de tu aplicación](/docs/apps/developer-platform/build-apps/app-configuration#app-schema), puedes gestionar la configuración de la lista de permisos haciendo clic en la pestaña **Distribución**:
* En la parte superior de la página aparecerá un resumen de las cuentas instaladas actualmente. Para las aplicaciones con una distribución `private`, puedes instalar tu aplicación en máximo 10 cuentas de HubSpot.
* Para añadir cuentas aprobadas, haz clic en **Añadir cuenta(s) aprobada(s)**.
* En el panel derecho, en *Otras cuentas de producción*, revisa la lista de cuentas de producción a las que tu usuario de HubSpot tiene acceso actualmente.
* Selecciona la **casilla de verificación** junto a cualquier cuenta que quieras añadir a la lista de cuentas permitidas que pueden instalar tu aplicación.
* Cuando hayas terminado, haz clic en **Guardar cambios**.

* En la lista de cuentas aprobadas, puedes pasar el cursor sobre una cuenta para copiar su enlace de instalación o eliminarla de la lista de cuentas permitidas.

# Requisitos del listado de herramientas para agentes
Source: https://developers.hubspot.es/docs/apps/developer-platform/list-apps/agent-tool-listing-requirements
Revisa los requisitos del mercado de aplicaciones para publicar una aplicación que incluya herramientas de agentes.
A continuación, conoce los requisitos adicionales para incluir una aplicación con herramientas de IA en el mercado de aplicaciones, así como la forma de [enviarla para su aprobación](#submitting-tools-for-approval).
## Requisitos de los anuncios
Todas las aplicaciones creadas para el mercado de aplicaciones están sujetas a los [requisitos de inclusión en el mercado de aplicaciones](/docs/apps/developer-platform/list-apps/listing-your-app/app-marketplace-listing-requirements), y las aplicaciones certificadas están sujetas a los [requisitos adicionales de certificación del mercado de aplicaciones](/docs/apps/developer-platform/list-apps/apply-for-certification/certification-requirements). Si agregas una herramienta de IA a una aplicación destinada al mercado de aplicaciones, tendrás que cumplir algunos criterios adicionales.
### Seguridad y privacidad
* **Permisos:** si una herramienta de agente admite un tipo de objeto, debe agregarse el correspondiente permiso de `.read` a la [configuración de permisos necesarios de tu aplicación](/docs/apps/developer-platform/build-apps/app-configuration#app-schema). Por ejemplo, si una herramienta admite negocios, la aplicación debe requerir el permiso `crm.objects.deals.read`.
* **Entradas:** las herramientas solo deben recoger las entradas y el contexto necesarios para sus salidas. Por ejemplo:
* Una herramienta de "Resumir contacto" puede tener en cuenta entradas como propiedades de contacto y datos de reuniones y tareas asociadas.
* Una herramienta de "Crear cotización" no debería requerir contexto sobre el historial de reuniones de un contacto.
* **Vulnerabilidades específicas del LLM:** se evaluarán las prácticas recomendadas de seguridad de tu aplicación en relación con los riesgos específicos del LLM (por ejemplo, inyección indirecta de indicaciones o jailbreaks).
* **Datos sensibles:** tu aplicación no debe acceder, solicitar ni utilizar [permisos de datos sensibles](/docs/api-reference/crm-sensitive-data/guide).
### Cumplimiento
Las herramientas de agentes no deben apoyar ningún sistema o caso de uso de "riesgo inaceptable" o "alto riesgo", tal como se describe en la [Ley de IA de la UE](https://digital-strategy.ec.europa.eu/en/policies/regulatory-framework-ai).
Por ejemplo:
* **Aceptable:** herramientas "Resumir contacto" o "Crear cotización"
* **Inaceptables:** herramientas "Calificación social", "Decisión sobre el empleo" o "Predictor del permiso parental"
### Fiabilidad
* **Video de las pruebas:** debes proporcionar un breve video que describa las pruebas funcionales que has completado (consulta la sección [Presentar tus herramientas para su aprobación](#submitting-your-tools-for-approval), más abajo).
* **Pruebas funcionales:** tus herramientas deben superar todas las pruebas funcionales que realiza el equipo de calidad del ecosistema de HubSpot.
### Usabilidad
* **Nomenclatura:** los nombres de las herramientas deben citar la plataforma externa con la que interactúan. Sin embargo, no deben incluir una atribución a tu organización en el nombre de la herramienta, ya que el etiquetado y la asociación serán gestionados por la interfaz de usuario del mercado de aplicaciones. Por ejemplo:
* **Aceptable:** "Enviar notificación de Slack" o "Crear cotización de Acme"
* **Inaceptable:** "Enviar notificación de Slack por Alpha Co." o "Crear cotización de Acme por Omega Inc"
* **Copia:** Las descripciones de las herramientas, etiquetas, opciones, herramientas y otros textos orientados al cliente son claros e intuitivos.
### Valor
En este momento, las herramientas deben potenciar los casos de uso de primera línea (por ejemplo, marketing, ventas y servicio al cliente). Por ejemplo:
* **Aceptable:** herramientas "Crear factura de Xero" y "Enviar regalo de Omega"
* **Inaceptable:** una herramienta "Configuración de HubSpot para nuevos empleados"
***
## Enviar tus herramientas para la aprobación
Para presentar tus herramientas para su aprobación, completa los siguientes pasos en los plazos especificados.
### 2-9 de junio de 2025 (inicio de la beta privada/punto de control #1)
Entre el 2 y el 9 de junio de 2025, configura tu cuenta de prueba de desarrollador.
* En la cuenta de desarrollador en la que vas a crear tus herramientas (la que se convirtió a la plataforma de desarrolladores el 2 de junio), selecciona o [crea una nueva cuenta de prueba de desarrollador](/docs/getting-started/account-types#developer-test-accounts).
* En esa cuenta de prueba de desarrollador, instala la aplicación de prueba que contendrá tus herramientas.
* Proporciona el HubID de la cuenta de prueba del desarrollador al mánager del programa beta de HubSpot. Este es el ID resaltado en la siguiente captura de pantalla, que es distinto del ID de tu cuenta de desarrollador y del ID de tu aplicación de prueba. HubSpot desbloqueará la cuenta para que tus herramientas puedan utilizarse en los agentes.

### 20 de junio de 2025 (punto de control #2 de la beta privada)
Antes del 20 de junio de 2025, proporciona credenciales de prueba y prueba tus herramientas para permitir que el equipo de calidad del ecosistema de HubSpot revise y apruebe tus herramientas.
* **Proporcionar credenciales de prueba:**
* Rellena la cuenta de prueba del desarrollador con los datos del CRM necesarios para probar correctamente las herramientas.
* Invita a [ecosystem-quality-review@hubspot.com](mailto:ecosystem-quality-review@hubspot.com) a la cuenta como [superadministrador](https://knowledge.hubspot.com/user-management/hubspot-user-permissions-guide#super-admin).
* En tu plataforma externa, proporciona a [ecosystem-quality-review@hubspot.com](mailto:ecosystem-quality-review@hubspot.com) todos los permisos necesarios para probar correctamente las herramientas dentro de los workflows y agentes de HubSpot.
* **Prueba las herramientas en las cuentas de prueba de desarrollador no bloqueadas:** utilizando tu aplicación de prueba/desarrollo, implementa y prueba las herramientas de extremo a extremo dentro de los workflows y agentes en la cuenta de prueba de desarrollador.
* **Video de pruebas:** Graba un breve video que describa las pruebas funcionales que has completado y compártelo con [ecosystem-quality-review@hubspot.com](mailto:ecosystem-quality-review@hubspot.com). El video de demostración debe cumplir con los siguientes requisitos:
* Tener al menos tres minutos de duración
* Incluir audio (preferido) o descripciones de texto
* Incluye descripciones de las herramientas y casos de uso comunes
* Describe las pruebas que has realizado. El equipo de calidad del ecosistema debería poder reproducir estos pasos con los datos presentes en la cuenta de prueba del desarrollador.
Entre el 20 y el 25 de junio de 2025, el equipo de calidad del ecosistema de HubSpot revisará tus herramientas y compartirá los comentarios iniciales. Toma medidas al respecto lo antes posible, ya que pueden ser necesarias algunas revisiones para la aprobación final.
# Solicitar la certificación de la aplicación
Source: https://developers.hubspot.es/docs/apps/developer-platform/list-apps/apply-for-certification/applying-for-app-certification
La certificación de aplicaciones les permite a los usuarios saber que tu aplicación ha sido revisada y aprobada por HubSpot, lo que genera confianza y garantiza su calidad ante posibles usuarios.
'La certificación de aplicaciones les permite a los usuarios saber que tu aplicación ha sido revisada y aprobada por HubSpot, lo que genera confianza y garantiza su calidad ante posibles usuarios.';
### ¿Qué es la certificación de la aplicación?
La certificación de las aplicaciones implica que el equipo de calidad del ecosistema de HubSpot revise y confirme que cada aplicación publicada cumple con los [ requisitos](https://developers.hubspot.com/docs) de seguridad, privacidad, confiabilidad, rendimiento, usabilidad, accesibilidad y valor. Una vez aprobada, la página de la ficha de una aplicación mostrará una insignia de "Aplicación certificada de HubSpot".

### ¿Por qué es importante?
Una insignia certificada en la ficha de una aplicación permite a los clientes existentes y potenciales saber que el equipo de calidad del ecosistema de HubSpot revisó y aprobó tu aplicación. En última instancia, es una manera de simbolizar la calidad y generar confianza con los usuarios de la aplicación. Más información sobre cómo generar la confianza de los clientes mediante la certificación [aquí](https://developers.hubspot.com/blog/how-to-build-customer-trust-through-certification).
### ¿Cómo funciona?
Cualquier App Partner [elegible](https://developers.hubspot.com/docs) puede solicitar la certificación a través de su cuenta de desarrollador de aplicaciones. El equipo de calidad del ecosistema de HubSpot revisará la solicitud y se pondrá en contacto contigo para proporcionar retroalimentación o confirmar la certificación de tu aplicación.
### ¿Mi aplicación es elegible para la certificación?
Asegúrate de que tu aplicación sea elegible para la certificación revisando nuestros [requisitos de certificación](https://developers.hubspot.com/docs). No podrás presentar una solicitud a menos que tu aplicación tenga al menos 60 instalaciones activas y la cantidad necesaria de tráfico de API. Las instalaciones activas son la cantidad de cuentas de producción únicas de HubSpot, no afiliadas a tu organización, que muestran una actividad exitosa de la aplicación en los últimos 30 días.
### ¿Cómo puedo solicitar la certificación?
Solo puedes enviar una aplicación a la vez para la certificación. Si envías más de una aplicación para la certificación al mismo tiempo, se rechazarán dependiendo del orden de envío. Una vez que tu aplicación esté certificada, puedes enviar otra para la certificación.
Para solicitar la certificación:
* [Accede](https://knowledge.hubspot.com/es/account-management/why-can-t-i-log-into-hubspot) a tu cuenta de desarrollador y dirígete a**Mercado de aplicaciones** > **Ficha de aplicación**.
* Coloca el cursor sobre la aplicación que quieras certificar y haz clic en **Más**. Luego, selecciona **Certificar aplicación**.

* En el cuadro de diálogo, ingresa la siguiente información:
* **Video de demostración en YouTube:** ingresa la **URL** con el video de demostración. Revisa los requisitos necesarios para el video de demostración de la aplicación [a continuación](#app-demo).
* **Credenciales de prueba:** introduce las credenciales de prueba de tu aplicación para que el equipo de calidad del ecosistema de HubSpot evalúe su funcionalidad.
* En la parte inferior, haz clic en **Enviar solicitud de certificación**.

### Requisitos para el video de demostración de la aplicación
Los videos de demostración ayudan al equipo de calidad del ecosistema de HubSpot a probar tu aplicación. El equipo no revisará tu aplicación a menos que envíes un video de demostración que cumpla con todos los requisitos. Ventas promocionales y videos de marketing serán rechazados. HubSpot no compartirá ni publicará tus videos de demostración.
El video de demostración debe cumplir con los siguientes requisitos:
* Tener al menos tres minutos de duración.
* Incluir audio (preferido) o descripciones de texto.
* Incluir descripciones del propósito de tu aplicación y casos de uso comunes.
* Por ejemplo, "La aplicación Acme ayuda a los representantes de ventas e incorporación a coordinar a través del CRM. Los negocios cerrados ganados en cualquiera de los CRM compatibles con Acme pueden generar automáticamente tickets y tareas de incorporación en HubSpot."
* Demostrar y describir cómo los nuevos usuarios deben:
* Instalar la aplicación.
* Por ejemplo, " En la ficha de Acme en el mercado de aplicaciones de HubSpot, haz clic en Instalar aplicación, selecciona tu CRM, ingresa tus credenciales, haz clic en Listo, selecciona tu cuenta de HubSpot, revisa los permisos solicitados y haz clic en Conectar aplicación."
* Configura tu aplicación después de la instalación.
* Por ejemplo, "Una vez que la aplicación esté instalada, selecciona una pipeline de tickets navegando a Configuración > Integraciones > Aplicaciones conectadas > Aplicación Acme > Pipeline de tickets. Luego, configura hasta 10 tareas predeterminadas en la sección "Plantillas de tareas". Para activar la sincronización, activa la opción "Sincronización de tickets"."
* Usa las características principales de tu aplicación para admitir casos de uso comunes.
* Por ejemplo, "Para cada transacción ganada cerrada en el CRM conectado, la función de sincronización de tickets creará un registro de tickets en HubSpot con los contactos asociados y las tareas configuradas. Esto permite que tu equipo de incorporación se conecte de inmediato con el nuevo cliente."
* Interactúa con tu aplicación dentro de su cuenta de HubSpot para inlcuir casos de uso comunes (si corresponde).
* Por ejemplo, "Para crear tickets de incorporación a partir de los negocios de HubSpot, usa la acción personalizada de workflows "Crear ticket de Acme "en los workflows basados en negocios. Estas acciones permiten una mayor personalización que la configuración de la aplicación para otros CRM."
* Desconecta tu aplicación de su cuenta de HubSpot.
* Desinstala tu aplicación en su cuenta de HubSpot, describiendo cómo esto afecta a los usuarios de las cuentas de HubSpot y a sus datos.
**Sugerencia:** [Loom](https://www.loom.com/) es una herramienta gratuita que puedes usar para grabar un video de demostración.
### ¿Por qué no aparece la CTA de certificación para mi aplicación?
El botón "Certificar aplicación" solo aparecerá si tu aplicación es elegible para solicitarla. Revisa nuestros [requisitos de certificación](https://developers.hubspot.com/docs) o ponte en contacto con tu [mánager de App Partner](https://developers.hubspot.com/docs#related-resources) si tienes preguntas sobre la elegibilidad.
### ¿Cómo sabrán los usuarios que mi aplicación está certificada?
Una vez que esté certificada, la ficha de la aplicación en el mercado de aplicaciones de HubSpot tendrá una insignia que indica "Aplicación certificada de HubSpot".

Cuando un cliente pasa el cursor sobre la insignia, verá información adicional sobre cómo se certifican las aplicaciones.

Encuentra tu **mánager de App Partner** y su información de correo electrónico iniciando sesión en tu cuenta de desarrollador y navegando al **mercado de aplicaciones** > **Fichas**. Pasa el cursor sobre tu aplicación y haz clic en **Más** > **Ver detalles de la ficha**.
***
#### Documentos relacionados
[Requisitos de certificación de la aplicación](https://developers.hubspot.com/docs)
[Requisitos de la ficha de la aplicación](https://developers.hubspot.com/docs)
# Requisitos para la certificación de las aplicaciones
Source: https://developers.hubspot.es/docs/apps/developer-platform/list-apps/apply-for-certification/certification-requirements
Esto es lo que deben hacer los App Partners para certificar las aplicaciones en el mercado de aplicaciones de HubSpot.
'Mercado de aplicaciones | Requisitos para la certificación de las aplicaciones';
'Esto es lo que deben hacer los App Partners para certificar las aplicaciones en el mercado de aplicaciones de HubSpot.';
La certificación de las aplicaciones implica que el equipo de calidad del ecosistema de HubSpot revise y confirme que cada [aplicación publicada](https://developers.hubspot.com/docs) cumple con los requisitos de seguridad, privacidad, confiabilidad, rendimiento, usabilidad, accesibilidad y rentabilidad que se indican más abajo.
Las aplicaciones certificadas se destacan en el [mercado de aplicaciones](https://ecosystem.hubspot.com/marketplace/apps) con un reconocimiento de calidad y confiabilidad. Tu aplicación también obtendrá [beneficios especiales](#certification-benefits) y recibirá comentarios constructivos del equipo de calidad del ecosistema de HubSpot durante la revisión para la certificación de las aplicaciones.
* Estos requisitos están sujetos a cambios, ya que HubSpot realiza continuamente mejoras en el mercado de aplicaciones y el ecosistema. HubSpot puede rechazar la solicitud de certificación de una aplicación a su discreción si esta no cumple con los estándares establecidos.
* HubSpot no revisará la aplicación a menos que envíes un video de demostración, como se indica en la [solicitud de certificación de las aplicaciones](https://developers.hubspot.com/docs).
* Solo puedes enviar una aplicación a la vez para la certificación. Si envías más de una aplicación para la certificación al mismo tiempo, se rechazarán en función del orden de envío.
* La certificación de las aplicaciones tienen una validez continua de dos años y deben renovarse. Si no renuevas tu certificación, se te retirará el estado de certificado.
* Se enviará una notificación 3 meses antes de la fecha de renovación de la certificación de tu aplicación.
* Si tu aplicación ya no cumple con estos estándares, el equipo de calidad del ecosistema de HubSpot colaborará contigo por un máximo de 60 días para resolver tus inquietudes.
## Resumen
A continuación, encontrarás un resumen de los requisitos para la certificación de las aplicaciones. Para obtener más detalles, consulta la sección [Criterios de revisión](#review-criteria).
Tu aplicación debe:
* Tener un ID único de aplicación de HubSpot asociado.
* La aplicación pública debe ser única. Si ya has publicado una aplicación y quieres reemplazarla, debes actualizar la aplicación existente en lugar de publicar una nueva.
* No diseñes varias aplicaciones para el mismo tipo de uso. Las aplicaciones con funciones similares y que utilizan las mismas API deben consolidarse en una sola aplicación.
* Utilizar la [autenticación de OAuth](/docs/apps/legacy-apps/authentication/working-with-oauth) y todos los permisos que requiere.
* Tener un [dominio verificado](/docs/apps/legacy-apps/public-apps/overview) asociado.
* Los recursos públicos asociados con tu aplicación deben cumplir con las prácticas recomendadas de seguridad.
Tu aplicación no puede utilizar las [tarjetas de CRM clásicas](/docs/api-reference/crm-public-app-crm-cards-v3/guide), ya que estas ya no son compatibles desde el 16 de junio de 2025. Más información sobre este cambio en el [registro de cambios para desarrolladores](https://community.hubspot.com/t5/Developer-Announcements/Deprecating-Support-for-Classic-Legacy-CRM-Cards/m-p/1153039#M1048).
Consulta la [lista detallada de los requisitos de seguridad y privacidad](#security-privacy).
La actividad de la aplicación se define con base en las solicitudes autenticadas por OAuth a las [API](/docs/api-reference/overview) de HubSpot y las [solicitudes con firma](/docs/apps/legacy-apps/authentication/validating-requests) de las [suscripciones y extensiones de webhook](/docs/api-reference/webhooks-webhooks-v3/guide) de HubSpot (por ejemplo, solicitudes de obtención de datos de [tarjetas del CRM](/docs/api-reference/crm-public-app-crm-cards-v3/guide)).
Las instalaciones activas son la cantidad de cuentas de producción únicas de HubSpot que no son filiales de tu organización y que muestran actividad válida de la **aplicación** en los últimos 30 días.
## Beneficios de la certificación
Además de los [beneficios de publicar tu aplicación](https://www.hubspot.com/partners/app), las aplicaciones certificadas reciben lo siguiente:
* Una insignia de "Aplicación certificada por HubSpot", que se muestra en la ficha del mercado de aplicaciones.
* Mayor visibilidad en el mercado de aplicaciones de HubSpot:
* Inclusión en el filtro de búsqueda "Aplicación certificada por HubSpot".
* Posibilidad de ser incluida en las colecciones selectas del mercado de aplicaciones.
* Acceso a utilizar la insignia "Aplicación certificada por HubSpot" y a las imágenes para redes sociales a fin de comunicar la certificación de la aplicación.
* Calificación favorable en las iniciativas de asociación y amplificación de HubSpot.
## Criterios de revisión
Para obtener la certificación, tu aplicación debe demostrar su calidad al cumplir con las medidas cuantitativas y los descriptores cualitativos de seguridad, privacidad, confiabilidad, rendimiento, usabilidad, accesibilidad y rentabilidad. Los requisitos a continuación están organizados según las categorías anteriores e incluyen ejemplos sobre los comentarios constructivos que podrías recibir.
### Seguridad y privacidad
Tu aplicación debe:
* Tener un ID único de aplicación de HubSpot asociado. Tu aplicación debe autorizar las solicitudes a la API con el ID público de aplicación de HubSpot (y el [ID de cliente de OAuth](/docs/apps/legacy-apps/authentication/working-with-oauth)) asociado a la ficha de la aplicación.
* Una ficha no debe redireccionar hacia una aplicación pública o privada diferente.
* La aplicación pública que aparece en la ficha no debe requerir otra aplicación pública o privada para funcionar.
* La autenticación debe hacerse mediante el [flujo de programación para la autorización por OAuth](/docs/apps/legacy-apps/authentication/working-with-oauth).
* Está prohibido pedir a los usuarios que copien y peguen códigos o tokens de OAuth. Solo se les debe pedir que otorguen el acceso.
* Las aplicaciones deben solicitar, administrar y actualizar los tokens de acceso sin la participación del usuario.
* Utiliza todos los [permisos](/docs/apps/legacy-apps/authentication/working-with-oauth) que solicite para la instalación (es decir, tanto en el parámetro `scope` requerido como en el parámetro `optional_scope`).
* Activa la [configuración avanzada de los permisos](/docs/apps/legacy-apps/public-apps/overview#configure-scopes) y selecciona todos los permisos obligatorios, requeridos condicionalmente y opcionales que la aplicación solicita para la instalación.
* Se deben eliminar los permisos irrelevantes.
* Si hay permisos que solo aplican a un subconjunto de la base de usuarios de la aplicación, deben incluirse como permisos requeridos condicionalmente u opcionales.
* Tener un [dominio verificado](/docs/apps/legacy-apps/public-apps/overview) asociado.
* Los recursos públicos serán evaluados en función de las prácticas recomendadas de seguridad relacionadas con software obsoleto y las vulnerabilidades e incidencias del servidor web.
#### Ejemplos de comentarios
Actualmente, tu aplicación requiere cuatro permisos:: `contacts`, `timeline`, `forms` y `content`. Sin embargo, según nuestros registros, solo se hicieron solicitudes a las API de contactos del CRM y eventos de la cronología en los últimos 30 días. Dado que los permisos `forms` y `content` no son necesarios para ninguna de estas funciones, elimínalos de la configuración de la aplicación si es necesario para minimizar los permisos que los usuarios deben aceptar.
### Confiabilidad y rendimiento
Tu aplicación debe:
* No tener ningún problema de cumplimiento, lo que implica:
* Cumplir con todas las disposiciones aplicables.
* No haber sido rechazada para la certificación en los últimos seis meses.
* No tener derivaciones de asistencia sin resolver con clientes en común.
* Utilizar versiones públicas y estables de las API y las extensiones de HubSpot.
* Se recomienda el uso de las últimas versiones públicas.
* Las API en prueba para programadores, en pruebas beta y sin documentar se consideran inestables y no se deben usar en aplicaciones de producción.
* Si la aplicación utiliza las API que no son estables ni públicas, indícalo durante la revisión de la certificación o el equipo de mánagers de App Partner para analizar las posibilidades.
* Mantener un volumen razonable de [actividad](#activity) en las cuentas de clientes de HubSpot que no sean filiales de tu organización.
* La aplicación debe cumplir con las [pautas de uso de las API](https://developers.hubspot.com/docs) y las prácticas recomendadas, que incluyen:
* Respetar los límites de frecuencia (es decir, 100 solicitudes entrantes cada 10 segundos por cuenta conectada de HubSpot).
* Actualizar los tokens de acceso de OAuth antes de que caduquen.
* Capturar los datos de las llamadas recurrentes cuando sea posible.
* Usar las suscripciones de las API y los webhooks en bloque para reducir el volumen de solicitudes siempre que sea posible.
* Usar las API para crear propiedades, workflows y acciones de workflow personalizadas en lugar de solicitar acciones por parte del usuario.
* Tu aplicación debe mantener una tasa media de solicitudes exitosas superior al **95%** en todas las [actividades](#activity).
* Las solicitudes que dan como resultado un error reducen la tasa de solicitudes exitosas.
* Es posible excluir algunos errores inevitables o previsibles al calcular las tasas de éxito en todas [las actividades](https://developers.hubspot.com/docs#activity).
* Tu aplicación puede tener una extensión de navegador para ofrecer más funciones y rentabilidad a los clientes:
* No se deben crear extensiones del navegador específicamente para la interfaz del usuario de HubSpot o como una solución alternativa a las API de HubSpot.
* Las extensiones para navegador no deben agregar funciones o componentes en la interfaz de usuario de HubSpot.
* Las extensiones de la interfaz de usuario compatibles y aprobadas (por ejemplo, las [tarjetas del CRM](/docs/api-reference/crm-public-app-crm-cards-v3/guide) y las [acciones de workflow personalizadas](/docs/api-reference/automation-actions-v4-v4/guide)) proporcionan una experiencia del usuario más sólida para los clientes.
* Tu aplicación será sometida a una evaluación de seguridad adicional si incluyes una extensión para navegador.
#### Ejemplos de comentarios
La tasa de solicitudes exitosas a la API de tu aplicación está por debajo del límite del 95% requerido para la certificación. Nuestros registros muestran una tasa de solicitudes exitosas del 83% en los últimos 30 días. La gran mayoría de estas solicitudes generaron errores de tipo `429`, en los que se excede el límite de velocidad. Para reducir esta tasa de errores, recomendamos reducir el número de solicitudes a 100 por cada 10 segundos para cada cuenta.
La aplicación está generando errores al intentar actualizar los contactos usando la dirección de correo `undefined`, que no funcionará con el endpoint. Tu aplicación debe omitir estas solicitudes si un registro no tiene dirección de correo.
La aplicación está haciendo solicitudes con tokens de OAuth vencidos y está recibiendo errores `401` antes de actualizar el token. Para minimizar estos errores, recomendamos que la aplicación lleve un registro de cuándo caducan los tokens o que actualice los tokens antes de hacer solicitudes. Si comienzas a ver errores `401` con el 100% de las solicitudes y no puedes actualizar el token de acceso, considera desinstalar la aplicación y deja de hacer solicitudes para la cuenta hasta que un usuario vuelva a autenticar la aplicación.
Tu aplicación está generando el error `403` al intentar usar la API de listas de contactos con cuentas gratuitas de Marketing Hub, que no tienen acceso a listas de contactos. Si la aplicación recibe el error `403` repetidamente debido a que faltan los permisos pertinentes, debe detener las llamadas para solicitar listas desde esa cuenta.
Las suscripciones a webhooks de tu aplicación con frecuencia presentan errores de tipo `500` y `503`. Asegúrate de que tu servidor pueda manejar el volumen de solicitudes (cuyo límite actual es de 150 por segundo) para que no se pierdan los datos de los clientes.
Tu aplicación extrae muchos contactos de uno en uno en lugar de hacerlo en bloques. Recomendamos usar [endpoints en bloques](/docs/api-reference/crm-contacts-v3/guide).
### Usabilidad y accesibilidad | Aplicación
* La aplicación debe tener una [ficha publicada](https://developers.hubspot.com/docs) en el [mercado de aplicaciones](https://ecosystem.hubspot.com/marketplace/apps) de HubSpot durante al menos seis meses.
* La aplicación debe cumplir con las [prácticas recomendadas en cuanto a la usabilidad](https://www.nngroup.com/articles/ten-usability-heuristics/).
* La instalación y el uso no deberían causar confusión o frustración a los clientes en común ni afectar negativamente la experiencia de los usuarios con HubSpot.
#### Ejemplos de comentarios
Actualmente, la aplicación requiere que los usuarios configuren manualmente las acciones de workflow con webhooks para enviar mensajes de texto. Considera la posibilidad de crear acciones de workflow personalizadas mediante la aplicación que sean lo suficientemente flexibles como para adaptarse a distintos tipos de uso.
### Usabilidad y Accesibilidad | Ficha en el mercado de aplicaciones
La ficha en el mercado de aplicaciones debe cumplir con lo siguiente:
* Describir con exactitud las funciones actuales de la aplicación.
* Si las funciones cambian con respecto al producto o el tipo de suscripción, sea en HubSpot o en la solución, se deben dejar claras las diferencias.
* Contener información clara y precisa sobre los precios, e incluir un enlace a la página de precios actual.
* Si hay varios paquetes que son compatibles con la aplicación, la ficha del mercado de aplicaciones debe incluir la opción menos costosa como mínimo.
* Utiliza datos provisionales u oculta los datos para no mostrar información de identificación personal.
* Otros elementos que debes incluir:
* Ayudas visuales informativas actualizadas, que pueden incluir capturas de pantalla o un video. Consulta la página [Cómo crear un buen video de demostración de aplicaciones](https://www.hubspot.com/partners/apps/resources/how-to-make-a-great-app-demo-video) para conocer las prácticas recomendadas y ver ejemplos.
* Una "URL de documentación sobre la configuración" actualizada que lleve directamente a una guía de configuración completa para tu aplicación. Puedes consultar [la documentación completa sobre los requisitos de configuración](https://developers.hubspot.com/docs). Esta guía también incluye una plantilla de ejemplo que cumple todos los requisitos.
* Elementos que no debes incluir:
* Datos o estadísticas, a menos que se proporcione un caso de éxito como recurso.
#### Ejemplos de comentarios
La ficha del mercado de aplicaciones incluye pocos detalles específicos sobre las funciones de tu aplicación. Mejórala usando capturas de pantalla que representen las funciones de la aplicación y agrega descripciones más detalladas de los tipos de uso más frecuentes y el comportamiento en HubSpot.
Los clientes de HubSpot prefieren la experiencia de "probar antes de comprar" cuando adquieren nuestros productos y servicios. Por esta razón, te recomendamos ofrecer una experiencia de prueba o de registro gratuitos para la aplicación. Algunos App Partners que no tienen una página de precios o no ofrecen una prueba gratuita han creado "suscripciones de HubSpot", que brindan a los clientes precios transparentes, autorregistro y otros beneficios.
### Usabilidad y accesibilidad | Documentación de apoyo
La documentación para la asistencia al cliente de tu aplicación debe cumplir con lo siguiente:
* Está alojada en una URL activa, de acceso público (es decir, no debe requerir ningún pago ni inicio de sesión) y cumplir con las normas actuales de accesibilidad, privacidad y el RGPD.
* Está actualizada y coincide con la versión actual de la aplicación.
* Describe claramente:
* Qué hace la aplicación.
* Cómo instalar la aplicación y conectar una cuenta de HubSpot, con capturas de pantalla de cada paso, incluida la pantalla de aprobación del permiso.
* Cómo configurar la aplicación una vez que esté instalada.
* Cómo usar la aplicación, especificando las interacciones manuales y automatizadas.
* Cómo desconectar HubSpot de la aplicación.
* Cómo desinstalar la aplicación de una cuenta de HubSpot.
* Cómo el hecho de desconectar y desinstalar la aplicación afectaría las cuentas y los datos de HubSpot de los usuarios.
* Incluye imágenes. Cualquier imagen que contenga capturas de pantalla de la interfaz del usuario de HubSpot debe estar actualizada y cumplir con nuestro [sistema de diseño](https://canvas.hubspot.com/).
* Se recomienda incluir videos, pero no es obligatorio. Los videos deben actualizarse regularmente y mostrar la versión actual de tu aplicación.
#### Ejemplos de comentarios
La guía de configuración de tu aplicación incluye una captura de pantalla que muestra los permisos que requiere tu aplicación para la instalación. Esta captura de pantalla no muestra el permiso `business-intelligence`, que está seleccionado en la configuración de la aplicación. Actualiza la captura de pantalla para que refleje los permisos requeridos actualmente.
### Rentabilidad
* El total de instalaciones activas, la retención y las revisiones del mercado de aplicaciones de HubSpot determinan la rentabilidad que los clientes en común pueden esperar de la aplicación.
* Tu aplicación debe tener al menos 60 instalaciones individuales [activas](#activity) a fin de que sea apta para obtener la certificación y mantenerla. Las cuentas con la aplicación instalada no deben pertenecer a tu organización. También se excluirán las cuentas de prueba.
* Si tu aplicación tiene menos de 60 instalaciones activas, se te solicitará que canceles la solicitud de certificación.
* Si tu aplicación tiene menos de las tres instalaciones activas necesarias para publicar una ficha, es posible que tu aplicación se elimine del mercado de aplicaciones.
* La ficha de tu aplicación debe mostrar las respuestas de tu equipo frente a todas las evaluaciones negativas de tu aplicación.
#### Ejemplos de comentarios
Tu aplicación no ha cumplido con el mínimo de 60 instalaciones activas durante los últimos seis meses. Por ello, se retirará la certificación. Puedes volver a solicitarla en seis meses.
## Proceso de revisión de la certificación y recertificación de la aplicación
El equipo de calidad del ecosistema de HubSpot procesa las [solicitudes de certificación de aplicaciones](https://developers.hubspot.com/docs) en un plazo de **10 días laborables**. Todo el proceso de revisión y valoración de la aplicación no debe tardar más de **60 días** desde el momento en que se envían los comentarios. Revisa los criterios indicados en [esta página](https://developers.hubspot.com/docs) para proporcionar las credenciales que se necesitan a fin de probar la aplicación.
Si la aplicación cumple con todos los requisitos, obtendrá la certificación y se mostrará la insignia "Aplicación certificada por HubSpot" a los clientes y prospectos en el mercado de aplicaciones. La aplicación también aparecerá en la búsqueda cuando los usuarios seleccionen el filtro "Aplicación certificada por HubSpot".
Si la aplicación no pasa la revisión, puedes volver a solicitarla en seis meses.
Después de un año de haber sido certificada, el equipo de calidad del ecosistema de HubSpot revisará tu aplicación para asegurarse de que sigue cumpliendo con los rigurosos requisitos de certificación. Si tu aplicación ya no cumple con los estándares, el equipo trabajará contigo durante hasta sesenta días para resolver tus inquietudes.
Si en cualquier momento tu aplicación no cumple con los requisitos de certificación enumerados anteriormente, HubSpot podría iniciar inmediatamente un proceso de recertificación, incluso si tu aplicación ha estado certificada por menos de un año. Tal como se indica en el [acuerdo del App Partner Program](https://legal.hubspot.com/app-program-agreement), HubSpot también se reserva el derecho de anular la publicación de tu aplicación en cualquier momento.
## Preguntas frecuentes
> **¿La certificación de la aplicación tiene algún coste?**
>
> No, no te cobramos por publicar o certificar tus soluciones en el mercado de aplicaciones, ni existen tarifas por las instalaciones hechas a través del mercado de aplicaciones. Tampoco hay distribución de ingresos. Estamos aquí para ayudarte a hacer que tu aplicación sea de mayor calidad.
> **¿Se me notificará en el momento en que mi aplicación cumpla con los requisitos para la certificación nuevamente si fue rechazada antes?**
>
> No. En este momento, no tenemos la función de enviar notificaciones para informarte si puedes volver a presentar una solicitud para tu aplicación y cuándo. Comunícate con tu [mánager de App Partners](#app-partner-manager), es el mejor medio para saber si la aplicación es elegible antes de presentar la solicitud.
> **¿Cómo debo promocionar mi aplicación certificada entre mis clientes?**
>
> Puedes usar la plantilla de comunicado de prensa en [esta página](https://www.hubspot.com/partners/app/resources) para compartir la noticia de que tu aplicación ha obtenido la certificación.
>
> Si planeas publicarlo en las redes sociales, no te olvides de etiquetar a HubSpot. Nos encanta compartir la celebración con nuestros App Partners.
> **Me gusta experimentar con las API en prueba beta más recientes. ¿La certificación de aplicaciones es adecuada para mí?**
>
> Te recomendamos que te pongas en contacto con tu [mánager de App Partners](#app-partner-manager) para saber si la certificación de aplicaciones es adecuada en tu caso.
>
> Nuestro objetivo es garantizar que tu aplicación esté bien diseñada para nuestros clientes en común y que no implique cambios inesperados, por lo que se necesita que tu aplicación use las API estables más recientes. Sin embargo, también nos encanta observar y apoyar a emprendedores, voluntarios y programadores que quieran experimentar con las API en prueba beta más recientes.
> **Me gustaría que mi aplicación apareciera en el mercado de aplicaciones. ¿La certificación de aplicaciones se hace con este fin?**
>
> Los beneficios de aparecer en selecciones de aplicaciones y en los filtros de aplicaciones certificadas en el mercado de aplicaciones siguen aumentando. Nos gustaría saber más sobre cómo cuál sería la mejor manera de destacar tu producto (por ejemplo, en el mercado de aplicaciones, la comunidad de HubSpot, y los boletines especiales de HubSpot, entre otros).
>
> Tu [mánager de App Partners](#app-partner-manager) sería el mejor contacto para iniciar esta conversación y analizar los posibles beneficios en el futuro.
> **¿Cuál es la razón y la forma en que se evaluarán mis recursos públicos con respecto a las prácticas recomendadas de seguridad?**
>
> Teniendo en cuenta que la clientela promedio utiliza más de cinco integraciones, es imperativo monitorizar las aplicaciones y ajustarlas a los estándares de privacidad, seguridad y calidad a lo largo del tiempo. Cualquier recurso público se evaluará utilizando la información ya proporcionada durante el proceso de publicación de la ficha y los resultados se analizarán utilizando un método no invasivo.
> **Mi aplicación fue certificada hace más de un año. ¿Qué debo hacer para mantener el estado de mi certificación y qué es la recertificación?**
>
> El equipo de calidad del ecosistema de HubSpot se comunicará contigo si tu aplicación no cumple con las normas o si debe recertificarse anualmente y te indicará qué hacer.
>
> Te recomendamos que revises el rendimiento de la aplicación, los requisitos de certificación, el [registro de cambios para desarrolladores](https://developers.hubspot.com/changelog) y cualquier recurso adicional de HubSpot sobre los cambios en la tecnología utilizada y cómo mantener actualizada tu aplicación.
Contacta a tu **mánager de App Partners** y encuentra su información de contacto por correo iniciando sesión en tu cuenta de desarrollador y navegando a **Mercado de aplicaciones** > **Fichas**. Pasa el cursor sobre tu aplicación y haz clic en **Más** > **Ver detalles de la ficha**.
***
## Recursos relacionados
[Cómo solicitar la certificación de la aplicación](https://developers.hubspot.com/docs)
[Cómo publicar la ficha de tu aplicación](/docs/apps/developer-platform/list-apps/listing-your-app/listing-your-app)
[Requisitos para la ficha de la aplicación](https://developers.hubspot.com/docs)
[Foro de la comunidad de desarrolladores](https://community.hubspot.com/t5/APIs-Integrations/bd-p/integrations)
[Ponte en contacto con el equipo de App Partners](https://www.hubspot.com/partners/app/join)
# Requisitos para las fichas de la aplicaciones
Source: https://developers.hubspot.es/docs/apps/developer-platform/list-apps/listing-your-app/app-marketplace-listing-requirements
Los App Partners ahora pueden ver las pautas y los requisitos de HubSpot para anunciar una aplicación en el mercado de aplicaciones en un solo lugar.
'Mercado de aplicaciones | Requisitos para las fichas de aplicaciones';
'Los App Partners ahora pueden ver las pautas y los requisitos de HubSpot para anunciar una aplicación en el mercado de aplicaciones en un solo lugar. ';
El equipo de calidad del ecosistema de HubSpot revisa manualmente los envíos de fichas de aplicaciones. Estos anuncios se rechazarán si no cumplen con los criterios que se detallan a continuación. Una vez que tu aplicación cumpla con estos requisitos, puedes [crear la ficha de la aplicación](/docs/apps/developer-platform/list-apps/listing-your-app/listing-your-app) desde tu cuenta de desarrollador de aplicaciones.
## Requisitos mínimos
* **Acceso:** una ficha no debe redireccionar hacia una aplicación pública o privada diferente, o requerir otra aplicación pública o privada para funcionar.
* **Exclusividad:** la aplicación pública debe ser única. Si ya has publicado una aplicación y quieres reemplazarla, actualiza la aplicación existente en lugar de publicar una nueva.
* **Caso de uso:** cada aplicación que crees debe dirigirse a un caso de uso distinto. Las aplicaciones con funciones similares y que utilizan las mismas API deben consolidarse en una sola aplicación.
* **ID único de aplicación de HubSpot:** tu aplicación debe autorizar las solicitudes de API con el ID público de la aplicación de HubSpot (y el [ID de cliente de OAuth](/docs/apps/legacy-apps/authentication/working-with-oauth)) asociado con la ficha de la aplicación.
* **OAuth:** tu aplicación debe usar OAuth como único método de autorización. Más información sobre cómo [trabajar con OAuth](/docs/apps/legacy-apps/authentication/working-with-oauth).
* **Instalaciones:** tu aplicación debe tener al menos tres [instalaciones activas y únicas](https://developers.hubspot.com/docs#:~:text=Active%20installs%20are%20the%20number%20of%20unique%20HubSpot%20production%20accounts%2C%20unaffiliated%20with%20your%20organization%2C%20showing%20successful%20app%20activity%20within%20the%20past%2030%20days.).
* **Permisos:** solo debes solicitar los permisos que tu aplicación necesite. Tu aplicación debe tener activada la [configuración avanzada de permisos](/docs/apps/legacy-apps/public-apps/overview#configure-scopes). Para evitar errores, se deben seleccionar todos los permisos requeridos, condicionales y opcionales.
* **Términos:** debes revisar y aceptar los términos del [Acuerdo del App Partner Program de HubSpot](https://legal.hubspot.com/app-program-agreement).
* **Sectores restringidos:** tu aplicación no debe adaptarse ni ofrecer funcionalidades que sirvan exclusivamente a clientes dentro de ninguna de las [sectores restringidos](https://legal.hubspot.com/acceptable-use#Restricted-Industries) de HubSpot.
* **Funcionalidad restringida:** tu aplicación no puede utilizar las [tarjetas CRM clásicas](/docs/api-reference/crm-public-app-crm-cards-v3/guide), ya que desde el 16 de junio de 2025 ya no son compatibles. Más información sobre este cambio en el [registro de cambios para desarrolladores](https://community.hubspot.com/t5/Developer-Announcements/Deprecating-Support-for-Classic-Legacy-CRM-Cards/m-p/1153039#M1048).
### Requisitos de marca de HubSpot
* Tu aplicación y los recursos asociados (documentación, landing pages, etc.) deben cumplir con las [pautas de branding de HubSpot](https://www.hubspot.com/partners/app/branding-guidelines). Por ejemplo, coloca la "S" de "HubSpot" en mayúscula cada vez que te refieras a HubSpot.
* Tu aplicación y los recursos asociados (documentación, landing pages, etc.) no deben infringir las [pautas de uso de la marca comercial de HubSpot](https://legal.hubspot.com/tm-usage-guidelines). Por ejemplo, no combines el nombre de HubSpot (incluidos "Hub" y "HubSpot") con el nombre o logotipo de tu aplicación.
### Requisitos de las fichas
Una vez que hayas alcanzado los requisitos mínimos, puedes enviar la ficha de la aplicación. Al enviar la ficha de la aplicación, debes suministrar la información completa y exacta. Estos campos son especialmente importantes, y si no cumples con estos requisitos, tu ficha se configurará en el modo borrador:
* El contenido de la ficha debe ser específico para la integración, en lugar de información general del producto. Debe contener información sobre el valor que los clientes pueden esperar después de descargar y usar esta integración. Algunos ejemplos incluyen: [Aircall](https://ecosystem.hubspot.com/marketplace/apps/aircall), [CloudFiles](https://ecosystem.hubspot.com/marketplace/apps/cloudfiles), [Reveal](https://ecosystem.hubspot.com/marketplace/apps/reveal-191193).
* Todas las URL de la ficha en el mercado de aplicaciones deben conducir a páginas activas, disponibles públicamente y funcionales.
* Esto se verificará utilizando [las herramientas SEO de HubSpot](https://knowledge.hubspot.com/es/seo/understand-seo-crawling-errors) para rastrear las páginas asociadas a la ficha.
* Para evitar retrasos innecesarios en el proceso de revisión, te recomendamos encarecidamente que trabajes con el administrador de tu sitio para añadir el agente de usuario del rastreo de *HubSpot Crawler*, a la lista de permitidos como exención antes de enviar la ficha de tu aplicación.
* Un enlace a la documentación de configuración disponible públicamente específica para tu integración con HubSpot.
* Revisa todos los [requisitos de la documentación de configuración](https://developers.hubspot.com/docs). Esta guía también incluye una plantilla de ejemplo que cumple todos los requisitos.
* Por ejemplo, echa un vistazo a la [guía de configuración de OrgChartHub](https://orgcharthub.com/guides/setup).
* Incluye una URL de instalación de botón que lleve a los clientes a una página donde puedan conectar fácilmente tu aplicación con HubSpot.
* Las URL para los recursos de asistencia técnica de la aplicación (sitio web de asistencia técnica, foro de la comunidad de HubSpot, caso de éxito) deben estar activas, actualizadas y disponibles públicamente.
* Las URL para los términos del servicio y la política de privacidad de la aplicación deben estar disponibles y actualizadas.
* Todos los campos de URL tienen un límite de 250 caracteres.
* *Los datos compartidos*, que permiten a los usuarios saber cómo fluirá la información entre tu aplicación y HubSpot, deben ser correctos, estar actualizados y reflejar los [permisos](https://developers.hubspot.com/docs#:~:text=Webhooks%20API.-,Scopes,-%3A%20You%20must) que solicita tu aplicación.
* Todos los objetos seleccionados en los permisos de OAuth deben documentarse en la tabla *Datos compartidos*.
* Si tu aplicación solicita permisos de objetos de lectura y escritura, la sincronización de datos debe anunciarse como bidireccional para estos objetos específicos.
* La ficha en el mercado de aplicaciones debe cumplir con la siguiente información de precios:
* El plan de precios de la ficha debe coincidir con la información de precios publicada en tu sitio web.
* El plan de precios de la ficha solo debe incluir planes de precios que permitan el uso de tu integración en HubSpot.
* Si un plan de precios no admite la integración, no debe incluirse en la ficha.
* Por ejemplo, si tienes un *Plan A* y un *Plan B* para tu aplicación, pero solo el *Plan B* puede utilizarse con la integración, en la ficha solo deben incluirse los detalles del precio del *Plan B*.
* Los planes gratuitos solo se deben usar para modelos que siempre serán gratuitos o Freemium.
* Debes incluir al menos un método de contacto de asistencia técnica.
* Sigue las pautas que se indican [aquí](https://developers.hubspot.com/docs) para proporcionar credenciales de prueba para la ficha de tu aplicación.
## Revisión, comentarios y aprobación
Cuando envíes tu ficha, el equipo de calidad del ecosistema de HubSpot realizará una revisión inicial en el transcurso de 10 días hábiles. Si la información proporcionada es incorrecta, engañosa o está incompleta, te contactaremos con esos comentarios. Todo el proceso de revisión y comentarios de la aplicación no debe tardar más de 60 días desde el momento en que se comparten los comentarios. Tal como se indica en los [Términos del mercado de aplicaciones](https://legal.hubspot.com/app-program-agreement), HubSpot se reserva el derecho de cancelar o rechazar la publicación de la ficha de tu aplicación en cualquier momento.
**Nota**: solo puedes enviar una aplicación a la vez para la certificación. Cualquier solicitud adicional presentada mientras se procesa la solicitud inicial será rechazada automáticamente.
## Recompensas para App Partners con fichas
* Ficha dedicada para el mercado de aplicaciones de HubSpot
* Acceso prioritario a la asistencia para desarrolladores mediante un alias de asistencia técnica dedicado
* Recursos de la comunidad de desarrolladores, incluidos webinarios, foros y muchos más
* Recursos de marketing seleccionados, incluidas las plantillas de relaciones públicas y guías de lanzamiento
* Descuento en patrocinio, stands y entradas para INBOUND
* Descuento en software a través del programa HubSpot for Startups para etapas iniciales
* Boletín mensual con actualizaciones de marketing, lanzamientos de productos y mucho más
## Recursos relacionados
* [Cómo publicar la ficha de tu aplicación](/docs/apps/developer-platform/list-apps/listing-your-app/listing-your-app)
* [Requisitos de certificación de aplicación](https://developers.hubspot.com/docs)
* [Documentación de referencia de API](/docs/api-reference/overview)
* [Cómo usar las API de HubSpot](/docs/api-reference/overview)
* [Foro de la comunidad de desarrolladores](https://community.hubspot.com/t5/APIs-Integrations/bd-p/integrations)
* [Ponte en contacto con el equipo de App Partners](https://www.hubspot.com/partners/app/join)
# Crear una guía de configuración de fichas de aplicaciones
Source: https://developers.hubspot.es/docs/apps/developer-platform/list-apps/listing-your-app/create-an-app-listing-setup-guide
# vNext Docs DP - Publicar la ficha de una aplicación
Source: https://developers.hubspot.es/docs/apps/developer-platform/list-apps/listing-your-app/listing-your-app
Sigue estos pasos para solicitar que publiquemos la ficha de tu aplicación en el mercado de aplicaciones de HubSpot.
'Mercado de aplicaciones | Publicar la ficha de una aplicación';
'Sigue estos pasos para solicitar que publiquemos la ficha de tu aplicación en el mercado de aplicaciones de HubSpot.';
Después de crear una aplicación en tu cuenta de desarrollador que cumpla con los [requisitos del mercado de aplicaciones](https://developers.hubspot.com/docs), puedes enviarnos su ficha para que [la publiquemos en el mercado de aplicaciones](https://ecosystem.hubspot.com/marketplace/apps). El equipo de calidad del ecosistema de HubSpot revisará la ficha y te comunicará por correo electrónico cuando la aplicación ha sido aprobada o rechazada.
Debes ser un [superadministrador](https://knowledge.hubspot.com/es/user-management/hubspot-user-permissions-guide#super-admin) para actualizar y enviar la ficha de la aplicación.
## Crear y enviar la ficha de una aplicación
Antes de enviarnos la ficha de una aplicación, consulta la [página de requisitos](https://developers.hubspot.com/docs) para saber qué información incluir.
* En tu [cuenta de desarrollador de aplicaciones](https://developers.hubspot.com/docs), navega a **Mercado** > **Fichas de aplicaciones**.
* En la parte superior derecha, haz clic en **Crear ficha**. Si este botón está atenuado, es porque ya has creado fichas para todas tus aplicaciones.
* Selecciona la **aplicación** de la que deseas crear una ficha y haz clic en **Siguiente**. Las aplicaciones que ya figuran en el mercado de aplicaciones no aparecerán aquí.
* Haz clic en el menú desplegable **Selecciona el idioma principal de la ficha del \[nombre de la aplicación]** y selecciona el **idioma predeterminado** que verán los usuarios cuando naveguen por el mercado de aplicaciones.
* Haz clic en **Siguiente**.
El asistente de creación de la ficha tiene siete pestañas de información que rellenar.
* [Información de la ficha](#listing-info)
* [Detalles de la aplicación](#app-details)
* [Precios](#pricing)
* [Características de la aplicación](#app-features)
* [Información de asistencia](#support-info)
* [Información de prueba](#testing-info)
* [Revisar información](#review-info)
### Información de la ficha
En la pestaña *Información de la ficha*:
* En la sección *Información de la aplicación*, agrega el **nombre de tu aplicación pública**, el **nombre de la empresa**, el **eslogan de la aplicación** y la **URL del botón de conexión**. Para las cuentas creadas después del 5 de marzo de 2025, tendrás que seleccionar la URL del botón instalar de las URL de redireccionamiento establecidas en [los ajustes de la aplicación](guides/apps/public-apps/overview).
* En la sección *Ícono de la aplicación*, sube un ícono de 800 x 800 píxeles para representar tu aplicación. Aparecerá en el mercado de aplicaciones y en las cuentas de los usuarios conectados. Al crear el ícono:
* **Debes hacer lo siguiente**: usar un archivo JPG, JPEG o PNG, rellenar todo el espacio disponible, que es 800 x 800 píxeles (la imagen debería tocar al menos dos bordes y ser una imagen de alta resolución sin pixelar).
* **No debes hacer lo siguiente**: incluir texto en el ícono ni utilizar una marca denominativa ni dejar espacios en blanco adicionales alrededor del ícono.

* En la sección *Clasifica tu aplicación*, puedes seleccionar hasta dos **categorías**. Más información sobre las [distintas categorías disponibles](https://developers.hubspot.com/docs).
* También puedes configurar una **ruta de URL** y agregar **términos de búsqueda** que puedan utilizarse para encontrar la aplicación en el mercado de aplicaciones.
### Detalles de la aplicación
En la pestaña *Detalles de la aplicación*:
* En la sección *Video de demostración*, sube un **video** para mostrar cómo funciona tu aplicación. Consulta esta página sobre [cómo crear un gran video de demostración de aplicaciones](https://www.hubspot.com/partners/apps/resources/how-to-make-a-great-app-demo-video) para conocer las mejores prácticas y ejemplos de cómo crear un video de demostración.
* En la sección *Capturas de pantalla*, agrega **imágenes** y **texto alternativo** que describa el funcionamiento de tu aplicación. Puedes agregar hasta ocho imágenes.
* En la sección *Descripción de la aplicación*, ingresa un **resumen** de tu aplicación. La descripción debe incluir información sobre la funcionalidad de tu aplicación, los principales problemas empresariales que resuelve y las razones por las cuales los usuarios deberían instalarla.
* Haz clic en **Agregar datos compartidos**. En la sección *Datos compartidos*, informa a los usuarios cómo circularán los datos entre tu aplicación y HubSpot.
* En el panel de la derecha, selecciona qué objeto de la aplicación se sincroniza con qué objeto de HubSpot, y la dirección de la sincronización. En la sección *Descripción de la aplicación*, haz una breve **descripción** de cómo tu aplicación puede ayudar a los usuarios a conseguir sus metas.
* Para agregar otra sincronización de objetos, haz clic en **Agregar otro objeto**.

* Haz clic en el menú desplegable **Características de HubSpot con las que tu aplicación es compatible** y selecciona las **casillas de verificación** correspondientes. Puedes agregar hasta 10 herramientas y características de HubSpot.
* Haz clic en el menú desplegable **Otras herramientas con las que se integra tu software** y selecciona las **casillas de verificación** correspondientes. Puedes seleccionar hasta 6 herramientas o aplicaciones externas.
* En el menú desplegable **Idiomas en los que está disponible tu aplicación**, selecciona todos los **idiomas** pertinentes. Solo puedes crear fichas adicionales en el mercado de aplicaciones en estos idiomas.
### Precios
En la pestaña *Precios*:
* Haz clic en el menú desplegable **Divisa** y selecciona las **casillas de verificación** correspondientes. Puedes elegir entre más de 100 monedas.
* También puedes configurar los planes de precios de la aplicación agregando el **modelo**, el **nombre del plan**, el **eslogan**, los **detalles de los precios** y la **lista de características**.
* Dependiendo del modelo de precios seleccionado, puede que tengas que agregar más información, como la frecuencia de pago, si hay tarifas únicas o si los precios son mensuales. Coloca el cursor sobre el **ícono de información** para consultar detalles sobre cada modelo de precios.

* Para agregar planes de precios adicionales, haz clic en **Agregar otro plan**. Puedes agregar hasta 5 planes de precios.
* En la sección *Crea enlaces a los planes de precios de tu software*, introduce la **URL** donde los usuarios pueden encontrar más información sobre tus planes de precios.
* En la sección *Planes de precios para agencias*, introduce la **URL** donde los usuarios pueden obtener más información sobre los precios de los servicios de partner o de consultoría.
### Características de la aplicación
En la pestaña *Características de la aplicación*, agrega las características y orienta a los clientes sobre cómo usarlas. No hay límite en el número de características que se pueden crear para tu aplicación.
* En la parte superior derecha, haz clic en **Añadir característica**.
* En la página *Detalles de las características*:
* **Nombre de la característica:** ingresa el nombre de la característica. Esto debe describir lo que la característica hace.
* **Grupos de permisos:** selecciona todos los grupos de permisos que un cliente necesita que tengan esta característica. Los grupos de permisos se utilizan para determinar si la cuenta de HubSpot del cliente es compatible con las características de la aplicación.
* **Descripción:** incluye una descripción detallada sobre la característica y cómo puede ayudar a resolver los problemas empresariales de un cliente.
* **Imagen:** agrega una imagen para la característica. Después de agregar una imagen, selecciona dónde quieres que muestre, **en la ficha de la aplicación** o **en la tarjeta de descubrimiento de características**.
* Si prefieres mostrar la característica como una tarjeta de descubrimiento:
* Selecciona una opción para el botón principal:
* **Enlazar a una característica:** selecciona a qué característica de HubSpot debe enlazar el botón.
* **Crear personalizado**: incluye **el texto del botón** y la **URL del botón**.
* **Sin botón principal:** ningún botón se mostrará en la tarjeta de descubrimiento de características.
* Selecciona una guía práctica para incorporar a tus clientes:
* **Crear una guía desde cero:** introduce un **título**, una **descripción** y una **imagen o un video**.
* **Enlace externo a la guía:** introduce la **URL de la guía**.
* **Guía solo de video:** sube un **video**.
* Para agregar otra guía, haz clic en **Agregar otra sección**.

### Información de asistencia
Haz clic en la pestaña *Información de asistencia*:
* En la sección *Información de contacto*, agrega un método de contacto de asistencia para los usuarios que tengan preguntas al utilizar tu aplicación. Es necesario que agregues un **correo electrónico de asistencia** y los **idiomas** en los que el servicio de asistencia al cliente está disponible. También puedes incluir enlaces al sitio web de tu empresa, al live chat, a la página de Facebook y a un número de teléfono.
* En la sección *Recursos de asistencia*, incluye **enlaces** a la documentación de configuración de la aplicación.
* En la sección *Términos del servicio y política de privacidad*, agrega **enlaces** a tu documentación sobre privacidad.
### Información de prueba
En la pestaña *Información de prueba*:
* En el campo *Instrucciones para la revisión de la aplicación*, ingresa las indicaciones para que los desarrolladores de HubSpot prueben la aplicación como parte del proceso de revisión. Más información sobre como [Proporcionar los detalles y las credenciales de prueba para tu aplicación](https://developers.hubspot.com/docs).
* En la sección de *Puntos de contacto del App Partner Program*, añade detalles para que los miembros de tu equipo reciban información técnica y del programa sobre tu aplicación.
* Debes incluir al menos un *Punto de contacto principal del App Partner Program* y un *desarrollador* para contactar. Debes incluir el **rol de la persona**, el **nombre** y **apellido**, el **correo electrónico** y el **país** de residencia.
* Para agregar otra persona como punto de contacto, en la parte inferior, haz clic en **Agregar otro punto de contacto**.
### Revisar información
En la pestaña *Revisar información*:
En la sección *Revisar aplicación* aparecerá una lista de todos los errores existentes:
* Para revisar los detalles de todos los errores de la ficha, en la parte superior, haz clic en **Abrir todos**.
* Para ocultar los detalles de todos los errores de la ficha, en la parte superior, haz clic en **Contraer todos**.
* Para resolver un error, haz clic en el **nombre del error**. Esto te dirigirá a la pestaña y la sección para resolver el error.

* Si el botón *Validar y enviar* está atenuado, comprueba que hayas completado todos los campos obligatorios y que tengas permisos de *superadministrador*.
* Si has omitido algún campo obligatorio, verás un número en el encabezado de la pestaña que indica el número de campos omitidos. Haz clic en cada **pestaña** para introducir la información que falta, luego vuelve a la pestaña *Revisar información*.
* En la parte inferior, haz clic en **Ejecutar validación**.

## Crear y actualizar la versión localizada de la ficha de una aplicación que ya está en el mercado
Para crear fichas en otros idiomas, tendrás que definir un idioma principal en la ficha actual de la aplicación y publicarla en ese idioma en el mercado de HubSpot.
* En tu cuenta de desarrollador de aplicaciones, haz clic en **Mercado de aplicaciones** > **Fichas**.
* Si ya tienes una aplicación en el mercado, verás un banner amarillo encima de la aplicación, que te pedirá que definas el idioma principal de la ficha. Haz clic en **Configurarlo ahora**. Tendrás que definir el idioma principal de la ficha de la aplicación antes de poder crear fichas en otros idiomas.
* En el cuadro de diálogo, haz clic en el menú desplegable **Selecciona los idiomas en los que está disponible tu aplicación** y selecciona los **idiomas** pertinentes.
* Haz clic en el menú desplegable \*\*Selecciona el idioma principal de la ficha del \[nombre de la aplicación]\*\*y selecciona el **idioma predeterminado** que verán los usuarios cuando naveguen por el mercado de aplicaciones.
* Haz clic **Guardar.**
Una vez que hayas definido un idioma principal, podrás agregar una ficha en otro idioma:
* Coloca el cursor sobre la **ficha de la aplicación** y haz clic en **Más** > **Crear ficha en otro idioma**.
* Si quieres traducir la ficha a otros idiomas automáticamente, haz clic para activar el interruptor de **Traducción automática**.
* Si seleccionaste esta opción, las fichas traducidas se publicarán automáticamente e inmediatamente en el mercado. Las traducciones automáticas de fichas se saltarán la revisión del administrador.
* Haz clic en el menú desplegable **Idioma de esta ficha** y selecciona el **idioma** en el que quieres crearla.
* Cuando un usuario haya configurado el idioma en su cuenta, verá automáticamente la ficha en ese mismo idioma. Por ejemplo, si has creado una ficha en español y un usuario ha configurado el español como [idioma predeterminado en su cuenta](https://knowledge.hubspot.com/es/account-management/change-your-language-and-region-settings), la ficha le aparecerá en español.
* Si se ha activado la opción *Traducción automática*, los idiomas seleccionados se traducirán y se publicarán automáticamente como fichas nuevas.
* Haz clic en **Crear**. Si estás creando la ficha manualmente, sigue los pasos para crear y enviar una ficha en el idioma seleccionado.
## Editar la ficha publicada de una aplicación
Una vez que la ficha de una aplicación está publicada en el mercado de aplicaciones, debes hacer lo siguiente para editarla:
* En tu cuenta de desarrollador, navega a **Mercado** > **Fichas de aplicaciones**.
* Coloca el cursor sobre la ficha que deseas editar y haz clic en **Más**. A continuación, selecciona **Editar**.
* Después de aplicar los cambios, en la parte superior derecha, haz clic en **Validar y enviar**.
* En el cuadro de diálogo, lee los términos y condiciones y, a continuación, selecciona las **casillas de verificación**.
* Para traducir automáticamente cualquier cambio en las fichas localizables, selecciona la casilla de verificación **Traducir automáticamente todas mis fichas localizables compatibles**. Pasa el cursor por encima de la opción *mis fichas localizables compatibles* para ver qué fichas se traducirán automáticamente.
* Clic **Aceptar y enviar**.

## Dejar de publicar una ficha de una aplicación
* En tu cuenta de desarrollador, navega a **Mercado** > **Fichas de aplicaciones**.
* Coloca el cursor sobre la ficha que quieres retirar y haz clic en **Más**. Luego, selecciona **Dejar de publicar ficha**.
* En el cuadro de diálogo, escribe el motivo y haz clic en **Solicitar que deje de publicarse**.
Estas solicitudes serán procesadas por el equipo del mercado de HubSpot en los 10 días hábiles posteriores al envío.
# Mercado de aplicaciones | Categorías de las aplicaciones
Source: https://developers.hubspot.es/docs/apps/developer-platform/list-apps/listing-your-app/understand-app-categories
# Configura la programación para demostraciones desde la página de índice de la aplicación
Source: https://developers.hubspot.es/docs/apps/developer-platform/list-apps/set-up-demo-scheduling-from-the-app-listing-page
Encuentra más información sobre cómo permitir que los contactos envíen un formulario o programen una reunión desde la página de índice de tu aplicación.
Cuando configures la página de índice de tu aplicación, puedes añadir una página de programación o un formulario para que los clientes potenciales puedan programar una demostración.
## Añadir una página de programación o un formulario a la ficha de una aplicación
* En tu cuenta de desarrollador, navega a **Mercado** > **Fichas de aplicaciones**.
* Pasa el cursor encima de una ficha y haz clic en **Más**, luego selecciona **Editar**. Más información sobre cómo [crear una ficha de aplicaciones](/docs/apps/developer-platform/list-apps/listing-your-app).
* En la pestaña *Información de la ficha*, añade opciones para programar una demostración:
* Para añadir un enlace de reuniones, haz clic en el menú desplegable **Añadir URL de reuniones** y selecciona una **página de programación**. Para crear una nueva página de programación, haz clic en **Crear un enlace para reuniones**. Más información sobre cómo crear [páginas de programación de reuniones](https://knowledge.hubspot.com/meetings-tool/create-and-edit-scheduling-pages).
* Para añadir un formulario, haz clic en el menú desplegable **Añadir formulario de contacto** y selecciona un **formulario**. Para crear un nuevo formulario, haz clic en **crear un formulario de contacto** Más información sobre cómo [usar los formularios de contacto](https://knowledge.hubspot.com/forms/create-and-edit-forms).

* En la parte superior derecha, haz clic en **Validar y enviar**.
Una vez aprobados los cambios, tus clientes verán una opción en la parte superior derecha de la ficha de tu aplicación para programar una demostración o solicitar que se pongan en contacto contigo. Si has añadido una página de programación y un formulario de contacto, ambas opciones estarán disponibles en el menú desplegable *Programar demostración*.

# Mercado de aplicaciones | Proporcionar credenciales de prueba para una aplicación
Source: https://developers.hubspot.es/docs/apps/developer-platform/list-apps/testing-credentials
# Ver contactos creados desde el mercado de aplicaciones
Source: https://developers.hubspot.es/docs/apps/developer-platform/list-apps/view-contacts-created-from-the-marketplace
Encuentra más información sobre cómo acceder a una lista de contactos que han interactuado con tus fichas de aplicación.
Cuando los contactos interactúan con la ficha de tu aplicación en el mercado de aplicaciones, se añaden automáticamente a una lista específica en la cuenta de desarrollador asociada. A partir de ahí, puedes ponerte en contacto con ellos para evaluar si la aplicación se ajusta a sus necesidades.
## Antes de comenzar
Antes de comenzar a usar esta función, asegúrate de comprender bien los pasos previos que debes seguir, así como sus limitaciones.
### Comprender los requisitos
* La cuenta de desarrollador asociada a la aplicación debe utilizar las herramientas gratuitas de HubSpot.
* Los contactos aparecerán en la lista cuando realicen una de las siguientes acciones en la ficha de tu aplicación:
* Hacer clic en un video o en una captura de pantalla.
* Hacer clic en "Ver la guía de configuración".
* Hacer clic en "Sitio web de la empresa".
### Comprender las limitaciones y consideraciones
* Solo se añadirán a la lista los contactos que hayan iniciado sesión en HubSpot cuando accedan a la ficha de aplicaciones.
## Acceder al listado de contactos de la aplicación
* En la cuenta de desarrollador de HubSpot asociada a tu aplicación, dirígete a **CRM** > **Listas**.
* Haz clic en la **lista** llamada "Mercado de aplicaciones - \[Nombre de la aplicación]". Si tienes varias aplicaciones, cada una de ellas tendrá una lista distinta.

* Puedes ver la siguiente información de los contactos:
* Nombre
* Apellido
* Empresa
* Correo electrónico
# Especificar las áreas de arrastrar y soltar en una plantilla de correo electrónico personalizada
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/custom-email-template
Obtén más información sobre cómo especificar las áreas de arrastrar y soltar en una plantilla de correo personalizada
> **Productos compatibles**
Las [áreas de arrastrar y soltar](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview) permiten a los desarrolladores crear secciones en las plantillas de correo personalizadas que admiten cambios en la disposición de los elementos, el diseño y el contenido directamente en el editor del correo. Esto permite a los desarrolladores crear unas pocas plantillas de correo con una estructura global, facilitando a los creadores de contenido la generación de múltiples páginas con distintos propósitos y diseños.
> [!WARNING]
>
> **Nota:** Las plantillas de correo personalizadas solo pueden tener un área de arrastrar y soltar.
**1. Crear una nueva plantilla HTML**
Crea una nueva plantilla HTML que incluya el HubL y el HTML que conformarán la sección de arrastrar y soltar:
* En tu cuenta de HubSpot, navega a **Contenido** > **Administrador de diseño**.
* En la barra lateral izquierda, crea un nuevo archivo haciendo clic en **Archivo** > **Nuevo archivo**.
* En el cuadro de diálogo, haz clic en el menú desplegable **¿Qué te gustaría diseñar?** y selecciona **HTML y HubL**.
* Haz clic en **Siguiente**.
* Haz clic en el menú desplegable **Tipo de plantilla** y luego selecciona **Correo**.
* Escribe el **nombre** de la plantilla.
* Para cambiar la ubicación de la plantilla, haz clic en **Cambiar** en *Ubicación del archivo*, y selecciona la nueva carpeta donde se creará la plantilla.
* Haz clic en **Crear**.
**2. Añadir etiquetas HubL al encabezado de la plantilla**
Revisa las siguientes etiquetas necesarias y opcionales que puedes incluir en la sección `` de tu plantilla de correo para agregar elementos de diseño y mejorar la compatibilidad:
### Etiqueta necesaria
`{{ dnd_area_stylesheet }}`
Esta etiqueta permite lo siguiente:
* Añadir recursos audiovisuales asociados
* Corregir problemas de diseño conocidos en Outlook
* Restablecer los márgenes y los rellenos
* Activar el Anti-aliasing
* Añadir algo de CSS
### Etiquetas opcionales
Para asegurarte de que la plantilla se muestra de forma consistente en los principales clientes de correo electrónico, también puedes incluir las siguientes etiquetas opcionales de HubL en la plantilla:
* `{{ email_header_includes }}`: esta etiqueta insertará CSS en la plantilla, lo que facilita la renderización del diseño, la resolución de problemas comunes de estilo y la incorporación de metadatos al HTML del correo. Al analizar esta etiqueta HubL, el siguiente contenido se añadirá dentro del `` del HTML del correo electrónico:
| Parámetro | Descripción |
| - | - |
| `` | Evitar que el iOS 11 modifique la escala de los correos de manera automática |
| `` | Indica a los navegadores y clientes de correo la forma en que se espera que interpreten los distintos caracteres. |
| `` | Esta etiqueta habilita CSS3 y las solicitudes de recursos audiovisuales en Windows Phone 7.5, indica a Internet Explorer que renderice el contenido con la mayor calidad posible y permite al navegador elegir la versión de Internet Explorer con la que se debe renderizar el correo. |
| `` | Ajusta el área visible a la anchura de la pantalla del dispositivo, lo que facilita la recepción del correo. |
* `{{ reset_css_stylesheet }}`: incluir esta etiqueta solucionará varios problemas de diseño en Outlook, y también restablecerá los márgenes y rellenos del correo.
-`{{ outlook_background_snippet }}`: esta etiqueta ajustará la imagen o el color de fondo en Outlook, siempre que se haya especificado una regla CSS de fondo asociada
**3. Crear un área de arrastrar y soltar**
Después de añadir la etiqueta HubL `{{ dnd_area_stylesheet }}` y cualquier otra etiqueta opcional a la sección `` de la plantilla, puedes configurar la sección `dnd_area` en el cuerpo de la plantilla.
### Crear un área vacía de arrastrar y soltar
La sección `dnd_area` es lo que hace que una parte de la página web sea editable en cuanto a su estructura, diseño y contenido. El cuerpo de una etiqueta `dnd_area` suministra el contenido predeterminado para el área de arrastrar y soltar.
El área de arrastrar y soltar puede estar entre las etiquetas `
` o `
`. Una limitación del área de arrastrar y soltar es que la anchura mínima es de 624 píxeles y este valor no se puede cambiar.
La etiqueta por sí sola generará una zona para que los creadores de contenido arrastren los módulos en el editor.
Las líneas de código a continuación especificarían un área de arrastrar y soltar vacía:
```hubl theme={null}
{% dnd_area "main" %}
{% end_dnd_area %}
```
### Crear un área de arrastrar y soltar
También puedes personalizar el área de arrastrar y soltar para especificar secciones y columnas predeterminadas utilizando los campos `dnd_section` y `dnd_column`.
Por ejemplo, el siguiente código HubL especificaría un área de arrastrar y soltar con 3 columnas:
```hubl theme={null}
{% dnd_area "main" %}
{% dnd_section padding={'top': 25, 'bottom': '20} %}
{% dnd_column width=4 %}
{% end_dnd_column %}
{% dnd_column width=4 %}
{% end_dnd_column %}
{% dnd_column width=4 %}
{% end_dnd_column %}
{% end_dnd_section %}
{% end_dnd_area %}
```
> [!WARNING]
>
> La etiqueta HubL `dnd_row` no es compatible actualmente con las plantillas de correo.
**4. Añadir un área de arrastrar y soltar con módulos**
Para rellenar la sección con contenido, se puede utilizar la etiqueta `dnd_module` para incluir un módulo haciendo referencia a su ruta. El módulo debe añadirse dentro de una sección y una columna para rellenar el área de arrastrar y soltar con contenido.
En el siguiente ejemplo, se hace referencia a un módulo predeterminado de HubSpot, pero también es posible incluir módulos que hayas creado, especificando su ruta en el árbol de archivos de tus herramientas de diseño.
Para especificar un valor predeterminado en el `dnd_module`, puedes utilizar la etiqueta `module_attribute`.
```hubl theme={null}
{% dnd_area "main", full_width=False %}
{% dnd_section padding={
'top':'25',
'bottom':'20'
}, full_width=False %}
{% dnd_column width=6 %}
{% dnd_module path='@hubspot/image_email', img={
'alt':'NavyLogo',
'height':38,
'src':'email_dnd_template_images/NavyLogo.png',
'width':120
}, alignment='center', hs_enable_module_padding=True, hs_wrapper_css={
'padding-bottom':'10px',
'padding-left':'20px',
'padding-right':'20px',
'padding-top':'10px'
} %}
{% end_dnd_module %}
{% end_dnd_column %}
{% dnd_column width=6 %}
{% end_dnd_column %}
{% end_dnd_section %}
{% end_dnd_area %}
```
**5. Personaliza y crea el diseño de la plantilla de arrastrar y soltar**
Cada etiqueta HubL de arrastrar y soltar (por ejemplo, `dnd_area`, `dnd_section`, `dnd_column`, etc.) incluye diferentes parámetros que puedes utilizar para definir un diseño predeterminado y especificar otros tipos de comportamientos, como la etiqueta que aparecerá en la barra lateral del editor de correo.
Para saber más sobre los parámetros disponibles para cada etiqueta, consulta los enlaces que aparecen a continuación para cada una:
* [dnd\_area](/docs/cms/reference/hubl/tags/dnd-areas#dnd-area)
* [dnd\_section](/docs/cms/reference/hubl/tags/dnd-areas#dnd-section)
* [dnd\_column](/docs/cms/reference/hubl/tags/dnd-areas#dnd-column)
* [dnd\_module](/docs/cms/reference/hubl/tags/dnd-areas#dnd-module)
# Plantillas de arrastrar y soltar
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates
Las plantillas de arrastrar y soltar en el administrador de diseño son plantillas creadas con un visualizador de eventos. No se recomiendan para las plantillas nuevas, ya que las plantillas codificadas brindan una mejor experiencia.
> **Productos compatibles**
> [!WARNING]
>
> **No se recomiendan las plantillas de arrastrar y soltar para las nuevas plantillas.** Estas plantillas no pueden ser parte de un tema, por lo que no son compatibles con la funcionalidad del tema, como los campos y los módulos del tema. Las plantillas de arrastrar y soltar **NOT** son compatibles con CMS Hub Starter. Usa `dnd_area` en su lugar. Las plantillas de arrastrar y soltar no admiten varias de las características más nuevas del CMS ([membresías](/docs/cms/start-building/features/memberships/overview), áreas de [arrastrar y soltar](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview), [secciones reutilizables](/docs/cms/start-building/building-blocks/sections/sections), GraphQL y muchas otras características). Carecen de extensibilidad y no proporcionan una experiencia tan buena para los creadores de contenido y desarrolladores como las plantillas codificadas. En su lugar, recomendamos usar las plantillas codificadas [HTML + HubL](/docs/cms/start-building/building-blocks/templates/html-hubl-templates) con [áreas de arrastrar y soltar](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview), que ofrecen una mejor experiencia para desarrolladores y profesionales de marketing. Para un inicio rápido en el CMS, recomendamos consultar la [biblioteca de temas de HubSpot,](https://github.com/HubSpot/cms-theme-boilerplate) que se ha creado utilizando plantillas codificadas.
Las [plantillas](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview) de arrastrar y soltar fueron diseñadas para que los usuarios menos técnicos puedan crear fácilmente un sitio web en el CMS de HubSpot. Las plantillas de arrastrar y soltar aprovechan un creador visual de plantillas, que genera HTML + HubL en segundo plano.
Con el fin de hacer que el creador visual funcione, la salida en HTML es controlada por HubSpot y no tienes control directo sobre las partes estructurales de la misma. Además, **se carga un archivo layout.css en la página para una cuadrícula de 12 columnas básicas** basada en Bootstrap 2. Esto hace que todos los sitios creados con plantillas de arrastrar y soltar respondan por opción predeterminada, lo que hace que las filas de contenido se apilen verticalmente. Para lograr una respuesta más avanzada y personalizada, deberás agregar tus propios estilos de respuesta.
Las plantillas de arrastrar y soltar se crean en el administrador de diseño y, al interactuar con ellas a través de la API o las [herramientas de desarrollo local](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) se representan en formato JSON. Debido a la estructura de las plantillas de arrastrar y soltar, la única forma recomendada para editarlas es a través de la interfaz del administrador de diseño. **Si prefieres usar código, puedes usar el control de versiones o simplemente editar usando tus herramientas preferidas de forma local, las plantillas codificadas HTML + HubL ofrecen la mejor experiencia para los desarrolladores.** La funcionalidad [dnd\_area](/docs/cms/reference/hubl/tags/dnd-areas) de las plantillas HTML + HubL también proporciona una mejor experiencia para los creadores de contenido que la interfaz de arrastrar y soltar del administrador de diseño, ya que se mantiene en el editor de contenido visual.
## Creador de plantillas de arrastrar y soltar
Para crear una plantilla de arrastrar y soltar, abre el administrador de diseño y, en el buscador, crea un nuevo archivo, elige una plantilla y el [tipo de plantilla](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview#template-types) que estás creando.
Las plantillas de arrastrar y soltar se componen de bloques de creación, estos bloques son módulos, grupos, grupos globales y columnas flexibles.
[Aprende cómo usar el creador de plantillas de arrastrar y soltar](https://knowledge.hubspot.com/es/design-manager/structure-and-customize-template-layouts).
### Módulos
Los módulos son componentes reutilizables que son partes editables de una página. Los módulos se componen de un fragmento de plantilla HTML + HubL, CSS, JS y campos. Los módulos pueden colocarse dentro de columnas flexibles y dnd\_areas para ser gestionados por los editores de contenido, siendo la principal forma en que administran el contenido de su sitio web. Puedes crear módulos para manejar cualquier número de funciones, búsquedas, galerías de imágenes, menús, animaciones de marketing complejas, calculadoras, comparaciones de productos, etc. Las posibilidades dependen de ti y de lo que crees que podría ser una buena experiencia de uso para los creadores de contenido. Los campos son la manera en que el editor de contenido controla el resultado. Los módulos no son únicos para las plantillas de arrastrar y soltar, son un bloque de creación central muy importante para el CMS de HubSpot. En las plantillas de arrastrar y soltar, los valores predeterminados para los campos del módulo se pueden configurar en el [inspector](https://knowledge.hubspot.com/es/design-manager/a-quick-tour-of-the-design-manager). [Más información sobre los módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview)

### Grupos
Los grupos son contenedores para otros grupos y módulos, pueden tener clases CSS y estructura HTML. Los grupos se manifiestan como estructuras HTML con clases de diseño para facilitar la colocación y el tamaño de los grupos. Los grupos también pueden tener un nombre interno. Con esto, puedes [agrupar los módulos](https://knowledge.hubspot.com/es/design-manager/structure-and-customize-template-layouts#group-modules) en el administrador de diseño, lo que facilita la identificación visual de las partes de una página. Un ejemplo de uso podría ser para barras laterales o banners.
> [!WARNING]
>
> Dado que los archivos [HTML + HubL](/docs/cms/start-building/building-blocks/templates/html-hubl-templates) son la opción recomendada para los nuevos sitios, columnas, secciones y filas de las [áreas de arrastrar y soltar](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview) reemplazan en gran medida las funciones de los grupos.
>
> Además, un desarrollador puede crear parciales y [parciales globales](/docs/cms/start-building/building-blocks/global-content), los cuales pueden contener código libre además de áreas de arrastrar y soltar.
>
> Las áreas de arrastrar y soltar, los parciales y los parciales globales no son compatibles con las plantillas de arrastrar y soltar.

### Grupos globales
Los grupos globales son grupos que cuando se editan modifican todo el sitio web y no solo a la página en la que se encuentran. Los grupos globales pueden existir en múltiples plantillas y se utilizan con mayor frecuencia para encabezados y pies de página de sitios. Los grupos globales son similares a los parciales, pero se limitan a la estructura que aplican las plantillas de arrastrar y soltar. Se pueden insentar en archivos HTML + HubL si es necesario, pero, en la mayoría de los casos, es más recomendable utilizar un parcial global.

### Columnas flexibles
Las columnas flexibles son un tipo especial de grupo. Pueden contener un conjunto predeterminado de módulos, pero los editores de contenido pueden agregar, eliminar y mover módulos dentro de ellas. Las columnas flexibles permiten reordenar los módulos de una manera unidimensional, verticalmente hacia arriba y hacia abajo. [A diferencia de las etiquetas dnd\_area](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview), \*\*las columnas flexibles no admiten secciones ni las opciones de diseño disponibles para los módulos dentro de ellas..\*\*Las columnas flexibles no son exclusivas para las plantillas de arrastrar y soltar, hay una [etiqueta HubL](/docs/cms/reference/hubl/tags/standard-tags#flexible-column) que se puede usar en plantillas [HTML + HubL](/docs/cms/start-building/building-blocks/templates/html-hubl-templates). [Aprende cómo agregar una columna flexible a una plantilla de arrastrar y soltar](https://knowledge.hubspot.com/es/design-manager/structure-and-customize-template-layouts#add-a-flexible-column).
> [!TIP]
>
> En general, se recomienda usar las áreas de arrastrar y soltar, ya que la mayoría de las veces son más útiles y proporcionan todas las capacidades que proporcionan las columnas flexibles.
>
> Todavía puede haber casos útiles para utilizar una columna flexible, como en una barra lateral. Las áreas de arrastrar y soltar son mucho más flexibles para las áreas de contenido principal.

El uso de columnas flexibles permite adaptarse a la naturaleza cambiante de los sitios web, que suelen evolucionar y mantenerse a lo largo del tiempo. Por ejemplo, una página de inicio de una empresa puede mostrar sus productos destacados y, con frecuencia, puede cambiar según las necesidades del negocio. Como los editores de contenido pueden agregar, eliminar y modificar elementos dentro de una columna flexible, el proceso se vuelve más ágil para los equipos de marketing y permite que los desarrolladores se concentren en lo que realmente disfrutan: crear experiencias innovadoras en lugar de hacer ajustes menores en las páginas.
Del mismo modo, las páginas en un sitio pueden tener diferentes necesidades estructurales. Las columnas flexibles dan a los profesionales de marketing el control para crear esas páginas utilizando módulos personalizados.
### Agregar código personalizado a tus plantillas de arrastrar y soltar
Hay múltiples formas de agregar código personalizado a tus plantillas de arrastrar y soltar. El método principal es a través de los módulos personalizados. Sin embargo, en algunos casos puede ser necesario agregar código que contenga los módulos o grupos. Para ello, haz clic en el módulo o grupo para verlo en el inspector y encontrar el campo con la estructura HTML. Agrega tu HTML.
En algunos casos puede que debas agregar código al encabezado de tu HTML o código justo encima del ``. Con la plantilla abierta, asegúrate de no tener nada seleccionado. El inspector mostrará los campos para la plantilla en sí. Aquí puedes vincular hojas de estilo y JavaScript, además de agregar HTML adicional en la sección del encabezado o justo antes de la etiqueta ``.
Para esto usarás el [inspector](https://knowledge.hubspot.com/es/design-manager/a-quick-tour-of-the-design-manager). El inspector tiene campos en el nivel de la plantilla para las [hojas de estilo, JavaScript](https://knowledge.hubspot.com/es/design-manager/a-quick-tour-of-the-design-manager##attach-stylesheets-and-javascript-files), [`` marcado](https://knowledge.hubspot.com/es/design-manager/a-quick-tour-of-the-design-manager#customize-your-template-s-head-and-body-options), etc.

# Resumen de las áreas de arrastrar y soltar
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview
Las áreas de arrastrar y soltar permiten a los creadores de contenido colocar módulos, cambiar el diseño y algunos estilos dentro de los editores de contenido. Los desarrolladores crean diseños predefinidos.
Las áreas de arrastrar y soltar te permiten crear áreas de páginas y parciales globales donde los creadores de contenido pueden colocar módulos, cambiar el diseño y añadir el estilo dentro del editor de contenido. Al utilizar las áreas de arrastrar y soltar, puedes crear menos plantillas, ya que los creadores de contenidos pueden crear diseños por su cuenta.
A continuación, obtén más información sobre la experiencia y los conceptos de `dnd_area`. Una vez tengas todo listo para comenzar a crear, consulta la guióa de los [primeros pasos para usar dnd\_area](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial), y la [referencia de dnd\_area](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas).
> [!WARNING]
>
> ### Nota:
>
> Las áreas de arrastrar y soltar no se pueden utilizar en [publicaciones de blog](/docs/cms/start-building/building-blocks/templates/blog) ni [plantillas de correo electrónico](/docs/cms/start-building/building-blocks/templates/overview#email).
## La experiencia para los creadores de contenido
Cuando los creadores de contenido crean una página utilizando una plantilla que tiene áreas de arrastrar y soltar, primero ven la página con los módulos predefinidos en el diseño que hayas definido como desarrollador. Este diseño inicial configura el aspecto que tendrán las páginas que utilicen esta plantilla. Utilizando las áreas de arrastrar y soltar, los creadores de contenidos pueden crear la página, incluyendo:
* Añadir módulos, secciones, filas y columnas.
* Cambiar el tamaño de los módulos y actualizar su contenido y estilo, como ajustar la alineación y añadir fondos.
Esto les brinda la flexibilidad suficiente para realizar cambios simples en la página sin necesitar de un desarrollador para ajustes menores.
> [!WARNING]
>
> ### Nota:
>
> Los creadores de contenido pueden cambiar la plantilla de una página por otra del mismo tipo, dependiendo de si tiene las etiquetas [dnd\_area](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas).
>
> Las plantillas creadas con el editor de diseño visual de arrastrar y soltar pueden cambiarse por otras plantillas de arrastrar y soltar o plantillas codificadas con o sin etiquetas `dnd_area`.
>
> * Las plantillas codificadas con etiquetas *dnd\_area* solo pueden cambiarse por otras plantillas codificadas con etiquetas `dnd_area`.
> * Las plantillas codificadas sin etiquetas `dnd_area` solo pueden cambiarse por otras plantillas codificadas sin etiquetas `dnd_area`.
>
> Cuando se cambia la plantilla de la página, todo el contenido que se hubiera añadido a las áreas de arrastrar y soltar de la primera plantilla se mantendrá.

## La experiencia para los desarrolladores
Desarrollar con áreas de arrastrar y soltar es similar a trabajar con marcos comunes de CSS y sus cuadrículas. Primero, diseñas la página utilizando contenedores llamados [secciones](/docs/cms/start-building/building-blocks/sections/sections), que contienen filas. Dentro de esas filas hay módulos y columnas. Obtén más información [elementos](#drag-and-drop-area-elements) a continuación.
Aunque podrías codificar casi todo en la plantilla, el objetivo de desarrollar con áreas de arrastrar y soltar es que establezcas un contenido predeterminado en la página, que luego podrá ser editado por un creador de contenido.
Consulta la [biblioteca de plantillas del CMS HubSpot](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates) para ver las etiquetas `dnd_area` en uso.

## Elementos de las áreas de arrastrar y soltar
Cuando crees una página con áreas de arrastrar y soltar, debes incluir los siguientes elementos:
* [**dnd\_area**](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas#dnd-area)**:** el elemento de arrastrar y soltar de nivel más alto que permite arrastrar y soltar módulos en el editor de contenidos. No puedes anidar áreas de arrastrar y soltar. Por ejemplo, un `dnd_section` no puede contener una etiqueta `dnd_area`.
* [**dnd\_section**](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas#dnd-section)**:** el contenedor más externo en un `dnd_area`. Puede contener `dnd_row`, `dnd_column`, y `dnd_module`. No puedes anidar un `dnd_section` dentro de otros elementos de arrastrar y soltar.
* [**dnd\_column**](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas#dnd-column)**:** puede contener `dnd_row`. Varias columnas dentro de un `dnd_row` alinearán horizontalmente el contenido de la fila.
* [dnd\_row](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas#dnd-row)**:** puede contener `dnd_module` y `dnd_column`.
* [dnd\_module](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas#dnd-module)**:** un contenedor de módulo en el que se pueden agregar el diseño, los estilos y el contenido del módulo.
Obtén más información sobre cada una de estas etiquetas a continuación. Además, puedes consultar la [guía de introducción a las áreas de arrastrar y soltar](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial) para tener un enfoque práctico.

El siguiente diagrama desglosa aún más la jerarquía de los distintos elementos de arrastrar y soltar.

Para ver una demostración en video sobre cómo visualizar las áreas de arrastrar y soltar, consulta el siguiente video:
[https://www.youtube.com/embed/RUs24n8DfzA](https://www.youtube.com/embed/RUs24n8DfzA)
Sigue leyendo para saber más sobre las secciones, filas, columnas y módulos de arrastrar y soltar.
### Secciones
Las secciones son un tipo especial de filas que se crean utilizando la etiqueta [`dnd_section`](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas#drag-and-drop-section-code-dnd-section-code-). Son el único elemento de arrastrar y soltar que puede ser descendiente directo de un área de arrastrar y soltar `dnd_area`. Puedes pensar en las secciones como un contenedor externo. Pueden permitir que el contenido tenga un ancho completo o que tenga un ancho máximo centrado y delimitado. Debido a que las secciones contienen las columnas y los módulos, facilitan la reorganización e implementación de grandes porciones de contenido. La etiqueta `dnd_section` no muestra un elemento HTML ``.
A continuación se muestra una captura de pantalla de cómo aparece una sección en el editor de páginas.

Además de la etiqueta `dnd_section`, también puedes crear [plantillas de secciones](/docs/cms/start-building/building-blocks/sections/sections#create-reusable-sections), que son secciones predefinidas reutilizables a las que los creadores de contenido pueden acceder en el editor de páginas. Por ejemplo, podrías convertir la sección de la captura de pantalla anterior en una plantilla de sección, permitiendo que un creador de contenidos la agregue rápidamente a las páginas según sea necesario. Las secciones tienen capacidades únicas, incluyendo la posibilidad de utilizarlas de forma similar a una plantilla parcial estándar de hubL.
### Columnas
Las columnas son contenedores de filas y módulos, y pueden colocarse dentro de una fila o sección. Las columnas se crean utilizando la etiqueta [`dnd_column`](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas#drag-and-drop-column-code-dnd-column-code-).
Utiliza varias columnas dentro de una fila para colocar las filas y los módulos que los contienen de forma horizontal.
Las columnas son regiones verticales que pueden contener filas. Puedes hacer columnas de diferentes tamaños cambiando su anchura. El tamaño de una fila es de 12 "columnas" de ancho, esto se refiere a la cuadrícula CSS. Las columnas dentro de una fila pueden ser de cualquier tamaño menor que 12 pero no pueden sumar más de 12.
Cuando se colocan varias filas dentro de una columna, los módulos dentro de esas filas aparecerán apilados verticalmente. Dado que los módulos son columnas en sí, un módulo no puede ser descendiente directo de una columna, sino que debe estar contenido en una fila.

La apariencia de una columna en el editor de páginas.
### Filas
Las filas son las que contienen las columnas. Las filas son creadas en las plantillas utilizando la etiqueta [`dnd_row`](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas#drag-and-drop-row-code-dnd-row-code-). Como los módulos son columnas, puedes colocarlos directamente dentro de una fila. Esto causará que los módulos aparezcan horizontalmente adyacentes entre sí.
Los módulos se pueden organizar verticalmente colocándolos dentro de las filas. Si quieres colocar un módulo por encima de otro, debes colocar ese módulo dentro de una fila. Luego, se agregaría otro módulo en una fila por encima o por debajo de esa primera fila.

La apariencia de una fila en el editor de páginas.
### Módulos
Los [módulos](/docs/cms/start-building/building-blocks/modules/overview) son una parte fundamental del CMS de HubSpot, actuando como bloques de creación reutilizables que se utilizan para crear un sitio y mostrar el contenido. Cuando se crea una plantilla se colocan módulos dentro de las filas y secciones de arrastrar y soltar utilizando la etiqueta [`dnd_module`](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas#drag-and-drop-module-code-dnd-module-code-). Los módulos también son columnas. Esto significa que si colocas dos etiquetas de módulo, o un módulo y una columna directamente al lado del otro, aparecerán uno al lado del otro horizontalmente.
No se pueden colocar elementos de arrastrar y soltar dentro de un módulo. Los módulos no pueden ser elemento directos de un [`dnd_area`](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas#drag-and-drop-area-code-dnd-area-code-).
## Estructura y estilo HTML
Las áreas de arrastrar y soltar y sus elementos cuando se renderizan tienen nombres de clase para una rejilla de 12 columnas basada en bootstrap 2. Para facilitar la puesta en marcha, puedes utilizar el archivo [\_layout.css](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css) de la [biblioteca de recursos del CMS de HubSpot](https://github.com/HubSpot/cms-theme-boilerplate/). Esto proporciona estilos predeterminados para esos nombres de clase.
No es obligatorio usar esta hoja de estilos; puedes proporcionar tus propios estilos en su lugar. Si estás construyendo tu sitio basado en la biblioteca de temas del CMS HubSpot y deseas utilizar tu propio CSS, es recomendable [eliminar la llamada al layout.css en la base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/5abaf2a4c45a95dbed1d459f7f0f6407350752ac/src/templates/layouts/base.html#L8). Para usar tu propia cuadrícula CSS, deberás referenciar los mismos nombres de clases de la cuadrícula, pero el estilo dependerá de ti.
Las áreas de arrastrar y soltar cuando se renderizan crean divs con clases que son usadas por el editor de la página. Algunos ejemplos podrían ser `widget-span` y `widget-type-cell`. No deberías referenciar directamente a estas clases ya que son utilizadas por el editor de páginas y podrían cambiar en el futuro.
En su lugar, en el [`dnd_area`](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas#drag-and-drop-area-code-dnd-area-code-) de HubL agrega un parámetro de clase con el nombre de la clase que deseas utilizar
```html theme={null}
```
### Estilo y atributos del editor
Con las áreas de arrastrar y soltar los creadores de contenido pueden ajustar de alguna forma el estilo de la página. Por ejemplo, pueden establecer que una sección tenga un fondo. Los desarrolladores pueden pasar valores predeterminados para esas configuraciones a través de los atributos.
Cuando la página se renderiza, los estilos que se generan basados en esas configuraciones se agregan a `standard_header_includes`.
## Migrar columnas flexibles
Si vas a cambiar las plantillas creadas por columnas flexibles para utilizar las áreas de arrastrar y soltar, ten en cuenta la siguiente información sobre las columnas flexibles.
Las columnas flexibles no son lo mismo que las áreas de arrastrar y soltar. No puedes pasar de una plantilla que solo tiene una columna flexible a otra que solo tiene un área de arrastrar y soltar. Esta limitación se implementó porque el contenido no se asignaba desde la columna flexible al área de arrastrar y soltar. Para ilustrar el motivo, supongamos que creaste una nueva plantilla con una barra lateral y un área de contenido principal. La barra lateral es una columna flexible y tu contenido principal es un área de arrastrar y soltar. La herramienta de intercambio asignaría una columna flexible a otra columna flexible.
Obtener más información sobre cómo [agregar áreas de arrastrar y soltar a los sitios web existentes](https://developers.hubspot.es/docs/cms/guides/improve-existing-sites/add-theme-features-to-existing-sites#drag-and-drop-areas).
## Recursos relacionados
* [Agregar áreas de arrastrar y soltar a los sitios web existentes](https://developers.hubspot.es/docs/cms/guides/improve-existing-sites/add-theme-features-to-existing-sites#drag-and-drop-areas)
* [Crear un área de soltar](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial)
* [Visullizar las áreas de arrastrar y soltar - YouTube](https://www.youtube.com/watch?v=RUs24n8DfzA\&feature=youtu.be)
# Crear un área de arrastrar y soltar
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/tutorial
Usa áreas de arrastrar y soltar para ayudar a los creadores de contenidos a realizar fácilmente cambios de diseño, estilo y contenido
> **Productos compatibles**
[Las áreas de arrastrar y soltar](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview) son secciones de una plantilla que actúan como contenedores vacíos que pueden modificarse directamente desde el editor de páginas. Crear áreas de arrastrar y soltar en una plantilla permite a los creadores de contenidos añadir y gestionar módulos en el editor de páginas según sea necesario, en lugar de depender de módulos estáticos integrados en la plantilla.

Además de utilizar las áreas de arrastrar y soltar como zonas de colocación vacías para los creadores de contenidos, también puedes rellenar automáticamente estas áreas con varios módulos, diseños y contenidos para que sirvan como punto de partida.
Este tutorial te guiará en la configuración de un área de arrastrar y soltar simple. Para obtener más recursos para desarrolladores sobre las áreas de arrastrar y soltar, consulta en [este boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/home.html) las prácticas de implementación recomendadas, así como la [documentación de referencia sobre la etiqueta HubL del área de arrastrar y soltar](/docs/cms/reference/hubl/tags/dnd-areas).
> [!WARNING]
>
> **Nota:** Un creador de contenido puede cambiar la plantilla de una página por otra del mismo tipo, dependiendo de si tiene etiquetas [dnd\_area](/docs/cms/reference/hubl/tags/dnd-areas).
>
> * Las plantillas de arrastrar y soltar creadas con el editor de diseño visual pueden cambiarse por otras plantillas de arrastrar y soltar o por plantillas codificadas con o sin etiquetas *dnd\_area*.
> * Las plantillas codificadas con etiquetas *dnd\_area* solo pueden cambiarse por otras plantillas codificadas con etiquetas *dnd\_area*.
> * Las plantillas codificadas sin etiquetas *dnd\_area* solo pueden cambiarse por otras plantillas codificadas sin etiquetas *dnd\_area*.
>
> Cuando se cambia la plantilla de la página, se conservará todo el contenido que se hubiera añadido a las áreas de arrastrar y soltar de la primera plantilla.
**1. Crear una plantilla HTML nueva**
Crea una nueva plantilla HTML para alojar el HubL y el HTML que conformarán la sección de arrastrar y soltar.
> [!NOTE]
>
> Las áreas de arrastrar y soltar se basan en una cuadrícula adaptable de 12 columnas. Las etiquetas de arrastrar y soltar generan marcado con nombres de clase que designan columnas y filas. Debes agregar una hoja de estilo para asignar esos nombres de clase. Un ejemplo de estilos de diseño que podrías implementar se encuentra en la [biblioteca de recursos del CMS de HubSpot](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css). Tu hoja de estilo puede agregarse a la plantilla usando [`{{ require_css() }}`](/docs/cms/reference/hubl/tags/standard-tags#require-css).
**2. Áreas de arrastrar y soltar**
La sección `dnd_area` es lo que hace que una parte de la página web sea editable en cuanto a su estructura, diseño y contenido. El cuerpo de una etiqueta `dnd_area` proporciona el contenido predeterminado del área de arrastrar y soltar.
Esta etiqueta por sí sola generará una zona de caída para que los creadores de contenidos arrastren los módulos dentro del área de creación.
```hubl theme={null}
{% dnd_area "body_dnd_area" %}
{% end_dnd_area %}
```
**3. Crear una sección con un módulo**
Una `dnd_section` es una fila de nivel superior, y solo puede ser elemento secundario directo de una `dnd_area`. Las secciones admiten una variedad de parámetros que controlan los valores predeterminados de los controles estilísticos que los creadores de contenido tienen para las secciones dentro del área de creación.
A modo de ejemplo, el código siguiente crea una sección con una imagen de fondo (`background_image`). Esta sección está centrada por un parámetro `vertical-alignment` y tiene una anchura máxima de un campo de `1000px` para contenido infantil. Para obtener una lista completa de los parámetros admitidos en las etiquetas HubL de arrastrar y soltar, consulta la documentación de referencia de [esta etiqueta HubL específica](/docs/cms/reference/hubl/tags/dnd-areas).
Para rellenar automáticamente la sección con contenido, el código también incluye una etiqueta `dnd_module` para incluir un módulo haciendo referencia a su ruta. En este ejemplo, el `dnd_module` está usando el módulo de texto enriquecido predeterminado de HubSpot, según lo establecido por el parámetro `path`. Se especifica un valor predeterminado para el módulo de texto enriquecido mediante la etiqueta `module_attribute`.
```hubl theme={null}
{% dnd_area "body_dnd_area" %}
{% dnd_section
background_image = {
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
},
max_width=1000,
vertical_alignment='MIDDLE'
%}
{% dnd_module path='@hubspot/rich_text' %}
{% module_attribute "html"%}
This is your main headline.
Use this space to tell everyone about what you have to offer.
{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_section %}
{% end_dnd_area %}
```
El resultado es que el área de arrastrar y soltar contiene un módulo que los creadores de contenidos pueden editar dentro del área de edición. Observa cómo ajustar el valor `max_width` en la sección `dnd_section` afecta al contenido.

**4. Incluir varios módulos**
Para incluir más de un módulo, usa varias etiquetas `dnd_module`. Al definir los parámetros `offset` y `width` que se basan en una cuadrícula de 12 columnas, puedes colocar un módulo de imagen junto al módulo de texto enriquecido, como se muestra abajo.
```hubl theme={null}
{% dnd_area "body_dnd_area" %}
{% dnd_section
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
},
max_width=1000,
vertical_alignment='MIDDLE'
%}
{% dnd_module path='@hubspot/rich_text', width=8, offset=0, label="Rich Text" %}
{% module_attribute "html"%}
This is your main headline.
Use this space to tell everyone about what you have to offer.
{% end_module_attribute %}
{% end_dnd_module %}
{% dnd_module path='@hubspot/linked_image',
width=4,
offset=8,
img={
"src": "https://www.dragndrop.com/placeholder-image.jpg",
"alt": "Stock placeholder image"
}
%}
{% end_dnd_module %}
{% end_dnd_section %}
{% end_dnd_area %}
```
Ahora, la página también tiene un módulo de imagen editable, así como una manilla de arrastre, que permite a los creadores de contenido cambiar el ancho y el desplazamiento de los módulos. Observa cómo fijar un `vertical_alignment` en la `dnd_section` centra el contenido de forma vertical.

**5. Incorporar columnas y filas**
Para hacer más compleja la zona de arrastre, puedes incorporar filas y columnas utilizando las etiquetas `dnd_row` y `dnd_column`. Las filas y columnas actúan de forma similar a las secciones en el editor de contenido, donde los creadores de contenido pueden arrastrarlas, así como clonarlas, eliminarlas y darles estilo.
```hubl theme={null}
{% dnd_area "body_dnd_area" %}
{% dnd_section
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
},
max_width=1000,
vertical_alignment='MIDDLE'
%}
{% dnd_module path='@hubspot/linked_image',
width=6,
img={
"src": "https://www.dragndrop.com/placeholder-image.jpg",
"alt": "Stock placeholder image"
}
%}
{% end_dnd_module %}
{% dnd_column width=6, offset=6 %}
{% dnd_row
padding={
'bottom': 15
}
%}
{% dnd_module path='@hubspot/rich_text' %}
{% module_attribute "html"%}
This is your main headline.
Use this space to tell everyone about what you have to offer.
{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_row %}
{% dnd_row %}
{% dnd_module path='@hubspot/form' %}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
{% end_dnd_area %}
```
Ahora, los creadores de contenido tendrán un mayor control estilístico sobre filas y columnas específicas, además de módulos y secciones.

**6. Definir estilos genéricos para los componentes de arrastrar y soltar**
Los distintos componentes de las áreas, las secciones, las columnas, las filas y los módulos de arrastrar y soltar tienen clases a las que se puede aplicar estilo usando CSS. Los estilos y opciones editables de estos componentes pueden definirse utilizando CSS en lugar de HubL. Por ejemplo, el relleno predeterminado se puede definir en las `dnd_sections` con el CSS:
```css theme={null}
.dnd-section {
padding: 80px 20px;
}
```
Los selectores CSS genéricos para los componentes del área de arrastrar y soltar son `.dnd-section`, `.dnd-column`, `.dnd-row` y `.dnd-module`. Aparte de estas clases con prefijo `dnd`, los nombres de las clases de la cuadrícula en el marcado se basan en los nombres de bootstrap 2. Esto no significa que tengas que usar bootstrap 2 con áreas de arrastrar y soltar. Cuando agregas una `dnd_area` a la página, debes proporcionar los estilos que hacen que la cuadrícula funcione. Un ejemplo de estilos de diseño que podrías implementar se encuentra en la [biblioteca de recursos del CMS HubSpot](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/css/objects). Tu hoja de estilo puede agregarse a la plantilla usando [`{{ require_css() }}`](/docs/cms/reference/hubl/tags/standard-tags#require-css).
## Tutoriales relacionados
* [Primeros pasos para usar temas](/docs/cms/start-building/building-blocks/themes/getting-started)
* [Primeros pasos con los módulos personalizados](/docs/cms/start-building/building-blocks/modules/overview)
* [Cómo agregar capacidades de tema a un sitio existente](/docs/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites)
# Asignación de alias
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/fields/alias-mapping
# Herencia de configuración de marca
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/fields/brand-and-settings-inheritance
Aprende a utilizar la configuración de marcas, como logotipos y colores de marcas, dentro de un tema o en archivos HubL/HTML y CSS.
Con [la configuración de marca](https://knowledge.hubspot.com/branding/edit-your-logo-favicon-and-brand-colors#customize-your-company-logo-and-colors), los usuarios pueden configurar los colores , logotipos y favicons de la marca de la empresa que se utilizarán en todo el contenido de HubSpot. Esto te permite acceder a esa configuración de marca con tokens en el archivo de un tema `fields.json` y dentro de los archivos HTML/HubL y CSS. También puedes acceder a los colores de las marcas dentro del archivo de un módulo `fields.json`.
Después de agregar estos tokens dentro de un archivo `fields.json`, los creadores de contenido pueden editar sus valores dentro del editor de configuración del tema. Al agregar estas fichas en un HTML, HubL o CSS, los valores estarán codificados de forma rígida y los creadores de contenido no podrán modificarlos en el editor de la página.
A continuación, conoce las variables de configuración de marca disponibles junto con ejemplos de implementación.
## Variables de configuración de marca
La siguiente es una lista de opciones a las que se puede acceder desde el área de configuración de la marca dentro del valor del objeto `property_value_paths` o dentro de los archivos HTML/HubL y CSS.
### Colores
Los colores de la marca se pueden acceder tanto dentro del [archivo fields.json ](#fields-json-color) de un tema o módulo, como dentro de los archivos HTML/HubL y CSS utilizando los siguientes tokens HubL:
* **Principal:**
* `{{brand_settings.primaryColor}}`
* `{{brand_settings.colors[0]}}`

* **Secundario:** `{{brand_settings.secondaryColor}}`

* **Colores de contraste:**
* `{{brand_settings.accentColor1}}`
* `{{brand_settings.accentColor2}}`
* `{{brand_settings.accentColor3}}`

* **Colores adicionales:**
* `{{brand_settings.colors[1]}}`
* `{{brand_settings.colors[2]}}`
* `{{brand_settings.colors[3]}}`

Para acceder directamente al código hexadecimal de un color, incluye un filtro `hex` en el token. Por ejemplo: `{{brand_settings.primaryColor.hex}}`
Para incluir colores de configuración de la marca en el archivo `fields.json` de un tema o módulo, utiliza el siguiente formato:
```json theme={null}
//Example of using the primary color in within a theme's
// field.json file
{
"name": "branding_color",
"label": "branding_color",
"type": "color",
"default": {
"color": "#26ff55",
"opacity": 60
},
"inherited_value": {
"property_value_paths": {
"color": "brand_settings.primaryColor"
}
}
}
```
> [!WARNING]
>
> Hay ocasiones en que las cuentas pueden no tener colores adicionales configurados en su configuración de marcas. Si el código hace referencia a un color heredado que no existe en la configuración de la marca, se utiliza la siguiente lógica de reserva:
>
> * `secondaryColor` vuelve al primer color adicional (`colors[1]`).
> * `accentColor1` vuelve al segundo color adicional (`colors[2]`).
> * `accentColor2` vuelve al tercer color adicional (`colors[3]`).
> * `accentColor3` vuelve al cuarto color adicional (`colors[4]`).
> * Los colores adicionales (por ejemplo, `colors[3]`) volverán al valor `default`. Si no hay una propiedad predeterminada color establecido, se utilizará `primaryColor`.
### Logotipos
Se puede acceder a los logotipos de marcas dentro del archivo `fields.json` de un módulo y dentro de los archivos HTML / HubL y CSS.
Puedes usar los siguientes tokens para acceder al conjunto de logotipos principales dentro de la configuración de marcas:
* `{{brand_settings.primaryLogo}}`
* `{{brand_settings.logos[0]}}`

Se puede acceder a todos los logotipos adicionales mediante `{{brand_settings.logos[1-19]}}`.
Además, puede acceder a los siguientes atributos del logotipo:
* **URL del logotipo:** `{{brand_settings.primaryLogo.link}}`
* **Texto alternativo del logotipot:** `{{brand_settings.primaryLogo.alt}}`
* **Altura del logotipo:** `{{brand_settings.primaryLogo.height}}`
* **Ancho del logotipo:** `{{brand_settings.primaryLogo.width}}`
* **Enlace a la imagen del logotipo:** `{{brand_settings.primaryLogo.src}}`
### Favicons
Sólo se puede acceder a los favicons de marca dentro de archivos HTML/HubL y CSS.
Puedes usar los siguientes tokens para acceder al conjunto de logotipos principales dentro de la configuración de marcas:
* `{{brand_settings.primaryFavicon}}`
* `{{brand_settings.favicons[0]}}`

Se puede acceder a todos los favicons adicionales usando `{{brand_settings.favicons[1-19]}}`.
Puedes acceder a la URL del logotipo directamente incluyendo un filtro `src`. Por ejemplo:`{{brand_settings.primaryFavicon.src}}`
# Agregar fuentes personalizadas a un tema
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/fields/custom-fonts
# oEmbed
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/fields/oembed
# Escribir campos de módulos y temas mediante JavaScript
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/fields/write-fields-using-javascript
# Contenido global
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/global-content
El contenido global es el contenido que puede reutilizarse en todas tus plantillas para crear piezas coherentes de información coherentes, como encabezados de sitios web, pies de página, barras laterales, logotipos u otros componentes.
El contenido global es el contenido que se comparte en todas las partes de un sitio web. Ejemplos comunes son los encabezados, los pies de página y las barras laterales de los sitios web. Como desarrollador, especificarás qué componentes deben ser globales mediante el uso de parciales globales o haciendo que los módulos sean globales. HubSpot ofrece una experiencia de edición diferente a los editores de contenido que facilita la edición del contenido global y la visualización previa de los cambios en todas las páginas antes de su publicación. Para obtener más información sobre cómo editar tu contenido global, consulta [cómo utilizar el contenido global en varias plantillas](https://knowledge.hubspot.com/design-manager/use-global-content-across-multiple-templates) en la base de conocimientos de HubSpot.

## Resumen
El contenido global es más eficaz para mostrar la misma información en varias páginas. Por ejemplo, el encabezado y el pie de página de tu sitio web, como el encabezado de la parte superior de esta página.

A continuación algunos ejemplos adicionales de áreas en las que puedes utilizar el contenido global:
* Navegación secundaria para las diferentes secciones de tu sitio web
* Pies de página de derechos de autor (o pies de página secundarios)
* Barras laterales de publicaciones del blog (para mostrar las publicaciones recientes, listados de autores y más)
> [!WARNING]
>
> Debido a que el contenido global se utiliza en múltiples lugares a lo largo de un sitio web, es aún más crucial [diseñar y construir tus parciales y módulos globales para la accesibilidad](/docs/cms/best-practices/improve-existing-sites/accessibility).
### Parciales globales vs. módulos globales
Como desarrollador, puedes crear parciales globales y módulos globales, con algunas diferencias clave entre ellos:
* Los parciales globales son un tipo de plantilla creada con HTML y HubL que se puede reutilizar en todo el sitio web. Los tipos de parciales más comunes son los encabezados, las barras laterales y los pies de página.
* Los módulos globales son módulos que se componen de uno o varios contenidos que se pueden utilizar en varias páginas de tu sitio. Algunos tipos comunes de módulos globales pueden ser elementos como formularios de suscripción al blog, elementos de navegación secundaria y llamadas a la acción.
Debes evitar incluir módulos globales dentro de los parciales globales, ya que ello puede crear una experiencia negativa en la edición de contenido.
> [!NOTE]
>
> Todos los módulos y campos dentro de tus parciales globales y módulos globales son fácilmente editables dentro del [editor de contenido global](https://knowledge.hubspot.com/design-manager/use-global-content-across-multiple-templates).
## Parciales globales
### Crea un parcial global
Un parcial global es un tipo de plantilla que puedes crear localmente a través de la CLI de HubSpot utilizando el comando [create](https://developers.hubspot.com/docs/developer-tooling/local-development/hubspot-cli/reference#create), como se muestra a continuación.
```shell theme={null}
hs create template
```
Cuando se te pida que elijas un tipo de plantilla, selecciona `global partial`.
Esto creará tu plantilla en el directorio deseado con las siguientes anotaciones de plantilla incluidas en el archivo HTML.
```html theme={null}
```
Para ver un ejemplo de un contenido parcial global, [consulta nuestra plantilla en GitHub.](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/header.html)
### Añade áreas de arrastrar y soltar a los parciales globales
Puedes habilitar las capacidades de arrastrar y soltar contenido dentro de tus parciales globales agregando etiquetas de `dnd_area` forma similar a la habilitación en las plantillas de página. Consulta nuestra [documentación sobre el área de arrastrar y soltar](/docs/cms/reference/hubl/tags/dnd-areas) para más información.
### Incluye un parcial global en tu plantilla actual
Para agregar un parcial global en una de tus plantillas existentes, utiliza la etiqueta de HubL `global_partial` mientras haces referencia a la ruta del parcial. A continuación, verás un ejemplo de [la plantilla del CMS](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html#L21) que utiliza esta etiqueta.
```hubl theme={null}
{% global_partial path="../partials/header.html" %}
```
Cuando se emiten parciales globales, contienen una envoltura `
` alrededor del parcial global. Esto lo utiliza el editor de la página para identificar que la pieza de contenido es un parcial global.
```html theme={null}
```
> [!WARNING]
>
> ### Nota:
>
> No utilices `global_partial` dentro del `` de una plantilla. Hacerlo produciría un HTML no válido.
>
> En la mayoría de las situaciones en las que se quieres utilizar un parcial global en el encabezado, puede tener más sentido utilizar un módulo global en su lugar con un [`{%require_head%}`](/docs/cms/reference/hubl/tags/standard-tags#require-head) para insertar código personalizado en el encabezado y seguir proporcionando campos de módulo.
## Módulos globales
Puedes crear módulos globales al igual que cualquier otro módulo usando la CLI ejecutando el comando `hs create`, como se muestra abajo.
```shell theme={null}
hs create module
```
Un módulo global se diferencia por el indicador `global` en el archivo `meta.json` del módulo.
```json theme={null}
// meta.json file
{
"css_assets": [],
"external_js": [],
"global": true,
"help_text": "",
"host_template_types": ["PAGE"],
"js_assets": [],
"other_assets": [],
"smart_type": "NOT_SMART",
"tags": [],
"is_available_for_new_content": false
}
```
También puedes [crear módulos globales en HubSpot utilizando el administrador de diseño](https://knowledge.hubspot.com/design-manager/create-and-edit-modules).
Más información sobre cómo trabajar con módulos en los siguientes recursos relacionados:
* [Resumen de los módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview)
* [Módulos predeterminados de HubSpot](/docs/cms/reference/modules/default-modules)
* [Configurar módulos](/docs/cms/reference/modules/configuration)
* [Uso de módulos en plantillas](/docs/cms/reference/modules/using-modules-in-templates)
# Búsqueda de contenido
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/content-search
Utilizando la funcionalidad de búsqueda nativa del sitio dentro del CMS de HubSpot, Búsqueda de contenido. El CMS de HubSpot tiene incorporada la funcionalidad de búsqueda en el sitio para permitir a tus visitantes encontrar fácilmente el contenido que están buscando.
El CMS de HubSpot tiene integrada la funcionalidad de búsqueda en el sitio para permitir a tus visitantes encontrar fácilmente el contenido que están buscando. Todo tu contenido de HubSpot se indexa automáticamente en el motor de búsqueda nativo de HubSpot, eliminando la molestia de configurar una herramienta de búsqueda de terceros para tu sitio web.
## Buscando contenido
El motor de búsqueda es accesible a través de la api [API de búsqueda del sitio](/docs/api-reference/cms-site-search-v3/guide). Esta API admite numerosas opciones de filtrado para permitirte crear una experiencia de búsqueda altamente personalizada y potente en tu sitio web. Por ejemplo, si quieres construir una búsqueda en tu blog, puedes consultar por `type=BLOG_POST` para que solo te devuelva las publicaciones del blog. O, si quieres construir la búsqueda en la versión española de tu sitio web, podrías consultar `language=es` para devolver solo las páginas en español.
La API devuelve JSON que puede ser analizado con JavaScript para mostrar los resultados en tu sitio web. Todos los tipos de contenido devolverán el dominio de la página, el título, la url y el idioma. La descripción devuelta es una muestra del texto del contenido que mejor se ajusta al término de búsqueda. Un elemento `` envolverá perfectamente el texto coincidente, permitiéndote resaltar el texto coincidente con CSS.
Dependiendo del tipo de contenido buscado, los resultados devuelven una información ligeramente diferente, por lo que puede mostrar los resultados para tipos de contenido únicos de manera diferente. Por ejemplo, las publicaciones del blog devolverán información sobre las etiquetas que tiene la publicación, quién es el autor y cuándo se publicó.
```json theme={null}
// json
{
"total": 850,
"offset": 0,
"limit": 10,
"results": [
{
"id": 3761238962,
"score": 0.30858153,
"type": "SITE_PAGE",
"domain": "designers.hubspot.com",
"url": "https://developers.hubspot.com/docs/cms/search",
"language": "en",
"title": "Content Search",
"description": "Using HubSpot’s native search engine, content search, to implement search on your website"
},
{
"id": 3254581958,
"score": 0.30858153,
"type": "BLOG_POST",
"domain": "designers.hubspot.com",
"url": "https://designers.hubspot.com/blog/getting-started-with-local-development",
"featuredImageUrl":"https://designers.hubspot.com/hubfs/local-development.jpg"
"title": "Getting Started with Local Development",
"description":"The beta Local Development Tooling connects your local workflow to HubSpot, allowing you to utilize version control, your favorite text editor and various web development technologies when developing on the HubSpot CMS."
"authorFullName": "William Spiro",
"tags": [
"Website Development",
"Local Development"
],
"publishedDate": 1447938000000
}
}
```
## Implementación de la búsqueda en tu sitio web
Hay dos módulos por opción predeterminada que puedes utilizar para implementar fácilmente la búsqueda en tu sitio web, que utilizan las [API de búsqueda del sitio](/docs/api-reference/cms-site-search-v3/guide): `search_input` `search_results`.
### Entrada de búsqueda en el sitio
Un campo de entrada para que los visitantes introduzcan los términos de búsqueda. Este módulo puede existir en cualquier lugar de tu sitio web. Este módulo puede incluirse en una plantilla con `{% module "search_input" path="@hubspot/search_input" %}`
```hubl theme={null}
{% module "search_input" path="@hubspot/search_input" %}
```
### Resultados de la búsqueda del sitio
Devuelve un listado de contenido basado en el término de búsqueda. Este módulo puede existir en cualquier lugar de tu sitio web. Este módulo puede incluirse en una plantilla con
```hubl theme={null}
{% module "search_results" path="@hubspot/search_results" %}
```
Si la funcionalidad de estos módulos no es la que deseas que funcione la búsqueda en tu sitio web, puedes crear tus propios módulos o funcionalidad de búsqueda. Los módulos de búsqueda por opción predeterminada están diseñados para ser ampliados en función de tus necesidades de búsqueda. Puedes ver y clonar estos módulos en el Administrador de diseño buscando sus nombres en el Finder o puedes recuperarlos en tu entorno local utilizando la [CLI del CMS](https://developers.hubspot.com/docs/developer-tooling/local-development/hubspot-cli/reference) ejecutando `hs fetch @hubspot/search_input.module` o `hs fetch @hubspot/search_results.module`.

## Plantilla de resultados de búsqueda
Cada dominio tiene su propia página de resultados de búsqueda por opción predeterminada. La plantilla y la ruta de esta página se establecen en **Configuración > Sitio web > Páginas** en la pestaña [Páginas del sistema](https://app.hubspot.com/l/settings/website/pages/all-domains/system-pages) para dominios específicos. Consulta la [plantilla de resultados de búsqueda del tema CMS](https://github.com/HubSpot/cms-theme-boilerplate/blob/master/src/templates/system/search-results.html) como ejemplo. El dominio establecido para la página de resultados de búsqueda se conecta automáticamente a los módulos de búsqueda por opción predeterminada. Sin embargo, puedes usar la [API de búsqueda del sitio](/docs/api-reference/cms-site-search-v3/guide) para crear tus resultados de búsqueda como quieras en cualquier página de tu sitio web.
## ¿Cómo se determina la precedencia de la búsqueda?
El orden de los resultados de la búsqueda se determina por una serie de comparaciones ponderadas del contenido de la página con el término de búsqueda del visitante. El contenido de la página se separa en campos de comparación con una ponderación distinta según dónde reside el contenido dentro de las HTML de tus páginas. Los campos de comparación se agrupan en orden de ponderación:
1. Título HTML
2. Metadescripción
3. Elementos HTML H1
4. Elementos HTML H2
5. Elementos HTML H3
6. Otros elementos HTML
Ten en cuenta que esta lista está sujeta a cambios.
Si deseas indicar a nuestro indexador que potencie específicamente ciertos elementos de una página, puedes envolver el contenido en una clase `hs-search-keyword`.
## Controlar la indexación durante el desarrollo
Mientras se desarrolla un nuevo sitio, es útil poder probar la búsqueda en el sitio sin preocuparse de que éste sea indexado por motores de búsqueda como Google.
En tu [`robots.txt`](https://knowledge.hubspot.com/es/seo/prevent-content-from-appearing-in-search-results) puedes decirle a HubSpot que rastree todo, mientras bloquea otros bots.
```shell theme={null}
# Block all bots
User-agent: *
Disallow: /
# Allow HubSpot Site Search Indexing
User-agent: HubSpotContentSearchBot
Allow: /
```
> [!WARNING]
>
> Si alguna de tus páginas tiene una metaetiqueta que especifica que no se indexe, la página seguirá sin ser indexada, aunque se permita en el `robots.txt`.
>
> Recuerda también revisar tu `robots.txt` antes del lanzamiento para asegurarse de que todo se indexa como quieres.
## Comportamiento de indexación por opción predeterminada
Dado que el CMS conoce la intención de ciertos tipos de páginas, la búsqueda de contenido puede limitar de forma segura la indexación para permitir la indexación de páginas de tipo contenido. Ejemplos de páginas de contenido:
* Páginas de sitio
* Páginas de destino
* Artículos de la base de conocimientos
* publicaciones de blog
**Las páginas del sistema y las páginas protegidas por contraseña no se indexan.** Las páginas restringidas de CMS Membership solo se mostrarán en la búsqueda de contenido de hubspot para los usuarios que hayan iniciado sesión y tengan acceso a las páginas.
## ¿Cómo puedo excluir páginas para que no aparezcan en los resultados de la búsqueda?
Si bloqueas una página para que no sea indexada a los motores de búsqueda a través del archivo [`robots.txt`](https://knowledge.hubspot.com/es/seo/prevent-content-from-appearing-in-search-results) de tu sitio web o a través de las `metaetiquetas`, no se indexarán para la búsqueda del sitio.
En tu `robots.txt` agrega un `disallow`.
```shell theme={null}
# Block all bots
User-agent: *
Disallow: /path-to-page
# Block just HubSpot Site Search Indexing
User-agent: HubSpotContentSearchBot
Disallow: /path-to-page
```
También puedes agregar una metaetiqueta `NOINDEX, NOFOLLOW` en `` a nivel de página o plantilla.
```html theme={null}
```
> [!TIP]
>
> No es necesario bloquear los robots utilizando tanto el `robots.txt` como la metaetiqueta. Hacerlo puede hacer que sea confuso después si decides permitir la indexación de una página.
## Cómo excluir secciones de una página para que no se indexen en la búsqueda
A veces hay regiones de una página que no son útiles para aparecer en los resultados de búsqueda. Puede ser el contenido de un encabezado, un pie de página, una barra lateral, etc. En este caso, puedes agregar la clase `hs-search-hidden` a tu HTML para que la búsqueda ignore el contenido de esas regiones.
# Módulos de correo predeterminados
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/default-email-modules
# Formularios de HubSpot
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/forms
Consulta cómo agregar formularios a tu sitio web de HubSpot o a páginas externas mediante módulos, HubL o el código de inserción. Luego, aprende a diseñarlos.
Usa los formularios de HubSpot para recoger información de los visitantes del sitio web, a la que luego puedes acceder en HubSpot. Puedes compartir enlaces a formularios directamente con los usuarios, [enviar datos de formularios a través de la API](https://developers.hubspot.es/docs/api-reference/marketing-forms-v3/guide) e insertarlos en las páginas de tu sitio web utilizando el CMS.
Los formularios son una parte fundamental de la suite de HubSpot y se pueden crear en cuentas de HubSpot con cualquier suscripción. Los formularios no solo son importantes para la conversión de clientes, sino también porque los datos de los formularios se pueden usar en otras herramientas y recursos de HubSpot, como en contenido inteligente, en listas, en workflows, en la personalización de contenido y en otros contextos.
Después de [crear un formulario de HubSpot](https://knowledge.hubspot.com/es/forms/create-forms), puedes agregarlo a tus plantillas y a tus páginas. Hay varias formas de agregar un formulario a una plantilla, dependiendo de cómo vayas a usarlo:
* [Usar el módulo de formulario predeterminado](#the-default-form-module)
* [Agregar un campo de formulario a un módulo personalizado](#form-fields-in-custom-modules)[](#using-the-form-hubl-tag)
* [Insertar usando el código de inserción del formulario](#using-the-form-embed-code)
## El módulo de formulario predeterminado
Si tu plantilla tiene [áreas de arrastrar y soltar](/docs/cms/reference/hubl/tags/dnd-areas), los creadores de contenido pueden agregar el [módulo de formulario predeterminado](/docs/cms/reference/modules/default-modules#form) a una página desde el editor de páginas y, a continuación, configurar las opciones de formulario en la barra lateral izquierda.
Para codificar un módulo de formulario directamente en una plantilla con áreas de arrastrar y soltar, haz referencia al módulo como `dnd_module`.
```hubl theme={null}
{% dnd_area "dnd_area" class='body-container body-container__landing', label='Main section' %}
{% dnd_section vertical_alignment='MIDDLE' %}
{% dnd_column width=6, offset=6 %}
{% dnd_row %}
{% dnd_module path='@hubspot/form' %}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
{% end_dnd_area %}
```
Para agregar un módulo de formulario a una plantilla fuera de un área de arrastrar y soltar, haz referencia al módulo como un `module` estándar.
```hubl theme={null}
{% module "form"
path="@hubspot/form"
form={
"form_id": "9e633e9f-0634-498e-917c-f01e355e83c6",
"response_type": "redirect",
"message": "Thanks for submitting the form.",
"redirect_id": null,
"redirect_url": "http://www.google.com"
}
%}
```
Con cualquier implementación, puedes agregar parámetros a la etiqueta del módulo para especificar determinados ajustes, como el formulario que se va a usar y las opciones de redireccionamiento, como se muestra en el ejemplo de código anterior. Consulta la [documentación predeterminada de los módulos](/docs/cms/reference/modules/default-modules#form) para obtener más información sobre los parámetros disponibles.
### Clonar el módulo predeterminado
Además de usar el módulo predeterminado tal como está, puedes clonarlo para que sea editable, lo que te permite personalizarlo según sea necesario. Por ejemplo, podrías clonar el módulo de formulario predeterminado, agregar un campo de color y luego envolver el HTML del módulo en una etiqueta `` con estilo para agregar el color como fondo:
* En el administrador de diseño de la barra lateral izquierda, ve a la carpeta **@hubspot**, luego haz clic con el botón derecho en **form.module** y selecciona **Clonar módulo**.

* En la barra lateral derecha, haz clic en **Agregar campo** y luego selecciona **Color**.
* Agrega una etiqueta `` alrededor del contenido HTML y luego incluye un estilo para hacer referencia al campo de color, como:
``

## Campos de formulario en módulos personalizados
Al crear un módulo personalizado, puedes incluir un formulario en él agregando un [campo de formulario](/docs/cms/reference/fields/module-theme-fields#form), junto con la adición del fragmento de código del campo al HTML del módulo. Por ejemplo, puede que quieras agregar un formulario de solicitud de consulta a un módulo que contenga una imagen de un producto y una propuesta de valor descriptiva.
Para agregar un campo de formulario a un módulo personalizado desde el administrador de diseño:
* En la barra lateral derecha del editor de módulos, haz clic en **Agregar campo** y luego selecciona **Formulario**.

* Después de agregar el campo, coloca el cursor sobre el campo en la barra lateral derecha, luego haz clic en **Acciones** y selecciona **Copiar fragmento**.

* Pega el fragmento en el campo HTML del módulo.

### Limitar las opciones de formulario en el editor
Una vez que el módulo se agrega a una página, los creadores de contenido suelen tener control sobre muchos aspectos, incluido qué formulario usar y los campos del formulario en sí. Sin embargo, puedes limitar la cantidad de control dado en el editor de páginas modificando el archivo `fields.json` del módulo de formulario [localmente](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) para incluir los siguientes campos:
| Parámetro | Tipo | Descripción |
| - | - | - |
| `disable_inline_form_editing` | Cadena | Define la propiedad`disable_inline_form_editing` como `true` para ocultar todos los controles de edición de formularios en línea en el módulo de formulario. Entre ellos se incluyen los campos de formulario, el texto del botón de envío, las opciones de privacidad y consentimiento de datos y el CAPTCHA. |
| `required_property_types` | Matriz | Una matriz que especifica qué formularios se pueden seleccionar en función de los tipos de propiedad de los campos de formulario. Los valores incluyen: `"CONTACT"`, `"COMPANY"`, y `"TICKET"`. |
Por ejemplo, si has creado un módulo que solo debe usarse con formularios que permiten a los visitantes ponerse en contacto con los diversos departamentos de tu empresa, podrías permitir que los creadores de contenido solo puedan seleccionar formularios que utilicen propiedades de tickets.
```json theme={null}
// Form field
{
"id": "843b4f0f-0ed7-5b10-e86a-5cc8a0f11a0c",
"name": "form_field_1",
"display_width": null,
"label": "Form",
"required": false,
"locked": false,
"type": "form",
"disable_inline_form_editing": true,
"required_property_types": ["TICKET"],
"default": {
"response_type": "inline",
"message": "Thanks for submitting the form."
}
}
```
## Usar el código de inserción del formulario
Cuando un módulo o etiqueta de HubL no es la opción ideal, o si quieres agregar un formulario a una página externa, puedes insertarlo con el [código de inserción del formulario](https://knowledge.hubspot.com/es/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#add-the-form-embed-code). También puedes personalizar ese código de inserción para que el formulario sea más funcional. Puedes consultar todas las opciones de personalización del código de inserción del formulario y otra información relevante en la guía de referencia de formularios.
> [!WARNING]
>
> ### Nota:
>
> * Las opciones de personalización de formularios solo están disponibles para formularios creados en HubSpot que se han [configurado como HTML sin formato](https://knowledge.hubspot.com/es/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#with-css-in-your-external-stylesheet-marketing-hub-professional-enterprise-or-legacy-marketing-hub-basic-only). La cuenta de HubSpot debe tener una suscripción a ***Marketing Hub*** o a ***Content Hub*** *Pro* o *Enterprise*.
> * Los formularios de HubSpot solo deben cargarse utilizando el archivo JavaScript alojado en HubSpot. No se puede hacer una copia del código de inserción del formulario y autoalojarlo. Si decides autoalojar el código de inserción, las mejoras que HubSpot aplique para mejorar la seguridad, el antispam, la accesibilidad y el rendimiento no se propagarán a tu formulario.
A continuación se muestra un ejemplo de un código de incrustación del formulario sin ninguna personalización.
```html theme={null}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `portalId` | Número o cadena | El ID de la cuenta de HubSpot en la que se creó el formulario. Se utiliza para obtener la definición del formulario. |
| `formId` | Cadena | El ID del formulario, que se utiliza para recuperar la definición del formulario. |
| `region` | Cadena | La [región](https://knowledge.hubspot.com/es/account-security/hubspot-cloud-infrastructure-and-data-hosting-frequently-asked-questions) de la cuenta donde se creó el formulario. Se utiliza para obtener la definición del formulario. Los valores posibles son `na1` o `eu1`. |
### Añadir internacionalización
De forma predeterminada, HubSpot incluye una serie de mensajes de validación en muchos idiomas diferentes, a los que puedes acceder utilizando el parámetro `locale`. También puedes agregar idiomas personalizados o anular los mensajes de error y los meses/días del selector de fechas que se muestran en el formulario utilizando el parámetro `translation`.
Obtén más información sobre la internacionalización y los mensajes de error de validación de formularios en la [documentación de referencia de los formularios](https://developers.hubspot.es/docs/reference/cms/forms).
```js theme={null}
hbspt.forms.create({
portalId: "",
formId: "",
locale: "en",
translations: {
en: {
fieldLabels: {
email: "Electronic mail",
},
required: "Hey! That's required!",
submitText: "Custom Submit Button Text",
submissionErrors: {
MISSING_REQUIRED_FIELDS: "Please fill in all required fields!",
},
},
},
});
```
## Eventos de formulario
Hay dos maneras de vincular la funcionalidad a los eventos en formularios: usar devoluciones de llamada en el código de inserción del formulario de HubSpot y usar eventos de formulario globales. Puedes consultar más información sobre las devoluciones de llamada del código de inserción del formulario y los eventos de formulario globales en la [documentación de referencia de formularios](https://developers.hubspot.es/docs/reference/cms/forms).
```js theme={null}
// Example form embed code callback
hbspt.forms.create({
portalId: "",
formId: "",
onBeforeFormSubmit: function ($form) {
// YOUR SCRIPT HERE
},
});
// Example listener
window.addEventListener("message", event => {
if (event.data.type === "hsFormCallback" && event.data.eventName === "onFormSubmitted") {
someAnalyticsLib("formSubmitted");
console.log("Form Submitted! Event data: ${event.data}");
}
});
```
## Estilos de formulario
Si bien HubSpot ofrece estilos [que se aplican de forma global](https://knowledge.hubspot.com/es/forms/set-global-form-colors-and-fonts) y estilos [que se aplican sobre formularios específicos](https://knowledge.hubspot.com/es/forms/create-forms#style-and-preview-your-form), también puedes diseñar un formulario según cómo se agregue a las páginas de tu CMS.
> [!WARNING]
>
> ### Nota:
>
> Todos los formularios generados en el CMS de HubSpot (excepto el uso del código de inserción de formularios) ignorarán cualquier estilo que se defina mediante los ajustes globales o los ajustes individuales del formulario.
### Dar estilo a formularios con el módulo predeterminado o la etiqueta de HubL
Los formularios de HubSpot agregados a las páginas de HubSpot se pueden diseñar utilizando el CSS de tu sitio web. HubSpot incluye varias clases y atributos diferentes en los formularios, que se generan donde se puede aplicar opciones de estilo. Como punto de partida, consulta información sobre el [boilerplate de HubSpot para CSS de formularios](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/elements/_forms.css), donde encontrarás las prácticas recomendadas para diseñar formularios.
### Dar estilo a formularios con un módulo personalizado
Los formularios de los módulos personalizados pueden diseñarse con CSS en el panel CSS del módulo, en el administrador de diseño. Al limitar el ámbito del CSS al módulo, puedes asegurarte de que cada vez que se agrega el módulo a una página, el estilo viene con él. Se recomienda agregar un envoltorio al formulario y luego usar ese envoltorio como el selector de nivel superior del CSS. Esto evitará que los estilos de formulario del módulo personalizado se sobrescriba con estilos adicionales en la hoja de estilos principal de tu sitio web. A continuación se muestra una captura de pantalla del módulo personalizado con los estilos de formulario agregados al panel CSS.

### Definir estilos personalizados para formularios insertados
Si tienes una suscripción ***Marketing Hub*** o ***CMS Hub*** *Pro* o *Enterprise*, puedes utilizar definiciones de variables CSS para definir estilos globales, personalizar botones y otras entradas, así como dar estilo a tus formularios de varios pasos y barras de progreso.
Obtén más información sobre cómo aplicar [definiciones CSS personalizadas a tu formulario insertado](https://developers.hubspot.es/docs/reference/cms/forms#define-custom-styling-for-embedded-forms-using-css).
### Estilo de formularios agregados a través del código de inserción de formulario
Al usar el código de inserción de formulario, puedes diseñar el formulario usando la [los ajustes de estilo globales](https://knowledge.hubspot.com/es/forms/set-global-form-colors-and-fonts) o el CSS de tu sitio web.
Los ajustes globales permiten configurar las opciones predeterminadas de cada formulario de la cuenta. También puedes [sobrescribir o anular estos estilos con otros en un formulario individual dentro del editor de formularios](https://knowledge.hubspot.com/es/forms/create-forms#style-and-preview-your-form).

Si tienes una suscripción a ***Marketing Hub*** o ***CMS Hub*** *Pro* o *Enterprise*, puedes seleccionar la opción **Establecer como formulario HTML sin formato** al crear un formulario. Esta configuración hace que el formulario se represente como HTML en lugar de un iframe, lo que facilita el estilo del formulario incrustado con CSS.
Consulta en la base de conocimientos más información sobre cómo [dar estilos a los formularios insertados](https://knowledge.hubspot.com/es/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site).

# Ocultar módulos y secciones en el editor de páginas
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/hide-modules-and-sections
# Menús y navegación
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/menus-and-navigation
HubSpot tiene algunas herramientas integradas para facilitar la creación y administración de estos menús, y en el lado del código, múltiples soluciones para mostrar los menús para que puedas elegir la solución que tenga más sentido para tu sitio web.
Incluye menús de navegación en tu sitio web para ayudar a los usuarios a encontrar la información que necesitan. Los menús de navegación suelen estar ubicados en los encabezados, barras laterales y pies de página de un sitio web. HubSpot ofrece algunas soluciones integradas para agregar menús a tus páginas, dependiendo de tu caso de uso, pero también puedes crear tus propios menús cuando sea necesario. Tu cuenta también incluye una [página de configuración para crear y administrar menús](#navigation-settings), a la que pueden hacer referencia los distintos métodos de menú.
* **Menús predeterminados:** HubSpot proporciona dos tipos de menús predeterminados que se pueden usar de forma inmediata según sea necesario. Estos menús se pueden agregar como módulos en el editor de páginas en [áreas de arrastrar y soltar](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview) o en plantillas, o puedes agregarlos a módulos personalizados usando [etiquetas HubL](#menu-hubl-tags).
* **Menú:** comúnmente utilizado para la navegación global, como en el encabezado o pie de página del sitio web, el menú estándar predeterminado te permite seleccionar un menú que hayas establecido en los ajustes de tu navegación, y luego configurarlo aún más con opciones como niveles máximos, configuración de pantalla y orientación.
* **Menú simple:** comúnmente utilizado para la navegación específica de la página, como las páginas pilares, el módulo de menú simple te permite crear menús a nivel de página. En lugar de hacer referencia a un menú que has creado en la configuración de navegación, los elementos de menú simples se administran en el editor de contenido y tienen menos opciones de configuración que el menú estándar. Esto permite a los creadores de contenido actualizar menús en páginas específicas según sea necesario sin afectar la navegación global.
* **Menús personalizados:** cuando las opciones de menú predeterminadas no se ajusten a tus necesidades, puedes crear tus propias soluciones personalizadas. Esto puede ir desde la creación de módulos personalizados que incluyen menús predeterminados utilizando las [etiquetas menu y simple\_menu de HubL](#menu-hubl-tags) estándar, hasta el uso de la [función menu() de HubL](#menu-hubl-function) para crear una solución completamente personalizada utilizando grupos de repetidores o HubDB. Dicho esto, al crear un menú personalizado complicado, debes tener en cuenta la experiencia del editor. En muchos casos, puede tener más sentido usar los campos `menu` y `simple_menu` junto con la función `menu()` para que haya un equilibrio entre la solución personalizada y la experiencia de edición intuitiva.
A continuación, encontrarás más información sobre las diferentes formas de incluir menús en las páginas y cómo gestionar la configuración de navegación en HubSpot.
## Configuración de navegación
En cada cuenta, HubSpot incluye la [configuración de navegación](https://knowledge.hubspot.com/website-pages/set-up-your-site-s-navigation-menus) para que puedas crear menús de varios niveles a los cuales hacer referencia en los módulos y etiquetas del menú. Esto crea una única fuente de referencias para un conjunto de elementos del menú, por lo que solo tendrás que actualizar un menú una vez para actualizar todas las páginas que hacen referencia a ese menú. Puedes crear tantos menús como sea necesario, y cada menú viene con opciones para clonar, eliminar, cambiar el nombre y mostrar el historial de revisiones.
Para crear y gestionar menús en HubSpot, ve a **Configuración** > **Sitio web** > **Menús de navegación**. Obtén más información sobre la configuración de navegación en la [Base de conocimientos de HubSpot](https://knowledge.hubspot.com/website-pages/set-up-your-site-s-navigation-menus).

Cuando se trabaja con menús en HubL, es posible que necesites utilizar el ID del menú para referenciarlo. Esto no se aplica a los menús simples, ya que sus elementos de menú se establecen en el editor.
Al crear un módulo personalizado, la forma más fácil de obtener el ID del menú es creando un campo de menú. Este campo permite al creador de contenido seleccionar un menú a partir de un menú desplegable y devuelve el ID del menú. Si necesitas codificar el ID del menú, puedes recuperarlo de la URL cuando veas el menú en la página de configuración de navegación.

Ten en cuenta que, cuando llegues por primera vez a la página, el ID del menú predeterminado no se mostrará en la URL. Para obtener el ID de ese menú predeterminado, tendrás que seleccionar un menú diferente y luego volver a seleccionar el menú predeterminado.
> [!NOTE]
>
> Una de las mejores prácticas para los encabezados de los sitios, que a menudo contienen la larga navegación principal, es ofrecer un ["enlace "saltar al contenido"](/docs/cms/best-practices/improve-existing-sites/accessibility#adding-a-skip-to-content-link). Esto ayuda a los usuarios que navegan con el teclado a saltarse los menús largos.
## Etiquetas de menú HubL
Utiliza las etiquetas `menu` y `simple_menu` de HubL para agregar la funcionalidad del menú a los módulos personalizados. Al agregar la etiqueta a un módulo, se renderizará el menú de la página. Para permitir que los creadores de contenido configuren las opciones del menú en el editor de páginas, también tendrás que incluir el [menú](/docs/cms/reference/fields/module-theme-fields#form) o el [campo de menú simple](/docs/cms/reference/fields/module-theme-fields#simple-menu) en el módulo.
A continuación, obtén más información sobre cada tipo de etiqueta de menú.
### Menú estándar
La [etiqueta HubL Menú](/docs/cms/reference/hubl/tags/standard-tags#menu) genera un menú HTML estándar con nombres de clase ya proporcionados para los niveles de profundidad, los estados activos y si el elemento tiene hijos. La etiqueta de menú se puede utilizar dentro de los [módulos personalizados](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview), por lo que es una manera fácil de crear menús de navegación para la navegación principal y la barra lateral. Esta etiqueta espera que proporciones el [ID del menú](#menu-id).
```hubl theme={null}
{% menu "menu" %}
{% menu "my_menu" id=456, site_map_name='Default', overrideable=False, root_type='site_root', flyouts='true', max_levels='2', flow='horizontal', label='Advanced Menu' %}
```
### Menú simple
La etiqueta [menú simple](/docs/cms/reference/hubl/tags/standard-tags#simple-menu) funciona igual que la etiqueta HubL de menú generando [un menú HTML estándar](https://developers.hubspot.es/docs/guides/cms/content/default-menu-markup) con nombres de clase para los niveles de profundidad, estados activos y si el elemento tiene hijos. La diferencia es que esta etiqueta espera que proporciones un dictado de la estructura del menú en lugar de un ID de menú. Esto es útil para cuando quieres que los campos de un módulo determinen la estructura de un menú en lugar de utilizar la configuración de navegación. Por ejemplo, es posible que quieras utilizar este tipo de módulo para la tabla de contenido de una página pilar.
```hubl theme={null}
{% simple_menu menu_tree=[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}] %}
```
## Módulos de menú predeterminado
HubSpot proporciona módulos predeterminados que puedes agregar a las plantillas codificadas, así como páginas a través del editor de páginas cuando una plantilla incluye [áreas de arrastrar y soltar](/docs/cms/reference/hubl/tags/dnd-areas). Cada módulo tendrá una experiencia de edición diferente, con el menú estándar con más opciones de configuración que el menú simple.
Debido a que los módulos no pueden anidarse, no se pueden colocar dentro de otros módulos. En su lugar, debes utilizar las [etiquetas de menú o menú simple](#hubl-menu-tags).
```hubl theme={null}
{% module "main_nav" path="@hubspot/menu", label="Menu" id="123456" %}
{% module "menu" path="@hubspot/simple_menu", label="Simple Menu" menu_tree=[{"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Home", "linkTarget": null, "linkUrl": "http://www.hubspot.com", "children": [], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "About", "linkTarget": null, "linkUrl": "http://www.hubspot.com/internet-marketing-company", "children": [{"contentType": null, "subCategory": null, "pageLinkName": null, "linkUrl": "http://www.hubspot.com/company/management", "isPublished": false, "children": [], "linkParams": null, "linkLabel": "Our Team", "linkTarget": null, "pageLinkId": null, "categoryId": null, "isDeleted": false}], "isDeleted": false}, {"contentType": null, "subCategory": null, "pageLinkName": null, "pageLinkId": null, "isPublished": false, "categoryId": null, "linkParams": null, "linkLabel": "Pricing", "linkTarget": null, "linkUrl": "http://www.hubspot.com/pricing", "children": [], "isDeleted": false}] %}
```
### Marcado de menú estándar
Los módulos de menú predeterminados funcionan con sus respectivas etiquetas de menú de HubL (`menu` y `simple_menu`) para generar un menú HTML estándar. Al igual que otros módulos de HubSpot, los módulos de menú están envueltos en el marcado de la envoltura del módulo. Estas etiquetas `div` y `span` hacen que el módulo sea editable con el editor de contenidos. El marcado de menú de los módulos de menú y menú simple es el mismo, con la excepción de algunas de las clases aplicadas a la envoltura y a los contenedores de menú.
```html theme={null}
```
Como se muestra arriba, el menú real se muestra como un `ul` envuelto en un `div` con la clase `hs-menu-wrapper`. Esta envoltura tendrá clases adicionales en función de cómo esté configurado el módulo en el editor de páginas, como habilitar los controles flotantes. Obtén más información sobre las [clases agregadas mediante esta configuración](#classes-added-by-settings) a continuación.
Dentro del `ul`, cada elemento del menú es una etiqueta `a` envuelta en un `li`. La etiqueta `li` tiene una clase que indica la profundidad del elemento en el árbol de menús (por ejemplo, `hs-menu-depth-1`). Cuando un elemento de menú contiene un elemento secundario anidado, el `li` correspondiente tendrá la clase adicional de `hs-item-has-children`. El menú secundario se representa como un `ul` anidado con la clase `hs-menu-children-wrapper`.
Cuando visitas una página que está incluida en tu árbol de menús, la clase `active-branch` se agrega a los elementos `li` principales y una clase de **`active`** se agrega al elemento `li` particular de esa página.
### Estilo de menú estándar
A nivel de módulo, ya sea editando un módulo de menú en el editor de páginas o editando un campo de menú en un módulo personalizado, tendrás algunas opciones de configuración. Los campos *Menú*, *Tipo de menú avanzado* y *Niveles máximos* te permiten controlar que los elementos del menú se representen como `li` en el marcado de página. Pero las opciones de orientación y de controles flotantes afectarán a los selectores CSS agregados a la envoltura de menú `div`. Luego, puedes orientar estos selectores en tu CSS.

A continuación, obtén más información sobre las clases que se agregan a la envoltura de menú `div` en función de estos ajustes de campo.
| Clase | Descripción |
| - | - |
| `hs-menu-flow-horizontal` | Se agrega al `div` de la envoltura cuando el menú está configurado en orientación horizontal. |
| `hs-menu-flow-vertical` | Se agrega al `div` de la envoltura cuando el menú está configurado en orientación vertical. |
| `flyouts` | Se agrega al `div` de la envoltura cuando se selecciona *Activar controles flotantes*. |
| `no-flyouts` | Se agrega al `div` de la envoltura cuando no se selecciona *Activar controles flotantes*. |
Para empezar a diseñar los menús, a continuación se muestran algunos ejemplos de selectores CSS que se pueden utilizar para diseñar la etiqueta de menú y el módulo de menú predeterminado.
```css theme={null}
/* Menus */
.hs-menu-wrapper ul {
/* Targets all unordered lists within HubSpot menus */
}
/* Horizontal Menu
========================================================================== */
.hs-menu-wrapper.hs-menu-flow-horizontal ul {
/* Targets all unordered lists within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li {
/* Targets all list items within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal ul li a {
/* Targets all links within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul {
/* Targets the top-level unordered list within horizontal menus */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 {
/* Targets top-level list items within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
/* Targets top-level list links within the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children {
/* Targets list items with children with the top-level unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
/* Targets second-level unordered lists when flyouts are enabled (for styling dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
/* Targets links within second-level unordered lists */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts
> ul
li.hs-item-has-children
ul.hs-menu-children-wrapper
li.hs-item-has-children
ul.hs-menu-children-wrapper {
/* Targets third-level unordered lists (for styling dropdowns)*/
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper {
/* Targets second-level unordered list when top-level menu item is hovered (use to reveal dropdowns) */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children.active-branch {
/* Targets top-level active branch unordered list */
}
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper {
/* Targets second-level unordered list within active branch */
}
.hs-menu-wrapper.hs-menu-flow-horizontal li.active a {
/* Targets the link within the active list item */
}
/* Vertical Menu
========================================================================== */
.hs-menu-wrapper.hs-menu-flow-vertical ul {
/* Targets all unordered lists within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
/* Targets all list items within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical ul li a {
/* Targets all links within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul {
/* Targets the top-level unordered list within vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-menu-depth-1 > a {
/* Targets top-level links in vertical menus */
}
.hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children {
/* Targets top-level list items with children */
}
/* No flyouts
========================================================================== */
.hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts .hs-menu-children-wrapper {
/* Targets child menus when flyouts are disabled */
}
.hs-menu-wrapper.hs-menu-flow-horizontal.no-flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper {
/* Targets second-level child menus when flyouts are disabled */
}
```
## Función menu() de HubL
La función [menu()](/docs/cms/reference/hubl/functions#menu) existe para permitirte crear estructuras de menú totalmente personalizadas. Devuelve un objeto por el que se puede iterar para generar un menú, hay muchas [propiedades proporcionadas para los elementos del menú](/docs/cms/reference/hubl/variables#menu-node-variables). Ten en cuenta que cuando utilizas la función de menú [eres totalmente responsable de la accesibilidad de tu menú](/docs/cms/best-practices/improve-existing-sites/accessibility), la estructura y el estilo.
```hubl theme={null}
{% set node = menu(987) %}
{% for child in node.children %}
{{ child.label }}
{% endfor %}
{% set default_node = menu("default") %}
{% for child in default_node.children %}
{{ child.label }}
{% endfor %}
```
La [biblioteca de temas de CMS Hub](https://github.com/HubSpot/cms-theme-boilerplate) contiene un [módulo de menú de ejemplo construido con la función menu()](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/menu.module/module.html). Puedes modificar eso para satisfacer tus necesidades para hacer menús complicados.
# Resumen de los módulos
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview
Entender los módulos es clave para entender el CMS de HubSpot y su potencia. Los módulos son componentes reutilizables que se pueden usar en plantillas o agregarse a páginas por medio de áreas de arrastrar y soltar y columnas flexibles.
Entender los módulos es clave para entender el CMS de HubSpot y su potencia. Los módulos son componentes reutilizables que se pueden usar en plantillas o agregarse a páginas por medio de [áreas de arrastrar y soltar](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial) y [columnas flexibles](https://developers.hubspot.es/docs/cms/reference/hubl/tags/standard-tags#flexible-column). Además de utilizar los módulos que HubSpot proporciona, los desarrolladores pueden crear sus propios módulos para todo, desde testimonios hasta galerías de fotos. Los módulos se crean [con las herramientas de desarrollo locales](/docs/cms/start-building/building-blocks/modules/overview) o [con el Administrador de diseño](https://knowledge.hubspot.com/design-manager/create-and-edit-modules).
Un módulo consta de dos partes:
1. Una [interfaz de usuario](#the-user-interface-for-editing) creada a través de una lista de campos que los usuarios verán al editar una instancia del módulo.
2. Un fragmento de plantilla HTML+HubL con CSS y JS asociados que define cómo se generará el HTML
## Un ejemplo
Para entender mejor lo que es un módulo, veamos un simple módulo de "Miembro del equipo". El módulo consiste en una foto, el nombre del miembro del equipo, su título y una breve biografía, y cuando forma parte de una página web del CMS:

### La interfaz de usuario para la edición
El desarrollador construye la interfaz de usuario (UI) de los módulos mediante campos. A continuación, el desarrollador elige qué campos utilizar en función del tipo de módulo que se está construyendo, los datos que se necesitan y la experiencia de edición. En este caso, el módulo incluye:
1. Un campo de imagen, para la foto de un miembro del equipo
2. Dos campos de texto, para el nombre y el cargo del miembro del equipo
3. Y un campo de texto enriquecido, para una breve biografía.
Cuando un creador de contenido edita un módulo, la interfaz de usuario se construye basándose en los campos que el desarrollador ha agregado al módulo y en cómo está configurado cada campo.

## Módulo frente a instancia de módulo
Hay dos términos que se utilizan con frecuencia en relación con los módulos. Es importante entender la diferencia entre ellos.
* **Módulo** - bloques de construcción reutilizables que se pueden agregar a las plantillas y páginas.
* **Instancia de módulo** - los módulos individuales renderizados en la página. Pueden tener valores de campo separados y, como resultado, tener un aspecto diferente de otras instancias de módulos que son para el mismo módulo.
## Fields.json
Los campos de un módulo se definen en JSON como una matriz de objetos. Cada campo tiene un nombre, un tipo y un valor predeterminado. También hay otras propiedades disponibles en función del tipo de campo que controla la experiencia de edición.
```json theme={null}
// fields.json
[
{
"name": "team_member_photo",
"label": "Team Member Photo",
"required": true,
"responsive": true,
"resizable": true,
"type": "image",
"default": {
"src": "",
"alt": ""
}
},
{
"name": "team_member_name",
"label": "Team member name",
"required": true,
"type": "text",
"default": "Joshua Beck"
},
{
"name": "team_member_position",
"label": "Team member position",
"required": true,
"type": "text",
"default": "CEO, Co-Founder"
},
{
"name": "team_member_bio",
"label": "Team member bio",
"required": true,
"type": "richtext",
"default": "
Joshua has over 20 years of experience in the tech industry. He helped start this company in 2015 with the mission of helping people grow. In his spare time he loves hanging out with his kids, going to the beach, and cooking.
"
}
]
```
Para obtener más información sobre todos los campos disponibles, consulta [Campos de Módulos y Temas](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields).
### Uso de los datos de los campos del módulo para la representación de HTML
Los valores de cada campo están disponibles en el fragmento HTML+HubL de un módulo a través de una variable `module`. Se puede acceder a los datos de cada campo a través de las propiedades de la variable del módulo. Utilizando el módulo de miembros del equipo como ejemplo, se puede acceder al nombre del miembro del equipo a través de `{{ module.team_member_name }}`.
```hubl theme={null}
{{ module.team_member_name }}
{{ module.team_member_position }}
{{ module.team_member_bio }}
```
## Usar módulos en plantillas
Los módulos se agregan a las plantillas utilizando la etiqueta [module](https://developers.hubspot.es/docs/cms/reference/modules/using-modules-in-templates#basic-module-syntax), [module\_block](https://developers.hubspot.es/docs/cms/reference/modules/using-modules-in-templates#block-syntax) o [dnd\_module](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas) y especificando la ruta del módulo como parámetro. Los valores predeterminados de los campos de un módulo también pueden anularse a nivel de plantilla agregando parámetros a la etiqueta del módulo que corresponde al nombre del campo, como se muestra en la segunda parte del ejemplo siguiente.
```hubl theme={null}
{% module "unique_identifier" path="/modules/team-member.module" %}
{# override default values in a module instance #}
{% module "unique_identifier"
path="/modules/team-member.module",
team_member_name="Brian Halligan",
team_member_position="CEO"
%}
```
> [!NOTE]
>
> Los módulos no pueden agregarse unos dentro de otros. La mayoría de las veces que se quiere hacer esto, suele ser por razones de diseño. Las secciones en las [áreas de arrastrar y soltar](/docs/cms/start-building/building-blocks/drag-and-drop/overview), son a menudo el mejor curso de acción.
## Los módulos son una gran herramienta en la caja de herramientas de la accesibilidad
Los módulos se utilizan en todo un sitio web, a veces en varias páginas, incluso varias veces en una página. Por ello, [construir el HTML, el CSS y el JS de tu módulo teniendo en cuenta la accesibilidad](https://developers.hubspot.es/docs/cms/best-practices/improve-existing-sites/accessibility) puede tener un efecto profundo en la facilidad de uso de tu sitio para las personas con y sin discapacidades o impedimentos.
## Los módulos pueden facilitar la localización
En un sentido similar al de la accesibilidad, la construcción de módulos de manera que todo el contenido del módulo se base en campos, hace posible la localización posterior. Por ejemplo, podrías tener un módulo como "Artículos destacados". En lugar de codificar el texto "Artículos destacados", utiliza un campo de texto o de texto enriquecido. A continuación, se puede cambiar el texto para otros idiomas. Para saber más sobre la localización en el CMS, consulta el apartado [varios idiomas](https://developers.hubspot.es/docs/cms/start-building/features/multi-language-content).
## Primeros pasos
Para empezar, consulta nuestro tutorial de [Primeros pasos con módulos](/docs/cms/start-building/building-blocks/modules/overview).
## Ir más allá
* [Configurar un módulo](https://developers.hubspot.es/docs/cms/reference/modules/configuration)
* [Usar módulos en plantillas](https://developers.hubspot.es/docs/cms/reference/modules/using-modules-in-templates)
* [Módulos predeterminados](https://developers.hubspot.es/docs/cms/reference/modules/default-modules)
* [Editor de módulos](/docs/cms/start-building/building-blocks/modules/overview)
# Resumen del tema
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/overview
Construir temas de CMS de HubSpot que permitan a los desarrolladores construir sistemas de diseño para que los creadores de contenido trabajen dentro de ellos.
Un tema es una colección portátil y contenida de materiales para desarrolladores diseñada para permitir una experiencia de edición de contenido flexible. Puedes [construir temas localmente usando la CLI de HubSpot](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) utilizando las herramientas, tecnologías y workflows que prefieras. Los temas y todos sus archivos también son portables entre entornos y cuentas. Para ver un video de cómo empezar a desarrollar temas, ve el video de HubSpot Academy a continuación:
## Temas como un paquete
Los temas son un paquete que se extiende por toda la aplicación de HubSpot en varios lugares para permitir una experiencia eficiente de creación de contenido. Los desarrolladores pueden utilizar los temas para construir un sistema de diseño con el que los creadores de contenido puedan trabajar. Cualquier cantidad de flexibilidad, o barandillas pueden ser construidas en un tema para satisfacer las necesidades de tu negocio.
### Crear páginas
Cuando los creadores de contenido comienzan a crear nuevas páginas, se les pide que empiecen por seleccionar el tema desde el que van a crear una página, seguido de la selección de la plantilla que van a utilizar dentro del tema.

La imagen de vista preliminar del tema, así como otras configuraciones de un tema, se definen en el [archivo theme.json](#theme-json).
### Campos temáticos
Los temas permiten a los desarrolladores crear un conjunto de [campos temáticos](#fields-json), similares a los campos de los módulos, que permiten a los creadores de contenido ajustar varios mandos y diales diseñados por un desarrollador para permitir el control estilístico global de un sitio web sin tener que editar el CSS. Los desarrolladores [utilizan HubL para acceder a los valores de los campos temáticos](#using-theme-field-values) en todo su CSS. Los creadores de contenido utilizan el Editor de temas para modificar los campos del tema, previsualizar esos cambios con las plantillas existentes dentro de un tema y publicar sus cambios.

Los campos de los temas son dictados por el [archivo fields.json de un tema](#fields-json).
Al editar un tema en [modo de prueba](/docs/cms/start-building/building-blocks/overview#test-mode), también puedes copiar la configuración JSON del tema. Esto te permite pegar cualquier actualización en el archivo `fields.json` local del tema.

### Módulos de tema
Los módulos de un tema deben estar diseñados específicamente para su uso dentro de las plantillas de ese tema. El editor de contenido destacará estos módulos temáticos, lo que hará que los creadores de contenido puedan agregar de forma rápida y sencilla módulos a las páginas que están construyendo y que están diseñados para funcionar bien en el contexto de esa página. Los módulos predeterminados y el resto de módulos de tu cuenta HubSpot seguirán estando disponibles.

Al desarrollar un tema, puedes [ocultar módulos y secciones del editor de páginas](/docs/cms/start-building/building-blocks/modules/hide-modules-and-sections) para crear una experiencia de creación de contenido más ágil.
## Estructura de los archivos del tema
Un tema es un único directorio de archivos. Puedes incluir archivos HTML, CSS y Javascript, módulos y archivos adicionales que pueden organizarse de cualquier manera dentro de los subdirectorios de la carpeta del tema principal. Se necesitan dos archivos JSON para construir un tema: `theme.json` y `fields.json`. Estos archivos deben incluirse en la carpeta raíz del tema.
Para comenzar con un ejemplo, consulta la [plantilla de CMS de HubSpot](https://github.com/HubSpot/cms-theme-boilerplate).

> [!NOTE]
>
> En este momento los archivos .json sólo pueden ser creados y cargados a una cuenta de HubSpot a través de las [herramientas de desarrollo local](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli).
### theme.json
El archivo `theme.json` contiene la metainformación para tu directorio de temas, como la etiqueta legible de los temas, su captura de pantalla de vista preliminar y varias configuraciones de cómo debe comportarse el tema. Tu archivo `theme.json` tendrá un aspecto similar al siguiente:
```json theme={null}
// theme.json
{
"label": "Cool Theme",
"preview_path": "./templates/home-page.html",
"screenshot_path": "./images/templates/homepage.jpg",
"enable_domain_stylesheets": false,
"version": "1.0",
"author": {
"name": "Jon McLaren",
"email": "noreply@hubspot.com",
"url": "https://theme-provider.com/"
},
"documentation_url": "https://theme-provider.com/cool-theme/documentation",
"license": "./license.txt",
"example_url": "https://theme-provider.com/cool-theme/demo",
"is_available_for_new_content": true
}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `label` | Cadena | La etiqueta legible del tema, utilizada en varios lugares en los que el tema se muestra en toda la aplicación HubSpot, como la pantalla de selección de plantillas y el editor de temas. |
| `preview_path` | Cadena | Una ruta relativa a un archivo de plantilla en el tema que debería ser la plantilla predeterminada, utilizada cuando se previsualiza un tema en el editor de temas. |
| `screenshot_path` | Cadena | Una ruta relativa a un archivo de imagen que se utiliza para dar una instantánea del aspecto del tema en varios lugares donde se produce la selección del tema, como en la pantalla de selección de plantillas. |
| `enable_domain_stylesheets` | Booleano | Activar o desactivar las hojas de estilo adjuntas a los dominios en la configuración del sitio web para que se incluyan en las plantillas del tema. El valor predeterminado es `false`. |
| `version` | Cadena | Número entero de la versión que admite `.` versiones. |
| `Author` | Objeto | Objeto para proporcionar información sobre ti como proveedor del tema.`name` El nombre del proveedor. `email` La dirección de correo electrónico de soporte del proveedor. `url` El sitio web del proveedor. |
| `documentation_url` | Cadena | Enlace a la documentación del tema. |
| `example_url` | Cadena | Enlace de ejemplo del tema activo. |
| `license` | Cadena | Un [identificador SPDX](https://spdx.org/licenses/) válido o la ruta relativa a la licencia dentro del tema. Esta licencia dicta el uso y la modificación que permite el creador del tema. Útil cuando se envía al mercado. |
| `is_available_for_new_content` | Booleano | Booleano que determina si un tema se muestra en la página del creador de contenido para su selección. El valor predeterminado es `true`. |
### fields.json
El archivo `fields.json` controla los campos disponibles y los grupos de campos en el editor de temas, incluidos los [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields). Los campos que incluyas dependerán del control que quieras que tengan los creadores de contenido en el editor de páginas. El número de campos disponibles para los temas es más limitado que para los módulos, ya que los campos del tema son mejores para las opciones de estilo, mientras que el [contenido global](/docs/cms/start-building/building-blocks/global-content) es mejor para el contenido del tema.
Por ejemplo, en lugar de agregar un campo de texto al `field.json` del tema para el eslogan de tu sitio, deberías agregarlo como un módulo global para que los creadores de contenido puedan actualizar el eslogan desde el editor de la página en lugar del editor del tema.
Los campos que están disponibles para su uso en los temas son:
* [Boolean](/docs/cms/reference/fields/module-theme-fields#boolean)
* [Border](/docs/cms/reference/fields/module-theme-fields#border)
* [Choice](/docs/cms/reference/fields/module-theme-fields#choice)
* [Color](/docs/cms/reference/fields/module-theme-fields#color)
* [Font](/docs/cms/reference/fields/module-theme-fields#font)
* [Image](/docs/cms/reference/fields/module-theme-fields#image)
* [Number](/docs/cms/reference/fields/module-theme-fields#number)
* [Spacing](/docs/cms/reference/fields/module-theme-fields#spacing)
Para obtener una documentación completa sobre las posibles opciones de los campos temáticos, consulta la [documentación sobre módulos y campos temáticos](/docs/cms/reference/fields/module-theme-fields).
#### Utilizar los valores de los campos temáticos
Para acceder a los valores del campo, utiliza la notación de puntos y antepón la ruta al valor en `fields.json` con el tema. Puedes utilizar el valor de los campos temáticos en tus hojas de estilo utilizando una sintaxis como `{{ theme.path.to.value }}`. Por ejemplo, el campo de la fuente que se describe a continuación:
```json theme={null}
// fields.json
[
{
"type": "group",
"name": "typography",
"label": "Typography",
"children": [
{
"type": "font",
"name": "h1_font",
"label": "Heading 1",
"load_external_fonts": true,
"default": {
"color": "#000",
"font": "Merriweather",
"font_set": "GOOGLE",
"variant": "700",
"size": "48"
}
}
]
}
]
```
Se debe referenciar en el CSS con:
```css theme={null}
h1 {
font-size: {{ theme.typography.h1_font.size }}px;
font-family: {{ theme.typography.h1_font.font }};
color: {{ theme.typography.h1_font.color }};
text-decoration: {{ theme.typography.h1_font.styles.text-decoration }};
font-style: {{ theme.typography.h1_font.styles.font-style }};
font-weight: {{ theme.typography.h1_font.styles.font-weight }};
}
```
## Vista preliminar de temas
Para los desarrolladores, a veces es necesario poder probar que los campos de tu tema funcionan correctamente, pero no quieren afectar a las páginas reales. Ahí es donde entra el modo de prueba de temas.
### Modo de prueba
El modo de prueba te ofrece un entorno seguro para poder jugar con los campos de tu tema y asegurarte de que funcionan como espera. La interfaz tiene el mismo aspecto que la [vista preliminar/el editor de temas que pueden ver los creadores de contenido](https://knowledge.hubspot.com/website-and-landing-pages/edit-your-theme-settings#edit-theme-settings), pero puedes estar seguro de que no estás cambiando la configuración real de tu sitio web. Para protegerte contra actualizaciones accidentales de la configuración del tema, la publicación estará bloqueada en el modo de prueba. Puedes saber si estás en modo de prueba cuando `?testmode=true` aparece en la barra de direcciones y un ícono de modo de prueba se muestra en el encabezado del editor de temas.

Hay dos maneras de habilitar el modo de prueba:
* Para activar el modo de prueba del administrador de diseño:
* En el administrador de diseño, selecciona tu **tema** en el Finder.
* En la parte superior de la barra lateral izquierda, haz clic en el botón **Vista previa**.
.png)
* Para activar el modo de prueba desde el editor de páginas:
* En el editor de páginas, haz clic en la pestaña **Diseño** en la barra lateral izquierda y luego haz clic en **Editar configuración del tema**.

* Agrega `?testmode=true` a la URL, y luego presiona **Intro**. Estarás en modo de prueba.
Otro método es abrir la configuración del tema desde el editor de la página. Luego, una vez dentro, agrega el parámetro de consulta `?testmode=true` a la URL en la barra de direcciones.
## Recursos relacionados
* [Primeros pasos para usar temas](/docs/cms/start-building/building-blocks/themes/getting-started)
* [Cómo agregar capacidades temáticas a los sitios existentes](/docs/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites)
* [Plantilla de temas de HubSpot](/docs/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)
# Secciones
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/sections/sections
Las secciones son el elemento secundario más externo de un dnd_area. Las secciones pueden reutilizarse mediante plantillas de sección o guardándolas en el editor de páginas.
El contenedor más externo de un [área de arrastrar y soltar](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview) se llama sección. Las secciones no pueden anidarse dentro de ningún otro [elemento dnd](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview#drag-and-drop-areas-and-their-elements), pero pueden contener módulos, [filas](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview#row) y [columnas](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview#column). En el editor de páginas, los creadores de contenido pueden añadir secciones a la página, y luego modificarlas y aplicarles el estilo que necesiten. Los creadores de contenidos también pueden crear y guardar secciones para utilizarlas en otras páginas dentro del mismo tema, haciendo más eficiente la creación de contenidos.
En este artículo, aprenderás más sobre las secciones y cómo utilizarlas en el editor de páginas. Al desarrollar un tema, puedes [ocultar módulos y secciones](/docs/cms/start-building/building-blocks/modules/hide-modules-and-sections) del editor de páginas para optimizar la experiencia de creación de contenido.

## Resumen
Las secciones pueden ser creadas [en el editor de contenidos por un creador de contenidos](https://knowledge.hubspot.com/es/website-pages/edit-page-content-in-a-drag-and-drop-area#create-a-section) o incorporadas por un desarrollador en un archivo [`dnd_area`](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview)con la etiqueta [`dnd_section`](/docs/cms/reference/hubl/tags/dnd-areas#drag-and-drop-section-code-dnd-section-code-).
Las opciones de estilo disponibles en el editor también se pueden utilizar al codificar una plantilla. Por ejemplo:
```hubl theme={null}
{% dnd_area 'dnd_area'
label='Main section',
%}
{% dnd_section
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': 'https://example.com/path/to/image.jpg'
},
margin={
'top': 32,
'bottom': 32
},
padding={
'top': '1em',
'bottom': '1em',
'left': '1em',
'right': '1em'
},
max_width=1200,
vertical_alignment='MIDDLE'
%}
{% end_dnd_section %}
{% end_dnd_area %}
```
Para obtener una documentación completa de todos los parámetros disponibles de los elementos de arrastrar y soltar y ejemplos de uso, obtén más información sobre [las etiquetasdnd\_area ](/docs/cms/reference/hubl/tags/dnd-areas).
Puedes usar secciones para estructurar rápidamente plantillas que sean fáciles de leer. Como solo estás especificando en el contexto donde las instancias específicas de la plantilla son diferentes, aún puedes volver y modificar esa plantilla de sección.
> [!WARNING]
>
> **Nota:** Modificar una sección la actualizará en todas las instancias donde se encuentre, excepto para las páginas existentes que utilicen una plantilla que haga referencia a esa sección. Por otra parte, las páginas creadas previamente con una plantilla que incluía una sección deberán actualizarse manualmente para utilizar la nueva versión de dicha sección. Así evitarás hacer cambios accidentalmente. Para actualizar una sección a la última versión, un creador de contenidos puede ir al editor de páginas, añadir la nueva sección a la página y, luego, eliminar la versión antigua.
## Crear secciones reutilizables
Dentro de un tema, puedes incluir secciones preconfiguradas que los creadores de contenido pueden añadir a las páginas que utilicen ese tema dentro del editor de páginas. Estas secciones reutilizables se crean como archivos de plantilla de sección y se codifican con la misma sintaxis que utilizarías dentro de un `dnd_area`.
> [!WARNING]
>
> **Nota:** Para que una sección esté disponible para varios temas, tendrás que añadir el archivo de la plantilla de la sección a cada tema. Del mismo modo, las secciones creadas por los creadores de contenidos en el editor de contenidos solo estarán disponibles dentro de ese tema.
A continuación, aprenderás a crear los archivos de plantilla de sección y a referenciarlos en otros archivos de plantilla.
### Archivos de plantillas de secciones
Las plantillas de sección se indican con `templateType: section` en su [anotación de plantilla](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations).
```html theme={null}
```
| Parámetro | Tipo | Descripción | Valor |
| - | - | - | - |
| `templateType` | Cadena | Define el tipo de plantilla que determina dónde puede usarse y qué datos estarán disponibles para su uso. | `section` |
| `label` | Cadena | Se utiliza en el editor de páginas para proporcionar un nombre legible de la sección. | |
| `description` | Cadena | Descripción adicional de la sección más allá de lo que puede inlcuir una etiqueta. Se muestra en el editor de páginas. 255 caracteres como máximo. | |
| `screenshotPath` | Cadena/ruta | Ruta a una captura de pantalla de la sección. Se utiliza para dar a los creadores de contenidos una referencia visual del aspecto de la sección. | |
Una plantilla de sección debe comenzar y terminar con una etiqueta `dnd_section` . Solo puede existir un `dnd_section` dentro de una plantilla de sección. Dentro de esa sección, puedes colocar módulos, filas y columnas, siguiendo las mismas reglas de `dnd_area` que se aplican al [añadir un dnd\_area a una plantilla de página](/docs/cms/reference/hubl/tags/dnd-areas#dnd-area). La excepción es que solo defines el contenido para una sección y sus elementos secundarios de arrastrar y soltar.
```hubl theme={null}
{% dnd_section
padding={
'top': 200,
'right': 20,
'bottom': 200,
'left': 20
},
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
},
max_width=778,
vertical_alignment='MIDDLE'
%}
{% dnd_column %}
{% dnd_row %}
{% dnd_module path='@hubspot/rich_text' %}
{% module_attribute 'html' %}
{{ context.content || '
Communicate Your Way
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.
' }}
{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_row %}
{% dnd_row %}
{% dnd_module
path='../modules/button',
button_text={{ context.buttonText || 'Subscribe' }}
horizontal_alignment='CENTER'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
```
### Añadir un parcial de sección a una plantilla
Después de crear una sección, puedes hacer referencia a ella dentro de `dnd_area` utilizando una etiqueta `include_dnd_partial` . Esta etiqueta proporciona la ruta que usa al archivo de la sección, como se muestra a continuación:
```hubl theme={null}
{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %}
{# Banner Section #}
{% include_dnd_partial path='../sections/banner.html' context={} %}
{# End Banner Section #}
{% end_dnd_area %}
```
> [!NOTE]
>
> En el ejemplo anterior, ten en cuenta el argumento de contexto de la etiqueta `include_dnd_partial` . Esto te permite pasar variables específicas de la instancia desde la plantilla de página a la sección, reemplazando los valores predeterminados en el archivo de la sección. Para más información, [consulta el contexto de la sección](#section-context) .
### Contexto de la sección
Puedes utilizar variables de contexto de la sección para anular los valores predeterminados al nivel de la sección y el módulo. Las variables de contexto de la sección tú las defines y no están asociadas directamente a los módulos y sus campos.
En la plantilla de tu página puedes ajustar estas variables de contexto mediante el parámetro `context` de la etiqueta `include_dnd_partial` .
```hubl theme={null}
{% dnd_area 'dnd_area' class='body-container body-container--home-page', label='Main section' %}
{# Banner Section #}
{% include_dnd_partial path='../sections/banner.html'
context={
'content': '
Home Page
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.
',
'buttonText': 'Buy Now'
}
%}
{# End Banner Section #}
{% end_dnd_area %}
```
Cualquier variable que añadas a tu parámetro `context` estará disponible para referenciarla dentro de tu plantilla de sección. El siguiente ejemplo muestra cómo ajustar la URL de la imagen y el contenido del área de texto enriquecido y del botón en contexto, si existe.
```hubl theme={null}
{% dnd_section
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
},
max_width=778
%}
{% dnd_column %}
{% dnd_row %}
{% dnd_module path='@hubspot/rich_text' %}
{% module_attribute 'html' %}
{{ context.content || '
Communicate Your Way
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus posuere mi, in pretium ante posuere a. Aliquam a risus at eros molestie pretium.
' }}
{% end_module_attribute %}
{% end_dnd_module %}
{% end_dnd_row %}
{% dnd_row %}
{% dnd_module
path='../modules/button',
button_text={{ context.buttonText || 'Subscribe' }}
horizontal_alignment='CENTER'
%}
{% end_dnd_module %}
{% end_dnd_row %}
{% end_dnd_column %}
{% end_dnd_section %}
```
> [!NOTE]
>
> Ten en cuenta que en todas partes donde se utilizan las variables de contexto, hay un filtro `||` *OR* para proporcionar contenido predeterminado en caso de que no se especifique ninguno. Por ejemplo, en el módulo botón, si `context.buttonText` tiene un valor, la página lo utilizará. De lo contrario, el texto será `Subscribe`.
### Clases de secciones
En las plantillas de sección, puedes añadir clases al contenedor de la sección utilizando el parámetro clase. Esto añadirá la clase que especifiques al campo class del elemento html de la sección dnd. Siempre que sea posible, se recomienda utilizar controles de estilo integrados en las secciones para que los creadores de contenidos puedan modificarlos.
> [!WARNING]
>
> **Nota:** Las clases de secciones solo se admiten en las plantillas de sección.
```hubl theme={null}
{% dnd_section
class='my-hero-section'
padding={
'top': 200,
'right': 20,
'bottom': 200,
'left': 20
},
background_image={
'backgroundPosition': 'MIDDLE_CENTER',
'backgroundSize': 'cover',
'imageUrl': context.backgroundImage || get_asset_url('../images/blank-page-banner.png')
},
max_width=778,
vertical_alignment='MIDDLE'
%}
...
```
> [!WARNING]
>
> Los creadores de contenido no pueden editar, añadir o eliminar clases. Sólo pueden "eliminarse" recreando una sección manualmente en el editor.
>
> Además, debes evitar cambiar el diseño de los elementos secundarios de sección utilizando CSS o JavaScript. Hacerlo puede crear una experiencia desagradable para el creador de contenidos durante la de edición de páginas.
### Vista previa de tu sección
La forma más sencilla de obtener una vista previa de tu sección mientras desarrollas, es utilizar el administrador de diseño. Abre una plantilla que contenga una etiqueta [`dnd_area`](/docs/cms/reference/hubl/tags/dnd-areas) que llama a tu plantilla de sección utilizando una etiqueta `include_dnd_partial` . En la esquina superior derecha, haz clic en vista previa. De esta forma puedes seguir actualizando tu sección y ver tus cambios reflejados al instante. Esto es mucho más eficaz que tener que crear una página nueva para cada cambio que hagas.
## Copiar HubL de la sección
En el editor de páginas, puedes copiar el marcado HubL de una sección para reutilizar el código según sea necesario. Esto puede ser útil cuando se quiere recrear una sección de arrastrar y soltar en un archivo codificado.
Para copiar el marcado HubL de una sección:
* Ve al contenido:
* **Páginas web**: en tu cuenta de HubSpot, navega hasta **Marketing** > **Sitio web** > **Páginas web**.
* **Páginas de destino**: en tu cuenta de HubSpot, navega hasta **Marketing** > **Landing Pages**.
* Coloca el cursor sobre una página y haz clic en **Editar**.
* En el editor de páginas, agrega el siguiente parámetro a la URL y luego presiona **Introducir**: `?developerMode=true`
* Una vez la página cargue de nuevo, estarás en modo desarrollador. Parra salir del modo de desarrollador en cualquier momento, haz clic en **Salir del modo de desarrollador** en la parte superior derecha.

* Coloca el cursor sobre la sección que quieras copiar y haz clic en el **icono de flecha hacia abajo** . Selecciona **Copiar como HubL**. La marca HubL se copiará en tu portapapeles.

## Recursos relacionados
* [Resumen de las áreas de arrastrar y soltar](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview)
* [Etiquetas HubL del área de arrastrar y soltar](/docs/cms/reference/hubl/tags/dnd-areas)
* [Usar módulos en plantillas](/docs/cms/reference/modules/using-modules-in-templates)
* [Primeros pasos con las áreas de arrastrar y soltar](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial)
* [Cómo activar el modo desarrollador en el editor de páginas del CMS Hub - YouTube](https://www.youtube.com)
# Plantillas de blog
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/blog
Las plantillas de índice y publicaciones de blog pueden utilizarse para personalizar la apariencia del blog en un sitio.
> **Productos compatibles**
Los blogs de HubSpot consisten en páginas de índice de blogs y en las publicaciones individuales del blog. Además de listar las publicaciones individuales del blog, la plantilla de índice del blog también se utiliza para renderizar las páginas de índice de autores y etiquetas. Puedes crear una sola plantilla para representar todas las páginas de índice y publicaciones de blog, o puedes crear dos plantillas separadas.
A continuación, encuentra más información sobre el marcador de la plantilla del blog, los componentes de la plantilla y las opciones de personalización.
## Crear una plantilla compartida para las páginas de índice y de publicación
Para crear una plantilla que muestre las páginas de índice y publicaciones, agrega [la anotación](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) `templateType: blog` al principio de tu archivo de plantilla. Si se utiliza una plantilla para representar ambas cosas, se utilizará una [instrucción "if"](/docs/cms/reference/hubl/if-statements) que evalúe si el usuario está viendo una página de índice o una publicación individual. Si estás utilizando [el administrador de diseño de arrastrar y soltar](/docs/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates), esta instrucción `if` está incorporada en la interfaz de usuario de los botones del módulo de contenido del blog.
Utilizando la instrucción `if is_listing_view` , puedes escribir por separado el código de la publicación y el de la lista.
```hubl theme={null}
{% if is_listing_view %}
Markup for blog listing template
{% else %}
Markup for blog post template
{% endif %}
```
## Crear plantillas separadas para listados y publicaciones
Alternativamente, puedes elegir tener plantillas separadas para [las publicaciones del blog](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview#blog-post) y [las páginas de índice](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview#blog-listing), lo que puede ayudar a que tu código sea más ordenado y fácil de leer como desarrollador, a la vez que facilita la selección de plantillas para los creadores de contenido. En lugar de utilizar la anotación `templateType: blog` en la parte superior de una plantilla, incluye las siguientes [anotaciones](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview#template-types) en la parte superior de tus dos plantillas:
* **Plantilla de publicación de blog:** `templateType: blog_post`
* **Plantilla de listado de blog:** `templateType: blog_listing`

Cuando se crean plantillas separadas para publicaciones y listados, no es necesaria la validación `is_listing_view`. En su lugar, seleccionarás manualmente [plantillas separadas](https://knowledge.hubspot.com/es/blog/manage-your-blog-template-and-settings#select-your-blog-templates) dentro de los ajustes del blog de la cuenta.
También puedes [migrar una plantilla de blog unificada existente para que sea una plantilla de entrada de blog o una plantilla de listado de blog](https://developers.hubspot.es/docs).
### Cambiar las plantillas de las páginas de índice
La anotación `templateType: blog_listing` hace que la plantilla esté disponible para su [selección en los ajustes del blog](https://knowledge.hubspot.com/es/blog/manage-your-blog-template-and-settings) específicamente para la vista del listado. Con este tipo de plantilla, los creadores de contenido también pueden editar la página de índice dentro del editor de páginas. Al incluir también [áreas de arrastrar y soltar](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview) en la plantilla, los módulos se pueden añadir y eliminar en el editor de páginas como se hace en otras páginas del CMS. Echa un vistazo a [las plantillas de blog de la biblioteca de recursos del CMS de HubSpot](https://github.com/HubSpot/cms-theme-boilerplate/pull/349) para ver ejemplos de cómo incluir áreas de arrastrar y soltar.
El listado de publicaciones de blog se genera mediante un [bucle "for"](/docs/cms/reference/hubl/loops) que itera a través de las entradas de tu blog. `contents` es una secuencia predefinida de contenido que contiene todas las entradas de ese blog.
```hubl theme={null}
{% for content in contents %}
Post item markup that renders with each iteration.
{% endfor %}
```
> [!NOTE]
>
> Se recomienda hacer que todas las cadenas de texto de la plantilla de listado de tu blog estén controladas por campos. Esto facilita la creación de blogs [multilingües](/docs/cms/start-building/features/multi-language-content) y da más control a los creadores de contenidos.
## Crear un listado de módulos de blog
Puedes permitir que los creadores de contenido coloquen módulos en el perímetro del contenido del listado del blog, como en los laterales, o encima y debajo. Para ello, se recomienda crear un módulo que utilice un [bucle "for" de listado de blogs](/docs/cms/start-building/building-blocks/templates/blog#blog-listing-for-loop). Echa un vistazo al [módulo de índice de blogs de la plantilla del CMS](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/modules/blog-listings.module). [](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/modules/blog-listings.module)
Aunque HubSpot proporciona la [configuración del blog](https://knowledge.hubspot.com/es/blog/manage-your-blog-template-and-settings#select-your-blog-templates) para mostrar resúmenes y utilizar imágenes destacadas, también puedes crear estas funciones en tu módulo. Esto le permite a los creadores de contenidos ajustar estas características en el editor de páginas, en lugar de los ajustes del blog.
## Autor del blog, etiqueta y páginas de índice sencillas
Además de las páginas de índice y publicaciones de blogs, los blogs de HubSpot también tienen páginas para los autores de blogs, etiquetas de entradas de blog y páginas de índice sencillas. Estas páginas adicionales utilizan la misma plantilla que la página de índice del blog para mostrar su contenido.
> [!NOTE]
>
> Como la plantilla de la página de índice también la comparten el autor del blog, la etiqueta y la página de índice sencilla, las actualizaciones publicadas en la plantilla también se aplicarán a esas páginas.
Para configurar el diseño de estas páginas individualmente, puedes utilizar las instrucciones `if` para representar de manera condicional el contenido de cada tipo de página.
### If blog\_author
Dentro del marcador estándar del listado de blogs de HubSpot, hay una instrucción `if blog_author`. Esta instrucción se evalúa como "true" al visualizar la página de un autor, donde se listan las publicaciones que ha publicado. La biblioteca de la plantilla incluye el nombre del autor, su biografía y sus cuentas en las redes sociales.
```hubl theme={null}
{% if blog_author %}
{% else %}
```
### Etiqueta "If"
Puedes utilizar una instrucción `if tag` para renderizar código solo en una página de índice de temas del blog, que los visitantes verán al hacer clic en un tema del blog en tu sitio. El siguiente ejemplo es un fragmento que utiliza la variable de título de la página para imprimir automáticamente el nombre de la etiqueta en la parte superior de una página de índice de etiquetas.
```hubl theme={null}
{% if tag %}
Posts about {{ page_meta.html_title|split(" | ")|last }}
{% endif %}
```
### Instrucción "If not" simple\_list\_page
Hay dos tipos de páginas de índice de blogs que se pueden generar para mostrar los listados de publicaciones de blog: la página de índice normal y la página de índice simple:
* El índice estándar recorre la cantidad de publicaciones especificadas en la configuración de listado de blogs y aplica paginación según corresponda.
* Un índice simple es un listado de todas las publicaiones y no admite la paginación. - El índice simple no se ve afectado por la [configuración del límite de publicaciones del blog](/docs/cms/start-building/introduction/developer-environment/website-settings#number-of-posts-per-listing-page) y generalmente solo contiene enlaces a las 200 publicaciones más recientes del blog. La dirección de tu página de índice simple es la URL de tu blog con `/all` agregado al final de la ruta.
Puedes utilizar una instrucción `if not simple_list_page` para determinar qué mostrar en un índice simple frente a uno normal. A continuación se muestra una versión simplificada de esta isntrucción.
> [!NOTE]
>
> Observa que la instrucción `if` utiliza la lógica inversa, lo que significa que `else` define la vista de índice simple. Opcionalmente se puede utilizar una [instrucción "unless"](/docs/cms/reference/hubl/if-statements#unless-statements) en su lugar.
```hubl theme={null}
{% if not simple_list_page %}
Iterated post markup for regular listing
{% else %}
{% endif %}
```
## Paginación del índice
Las páginas de índice del blog tienen una paginación autogenerada. Tu plantilla de índice puede incluir la lógica para permitir a los visitantes encontrar fácilmente tus publicaciones de blog. La [biblioteca del blog](https://boilerplate.hubspotcms.com/blog) logra una paginación simple y numérica a través del [siguiente marcador](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/blog-pagination.module/module.html):
```hubl theme={null}
{% if contents.total_page_count > 1 %}
{% endif %}
```
## Marcador de la biblioteca
A continuación, puedes ver la estructura estándar del marcado de las plantillas de las páginas de publicaciones y de índice del blog. También puedes ver este marcado en la plantilla del CMS en GitHub, como se indica en cada sección.
### Marcador de la plantilla del blog
Todas las publicaciones de un blog se generan mediante una única plantilla de blog. `Content` es un objeto de datos predefinido que contiene información sobre la entrada de blog solicitada. Las [plantillas de publicaciones](https://boilerplate.hubspotcms.com/blog) se presentan con los [siguientes marcadores](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/blog-post.html):
```hubl theme={null}
{% if content.blog_post_author.has_social_profiles %}
{% if content.blog_post_author.facebook %}
Facebook
{% endif %}
{% if content.blog_post_author.linkedin %}
LinkedIn
{% endif %}
{% if content.blog_post_author.twitter %}
Twitter
{% endif %}
{% if content.blog_post_author.google_plus %}
Google+
{% endif %}
{% endif %}
```
### Marcador de plantillas de índice
El contenido de la [biblioteca de la página de índice del blog](https://boilerplate.hubspotcms.com/blog) para el bucle "for" se renderiza con el [siguiente marcador](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/blog-index.html):
```hubl theme={null}
{% for content in contents %}
{# On the blog homepage the first post will be featured above older posts #}
{% if (loop.first && current_page_num == 1 && !topic) %}
{% endif %}
{% endfor %}
```
## Recursos relacionados
* [Variables del blog](/docs/cms/reference/hubl/variables#blog-variables)
* [Plantillas de blog](/docs/cms/start-building/building-blocks/templates/blog)
* [Plantilla de temas de HubSpot](/docs/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)
* [Cómo crear un blog](https://knowledge.hubspot.com/es/blog/create-a-new-blog)
* [Importa tu blog a HubSpot](https://knowledge.hubspot.com/es/blog/import-your-content-into-hubspot)
# Marcador de plantillas de correo electrónico
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/email-template-markup
El siguiente artículo incluye información sobre cómo se codifican las plantillas de correo electrónico estándar de HubSpot. Dado que los clientes de correo electrónico solo admiten ciertas funciones de HTML y CSS, codificar plantillas de correo electrónico que se muestren de forma coherente en todos ellos requiere experiencia y paciencia. Para facilitar el proceso, las plantillas de correo electrónico de HubSpot se pueden crear como diseños de plantillas fáciles de usar o como archivos codificados.
> **Productos compatibles**
En este artículo, aprenderás cómo se codifican las plantillas de correo electrónico estándar de HubSpot. Al crear plantillas de correo electrónico personalizadas, ten en cuenta que los clientes de correo electrónico solo admiten [determinadas funciones HTML y CSS](http://www.campaignmonitor.com/css/). Por eso, codificar plantillas de correo electrónico que se muestren de forma coherente en todos ellos requiere experiencia y paciencia.
Consulta la base de conocimientos de HubSpot para aprender a [crear diseños de plantillas en la aplicación](https://knowledge.hubspot.com/es/design-manager/create-page-email-and-blog-templates-in-the-layout-editor) o a [guardar un correo electrónico existente como plantilla](https://knowledge.hubspot.com/es/marketing-email/save-marketing-emails-as-templates).
## Variables necesarias para la plantilla de correo electrónico
Para poder enviar correos electrónicos con HubSpot, tus plantillas deben incluir cierta información. Consulta las [variables HubL necesarias de correo electrónico](/docs/cms/reference/hubl/variables#required-email-template-variables). Cuando trabajes con plantillas codificadas, también querrás utilizar [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview) para asegurarte de que el contenido del correo electrónico pueda editarse fácilmente en cada uno de los correos.
## hs-inline-css y data-hse-inline-css
Uno de los aspectos más complicados de la codificación de plantillas de correo electrónico para que se muestran correctamente en todos los clientes de correo, es [la falta de soporte para CSS](http://www.campaignmonitor.com/css/) en un `
{# coded OR drag-and-drop email templates: #}
Column 1
Column 2
```
```text output.txt theme={null}
Column 1
Column 2
```
## Plantilla de correo adaptable
El diseño de la plantilla de correo electrónico predeterminado de HubSpot utiliza el siguiente marcador. Estos diseños adaptables incluyen consultas de medios que hacen que las imágenes y las tablas sean adaptables. Los diseños adaptables utilizan [variables de color y fuente](/docs/cms/reference/hubl/variables#color-and-font-settings) que conectan con **Configuración > Marketing > Correo electrónico**.
> [!WARNING]
>
> Al trabajar con el diseño adaptable de HubSpot, cualquier `
` con una clase que incluya el texto "column" se volverá adaptable.
```hubl theme={null}
{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}
{% if content.meta_description %}{% endif %}
{% text "preview_text" label="Preview Text This will be used as the preview text that displays in some email clients", value="", no_wrapper=True %}
{% if content.create_page %}
Not rendering correctly? View this email as a web page here.
{% endif %}
{% logo "logo_image" suppress_company_name=True, overrideable=True, label='Logo' %}
{% content_attribute "email_body" %}
Hi {{ contact.firstname }},
Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...
Use a list to:
Explain the value of your offer
Remind the reader what they’ll get out of taking action
```
## Plantilla de correo básico
Los diseños básicos de las plantillas de HubSpot utilizan un marcador diferente y no incluyen las consultas de medios que hacen que el correo electrónico sea adaptable. Los diseños básicos también utilizan [variables de color y fuente](/docs/cms/reference/hubl/variables#color-and-font-settings) que se conectan con **Configuración > Marketing > Correo electrónico**.
```hubl theme={null}
{% if content.html_title and content.html_title != "" %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}
{% if content.meta_description %}{% endif %}
{% text "preview_text" label="Preview Text This will be used as the preview text that displays in some email clients", value="", no_wrapper=True %}
{% if content.create_page %}
Not rendering correctly? View this email as a web page here.
{% endif %}
{% logo "logo_image" suppress_company_name=True, overrideable=True, label="Logo" %}
{% content_attribute "email_body" %}
Hi {{ contact.firstname }},
Describe what you have to offer the customer. Why should they read? What did you promise them in the subject line? Tell them something cool. Make them laugh. Make them cry. Well, maybe don't do that...
Use a list to:
Explain the value of your offer
Remind the reader what they’ll get out of taking action
```
## Comenzar desde cero
Cuando empiezas desde cero creando un correo electrónico .html en el administrador de diseño, HubSpot generará automáticamente el marcador a continuación.
```hubl theme={null}
{% if content.html_title and content.html_title != '' %}{{ content.html_title }}{% else %}{{ content.body.subject }}{% endif %}
{% if content.meta_description %}{% endif %}
{% text "preview_text" label="Preview Text This will be used as the preview text that displays in some email clients", value="", no_wrapper=True %}
{% if content.create_page %}
Not rendering correctly? View this email as a web page here.
{% endif %}
{{ site_settings.company_name }}
{{ site_settings.company_street_address_1 }}
{{ site_settings.company_street_address_2 }}
{{ site_settings.company_city }}
{{ site_settings.company_state }}
{{ site_settings.company_zip }}
{{ site_settings.company_country }}
You received this email because you are subscribed to {{ subscription_name }} from {{ site_settings.company_name }}.
Update your email preferences to choose the types of emails you receive.
Unsubscribe from all future emails
```
# Plantillas HTML + HubL
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/html-hubl-templates
Las plantillas del CMS de HubSpot están escritas en HTML y HubL. Estas plantillas son capaces de contener secciones fáciles de editar por los mismos creadores de contenido.
Las plantillas HTML + HubL se pueden utilizar para [cualquier tipo de plantilla](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview#template-types) en el CMS de HubSpot. Estas plantillas son archivos .html que admiten el [lenguaje de plantillas HubL](/docs/cms/reference/hubl/operators-and-expression-tests). Como estas plantillas codificadas son compatibles con HubL, la mejor experiencia de previsualización es utilizar la [vista preliminar de la plantilla en el administrador de diseño](https://knowledge.hubspot.com/es/website-pages/understand-a-hubspot-template-setup) o ver las páginas en una cuenta de entorno de pruebas. Las plantillas HTML + HubL pueden contener [parciales](#partials), que se pueden utilizar para separar segmentos de código de uso común, como un encabezado o un pie de página.
Las plantillas HTML + HubL dan un mayor control a los desarrolladores que [las plantillas de arrastrar y soltar del administrador de diseño visual](/docs/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates). Los desarrolladores, a su vez, pueden ofrecer una mejor experiencia de uso a los creadores de contenido mediante la [funcionalidad de arrastrar y soltar](/docs/cms/reference/hubl/tags/dnd-areas), lo que solo es posible con las plantillas HTML + HubL.

> [!NOTE]
>
> La plantilla anterior es la [plantilla base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html) incluida en la [biblioteca de recursos del CMS de HubSpot](/docs/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate), que es una excelente manera de comenzar a desarrollar con HubSpot.
## Familiaridad y herramientas
Dado que las plantillas HTML + HubL son archivos codificados, puedes usar tus herramientas preferidas para editarlas localmente. Recomendamos usar las [herramientas de desarrollo local](https://developers.hubspot.com/docs/developer-tooling/local-development/hubspot-cli/reference) de HubSpot para que puedas [subir](https://developers.hubspot.com/docs/developer-tooling/local-development/hubspot-cli/reference#upload), [obtener](https://developers.hubspot.com/docs/developer-tooling/local-development/hubspot-cli/reference#fetch), [ver](https://developers.hubspot.com/docs/developer-tooling/local-development/hubspot-cli/reference#watch), [crear](https://developers.hubspot.com/docs/developer-tooling/local-development/hubspot-cli/reference#create) y administrar de forma segura archivos en el sistema de archivos del desarrollador, así como en el administrador de archivos.
Crear plantillas HTML + HubL con HubSpot es similar a usar otro lenguaje de plantillas que ya hayas usado antes. La diferencia clave es que HubSpot adopta un enfoque definido sobre las prácticas recomendadas para ciertas tareas con el fin de ofrecer la mejor experiencia a los creadores de contenido, además de encargarse de gran parte del mantenimiento y la optimización del rendimiento, reduciendo la carga de trabajo para los desarrolladores.
Por ejemplo, si quieres cargar un archivo CSS en una página para ciertos módulos, en lugar de usar ``, debes incluir la hoja de estilo a través de `css_assets` en el [archivo meta.json del módulo](/docs/cms/reference/modules/configuration#adding-css-and-javascript-dependencies). Esto permite que HubSpot cargue CSS de forma condicional solo cuando el módulo está presente en una página, reduciendo la carga de CSS innecesario
Más información sobre cómo [optimizar el workflow de desarrollo de HubSpot](/docs/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow).
## Anotaciones de la plantilla
Las anotaciones de la plantilla, incluidas en la parte superior de una plantilla, configuran ajustes importantes de la plantilla, como el tipo de plantilla y si se puede usar para crear contenido nuevo. Las anotaciones de la plantilla se pueden cambiar en cualquier momento durante el proceso de desarrollo. A continuación, encuentra más información sobre las anotaciones de plantilla disponibles.
```html theme={null}
...
```
| Anotación | Tipo | Descripción |
| - | - | - |
| `templateType` | Cadena | Especifica qué tipo de plantilla es un archivo. Los valores incluyen:
|
| `isAvailableForNewContent` | Cadena | Especifica si una plantilla está disponible para su selección en el proceso de creación de contenido. Los valores incluyen: `true`, `false`. Las plantillas definidas como `false` no necesitan incluir las [variables requeridas](/docs/cms/reference/hubl/variables#required-page-template-variables). Las plantillas del tipo `page` que se definen como "false" también se pueden usar como [parciales estándar](#partials). |
| `enableDomainStylesheets` | Cadena | Especifica si la plantilla debe cargar [hojas de estilo del dominio](https://knowledge.hubspot.com/es/design-manager/create-edit-and-attach-css-files-to-style-your-site#attach-or-remove-stylesheets-on-a-domain-level). Los valores incluyen: `true`, `false`. |
| `Label` | Cadena | Descripción sencilla de la plantilla, que se muestra en la pantalla de selección de plantillas. Por ejemplo, `About Page`, `Homepage`, `Pricing`. |
| `screenshotPath` | Cadena | La captura de pantalla que se muestra cuando un creador de contenido está seleccionando una plantilla. Esta captura de pantalla debería facilitar la diferenciación de tus plantillas. |
## Incluye encabezado y pie de página
Las plantillas de HubSpot requieren la presencia de dos etiquetas a menos que el archivo sea una plantilla parcial. Estas son las etiquetas:
* `{{ standard_header_includes }}`: se utiliza para agregar el CSS requerido de forma combinada y minimizada.
* `{{ standard_footer_includes }}`: se utiliza para agregar de forma dinámica el javascript en la parte inferior de una página, para elementos como el script de seguimiento de HubSpot y los módulos.
Estas etiquetas deben estar presentes en una plantilla o en los elementos secundarios [parciales](#partials) para poder publicarse y utilizarse.
## Parciales
Las plantillas parciales son archivos HTML + HubL que pueden incluirse en otros archivos codificados. Los parciales te permiten adoptar un enfoque más modular al compartir el marcador entre múltiples plantillas. Por ejemplo, un encabezado se puede convertir en parcial para que puedas incluirlo fácilmente como componente sin necesidad de volver a codificarlo.
### Parciales estándar
Un parcial estándar es una plantilla o componente reutilizable con contenido que se puede editar en páginas individuales. Esto permite a los creadores de contenido cambiar el contenido según sea necesario, a diferencia de los parciales globales que siempre comparten contenido. Por ejemplo, el siguiente código arrastraría el módulo de la barra lateral a otro archivo de plantilla.
Los parciales estándar deben incluir las siguientes [anotaciones](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) en la parte superior del archivo de plantilla:
* `templateType: page`
* `isAvailableForNewContent: false`
```hubl theme={null}
{% include "../partial/sidebar.html" %}
```
### Parciales globales
Un parcial global es un tipo de [contenido global](/docs/cms/start-building/building-blocks/global-content#global-partials) que se puede usar en múltiples plantillas con contenido que se comparte en todas las instancias del parcial. Los parciales globales a menudo se usan para encabezados y pies de página, que puedes ver un ejemplo en el [encabezado](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/header.html) y el [pie de página](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/footer.html) de la biblioteca de recursos del CMS de HubSpot. Estos parciales se llaman en el [base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html) utilizando la etiqueta `global_partial`.
Los parciales globales deben incluir la [anotación](/docs/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations) `templateType: global_partial` en la parte superior del archivo.
```hubl theme={null}
{% global_partial path="../partials/header.html" %}
```
### Bloques y extensiones
Al crear plantillas complejas, puedes crear bloques compartimentados que amplíen una plantilla principal.
Por ejemplo, puedes crear una plantilla principal que incluya las variables requeridas [`standard_header_includes`](/docs/cms/reference/hubl/variables#required-page-template-variables) y [`standard_footer_includes`](/docs/cms/reference/hubl/variables#required-page-template-variables). Dentro de esa plantilla, se define un bloque único utilizando la siguiente sintaxis, donde el `body` es un nombre único:
```hubl theme={null}
{% block body %}
{% endblock body %}
```
En la plantilla secundaria, puedes extender la plantilla principal e insertar más contenido en el bloque `body`.
```hubl theme={null}
{% extends "./layouts/base.html" %}
{% block body %}
Page Content
Bullet 1
Bullet 2
Bullet 3
{% endblock %}
```
Este método se utiliza en la [plantilla base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html) de la biblioteca de recursos del CMS de HubSpot, que luego se extiende por las otras plantillas en la [carpeta de plantillas](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates).
### Grupos globales
También se pueden incluir los [grupos globales](https://knowledge.hubspot.com/es/design-manager/use-global-content-across-multiple-templates) creados con el creador de plantillas de arrastrar y soltar en el administrador de diseño. La sintaxis se muestra a continuación:
```hubl theme={null}
{% include "/path/to/global_header.template.json" %}
```
# Resumen de plantillas
Source: https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview
Las plantillas son envoltorios de páginas o correos electrónicos reutilizables que generalmente incluyen módulos y parciales en un diseño. Los creadores de contenido seleccionan una plantilla para utilizarla antes de crear una página o un correo electrónico.
Las plantillas definen el diseño de tus páginas, correos electrónicos y temas de HubSpot. Una plantilla se compone de módulos y parciales, y puede hacer referencia a otros materiales como hojas de estilo y archivos JavaScript. Las plantillas pueden ser creadas usando la [CLI de HubSpot](/docs/cms/start-building/introduction/react-plus-hubl/react-plus-hubl-quickstart) o en [el administrador de diseño de HubSpot](https://knowledge.hubspot.com/es/design-manager/create-page-email-and-blog-templates-in-the-layout-editor). Para los creadores de contenido, la plantilla es lo primero que seleccionarán al crear una página o un correo electrónico.
A continuación, aprende a crear una plantilla, los diferentes tipos de plantillas y lo que se incluye en ellas.
## Crear una plantilla
Para crear una plantilla, puedes utilizar el [administrador de diseño en HubSpot](https://knowledge.hubspot.com/es/design-manager/create-page-email-and-blog-templates-in-the-layout-editor) o ejecutar el comando CLI `hs create template`.
```shell theme={null}
hs create template [dest]
```
| Parámetro | Descripción |
| - | - |
| `name` | El nombre de la plantilla |
| `dest` | La ruta del directorio local en el que deseas crear la plantilla. Si no se incluye, la plantilla se creará en el directorio en el que te encuentres. |
* Utilizando las teclas de flecha, desplázate hasta el [tipo de plantilla](#template-types) que quieras crear y luego pulsa **introducir**.
La plantilla se creará localmente. Cuando quieras que la plantilla esté disponible para su uso en tu cuenta de HubSpot, [sube](https://developers.hubspot.com/docs/developer-tooling/local-development/hubspot-cli/reference#upload) la plantilla a tu cuenta. También puedes utilizar el comando [watch](https://developers.hubspot.com/docs/developer-tooling/local-development/hubspot-cli/reference#watch) para subir automáticamente todos los archivos nuevos y las ediciones de los archivos existentes en el directorio de trabajo actual y los directorios secundarios.
## Ver vista preliminar de la plantilla
Después de actualizar una plantilla, puedes obtener una vista previa para asegurarte de que se vea y actúe como esperas. Hay algunas formas en que HubSpot puede obtener una vista previa de una plantilla, como:
* **Visualización previa de una plantilla en el administrador de diseño:** es mejor para verificaciones visuales rápidas o cuando se necesita una vista previa de una publicación, anuncio o plantilla combinada del blog.
* **Crear un nuevo activo a partir de una plantilla:** lo mejor para probar el editor de arrastrar y soltar y la experiencia de creación de contenido.
### Vista previa en el administrador de diseño
Una vista previa de las plantillas usando el administrador de diseño puede ser especialmente útil para verificaciones visuales rápidas. El generador de vista previa de plantillas también te permite configurar opciones de presentación, como las dimensiones de viewport.
Para obtener una vista previa de una plantilla en el administrador de diseño:
* En tu cuenta de HubSpot, dirígete a **Marketing** > **Archivos y plantillas** > **Administrador de diseño**.
* Con el explorador de archivos de la barra lateral izquierda, haz clic en la **plantilla** de la que deseas una vista previa.
* En la parte superior derecha, haz clic en **Vista preliminar**.
* Selecciona **Vista preliminar en directo con opciones de visualización** para obtener una vista preliminar de la plantilla con opciones para probar la capacidad de respuesta y la configuración del dominio, como las hojas de estilo. Esta opción muestra la página dentro de un iframe. Esto también te permite seleccionar entre blogs y la publicación del blog o la vista de listado para las plantillas de blog.
* Selecciona **Vista previa sin opciones de visualización** para obtener una vista preliminar de la plantilla sin opciones adicionales.

### Vista preliminar con una nueva página
Al cambiar las áreas de arrastrar y soltar, los valores de los parámetros predeterminados en los módulos u otros cambios significativos, es mejor [crear una página web](https://knowledge.hubspot.com/es/website-and-landing-pages/create-and-customize-pages), un [blog](https://knowledge.hubspot.com/es/blog/create-a-new-blog), una [publicación de blog](https://knowledge.hubspot.com/es/blog/create-and-publish-blog-posts) o un [correo electrónico](https://knowledge.hubspot.com/es/marketing-email/create-and-send-marketing-emails) utilizando la plantilla. A continuación, puedes probar diferentes valores de los campos de los módulos y probar cómo se verá tu plantilla y optimizarla para obtener la mejor experiencia. Puedes publicar estos materiales o dejarlos en borrador para fines de prueba.
Además, puedes usar la [preparación de contenido](https://knowledge.hubspot.com/es/website-and-landing-pages/redesign-and-relaunch-a-site-with-content-staging#new) o una [cuenta de entorno de pruebas de desarrollador](https://offers.hubspot.com/free-cms-developer-sandbox) para crear y ver recursos sin afectar una cuenta de producción.
## Tipos de plantilla
Las plantillas pueden utilizarse para diferentes tipos de contenido, como páginas web y publicaciones de blog. En las plantillas codificadas, se designa el tipo de plantilla agregando una anotación en la parte superior del archivo.
A continuación, conoce los diferentes tipos de plantillas y las anotaciones que puedes utilizar para designar cada tipo.
> [!WARNING]
>
> ### Nota:
>
> Los creadores de contenido pueden cambiar la plantilla de una página por otra del mismo tipo, dependiendo de si tiene las etiquetas [dnd\_area](https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas).
>
> * Las plantillas creadas con el editor de diseño visual de arrastrar y soltar pueden cambiarse por otras plantillas de arrastrar y soltar o plantillas codificadas con o sin etiquetas `dnd_area`.
> * Las plantillas codificadas con etiquetas *dnd\_area* solo pueden cambiarse por otras plantillas codificadas con etiquetas `dnd_area`.
> * Las plantillas codificadas sin etiquetas `dnd_area` solo pueden cambiarse por otras plantillas codificadas sin etiquetas `dnd_area`.
### Página
```html theme={null}
templateType: page
```
Las plantillas de página son el tipo de plantilla más abierto. Pueden servir como cualquier tipo de página web o [landing page](https://blog.hubspot.com/blog/tabid/6307/bid/7177/what-is-a-landing-page-and-why-should-you-care.aspx). Los [diseños](#layout-css) de página no están precargados con ningún componente. Las plantillas de páginas codificadas vienen precargadas con un marcador escaso que incluye las etiquetas HubL sugeridas para la metainformación, el título y los [includes](#included-cms-files) de encabezado y pie de página necesarios. Algunos ejemplos de páginas que suelen utilizar una plantilla de página son, entre otros, los siguientes:
* [Página de inicio](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/home.html)
* [Acerca de nosotros](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/about.html)
* [Contacto](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/contact.html)
### Correo electrónico
```html theme={null}
templateType: email
```
Las plantillas de correo electrónico son utilizadas por la [herramienta de correo electrónico](https://www.hubspot.es/products/marketing/email). Tienen el conjunto de requisitos más estricto, ya que tienen que ser vistos en muchos clientes de correo electrónico diferentes y ajustarse a las prácticas recomendadas para garantizar una correcta capacidad de entrega. Tanto las plantillas de correo electrónico de [HTML + HubL](/docs/cms/start-building/building-blocks/templates/html-hubl-templates) como las del administrador de diseño de arrastrar y soltar vienen preconfiguradas con componentes básicos en el momento de la creación. Las plantillas con este `templateType` solo son visibles para la selección de plantillas al [crear un correo electrónico](https://knowledge.hubspot.com/es/marketing-email/edit-marketing-email-content-and-design).
Para cumplir con la normativa [CAN-SPAM](https://knowledge.hubspot.com/es/marketing-email/edit-email-footer-addresses), las plantillas de correo electrónico tienen un conjunto de [variables obligatorias](https://developers.hubspot.es/docs/cms/reference/hubl/variables#required-email-template-variables) que deben incluirse.
Las plantillas de correo electrónico también tienen una funcionalidad incorporada de [inline-css](/docs/cms/start-building/building-blocks/templates/email-template-markup#hs-inline-css-and-data-hse-inline-css) agregada a los elementos `
{% end_require_css %}
{##### Module HTML #####}
```
### Estilos y JavaScript
* Estilos:
* Los módulos deben tener un grupo de estilo que no esté vacío.
* No se recomienda la codificación de estilos inline dentro de los módulos. Por el contrario, usa estilos inline dinámicos al habilitar campos para controlar el estilo.
* JavaScript
* JavaScript debe poder representar múltiples instancias de un módulo. Javascript en el panel de JS solo se cargará una vez por página, independientemente del número de eventos del módulo.
* Javascript debe hacer referencia a los elementos DOM según los nombres de clase específicos del módulo para garantizar que los elementos que están fuera del módulo no sean afectados de manera accidental.
Al crear módulos, puedes usar una variable incorporada llamada `{{name}}`. Esta variable extrae el ID de instancia del módulo (que se puede usar solo en el panel de HTML y HubL) para ayudar en el marcado de CSS y JS para módulos complejos. [Más información sobre esto en nuestra documentación para desarrolladores.](/docs/cms/reference/modules/files#require-css-block)
## Organización de campos
Deben cumplirse los siguientes requisitos de organización y agrupación de campos.
### Pestaña de contenido
* Cuando hay al menos un control dentro de un grupo de campos, todos los controles deben agruparse en categorías etiquetadas según su función.
* Los campos de módulo agregados a la pestaña *Contenido* deben proporcionar formas de personalizar el contenido de un módulo. Por ejemplo, controles de imagen, ícono, texto alternativo y controles de enlaces.
### Pestaña de estilos
Los grupos de campos de estilo de módulo deben ser coherentes y seguir un patrón. A continuación, se encuentra un orden recomendado para los grupos de campos de estilo. Estos grupos pueden estar en el nivel superior o [anidados en un grupo profundo](#multi-level-grouping). Los grupos vacíos también se pueden eliminar:
* [Ajustes preestablecidos](#presets)
* Texto
* Fondo
* Borde
* Hover
* Esquina
* Espaciado
* Alineación
* Grupos de estilos personalizados que no se ajustan a lo anterior
* Avanzado
Los siguientes tipos de campos deben estar incluidos en la pestaña *Estilos* si están presentes:
* [Alineación](/docs/cms/reference/fields/module-theme-fields#alignment)
* [Imagen de fondo](/docs/cms/reference/fields/module-theme-fields#background-image)
* [Borde](/docs/cms/reference/fields/module-theme-fields#border)
* [Color](/docs/cms/reference/fields/module-theme-fields#color)
* [Fuente](/docs/cms/reference/fields/module-theme-fields#font)
* [Degradado](/docs/cms/reference/fields/module-theme-fields#gradient)
* [Espaciado](/docs/cms/reference/fields/module-theme-fields#spacing)
* [Alineación del texto](/docs/cms/reference/fields/module-theme-fields#text-alignment)
Al mover campos de la pestaña *Contenido* a la pestaña *Estilos*, puedes encontrar más información sobre cómo [usar la asignación de alias](/docs/cms/start-building/building-blocks/fields/alias-mapping) para conservar el estilo de los módulos que ya están en uso en páginas activas.
* Las opciones de animación siempre deben colocarse cerca de la parte inferior de la lista de grupos de campos.
* Las opciones que permiten a los creadores de contenido agregar fragmentos de código o CSS deben agruparse al final de la lista de grupos de campos bajo un campo con la etiqueta *Avanzado*.
* Los controles deben estar estandarizados en todos los módulos. Por ejemplo, todos los elementos que pueden tener un control de radio de borde deben ofrecer ese control. Evita ofrecer controles en algunos módulos que estén ausentes en otros.
* Los campos de módulo agregados a la pestaña *Estilo* deben proporcionar formas de diseñar el módulo. Por ejemplo:
* Las opciones de estilo, como color, estilo de texto, alineación, espaciado, borde y radio de esquina.
* Animaciones, como efectos de colocar el cursor y elementos deslizantes.
* Ajustes preestablecidos, como temas oscuros y claros que están destinados a cambiar muchos estilos al mismo tiempo.
### Ejemplos de organización de campo
#### Ajustes preestablecidos
Los ajustes preestablecidos se pueden usar cuando se quiere dar a los creadores de contenido un conjunto limitado de opciones, a menudo vinculadas a la configuración del tema. Por ejemplo, el módulo *Ícono* incluido en el tema Growth contiene valores predeterminados para colores *Oscuros* y *Claros*, lo que permite que haya coherencia cuando se usa en todo el sitio web.
#### Agrupación multinivel
Al decidir si mantener los campos de estilo en el nivel superior o anidarlos, considera el siguiente ejemplo.
El módulo *Ícono* incluido en el tema Growth enumera todos sus estilos en el nivel superior porque es un componente y, por lo tanto, sus opciones de estilo afectan a un componente.

El módulo *Tarjeta de conferencista* incluido en el tema Growth contiene múltiples componentes: la imagen de la tarjeta y su contenido en el texto. Por lo tanto, los estilos de módulo se agrupan por componentes para que los creadores de contenido tengan un proceso más claro para diseñar cada componente.

#### Agrupar campos individuales
El siguiente módulo de botón contiene agrupaciones para *Ajustes preestablecidos*, *Texto*, *Fondo* y mucho más. Aunque el grupo de campos *Esquina* contiene solo el control de radio de esquina, se agrupa para crear una experiencia uniforme en la creación de contenido.

# Pautas del mercado de plantillas de HubSpot
Source: https://developers.hubspot.es/docs/cms/marketplace/template-guidelines
El mercado de plantillas de HubSpot ayuda a miles de clientes que no pueden permitirse trabajar con un desarrollador a aumentar su presencia online. Lo conforman desarrolladores, como tú, que crean magníficos temas, plantillas y módulos muy fáciles de usar.
'El mercado de plantillas de HubSpot ayuda a miles de clientes que no pueden permitirse trabajar con un desarrollador a aumentar su presencia online. Lo conforman desarrolladores, como tú, que crean magníficos temas, plantillas y módulos muy fáciles de usar.';
El [mercado de plantillas de HubSpot](https://ecosystem.hubspot.com/marketplace/templates) ayuda a miles de clientes que no pueden permitirse trabajar con un desarrollador a aumentar su presencia online. Lo conforman desarrolladores que crean plantillas fáciles de usar para los clientes.
En el mercado de plantillas de HubSpot, puedes vender dos tipos de recursos: [temas](https://ecosystem.hubspot.com/es/marketplace/website) y [módulos](https://ecosystem.hubspot.com/es/marketplace/modules).
## ¿Por qué debo vender plantillas en el mercado?
El mercado de HubSpot tiene mucho que ofrecer a los desarrolladores y agencias que buscan crear un nuevo flujo de ingresos.
* **No exclusivo:** Seguro que has trabajado mucho creando tus recursos. Por eso, no deberías limitarte solo a tener tu plantilla en nuestro mercado y en ningún otro lugar. Eso significa que puedes usar tus plantillas fuera del mercado para tus propios proyectos.
* **Desarrolla tus recursos una vez, véndelos varias veces:** Una vez que tu plantilla aparece en el mercado, se convierte en una oportunidad que se multiplica. Solo tienes que desarrollar una plantilla una vez y vendérsela a varios clientes.
* **Haz crecer tu negocio:** Muchos de los desarrolladores que venden sus plantillas (tanto gratuitas como de pago) en nuestro mercado, han visto crecer sus negocios tanto a partir de los ingresos del mercado como de los servicios adicionales solicitados por los compradores.
* **Únete a una comunidad de creadores y muestra tus habilidades:** Conecta con un ecosistema creciente y solidario para dar forma al futuro de nuestro mercado y, al mismo tiempo, dar más visibilidad a tus ofertas y servicios.
## Resumen y requisitos
Para comenzar a vender en el mercado de plantillas, [crea una cuenta de proveedor](https://app.hubspot.com/signup-hubspot/asset-provider).
Todas las plantillas deben cumplir con los requisitos de diseño y calidad del código. Cada tipo de plantilla también tiene sus propios requisitos que deben cumplirse para que se incluya en el mercado. Puedes consultar esos requisitos más abajo.
Antes de comenzar a crear plantillas para el mercado, HubSpot recomienda encarecidamente revisar las [pautas de diseño](https://www.hubspot.com/template-providers), [branding](https://www.hubspot.com/providers/template/branding-guidelines), [uso de marcas comerciales](https://legal.hubspot.com/es/tm-usage-guidelines) y [uso del contenido](https://www.hubspot.com/content-usage-guidelines). Las plantillas que infrinjan estas pautas se eliminarán inmediatamente del mercado como se describe en los términos adicionales de HubSpot.
### Requisitos de los temas
Un conjunto portátil e independiente de plantillas, módulos, contenido global y opciones de estilo; todo diseñado para trabajar de forma conjunta y que los marketers puedan editar su contenido de la forma más intuitiva.
[Ver los requisitos de los temas](https://developers.hubspot.es/docs)
### Requisitos de los módulos
Los temas del mercado contendrán módulos, que son componentes reutilizables que se pueden usar en plantillas o agregarse a páginas en áreas de arrastrar y soltar, y con columnas flexibles. También puedes subir módulos independientes. Estos módulos pueden agregarse a cualquier tema del editor de contenido de HubSpot.
[Ver los requisitos de los módulos](https://developers.hubspot.es/docs)
### Requisitos de la página del recurso
Estos son los requisitos que se deben cumplir al subir plantillas y sus fichas al mercado. Estas normas se aplican a todas las plantillas del mercado.
[Consulta los requisitos sobre las fichas de las plantillas](https://developers.hubspot.com/docs)
### Políticas del mercado de plantillas
Son los requisitos y la información de cumplimiento de las fichas de las plantillas en el mercado.
[Ver las políticas del mercado de plantillas](https://developers.hubspot.com/docs)
## Publicar y actualizar temas en el mercado de plantillas
Una vez que hayas creado una plantilla, envíala para que la aprobemos y publiquemos en el mercado. Una vez enviadas, las plantillas se someterán a un proceso de revisión y aprobación por parte de nuestro equipo. [Aprende a publicar y actualizar tus plantillas en el mercado](https://developers.hubspot.com/docs).
## Pasarelas de pago admitidas
Actualmente, HubSpot ofrece a los proveedores del mercado la posibilidad de conectar las siguientes pasarelas para recibir pagos:
* PayPal [países admitidos](https://www.paypal.com/us/webapps/mpp/country-worldwide) | [pagos transfronterizos](https://www.paypal.com/us/cshelp/article/what-are-the-cross-border-fees-when-selling-internationally-help550)
* Stripe [países admitidos](https://stripe.com/global) | [pagos transfronterizos](https://docs.stripe.com/connect/cross-border-payouts)
Los pagos de los clientes se reciben a través del pago conectado en tu cuenta de proveedor del mercado:
* En tu cuenta de HubSpot, ve a **Mercado** > **Información del proveedor**.
* En la sección *Método de pago* puedes ver o actualizar la información de pago.
HubSpot no es responsable de los problemas que puedan darse en el portal de pago durante el proceso de compra. HubSpot no toma una parte de ninguna transacción y todas las transacciones se manejan independientemente de la plataforma de HubSpot. Si tu método de pago deja de funcionar por cualquier motivo, es posible que tus recursos se eliminen temporalmente para evitar una experiencia negativa para el cliente.
HubSpot tiene clientes en todo el mundo. Al configurar pasarelas de pago, te recomendamos que aceptes pagos en monedas internacionales (pagos transfronterizos).
HubSpot recomienda a los proveedores del mercado de plantillas que utilicen el portal de pago de Stripe si está disponible en su país. Si Stripe no está [disponible en tu país](https://stripe.com/global), te recomendamos que uses PayPal.
## Solicitudes de reembolso
Ocasionalmente, un comprador podría solicitar un reembolso. HubSpot recomienda definir claramente la política de reembolso en la descripción de la ficha del recurso, y proporcionar un enlace a la documentación sobre la política de reembolso. HubSpot recomienda a los proveedores que satisfagan todas las solicitudes de reembolso válidas. Consulta más información sobre las [pautas generales de las solicitudes de reembolso](https://knowledge.hubspot.com/resources/marketplace-refund-guidelines).
## Gestionar transacciones
Por cada plantilla que descarga un cliente del mercado, se crea un registro de un negocio en tu cuenta de proveedor. Todos los negocios se agregarán a una cartera de negocios llamada *Transacciones del mercado* con la etapa del negocio *Transacciones*. Cuando se emite un reembolso por una transacción, se definirá la propiedad *Reembolsado en* en el registro del negocio.
Los proveedores pueden [personalizar el pipeline de negocios y las etapas del negocio,](https://knowledge.hubspot.com/object-settings/set-up-and-customize-pipelines) y [usar las propiedades del negocio en los workflows](https://knowledge.hubspot.com/workflows/choose-your-workflow-actions#property-management)[.](https://knowledge.hubspot.com/object-settings/set-up-and-customize-pipelines)
## Eliminar fichas de plantillas
HubSpot se reserva el derecho de eliminar fichas del mercado por razones que incluyen, pero no se limitan a:
* Errores presentes en la plantilla.
* Plantillas de terceros en momentos en los que no se pueden subir.
* Plantillas que sean incompatibles con los [navegadores admitidos por HubSpot.](https://knowledge.hubspot.com/account-security/browsers-supported-by-hubspot)
* Uso de material protegido por derechos de autor, como imágenes, iconos, fuentes, audio y video, que no estén autorizados para la distribución.
* Plantillas que hacen seguimiento a usuarios sin su consentimiento informado y de inclusión voluntaria explícita.
* Plantillas (lo que incluye la vinculación al contenido del mercado o a la demostración de la plantilla) que incluyan el siguiente contenido:
* Promoción o implicación con actividades ilegales.
* Contenido despectivo, despreciativo y/o malintencionado.
* Reclamaciones deshonestas o falsas.
* Contenido ofensivo sobre la raza, la religión, la edad, el sexo o la orientación sexual.
* Los módulos se eliminarán si afectan a otros elementos de la página o el correo electrónico a los que se agrega.
## Preguntas frecuentes
> **¿Se aplica el reglamento P2B de la Unión Europea del 12 de julio de 2020 a los mercados de aplicaciones y plantillas?**
>
> No, la normativa P2B más reciente de la Unión Europea que entró en vigor el 12 de julio de 2020 no se aplica a los mercados de aplicaciones y plantillas de HubSpot. [Más información](https://wayback.archive-it.org/12090/*/https://ec.europa.eu/digital-single-market/en/business-business-trading-practices).
> **¿Necesito algún tipo de cuenta específica de HubSpot para subir plantillas al mercado?**
>
> Necesitas una [cuenta de proveedor](https://www.hubspot.com/template-providers) para enviar al mercado tus plantillas.
>
> Algunos partners gestionan sus fichas del mercado en su cuenta de partner para usar los materiales en la misma cuenta. Otros partners gestionan sus fichas en una cuenta del mercado aparte para mantener los recursos separados de otros materiales en la herramienta del administrador de diseño.
> **¿Los productos publicados en el mercado están alojados en mi cuenta o en el sistema del mercado?**
>
> Los productos enviados o publicados en el mercado se alojan en el sistema del mercado de HubSpot. Así, los proveedores pueden seguir editándolos en su propia cuenta sin que los cambios afecten las compras de los clientes. Para actualizar una ficha del mercado, el proveedor debe volver a enviarla para que volvamos a revisarla y a publicarla.
>
> Los clientes que compraron versiones anteriores de un producto en una ficha pueden [actualizarlo a la versión más reciente](https://knowledge.hubspot.com/resources/marketplace-customers-frequently-asked-questions#update) sin ningún cargo.
> **¿Cómo actualizo el nombre de mi empresa?**
>
> Una vez que hayas publicado una plantilla en el mercado, tendrás que ponerte en contacto con el [equipo de asistencia de HubSpot](https://help.hubspot.com/) para cambiar el nombre de tu empresa.
> **¿Por qué no veo todos mis productos cuando intento crear una ficha?**
>
> Las posibles razones por las que no ves un producto al intentar crear una ficha incluyen las siguientes:
>
> * La plantilla ya está en el mercado o contiene elementos de una plantilla que ya está en el mercado.
> * La plantilla no se admite en el mercado (lo que incluye los correos electrónicos transaccionales, los correos electrónicos de tickets, etc.)
> * La plantilla es un clon de una plantilla del mercado.
> **¿Qué debo usar como un enlace de vista previa?**
>
> Al crear URLs de vista previa, debes usar tu propio nombre de dominio si está disponible. Si no tienes un dominio disponible para usar, HubSpot proporciona a cada cuenta un dominio de sistema en la siguiente estructura de URL: `[AccountID].hs-sites.com`
>
> **Nota:** HubSpot no admite vistas previas de plantillas que utilicen el subdominio `preview.hs-sites.com`.
> **¿Se puede usar una sola plantilla en varios temas?**
>
> Sí, una sola plantilla se puede utilizar en varios temas. Un ejemplo común de cuándo se puede utilizar una plantilla en varios temas si un proveedor ofrece una versión Starter y Premium en el mismo tema.
> **¿Tengo que volver a enviar un tema o un módulo si le hago cambios?**
>
> Sí. Todos los cambios que se hagan en un tema o en un módulo deben volver a enviarse al mercado para que el equipo de calidad los valide y los apruebe antes de publicarlos. Una vez aprobados los cambios, la ficha y la plantilla se actualizarán en el mercado para que los clientes puedan verlo.
> **¿Cómo ajusto el precio de un tema o de un módulo?**
>
> Para ajustar el precio de un producto publicado, debes volver a enviarlo al mercado con la información actualizada. Los precios no pueden cambiarse de gratuitos a de pago, o viceversa, una vez publicada una plantilla.
> **¿Cómo recibo pagos del mercado?**
>
> Los pagos se reciben a través del método que conectaste en tu perfil de proveedor del mercado. En tu cuenta de HubSpot, ve a **Mercado** > **Información del proveedor**. En la sección *Método de pago* puedes ver o actualizar la información de pago.
>
> HubSpot no se queda con una parte de ninguna transacción y todas las transacciones se manejan independientemente de nuestra plataforma.
> **¿Dónde puedo obtener feedback de colegas o ponerme en contacto con otros proveedores del mercado?**
>
> Únete al canal #marketplace en el Developer Slack de HubSpot, registrándote en [https://developers.hubspot.com/slack.](https://developers.hubspot.com/community)
> **Cuando un cliente solicita un reembolso, ¿los archivos que ha descargado permanecen en su cuenta de HubSpot?**
>
> Todos los archivos asociados a la plantilla, así como cualquier dependencia (por ejemplo, páginas creadas con la plantilla, plantillas clonadas y módulos) se eliminarán una vez iniciado el reembolso.
> **¿Cómo puedo mantenerme al día sobre los últimos requisitos y cambios para los desarrolladores?**
>
> Para mantenerte al día de los últimos cambios, visita y suscríbete al [registro de cambios para desarrolladores de HubSpot](https://developers.hubspot.com/changelog).
# Políticas del mercado de plantillas de HubSpot
Source: https://developers.hubspot.es/docs/cms/marketplace/template-policies
# Mercado de plantillas | Requisitos de los temas (2022)
Source: https://developers.hubspot.es/docs/cms/marketplace/theme-requirements
Más información sobre los requisitos que un tema debe cumplir para poder enviarlo al mercado de plantillas.
'Requisitos de temas en el mercado de plantillas de HubSpot';
'Más información sobre los requisitos que un tema debe cumplir para poder enviarlo al mercado de plantillas.';
Más información sobre los requisitos que debe cumplir un tema para enviarlo al mercado de plantillas de HubSpot.
Si recién estás comenzando el proceso de creación de temas, te recomendamos encarecidamente que utilices nuestro tema CMS gratuito, que se puede descargar desde nuestro [Repositorio de GitHub](https://github.com/HubSpot/cms-theme-boilerplate) o [importarlo desde la interfaz de usuario del administrador de diseño de tu cuenta](https://www.youtube.com).
Además, revisa los [requisitos de la página de índice de la plantilla](https://developers.hubspot.com/docs) cuando envíes tu plantilla al mercado de plantillas de HubSpot.
## Límites del tema
Ten en cuenta los siguientes límites por tema:
* Las cuentas gratuitas de ***CMS Hub*** no pueden usar la búsqueda en el sitio, funcionalidad de la CTA o video nativo de HubSpot. Más información sobre lo que se incluye con las suscripciones de ***CMS Hub*** en el [catálogo de productos y servicios de HubSpot](https://legal.hubspot.com/hubspot-product-and-services-catalog).
* Los temas no pueden contener más de:
* 50 plantillas [(mínimo de páginas necesarias)](#templates-css%2C-sections%2C-page-templates%2C-etc.)
* 50 módulos (mínimo 5)
* 50 secciones (mínimo 5)
* Los temas **no deben** contener:
* Plantillas de correo electrónico
* Funcionalidad de HubDB
* Funciones sin servidor
* Campos de objetos del CRM
* [Columnas flexibles en plantillas](https://developers.hubspot.com/docs#flexible-columns)
**Módulos vs. secciones**
Las secciones son útiles porque los creadores de contenido solo pueden ubicarlas en zonas de colocación de ancho completo en la página, lo que te ayuda como desarrollador a garantizar un excelente producto terminado.
En particular, las secciones de diseño fijo, en las que el creador de contenido no puede mover elementos dentro de la sección, son una gran herramienta para proporcionar un formato y un diseño creativos que de otro modo no se podrían lograr con el editor de arrastrar y soltar.
Las secciones también ofrecen beneficios de usabilidad adicionales para el creador de contenido, ya que puede seleccionar módulos individuales dentro de la sección, lo que hace que los formularios de módulos sean más cortos y estén más orientados al elemento que se está editando.
## Requisitos generales de los temas
* Todos los temas enviados deben ser distintos y originales. Por ejemplo, el mismo tema con diferente contenido de texto o marcadores de posición no cuenta como un tema distinto. [Más información sobre el cumplimiento del mercado de plantillas de HubSpot](https://developers.hubspot.com/docs#template-marketplace-compliance).
* Un tema debe crearse con plantillas HTML y HubL, y etiquetas [dnd\_area](/docs/cms/reference/hubl/tags/dnd-areas).
* Los temas deben respetar una cuadrícula de 12 columnas.
### Estructura de los archivos del tema
Todos los temas deben contener una estructura de carpetas adecuada y estar agrupados en una carpeta principal, que debería describir la página de listas de productos. Por ejemplo, si estás creando un tema con nombre "SuperAwesome" para el mercado, tu estructura debe verse similar a la imagen de abajo. Más información sobre la [estructura de archivos del tema](https://developers.hubspot.com/docs#theme-file-structure).


### Rutas de archivo locales relativas para las plantillas
Al hacer referencia a los recursos del tema, debes usar rutas de archivo locales relativas. La mejor manera de incluirlos es usar la [función get\_asset\_url](/docs/cms/reference/hubl/functions#get-asset-url), que devuelve la URL pública de un material, archivo o plantilla. También puedes [generar esta función](/docs/cms/reference/hubl/functions#get-asset-url) en la aplicación, haciendo clic con el botón derecho en un **archivo** y seleccionando **copiar URL pública**, o bien haciendo clic en **acciones** y seleccionando luego **copiar URL pública**.
Por ejemplo, una hoja de estilo a la que hace referencia `require_css` y `get_asset_url` debe tener el siguiente formato:
**Input**
```hubl theme={null}
{{require_css(get_asset_url('../../css/main.css')) }}
```
**Output**
```html theme={null}
//cdn2.hubspot.net/hub/1234567/hub_generated/template_assets/1565970767575/custom/styles/style.min.css
```
En el siguiente video, revisa las diferencias en la estructura de archivos en tu cuenta de desarrollador en comparación con los archivos entregados a un cliente del mercado:
## Rendimiento del tema
Al usar Google Lighthouse, un tema debe obtener una calificación superior a los siguientes umbrales:
* **Accesibilidad en equipos de escritorio:** 65
* **Prácticas recomendadas en equipos de escritorio:** 80
* **Rendimiento en equipos de escritorio:** 70
* **Rendimiento en dispositivos móviles:** 40
Aprende a [generar un informe de Google Lighthouse para el tema usando la CLI](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli).
* El tamaño de los archivos de tema debe poder reducirse.
* Todos los archivos de imagen deben tener menos de 1MB de tamaño.
* Todas las etiquetas de imagen deben tener un atributo `alt` (un valor de `""` es aceptable).
* Todas las etiquetas de imagen deben tener un atributo `loading` (un valor de `""` es aceptable).
### Vista previa de URL de temas
Debes usar tu propio nombre de dominio al crear una URL de vista previa. No puedes usar el dominio proporcionado por HubSpot con esta estructura de URL: `[AccountID].hs-sites.com`
Se debe usar un sitio web en directo y no una imagen del sitio de demostración.
Si en algún momento tu demo en directo se vuelve inaccesible, HubSpot se reserva el derecho, con notificación al proveedor, de eliminar o remover tu tema hasta que la demo en directo vuelva a ser accesible.
## Usar jQuery
jQuery [no está habilitado de forma predeterminada](https://knowledge.hubspot.com/es/website-pages/include-jquery-across-your-hubspot-pages) en la cuenta de HubSpot de un cliente. Si el tema se basa en jQuery, se debe incluir una versión de jQuery para garantizar que el tema funcione como se espera.
Por ejemplo, si incluyes un módulo que requiere jQuery cuando el resto del sitio no lo requiere, necesitas usar el siguiente código para cargar jQuery:
```hubl theme={null}
{# this checks if the "Include jQuery" option in Settings > CMS > Pages is checked #}
{% if not site_settings.include_jquery %}
{{ require_js("../jquery-3.4.1.js", "footer") }}
{% endif %}
```
## Configuración del tema (Theme.json)
El archivo `theme.json` debe incluir los siguientes parámetros:
```json theme={null}
// theme.json
{
"label": "Cool Theme",
"preview_path": "./templates/home-page.html",
"screenshot_path": "./images/templates/homepage.jpg",
"enable_domain_stylesheets": false,
"version": "1.0",
"author": {
"name": "Jon McLaren",
"email": "noreply@hubspot.com",
"url": "https://theme-provider.com/"
},
"documentation_url": "https://theme-provider.com/cool-theme/documentation",
"license": "./license.txt",
"example_url": "https://theme-provider.com/cool-theme/demo",
"is_available_for_new_content": true
}
```
Revisa tu archivo `theme.json` y asegúrate de lo siguiente:
* El nombre de la etiqueta coincide con el nombre que aparece en el anuncio de tu tema.
* Si estás utilizando el modelo de tema CMS gratuito de HubSpot, los valores de modelo no deben estar presentes. Esto incluye la información del autor, la URL de la documentación, la URL de ejemplo, etc.
* La URL de documentación resuelve y tiene documentación sobre cómo usar tu tema.
* La ruta de vista previa es un archivo válido en tu tema.
* La ruta de la captura de pantalla es un archivo válido y está relacionada con tu tema.
* La URL de ejemplo resuelve y conduce a una demostración de tu tema. No utilices subdominios `preview.hs-sites.com` o `[AccountID].hs-sites.com` para la URL de ejemplo.
Obtén más información sobre los [parámetros de theme.json](https://developers.hubspot.com/docs#theme-json).
## Configuración del tema (Fields.json)
El archivo `fields.json` controla los campos disponibles y los grupos de campos en el editor de temas, incluidos los campos de estilo. Los campos que incluyas dependerán del control que quieras que tengan los creadores de contenido en el editor de páginas.
* Los archivos `fields.json` deben contener al menos tres campos de color.
* Para garantizar la compatibilidad entre los temas y los módulos independientes, los temas deben incluir las siguientes convenciones de nomenclatura estándar de fuente y color: `primary_color`, `secondary_color`, `heading_font` y `body_font`. Más información sobre la [compatibilidad de módulo y tema](https://developers.hubspot.com/docs#module-compatibility-with-themes).
Si los campos de tema no tienen los campos `primary_color`, `secondary_color`, `heading_font` o `body_font` pueden usar el campo `alternate_names`.
Más información sobre estos [parámetros de fields.json](https://developers.hubspot.com/docs#fields-json) y [revisa un archivo de ejemplo fields.json](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/fields.json) de la biblioteca de recursos de CMS Hub.
La configuración del tema también debe:
* No ser incompatible con los estilos del editor o los estilos establecidos mediante un módulo. Por ejemplo, no uses `!important` en tu hoja de estilos CSS, ya que hace que sea difícil para los usuarios finales anularla y causaría un conflicto.
* Usar etiquetas descriptivas para cada valor de configuración para que los creadores de contenido sepan lo que están actualizando.
* Aplicar todas las plantillas a un tema, a menos que haya un caso de uso específico para estilos adicionales. Por ejemplo, los cambios en el estilo y el tamaño de los títulos `h1` en la configuración del tema deben aplicarse a todas las etiquetas `h1` del tema.
Como mínimo, un tema **debe** incluir los siguientes campos:
**Campos de tipografía:**
* Campos de fuente del texto del cuerpo (marcas `p`)
* `h1` a través `h6` de campos de fuente
* Color del hipervínculo (`a` marcas), incluido el estilo al pasar el cursor
**Campos de formulario:**
* Color de fondo del formulario
* Color del borde del formulario
* Color de etiqueta de formulario
* Color del borde del campo del formulario
* Botón de formulario - esto incluye la configuración del texto del botón, el color de fondo y el estilo al pasar el cursor.
Además:
* Los campos que haya dentro del tema deben agruparse lógicamente donde corresponda. Por ejemplo, varios campos relacionados con la tipografía deben agruparse en el grupo `Typography`.
* Los campos de tema deben tener controles de color y fuente separados para los botones y formularios, así como controles de color, logotipo y fuente separados para el encabezado y el pie de página.
* Si los módulos dentro de un tema usan logotipos, por lo menos un campo de logotipo debe heredar la [configuración de marca](/docs/cms/start-building/building-blocks/fields/brand-and-settings-inheritance). Si se utiliza un campo de imagen para representar un logotipo, el campo de imagen no tiene que heredar la configuración de la marca.
## Plantillas (CSS, secciones, plantillas de página, etc.)
### Secciones
* Debes usar las [secciones](https://developers.hubspot.com/docs#reusable-sections) donde corresponda. **Debe** haber un mínimo de cinco secciones en un tema.
* Las secciones deben tener capturas de pantalla únicas y funcionales.
* Las secciones y los módulos no deben ser redundantes.
### Plantillas de página
Como mínimo, los temas deben incluir los siguientes tipos de plantillas:
* Una plantilla de página de sitio web o una plantilla de landing page.
* Al incluir varias plantillas de página, cada plantilla debe tener un propósito diferente. Por ejemplo, una página de inicio, una página *Acerca de nosotros*, una landing page de ancho completo y una landing page con una barra lateral derecha.
* Se recomienda incluir al menos ocho plantillas de página en un tema.
* Separa las plantillas de índices de blog y publicaciones de blog.
* **Plantilla de índice de blog:** la página que muestra todas las publicaciones de blog en un formato de lista (conocido como blogroll). El título de la plantilla debe reflejar que es para la página de índice.
* **Plantilla de publicación de blog:** la página de detalles de publicaciones de blog que muestra publicaciones de blog individuales. El título de la plantilla debe reflejar que es para la página de publicación del blog.
* Además, el diseño de los comentarios del blog y de las casillas de los autores del blog debe corresponder al tema.
* Las siguientes plantillas de página del sistema:
* **Plantilla de error 404**: se muestra cuando los visitantes acceden a una página que no existe.
* **Plantilla de error 500**: se muestra cuando el sitio encuentra un error interno.
* **Plantilla de solicitud de contraseña:** se muestra cuando una página está protegida con contraseña.
* **Plantilla de suscripción**: página de preferencias de suscripción donde los destinatarios de correo electrónico pueden administrar los tipos de correos electrónicos a los que se suscriben.
* **Plantilla de actualización de suscripciones:** página de confirmación que aparece cuando un destinatario de correo electrónico actualiza sus preferencias de suscripción a los correos electrónicos.
* **Respaldo de plantilla para anular suscripción:** la página que aparece para destinatarios de correos electrónicos que intentan cancelar la suscripción, si HubSpot no puede determinar la dirección de correo electrónico.
* **Plantilla de resultados de búsqueda:** muestra los resultados de búsqueda que se devuelven al usar la [búsqueda en el sitio](/docs/cms/start-building/building-blocks/modules/content-search). Disponible solo para cuentas de pago de ***CMS Hub***.
### Denominación de plantillas de página
* Si tienes plantillas con nombres similares, agrega palabras descriptivas que denoten la diferencia entre ellas.
* Usa las mayúsculas uniformemente, elimina los guiones y evita el uso de abreviaturas (por ejemplo, deletrear "fondo" en lugar de usar "fon").
* No es necesario incluir el nombre de la empresa o el nombre del tema en el nombre de la plantilla.
## Módulos
Obtén más información sobre los requisitos para los módulos de tema y los módulos individuales [aquí](https://developers.hubspot.com/docs).
## Contenido global
### Parciales globales
Los [parciales globales](/docs/cms/start-building/building-blocks/global-content) son un tipo de plantilla creada con HTML y HubL que se puede reutilizar en todo el sitio web. Los tipos de parciales más comunes son los encabezados, las barras laterales y los pies de página. Más información sobre cómo [crear parciales globales](/docs/cms/start-building/building-blocks/global-content#creating-a-global-content-partial-template-using-local-development-tools).
* Los temas deben incluir parciales globales.
* Los parciales globales deben incluir un [área útil de arrastrar y soltar](https://developers.hubspot.com/docs). Por ejemplo, no puedes ocultar el área de arrastrar y soltar con una clase "ocultar".
* Debes incorporar áreas de arrastrar y soltar que se puedan usar en encabezados
y pies de página.
* Para los menús que se utilizan globalmente, los usuarios también deben poder [seleccionar un menú de navegación de HubSpot](/docs/cms/start-building/building-blocks/modules/menus-and-navigation) que hayan creado en la configuración de su cuenta.
Evita incluir módulos globales dentro de los parciales globales, ya que se puede crear una experiencia negativa para el usuario final.
## Compatibilidad con varios idiomas
Los temas deben poder admitir versiones en varios idiomas y deben especificar los idiomas que admiten. Esto se puede hacer utilizando el [módulo de selector de idioma](/docs/cms/reference/modules/default-modules#language-switcher) en un encabezado global, que permite a los clientes localizar fácilmente las opciones de idioma y elegir el idioma que deseen.
* Solo debes mostrar un idioma a la vez. Por ejemplo, evita tener inglés y español en la interfaz de usuario al mismo tiempo.
* Evitar el uso de texto codificado. Por ejemplo, en lugar de codificar el texto de un botón de contenido de blog como *Leer más*, establece el texto dentro de un campo para que el usuario final pueda actualizar el texto sin tener que ir al código.
## Elementos móviles y adaptables
Los temas deben ser capaces de adaptar su contenido al dispositivo en el que se están viendo. También deben proporcionar una buena experiencia de usuario en varios dispositivos. Esto incluye, pero no está limitado a:
* Navegación principal
* Controles deslizantes y pestañas
* Imágenes grandes
* Evitar el desplazamiento horizontal (a menos que sea intencional)
# Campos de módulo y tema
Source: https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields
HubSpot tiene muchos tipos de campos que puedes usar para añadir flexibilidad y personalización a tus temas y módulos.
Agrega campos a los módulos y temas para que los creadores de contenido puedan controlar varios aspectos de una página dentro del editor de páginas. En este artículo podrás encontrar información sobre todos los campos disponibles para los módulos y para los temas, junto con sus propiedades asociadas.
Para obtener más información sobre la implementación de los campos de módulos y temas, incluidos los grupos de campos y los campos repetidos, consulta el [resumen de los campos de módulos y temas](https://developers.hubspot.es/docs/cms/reference/fields/overview).
## Propiedades utilizadas por todos los campos
Todos los campos comparten un conjunto de propiedades comunes. Estos son campos generales, como el nombre del campo o el texto de ayuda que se muestra a los creadores de contenido que usan el campo en el módulo o el tema.
```json theme={null}
{
"name" : "is_teaser_img",
"label" : "Enable Teaser Image",
"required" : false,
"locked" : false,
"type" : "boolean",
"inline_help_text" : "Shows Teaser image when toggled on",
"help_text" : "Teaser images are used to help provide visual context to the post.",
"default" : false
"alias_mapping": {
"property_aliases_paths": {
"is_teaser_img": ["old_boolean_field_name"]
}
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `name` | Cadena | El nombre del campo, al que harás referencia al incorporar el campo y sus valores en el módulo o tema. No puede contener espacios ni caracteres especiales. | `richtext_field, date_field, etc.` |
| `label` | Cadena | El texto que el creador de contenido ve como la descripción del campo. Puede contener espacios. | `Rich text field, Date field, etc.` |
| `required` | Booleano | Define si el campo puede dejarse vacío en el editor. Si es `true`, el contenido no se puede publicar sin un valor en el campo. | `false` |
| `locked` | Booleano | Define si el campo es editable en el editor de contenido. Si es `true`, el campo no aparecerá en el editor de contenido. | `false` |
| `type` | Cadena | El tipo de campo. Los tipos de campo son únicos por campo y se pueden encontrar dentro de la documentación para cada campo a continuación. | |
| `inline_help_text` | Cadena | Texto que se muestra en línea debajo de la etiqueta del campo (límite de 400 caracteres). Se utilizan para representar la información necesaria para el campo. Puede incluir las siguientes etiquetas HTML (otras etiquetas se ignorarán en el renderizado):`a`, `b`, `br`, `em`, `i`, `p`, `small`, `strong`, `span`. | |
| `help_text` | Cadena | Texto que se muestra en el editor dentro de un texto emergente al pasar el cursor para ayudar a los creadores del contenido (límite de 300 caracteres). Se utilizan para indicar qué información es complementaria, pero no necesaria, en un campo. Puede incluir las siguientes etiquetas HTML (otras etiquetas se ignorarán en el renderizado):`a`, `b`, `br`, `em`, `i`, `p`, `small`, `strong`, `span`. | |
| `id` | Cadena | El ID único del campo, definido por HubSpot. Cuando se crea localmente no es necesario especificar este ID. | |
| `visibility` | Matriz | Establece las condiciones de presentación del campo. Por ejemplo, puedes definir un campo para que solo se muestre cuando se haya seleccionado otro campo de la casilla de verificación. Más información sobre la [visibilidad](https://developers.hubspot.es/docs/cms/reference/fields/overview#field-visibility). | |
| `display_width` | Cadena | De forma predeterminada, los campos son de la anchura completa en el editor. Cuando dos campos consecutivos en el archivo `fields.json` se definen como `half_width`, aparecerán uno al lado del otro en el editor. | |
| `alias_mapping` | Cadena | Un alias para el campo, que asigna valores de campo existentes a una nueva ubicación sin romper el contenido existente. Esto puede ser útil cuando se necesita actualizar un campo que se está utilizando actualmente en el contenido publicado, como mover un campo de la pestaña *Contenido* a la pestaña *Estilo*. Más información sobre la [asignación de alias](/docs/cms/start-building/building-blocks/fields/alias-mapping). | `False` |
## Alineación
Permite a los creadores de contenido posicionar un elemento dentro de un contenedor. Para habilitar la alineación de texto, usa el [campo de alineación de texto](/docs/cms/reference/fields/module-theme-fields#text-alignment).
Los campos de alineación pueden usarse en [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview) y solo se pueden usar como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"name": "img_position",
"label": "Position Image",
"help_text": "Position the image within it's container.",
"required": false,
"type": "alignment",
"default": {
"horizontal_align": "CENTER",
"vertical_align": "TOP"
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Objeto que contiene `horizontal_align` y `vertical_align`. | |
| `alignment_direction` | Cadena | Determina si se deben mostrar solo los controles de alineación horizontales, solo los verticales o ambos. Puede ser:
`HORIZONTAL`
`VERTICAL`
`BOTH`
| `BOTH` |
**React**
```jsx theme={null}
import { ModuleFields, AlignmentField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Objeto que contiene `horizontal_align` y `vertical_align`. | |
| `alignmentDirection` | Cadena | Determina si se deben mostrar solo los controles de alineación horizontales, solo los verticales o ambos. Puede ser:
`HORIZONTAL`
`VERTICAL`
`BOTH`
| `BOTH` |
## Imagen de fondo
Este campo proporciona un campo de imagen de fondo que tiene subcampos para la posición y el tamaño del fondo. Los campos de imagen de fondo tienen una propiedad `.css` que devuelve el CSS basado en el valor del campo. [Más información sobre la propiedad CSS generada.](https://developers.hubspot.es/docs/cms/reference/fields/overview#generated-css)
Los campos de imagen de fondo pueden usarse en [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview) y solo pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"name": "bg_image",
"label": "Background image",
"required": false,
"type": "backgroundimage",
"default": {
"src": "https://example.com/img.png",
"background_position": "MIDDLE_CENTER",
"background_size": "cover"
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Objeto que contiene el src de la imagen, la posición del fondo y el tamaño del fondo. | `null` |
**React**
```jsx theme={null}
import { ModuleFields, BackgroundImageField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Objeto que contiene el src de la imagen, la posición del fondo y el tamaño del fondo. | `null` |
## Blog
Este campo permite a los editores de contenido seleccionar un blog y proporciona al desarrollador el ID de ese blog. Es útil en muchas situaciones, como al extraer información para artículos de blog destacados en los módulos. Puedes utilizar el identificador del blog en [las funciones de HubL](/docs/cms/reference/hubl/functions) relacionadas con los blogs para obtener información como [los autores del blog](/docs/cms/reference/hubl/functions#blog-authors), las [publicaciones recientes](/docs/cms/reference/hubl/functions#blog-recent-posts), [las publicaciones recientes con una etiqueta específica](/docs/cms/reference/hubl/functions#blog-recent-tag-posts), etc.
Los campos de blog pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"name": "blog",
"label": "Blog",
"required": false,
"locked": false,
"type": "blog",
"default": 1234567890
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | "default" / ID del blog | especifica qué blog se selecciona de forma predeterminada. Este parámetro acepta como argumentos 'default' o un ID de blog (disponible en la URL del panel del blog). | `null` |
**React**
```jsx theme={null}
import { ModuleFields, BlogField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | "default" / ID del blog | especifica qué blog se selecciona de forma predeterminada. Este parámetro acepta como argumentos 'default' o un ID de blog (disponible en la URL del panel del blog). | `null` |
## Booleano
Este campo permite a los editores de contenido activar o desactivar la funcionalidad. Los booleanos solo pueden ser `true` o `false`. A menudo tiene sentido hacer grupos o campos condicionales según los campos booleanos. Si crees que tendrás que proporcionar más de dos estados en el futuro, un [campo de elección](#choice) puede ser la mejor opción, ya que permite incluir más opciones si las necesidades cambian más adelante.
Los campos booleanos pueden usarse tanto en los temas como en los módulos. Los campos booleanos pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"name": "is_teaser_img",
"label": "Enable Teaser Image",
"required": false,
"locked": false,
"type": "boolean",
"display": "checkbox",
"inline_help_text": "Shows Teaser image when toggled on",
"help_text": "Teaser images are used to help provide visual context to the post.",
"default": false
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Booleano | Define si el estado predeterminado de este campo es `true` o `false`. | `false` |
| `display` | Cadena | Elige el estilo de visualización del campo. Puede aparecer como `toggle` o `checkbox`. | `checkbox` |
**React**
```jsx theme={null}
import { ModuleFields, BooleanField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Booleano | Define si el estado predeterminado de este campo es `true` o `false`. | `false` |
| `display` | Cadena | Elige el estilo de visualización del campo. Puede aparecer como `toggle` o `checkbox`. | `checkbox` |
> [!TIP]
>
> Un interruptor puede tener sentido cuando el valor del campo activa o desactiva otros campos que se muestran condicionalmente. Otro caso en el que un interruptor puede ser útil es cuando el campo representa un cambio importante de diseño del módulo.
>
> Las casillas de verificación tienen sentido para cambios más pequeños que pueden no tener un efecto tan drástico en la visualización del módulo, como ocultar o mostrar pequeños elementos individuales.
## Borde
Este campo proporciona a los creadores de contenido una interfaz de usuario para crear un borde alrededor de un elemento. Los campos de borde tienen una propiedad `.css` que devuelve el CSS basado en el valor del campo. [Más información sobre la propiedad CSS generada](https://developers.hubspot.es/docs/cms/reference/fields/overview#generated-css).
Los campos de borde pueden usarse en los [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview). Los campos de borde solo pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"id": "styles.border",
"name": "border",
"label": "border",
"required": false,
"locked": false,
"allow_custom_border_sides": false,
"type": "border",
"default": {
"top": {
"width": {
"value": 1,
"units": "px"
},
"opacity": 100,
"style": "solid",
"color": "#ffffff"
},
"bottom": {
"width": {
"value": 1,
"units": "px"
},
"opacity": 100,
"style": "solid",
"color": "#ffffff"
},
"left": null,
"right": null
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Booleano | Con teclas para el radio del borde, los lados superior, inferior, izquierdo y derecho. | `{}` |
**React**
```jsx theme={null}
import { ModuleFields, BorderField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Booleano | Con teclas para el radio del borde, los lados superior, inferior, izquierdo y derecho. | `{}` |
## Elección
Los campos de elección le permiten a un creador de contenido seleccionar uno o más elementos de una lista de opciones. Usar la propiedad `display`, puede configurar que se muestren las opciones en un menú desplegable, selección con botones o casillas de verificación, o una serie de botones. Más abajo encontrarás información sobre las [opciones de presentación del campo de elección](#choice-button-presets).
Los campos de elección pueden usarse tanto en los temas como en los módulos. Los campos de elección pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"name": "img_position",
"label": "Image Position",
"required": false,
"locked": false,
"multiple": "true",
"display": "select",
"choices": [
["img--left", "Image Left - Text Right"],
["img--right", "Text Left - Image Right"]
],
"type": "choice",
"default": "img--left"
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `choices` | Matriz | Matriz que contiene las opciones seleccionables, con el formato como un valor interno único seguido de una etiqueta. | `[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]` |
| `default` | Valor | Establece el valor predeterminado de la matriz de elección. | |
| `multiple` | Booleano | Campo opcional que permite seleccionar varias opciones cuando se define como `true`. Establece `display` como `checkbox` o `select` para determinar si el campo se muestra como una lista de casillas de verificación o como un menú desplegable. | `false` |
| `display` | Cadena | Establece la apariencia del campo utilizando uno de los siguientes valores:
`select`: muestra un menú desplegable. Permite seleccionar múltiples opciones cuando `multiple` se define como `true`.
`checkbox`: muestra una lista de casillas de verificación seleccionables. Permite seleccionar múltiples opciones cuando `multiple` se define como `true` y `reordering_enabled` se define como `false`.
`radio`: muestra una lista de opciones de botones de selección. No permite seleccionar múltiples opciones.
`buttons`: muestra un conjunto de botones basados en el `preset` especificado. No permite seleccionar múltiples opciones.
| `"select"` |
| `reordering_enabled` | Booleano | Cuando se define como `true`, permite a los creadores de contenido reordenar las opciones del campo en el editor. Para habilitar está funcionalidad, `multiple` también debe estar definido como `true`. | `false` |
| `preset` | Cadena | Ajusta el botón preestablecido que se usará cuando `display` está definido como `buttons`. Con cada ajuste preestablecido, deberás configurar las etiquetas `choices` para que coincidan con un conjunto específico de valores. Obtén más información sobre estos [ajustes preestablecidos](#choice-button-presets) a continuación. | |
**React**
```jsx theme={null}
import { ModuleFields, ChoiceField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `choices` | Matriz | Matriz que contiene las opciones seleccionables, con el formato como un valor interno único seguido de una etiqueta. | `[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]` |
| `default` | Valor | Establece el valor predeterminado de la matriz de elección. | |
| `multiple` | Booleano | Campo opcional que permite seleccionar varias opciones cuando se define como `true`. Establece `display` como `checkbox` o `select` para determinar si el campo se muestra como una lista de casillas de verificación o como un menú desplegable. | `false` |
| `display` | Cadena | Establece la apariencia del campo utilizando uno de los siguientes valores:
`select`: muestra un menú desplegable. Permite seleccionar múltiples opciones cuando `multiple` se define como `true`.
`checkbox`: muestra una lista de casillas de verificación seleccionables. Permite seleccionar múltiples opciones cuando `multiple` se define como `true` y `reordering_enabled` se define como `false`.
`radio`: muestra una lista de opciones de botones de selección. No permite seleccionar múltiples opciones.
`buttons`: muestra un conjunto de botones basados en el `preset` especificado. No permite seleccionar múltiples opciones.
| `"select"` |
| `reorderingEnabled` | Booleano | Cuando se define como `true`, permite a los creadores de contenido reordenar las opciones del campo en el editor. Para habilitar está funcionalidad, `multiple` también debe estar definido como `true`. | `false` |
| `preset` | Cadena | Ajusta el botón preestablecido que se usará cuando `display` está definido como `buttons`. Con cada ajuste preestablecido, deberás configurar las etiquetas `choices` para que coincidan con un conjunto específico de valores. Obtén más información sobre estos [ajustes preestablecidos](#choice-button-presets) a continuación. | |
### Ajustes preestablecidos del botón de elección
Para configurar un campo de elección para mostrar botones en lugar de un menú desplegable, casillas de verificación o selección con botones, puedes usar cualquiera de estos ajustes preestablecidos. Cada ajuste preestablecido permite un conjunto específico de etiquetas de opciones, las cuales deberás incluir en la matriz `choices`. Estas etiquetas no se pueden personalizar.
```json example.json theme={null}
{
"name": "layout",
"type": "choice",
"label": "Layout",
"required": false,
"locked": false,
"display": "buttons",
"preset": "layout",
"choices": [
["cards_value", "cards"],
["tiles_value", "tiles"],
["minimal_value", "minimal"]
]
}
```
```text react.txt theme={null}
import { ModuleFields, ChoiceField } from '@hubspot/cms-components/fields';
```
| Ajuste preestablecido | Etiquetas de elección | Ejemplo |
| - | - | - |
| `case` | `none` \| `upper` \| `lower` | |

\| | `expand_icon` | `caret` | `plus` | `chevron` |

\| | `icon_background_shape` | `none` | `square` | `rounded` | `circle` |

\| | `icon_size` | `small` | `medium` | `large` |

\| | `layout` | `cards` | `tiles` | `minimal` |

\| | `social_icon_background_shape` | `none` | `square` | `rounded` | `circle` |

\| | `social_icon_size` | `small` | `medium` | `large` |

|
## Color
Los campos de color proporcionan una amplia interfaz de selección de colores. Admiten tanto colores sólidos como transparencias. Son una opción perfecta para cuando se le quiere dar a los creadores de contenido un control total sobre los colores dentro de un módulo.
Por opción predeterminada, el input de opacidad de un campo de color está oculta para los módulos de correo electrónico, ya que algunos clientes de correo electrónico no respetan las reglas de opacidad. Puedes ver el campo de opacidad en los módulos de correo electrónico definiendo `show_opacity` como `true`.
Los campos de color pueden usarse tanto en los temas como en los módulos. Los campos de color pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"name": "bg_color",
"label": "Background color",
"required": false,
"locked": false,
"type": "color",
"default": {
"color": "#ff0000",
"opacity": 100
},
"limited_options": ["#000000", "#ffffff"]
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Object | Define el color y la opacidad predeterminados. | `{ "color" : "#ffffff", "opacity" : 100 }` |
| `show_opacity` | Booleano | Define si se muestra el valor de opacidad.
`true`: se muestra el valor de opacidad.
`false`: el valor de opacidad está oculta.
Si se deja sin definir, el valor de opacidad no se mostrará en los módulos de correo electrónico, sino que se mostrará en otros tipos de módulos.
| `undefined` |
| `limited_options` | Matriz | Una matriz de cadenas que oculta la cuadrícula de colores predeterminada y anula la lista de colores favoritos (la etiqueta "Favoritos" se convierte en "Colores disponibles"). Los valores de la matriz deben ser un código hexadecimal o un `color` de valor hexadecimal en cualquier ruta de herencia. | `undefined` |
**React**
```jsx theme={null}
import { ModuleFields, ColorField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Object | Define el color y la opacidad predeterminados. | `{ "color" : "#ffffff", "opacity" : 100 }` |
| `showOpacity` | Booleano | Define si se muestra el valor de opacidad.
`true`: se muestra el valor de opacidad.
`false`: el valor de opacidad está oculta.
Si se deja sin definir, el valor de opacidad no se mostrará en los módulos de correo electrónico, sino que se mostrará en otros tipos de módulos.
| `undefined` |
| `limitedOptions` | Matriz | Una matriz de cadenas que oculta la cuadrícula de colores predeterminada y anula la lista de colores favoritos (la etiqueta "Favoritos" se convierte en "Colores disponibles"). Los valores de la matriz deben ser un código hexadecimal o un `color` de valor hexadecimal en cualquier ruta de herencia. | `undefined` |
## CTA
Los campos de llamada a la acción (CTA) permiten a los usuarios elegir una CTA. Las CTA son esencialmente botones o enlaces a los que puede hacerse un seguimiento. Los creadores de contenido pueden [crear la CTA](https://knowledge.hubspot.com/es/ctas/create-calls-to-action-ctas) y después usarlas en todo el sitio.
Los campos de CTA pueden usarse en los módulos. Los campos de CTA están disponibles en **CMS Hub** *Pro* y *Enterprise*.

**JSON**
```json theme={null}
{
"name": "cta",
"label": "CTA",
"required": false,
"locked": false,
"type": "cta",
"default": null
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Cadena | La CTA predeterminada. Solicita un ID de CTA que se puede encontrar en la URL al editar una CTA en el [administrador de CTA](https://app.hubspot.com/l/ctas). | `null` |
**React**
```jsx theme={null}
import { ModuleFields, CTAField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Cadena | La CTA predeterminada. Solicita un ID de CTA que se puede encontrar en la URL al editar una CTA en el [administrador de CTA](https://app.hubspot.com/l/ctas). | `null` |
## Objeto del CRM
Los campos de objeto del CRM proporcionan una opción para que los usuarios elijan una instancia individual de un objeto del CRM para mostrarlo.
`module.fieldname.properties` devuelve las propiedades de esa instancia de objeto. Esto hace que no sea necesario utilizar la función `crm_object()` para obtener los datos de la instancia del objeto seleccionado.
`module.fieldname.id` devuelve el ID de la instancia del objeto.
Los campos de objeto del CRM pueden usarse en los módulos. Los campos de objeto del CRM están disponibles en **CMS Hub** *Pro* y *Enterprise*.

**JSON**
```json theme={null}
{
"name": "crmobject_field",
"label": "CRM object",
"required": false,
"locked": false,
"object_type": "CONTACT",
"properties_to_fetch": [],
"type": "crmobject",
"default": {
"id": 1
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `object_type` | Cadena | Tipo de objeto del CRM que el usuario puede elegir. [Tipos de objetos del CRM compatibles](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) | |
| `properties_to_fetch` | Matriz | Matriz de nombres de propiedades asociadas al tipo de objeto en forma de cadena. Ejemplo: `"date_of_birth"` es una propiedad asociada a un contacto. Utiliza esta opción para limitar la información disponible en la página a lo que necesitas. | |
| `default` | Objeto | Objeto con el ID de la instancia del objeto seleccionado por opción predeterminada. ID del contacto, ID de la empresa, etc | `null` |
**React**
```jsx theme={null}
import { ModuleFields, CRMObjectField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `objectType` | Cadena | Tipo de objeto del CRM que el usuario puede elegir. [Tipos de objetos del CRM compatibles](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types) | |
| `propertiesToFetch` | Matriz | Matriz de nombres de propiedades asociadas al tipo de objeto en forma de cadena. Ejemplo: `"date_of_birth"` es una propiedad asociada a un contacto. Utiliza esta opción para limitar la información disponible en la página a lo que necesitas. | |
| `default` | Objeto | Objeto con el ID de la instancia del objeto seleccionado por opción predeterminada. ID del contacto, ID de la empresa, etc | `null` |
## Propiedad de objeto del CRM
Utiliza este campo para acceder a los metadatos de la propiedad, como la etiqueta y el nombre de la propiedad, desde un tipo de objeto específico. Esto permite a los creadores de contenido seleccionar entre las propiedades del objeto cuando necesitan mostrar los detalles de la propiedad en una página.
Por ejemplo, podrías agregar este campo a un módulo de tabla personalizado para rellenar los encabezados de tabla según las propiedades seleccionadas.
Los campos de objeto del CRM pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"name": "crmobjectproperty_field",
"label": "CRM object property",
"required": true,
"locked": false,
"object_type": "contact",
"type": "crmobjectproperty",
"default": {
"property": "field_of_study"
}
}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `object_type` | Cadena | Tipo de objeto del CRM que el usuario puede elegir. Más información sobre los [tipos de objetos del CRM disponibles](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). |
| `default` | Objeto | Contiene la propiedad predeterminada para mostrar. |
Además, puedes usar los siguientes fragmentos para devolver otros detalles de la propiedad:
* `{{ module.fieldname.property }}`: devuelve el nombre interno de la propiedad.
* `{{ module.fieldname.property_definition.label }}`: devuelve la etiqueta de la propiedad.
* `{{ module.fieldname.property_definition.type }}`: devuelve el tipo de propiedad (por ejemplo, cadena).
**React**
```jsx theme={null}
import { ModuleFields, CRMObjectPropertyField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción |
| - | - | - |
| `objectType` | Cadena | Tipo de objeto del CRM que el usuario puede elegir. Más información sobre los [tipos de objetos del CRM disponibles](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). |
| `default` | Objeto | Contiene la propiedad predeterminada para mostrar. |
## Fecha
Con estos campos, los creadores de contenido pueden seleccionar una fecha. Devuelven una marca de tiempo que puedes utilizar en tu código.
Los campos de fecha pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"name": "event_start_date",
"label": "Event Date",
"required": false,
"locked": false,
"type": "date",
"default": 1577854800000
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | La marca de tiempo | Unix Epoch de la fecha y la hora que quieres definir como predeterminada. Deja este valor como nulo para permitir que el selector de fecha y hora inicie el creador de contenido en la fecha y hora actuales del selector. | `null` |
**React**
```jsx theme={null}
import { ModuleFields, DateField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | La marca de tiempo | Unix Epoch de la fecha y la hora que quieres definir como predeterminada. Deja este valor como nulo para permitir que el selector de fecha y hora inicie el creador de contenido en la fecha y hora actuales del selector. | `null` |
## Fecha y hora
Los campos de fecha y hora ofrecen una interfaz de selección de fecha al igual que el campo de fecha, así como un selector de hora para facilitar a los creadores de contenido la selección de una fecha y de la hora del día. Devuelven una marca de tiempo que puedes utilizar en tu código.
Los campos de fecha y hora pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"name": "event_start",
"label": "Event Start",
"required": false,
"locked": false,
"type": "datetime",
"default": 1577854800000
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | La marca de tiempo | Unix Epoch de la fecha y la hora que quieres definir como predeterminada. Deja este valor como nulo para permitir que el selector de fecha y hora inicie el creador de contenido en la fecha y hora actuales del selector. | `null` |
**React**
```jsx theme={null}
import { ModuleFields, DateTimeField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | La marca de tiempo | Unix Epoch de la fecha y la hora que quieres definir como predeterminada. Deja este valor como nulo para permitir que el selector de fecha y hora inicie el creador de contenido en la fecha y hora actuales del selector. | `null` |
## Dirección de correo electrónico
Los campos de dirección de correo electrónico permiten a los usuarios seleccionar varias direcciones de correo electrónico. Pueden utilizarse para mostrar información de contacto. El campo de correo electrónico devuelve una matriz de direcciones de correo electrónico seleccionadas que puedes procesar en bucle.
Los campos de correo electrónico pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"name": "emails",
"label": "Email address",
"required": false,
"locked": false,
"type": "email",
"default": null
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Matriz | Matriz de cadenas de direcciones de correo electrónico `["bob@example.com", "dennis@example.com"]` | `null` |
**React**
```jsx theme={null}
import { ModuleFields, EmailField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Matriz | Matriz de cadenas de direcciones de correo electrónico `["bob@example.com", "dennis@example.com"]` | `null` |
## Inserción
Los campos de inserción permiten al usuario agregar la URL de un [oEmbedsitio habilitado para usar](https://oembed.com/#section7) o pegar un código de inserción de otro sitio. Para saber más sobre el uso de oEmbed en HubSpot, y ver casos prácticos, consulta nuestro [oEmbed documento sobre](/docs/cms/start-building/building-blocks/fields/oembed).

**JSON**
```json theme={null}
{
"name": "embed_field",
"label": "Embed",
"required": false,
"locked": false,
"supported_source_types": ["oembed", "html"],
"supported_oembed_types": ["photo", "video", "link", "rich"],
"type": "embed",
"default": {
"source_type": "oembed"
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `supported_source_types` | Matriz | Tipos de origen compatibles: URL oEmbed (`oembed`), código de inserción en HTML (`html`) o Media Bridge (`media_bridge`). | `["oembed", "html"]` |
| `supported_oembed_types` | Matriz | Tipos disponibles de oEmbed, incluidos `"photo"`, `"video"`, `"link"`, y `"rich"`. No se aplica a los supported\_source\_types de html | `[ "photo", "video", "link", "rich" ]` |
| `supported_media_bridge_providers` | Matriz | Matriz de múltiples ID que determinan qué proveedores de Media Bridge están disponibles para seleccionar el contenido. Nota: este parámetro también se rellenará cuando se instale una [aplicación de proveedor de Media Bridge](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media). | |
| `type` | Cadena | Este parámetro siempre está definido como `"embed"` | `"embed"` |
| `default` | Dicc. | Una matriz que contiene el parámetro `"source_type"`. Este parámetro tiene un valor basado en una cadena procedente de las opciones proporcionadas en el parámetro `"supported_source_types"`. | `oembed` |
**React**
```jsx theme={null}
import { ModuleFields, EmbedField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `supportedSourceTypes` | Matriz | Tipos de origen compatibles: URL oEmbed (`oembed`), código de inserción en HTML (`html`) o Media Bridge (`media_bridge`). | `["oembed", "html"]` |
| `supportedOembedTypes` | Matriz | Tipos disponibles de oEmbed, incluidos `"photo"`, `"video"`, `"link"`, y `"rich"`. No se aplica a los supported\_source\_types de html | `[ "photo", "video", "link", "rich" ]` |
| `supportedMediaBridgeProviders` | Matriz | Matriz de múltiples ID que determinan qué proveedores de Media Bridge están disponibles para seleccionar el contenido. Nota: este parámetro también se rellenará cuando se instale una [aplicación de proveedor de Media Bridge](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media). | |
| `type` | Cadena | Este parámetro siempre está definido como `"embed"` | `"embed"` |
| `default` | Dicc. | Una matriz que contiene el parámetro `"source_type"`. Este parámetro tiene un valor basado en una cadena procedente de las opciones proporcionadas en el parámetro `"supported_source_types"`. | `oembed` |
## Archivo
Los campos de archivo permiten al usuario subir un archivo en el administrador de archivos o en el administrador de documentos, y facilitan la tarea de adjuntar elementos almacenados en esas ubicaciones. Este campo puede ser útil para enlazar archivos PDF o de otros formatos. Para mostrar imágenes en una página, debes utilizar el campo de imagen.
Los campos de archivo pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"name": "file_field",
"label": "File",
"required": false,
"locked": false,
"type": "file",
"picker": "file",
"default": null
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Cadena | URL de archivo. | `null` |
| `picker` | Cadena | Valores aceptables: "file", "document", "image". El selector muestra los recursos subidos al administrador de archivos o en el administrador de documentos, dependiendo de este parámetro. | `file` |
**React**
```jsx theme={null}
import { ModuleFields, FileField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Cadena | URL de archivo. | `null` |
| `picker` | Cadena | Valores aceptables: "file", "document", "image". El selector muestra los recursos subidos al administrador de archivos o en el administrador de documentos, dependiendo de este parámetro. | `file` |
## Correo de seguimiento
Los campos de correo electrónico de seguimiento permiten a los creadores de contenido designar un correo electrónico que se enviará en respuesta a la recepción de un formulario. Esto funciona en conjunto con la [etiqueta de formulario HubL](/docs/cms/reference/hubl/tags/standard-tags#form), a través del parámetro `simple_email_campaign_id`.
Los campos de correo electrónico de seguimiento pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"name": "followup_email",
"label": "Followup email",
"required": false,
"locked": false,
"type": "followupemail",
"default": null
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Cadena | Id de correo electrónico | `null` |
**React**
```jsx theme={null}
import { ModuleFields, FollowUpEmailField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Cadena | Id de correo electrónico | `null` |
## Fuente
Los campos de fuente proporcionan a los creadores de contenido controles básicos de estilo de fuente. Puedes elegir el tamaño, el color, la familia de fuentes y el formato (negrita, cursiva y subrayado). Todas las fuentes de la lista son fuentes estándar seguras para la web. Estas fuentes provienen de [Google Fonts](https://fonts.google.com/), pero las sirve HubSpot directamente en el dominio en el que se carga la página.
Los campos de fuentes pueden usarse tanto en los temas como en los módulos. Los campos de fuente pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).

> [!WARNING]
>
> ### Nota:
>
> * La familia de fuentes está determinada por la combinación de las propiedades `font` y `font_set`. Debes incluir ambos para cargar la fuente. Cuando se [heredan campos](https://developers.hubspot.es/docs/cms/reference/fields/overview#inherited-fields), esto significa que hay que heredar ambos valores.
> * Ocultar subcampos relativos al CSS con `visibility` no impedirá la generación del CSS en el estilo devuelto en el objeto de campo. Debes incluir manualmente el CSS en el objeto `styles`.
**JSON**
```json theme={null}
{
"name": "font",
"label": "Font",
"required": false,
"locked": false,
"load_external_fonts": true,
"type": "font",
"default": {
"size": 12,
"font": "Merriweather",
"font_set": "GOOGLE",
"size_unit": "px",
"color": "#000",
"styles": {}
},
"visibility": {
"hidden_subfields": {
"font": true,
"size": true
}
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Objeto de fuente con ajustes de tamaño, unidad de tamaño, color y estilos de negrita, cursiva y subrayado. | `{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }` |
| `load_external_fonts` | Booleano | HubSpot carga automáticamente la fuente web seleccionada en la página si la fuente se elige y se hace referencia a ella mediante HubL en una hoja de estilos o en un módulo. Define este valor como "False", si ya estás cargando la fuente en la página; de esta manera, la fuente no se cargará dos veces. | `true` |
| `visibility` | Objeto | Utilizando el objeto anidado `hidden_subfields`, puedes establecer un booleano para los controles del campo fuente que se van a ocultar. Los subcampos incluyen: `font`, `size`, `bold`, `italic`, `underline` y `color`. | |
| `variant` | Cadena | Si utilizas una fuente web, la variante de la fuente que deseas utilizar. Por ejemplo, para utilizar la versión con grosor de 700 de una fuente, configúrala como `"700"`. Para utilizar la versión cursiva de un tipo de letra con un grosor de 400, configúrala como `"400i"`. | |
| `limited_options` | Matriz | Matriz de cadenas que anula la lista de todas las opciones de fuentes. Los valores de la matriz deben ser un nombre de fuente codificado o una propiedad de fuente `name` en cualquier ruta de herencia. Por ejemplo, `theme.typography.body_text.name`. | `undefined` |
**React**
```jsx theme={null}
import { ModuleFields, FontField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Objeto de fuente con ajustes de tamaño, unidad de tamaño, color y estilos de negrita, cursiva y subrayado. | `{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }` |
| `loadExternalFonts` | Booleano | HubSpot carga automáticamente la fuente web seleccionada en la página si la fuente se elige y se hace referencia a ella mediante HubL en una hoja de estilos o en un módulo. Define este valor como "False", si ya estás cargando la fuente en la página; de esta manera, la fuente no se cargará dos veces. | `true` |
| `visibility` | Objeto | Utilizando el objeto anidado `hidden_subfields`, puedes establecer un booleano para los controles del campo fuente que se van a ocultar. Los subcampos incluyen: `font`, `size`, `bold`, `italic`, `underline` y `color`. | |
| `variant` | Cadena | Si utilizas una fuente web, la variante de la fuente que deseas utilizar. Por ejemplo, para utilizar la versión con grosor de 700 de una fuente, configúrala como `"700"`. Para utilizar la versión cursiva de un tipo de letra con un grosor de 400, configúrala como `"400i"`. | |
| `limitedOptions` | Matriz | Matriz de cadenas que anula la lista de todas las opciones de fuentes. Los valores de la matriz deben ser un nombre de fuente codificado o una propiedad de fuente `name` en cualquier ruta de herencia. Por ejemplo, `theme.typography.body_text.name`. | `undefined` |
## Formulario
Los campos de formulario permiten al creador de contenido designar un formulario en su cuenta. Luego, puedes utilizarlo para renderizar un formulario en una página utilizando la [etiqueta de formulario HubL](/docs/cms/reference/hubl/tags/standard-tags#form).
Los campos de formulario pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"id": "idNumber",
"name": "form_field_name",
"display_width": null,
"label": "Form",
"required": false,
"locked": false,
"type": "form",
"disable_inline_form_editing": true,
"required_property_types": ["TICKET"],
"support_all_webinar_types": true,
"embed_versions": ["v2", "v4"],
"default": {
"response_type": "inline",
"message": "Thanks for submitting the form."
}
}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `default` | Objeto | Un objeto que contiene los detalles de la respuesta de envío del formulario. Incluye los siguientes parámetros:
`response_type`, que puede ser uno de los siguientes:
`inline:` un mensaje de texto en línea.
`redirect`: redirecciona al visitante después del envío.
`message`: el texto que se mostrará después del envío del formulario.
`redirect_id`: en formularios redirigidos, se define como un ID de contenido de HubSpot para redirigir a los remitentes a una página de HubSpot.
`redirect_url`: en formularios redirigidos, debes definir una URL específica para redirigir a los remitentes a una página.
|
| `disable_inline_form_editing` | Cadena | Define la propiedad `disable_inline_form_editing` como `true` para ocultar todos los controles de edición de formularios en línea en el módulo de formulario. Entre ellos se incluyen los campos de formulario, el texto del botón de envío, las opciones de privacidad y consentimiento de datos y el CAPTCHA. |
| `required_property_types` | Matriz | Una matriz que especifica qué formularios se pueden seleccionar en función de los tipos de propiedad de los campos de formulario. Los valores incluyen: `"CONTACT"`, `"COMPANY"`, y `"TICKET"`. |
| `support_all_webinar_types` | Booleano | Si se define como `true`, el formulario mostrará un selector de webinarios más genérico que permite seleccionar webinarios de Microsoft Teams además de los de GoToWebinar. Los valores del campo del formulario también cambiarán ligeramente para guardar `webinar_id` y `webinar_source` en lugar de `gotowebinar_webinar_key`. Tendrás que volver a pasar estos valores de propiedad más genéricos a la [etiqueta formulario](/docs/cms/reference/hubl/tags/standard-tags#form) junto con `gotowebinar_webinar_key`. |
| `embed_versions` | Matriz | Una matriz que especifica qué formularios se pueden seleccionar según la versión del formulario. Los valores incluyen `"v2"` para los formularios anteriores y `"v4"` para los formularios del nuevo editor. |
**React**
```jsx theme={null}
import { ModuleFields, FormField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción |
| - | - | - |
| `default` | Objeto | Un objeto que contiene los detalles de la respuesta de envío del formulario. Incluye los siguientes parámetros:
`response_type`, que puede ser uno de los siguientes:
`inline:` un mensaje de texto en línea.
`redirect`: redirecciona al visitante después del envío.
`message`: el texto que se mostrará después del envío del formulario.
`redirect_id`: en formularios redirigidos, se define como un ID de contenido de HubSpot para redirigir a los remitentes a una página de HubSpot.
`redirect_url`: en formularios redirigidos, debes definir una URL específica para redirigir a los remitentes a una página.
|
| `disableInlineFormEditing` | Cadena | Define la propiedad `disableInlineFormEditing` como `true` para ocultar todos los controles de edición de formularios en línea en el módulo de formulario. Entre ellos se incluyen los campos de formulario, el texto del botón de envío, las opciones de privacidad y consentimiento de datos y el CAPTCHA. |
| `requiredPropertyTypes` | Matriz | Una matriz que especifica qué formularios se pueden seleccionar en función de los tipos de propiedad de los campos de formulario. Los valores incluyen: `"CONTACT"`, `"COMPANY"`, y `"TICKET"`. |
| `supportAllWebinarTypes` | Booleano | Si se define como `true`, el formulario mostrará un selector de webinarios más genérico que permite seleccionar webinarios de Microsoft Teams además de los de GoToWebinar. Los valores del campo del formulario también cambiarán ligeramente para guardar `webinar_id` y `webinar_source` en lugar de `gotowebinar_webinar_key`. Tendrás que volver a pasar estos valores de propiedad más genéricos a la [etiqueta formulario](/docs/cms/reference/hubl/tags/standard-tags#form) junto con `gotowebinar_webinar_key`. |
| `embedVersions` | Matriz | Una matriz que especifica qué formularios se pueden seleccionar según la versión del formulario. Los valores incluyen `"v2"` para los formularios anteriores y `"v4"` para los formularios del nuevo editor. |
## Degradado
Este campo permite a los creadores de contenido crear y configurar degradados. Actualmente, los degradados lineales admiten hasta cinco puntos de color. Los campos de degradado incluyen una propiedad `.css` que devuelve el CSS correspondiente según el valor del campo. [Más información sobre la propiedad CSS generada](https://developers.hubspot.es/docs/cms/reference/fields/overview#generated-css).
Los campos de degradado pueden usarse en los [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview). Los campos de degradado solo pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"name": "bg_gradient",
"label": "Background gradient",
"help_text": "Sets a gradient behind the content",
"required": false,
"type": "gradient",
"default": {
"colors": [
{
"color": {
"r": 0,
"g": 0,
"b": 0,
"a": 1
}
},
{
"color": {
"r": 255,
"g": 255,
"b": 255,
"a": 1
}
}
],
"side_or_corner": {
"verticalSide": "BOTTOM",
"horizontalSide": null
}
}
}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `default` | Objeto | Objeto que contiene los ajustes de dirección para un gradiente ("side\_or\_corner") y las paradas de color para el gradiente como una matriz de objetos. |
**React**
```jsx theme={null}
import { ModuleFields, GradientField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción |
| - | - | - |
| `default` | Objeto | Objeto que contiene los ajustes de dirección para un gradiente ("side\_or\_corner") y las paradas de color para el gradiente como una matriz de objetos. |
## Fila de HubDB
Los campos de fila de HubDB permiten al creador de contenido seleccionar una fila individual de una tabla definida (o varias filas si se utilizan campos de repetición). Luego, puedes utilizar este campo para crear listas, tablas y recursos definidos por el usuario, entre otros.
Los campos de fila de HubDB pueden usarse en los módulos. Los campos de fila de HubDB están disponibles en **CMS Hub** *Pro* y *Enterprise*.

**JSON**
```json theme={null}
{
"name": "hubdbrow_field",
"label": "HubDB row",
"required": false,
"locked": false,
"table_name_or_id": "3096859",
"columns_to_fetch": ["name", "price", "desc"],
"display_columns": ["name", "price", "desc"],
"display_format": "%0 - %1 :::: %2",
"type": "hubdbrow",
"default": {
"id": 4450468943
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `table_name_or_id` | Cadena | El nombre o ID de la tabla de HubDB. Este campo es obligatorio. | |
| `columns_to_fetch` | Matriz | Una matriz de nombres de columnas para obtener de la tabla. Si se deja en blanco, devolverá todas las columnas de la tabla. | `[]` |
| `display_columns` | Matriz | Una matriz de nombres de columnas para usar en la etiqueta de elección. Si se deja en blanco, devolverá solo la primera columna de la tabla. | `[]` |
| `display_format` | Cadena | El formato en el que quieres que se muestren los datos de las columnas en el selector de filas de HubDB usando los símbolos de porcentaje y número para indicar una columna. **Ejemplo:** *%0 (%1) aparecería como Columna0Valor (Columna1Valor)* | `""` |
| `default` | Objeto | Objeto que contiene el "id" para definir la fila predeterminada de HubDB. | `{ "id" : null }` |
**React**
```jsx theme={null}
import { ModuleFields, HubDBRowField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `tableNameOrId` | Cadena | El nombre o ID de la tabla de HubDB. Este campo es obligatorio. | |
| `columnsToFetch` | Matriz | Una matriz de nombres de columnas para obtener de la tabla. Si se deja en blanco, devolverá todas las columnas de la tabla. | `[]` |
| `displayColumns` | Matriz | Una matriz de nombres de columnas para usar en la etiqueta de elección. Si se deja en blanco, devolverá solo la primera columna de la tabla. | `[]` |
| `displayFormat` | Cadena | El formato en el que quieres que se muestren los datos de las columnas en el selector de filas de HubDB usando los símbolos de porcentaje y número para indicar una columna. **Ejemplo:** *%0 (%1) aparecería como Columna0Valor (Columna1Valor)* | `""` |
| `default` | Objeto | Objeto que contiene el "id" para definir la fila predeterminada de HubDB. | `{ "id" : null }` |
## Tabla de HubDB
Los campos de la tabla de HubDB permiten al creador de contenido designar un HubDB en su cuenta. Luego, puedes utilizarlo para renderizar un formulario en una página utilizando la [etiqueta de formulario HubL](/docs/cms/reference/hubl/tags/standard-tags#form). Devuelve el ID de la tabla, que puedes utilizar con las [funciones HubL de HubDB.](/docs/cms/start-building/features/storage/hubdb#access-hubdb-data-using-hubl)).
Los campos de la tabla de HubDB pueden usarse en los módulos. Los campos de la tabla HubDB están disponibles en **CMS Hub***Pro* y *Enterprise*.

**JSON**
```json theme={null}
{
"name": "recipe_table",
"label": "Recipe Table",
"required": false,
"locked": false,
"type": "hubdbtable",
"default": 2010782
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Cadena | ID de la tabla HubDB | `null` |
**React**
```jsx theme={null}
import { ModuleFields, HubDBTableField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Cadena | ID de la tabla HubDB | `null` |
## Ícono
Los campos de ícono permiten a los creadores de contenido añadir íconos a sus módulos. El campo ícono está precargado con íconos de FontAwesome.
Los campos de íconos pueden usarse en los módulos. Los campos de íconos pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"name": "icon_field",
"label": "Icon",
"required": false,
"locked": false,
"icon_set": "fontawesome-6.4.2",
"type": "icon",
"default": {
"name": "accessible-icon",
"unicode": "f368",
"type": "REGULAR"
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Objeto de icono | |
| `icon_set` | Cadena | El conjunto de íconos de FontAwesome que se va a utilizar. Los valores posibles son:
`fontawesome-6.4.2`
`fontawesome-5.14.0`
`fontawesome-5.0.10`
| `fontawesome-5.0.10` |
**React**
```jsx theme={null}
import { ModuleFields, IconField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Objeto de icono | |
| `iconSet` | Cadena | El conjunto de íconos de FontAwesome que se va a utilizar. Los valores posibles son:
`fontawesome-6.4.2`
`fontawesome-5.14.0`
`fontawesome-5.0.10`
| `fontawesome-5.0.10` |
## Imagen
Los campos de imagen proporcionan una interfaz sencilla para que los creadores de contenido agreguen imágenes a un módulo o tema. Los campos de imagen proporcionan una interfaz de selector de archivos que enumera las imágenes del administrador de archivos. Dado que las imágenes pueden utilizarse y mostrarse de diferentes maneras, los desarrolladores pueden limitar las opciones de tamaño disponibles para el creador de contenido en la interfaz de usuario, así como permitir [la carga diferida de imágenes](/docs/cms/best-practices/testing-staging-performance/lazy-loading).

Los campos de imagen pueden usarse en los módulos. Las imágenes pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields). Solo debes utilizar los campos de imagen como campos de estilo si la imagen va a ser puramente de presentación, no transmite significado y no es una [imagen de fondo](#background-image). Esta es una práctica recomendada de [accesibilidad](/docs/cms/best-practices/improve-existing-sites/accessibility).
**JSON**
```json theme={null}
{
"name": "image_field",
"label": "Image",
"required": false,
"locked": false,
"responsive": true,
"resizable": true,
"show_loading": false,
"type": "image",
"default": {
"size_type": "exact",
"src": "",
"alt": "image-alt-text",
"loading": "lazy",
"width": 128,
"height": 128,
"max_width": 128,
"max_height": 128
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Define las propiedades del tamaño de la imagen, el texto alternativo, etc. Puede contener las siguientes propiedades:
`size_type`: si el tamaño de la imagen es automático o manual:
`"auto"`: HubSpot ajustará automáticamente el tamaño de la imagen en función de sus dimensiones originales.
`"auto_custom_max"`: HubSpot ajustará automáticamente el tamaño de la imagen con las dimensiones máximas definidas con las propiedades `"max_height"` y `"max_width"`.
`"exact":` HubSpot dimensionará la imagen según las dimensiones definidas con las propiedades `"height"` y `"width"`.
`src`: la URL de la imagen predeterminada. Debe ser una ruta absoluta a una imagen.
`alt`: el texto alternativo predeterminado de la imagen.
`loading`: [las opciones de carga diferida](/docs/cms/best-practices/testing-staging-performance/lazy-loading) de la imagen. Puede definirse como `"disabled"` (predeterminado), `"eager"` o `"lazy"`.
| `{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }` |
| `responsive` | Booleano | Determina si la imagen debe actuar de forma adaptable o tener una altura y anchura fijas. | `true` |
| `show_loading` | Booleano | Determina si los controles para elegir la [carga diferida](/docs/cms/best-practices/testing-staging-performance/lazy-loading) de la imagen se muestran en el editor de la página. | `false` |
**React**
```jsx theme={null}
import { ModuleFields, ImageField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Define las propiedades del tamaño de la imagen, el texto alternativo, etc. Puede contener las siguientes propiedades:
`size_type`: si el tamaño de la imagen es automático o manual:
`"auto"`: HubSpot ajustará automáticamente el tamaño de la imagen en función de sus dimensiones originales.
`"auto_custom_max"`: HubSpot ajustará automáticamente el tamaño de la imagen con las dimensiones máximas definidas con las propiedades `"max_height"` y `"max_width"`.
`"exact":` HubSpot dimensionará la imagen según las dimensiones definidas con las propiedades `"height"` y `"width"`.
`src`: la URL de la imagen predeterminada. Debe ser una ruta absoluta a una imagen.
`alt`: el texto alternativo predeterminado de la imagen.
`loading`: [las opciones de carga diferida](/docs/cms/best-practices/testing-staging-performance/lazy-loading) de la imagen. Puede definirse como `"disabled"` (predeterminado), `"eager"` o `"lazy"`.
| `{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }` |
| `responsive` | Booleano | Determina si la imagen debe actuar de forma adaptable o tener una altura y anchura fijas. | `true` |
| `showLoading` | Booleano | Determina si los controles para elegir la [carga diferida](/docs/cms/best-practices/testing-staging-performance/lazy-loading) de la imagen se muestran en el editor de la página. | `false` |
## Enlace
Los campos de enlace ofrecen una interfaz sencilla para que los creadores de contenido agreguen enlaces a URL y direcciones de correo electrónico. Con los enlaces externos, los creadores de contenido deben elegir "externo". Con los enlaces de correo electrónico, deben elegir "dirección de correo electrónico". Por último, con el contenido alojado en el CMS de HubSpot, pueden utilizar "contenido", que muestra una lista de todas las páginas y entradas de blog en la cuenta, "archivo", que muestra los materiales de archivo, y "blog", que muestra todos los listados de blog en la cuenta. Los campos de enlace son muy similares a los campos de URL, excepto por la diferencia clave de que proporcionan una interfaz de usuario para "abrir en una nueva ventana" y "decirle a los motores de búsqueda que no los sigan". Si no deseas que los creadores de contenido tengan ese control, utiliza el [campo URL](#url).
Los campos de enlace pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"name": "link_field",
"display_width": null,
"label": "Link",
"required": false,
"locked": false,
"supported_types": [
"EXTERNAL",
"CONTENT",
"FILE",
"EMAIL_ADDRESS",
"BLOG",
"CALL_TO_ACTION",
"PHONE_NUMBER",
"WHATSAPP_NUMBER",
"PAYMENT"
],
"show_advanced_rel_options": true,
"type": "link",
"default": {
"url": {
"content_id": null,
"type": "EXTERNAL",
"href": ""
},
"open_in_new_tab": false,
"no_follow": false
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | La URL predeterminada y el comportamiento abierto del enlace. Este objeto incluye:
Un objeto `url` que contiene:
`content_id`: si se vincula al contenido de HubSpot, el ID de ese contenido. Se define como `null` si se enlaza con contenido externo.
`type`: el tipo de URL. Abajo puedes consultar información sobre los tipos admitidos.
`href`: la URL del contenido. Cuando vincules a contenido de HubSpot, configúralo como `null` y usa `content_id` en su lugar.
| `{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }` |
| `supported_types` | Matriz | Los tipos de enlaces que los creadores de contenido pueden seleccionar. Elimina de la lista los tipos que no quieres que los creadores de contenido puedan definir. Los tipos válidos incluyen:
`EXTERNAL`
`CONTENT`
`FILE`
`EMAIL_ADDRESS`
`BLOG`
`CALL_TO_ACTION`
`PHONE_NUMBER`
`WHATSAPP_NUMBER`
`PAYMENT`
| `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]` |
| `show_advanced_rel_options` | Booleano | De forma predeterminada, los creadores de contenido solo podrán seleccionar la opción `no_follow`.Cuando se define como `true`, los creadores de contenido también pueden seleccionar:
`sponsored`: un enlace patrocinado, como un enlace de anuncio de pago.
`user_generated_content`: contenido generado por los usuarios, como foros.
Consulta más información sobre [los atributos de los enlaces](https://moz.com/blog/nofollow-sponsored-ugc). | `false` |
**React**
```jsx theme={null}
import { ModuleFields, LinkField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | La URL predeterminada y el comportamiento abierto del enlace. Este objeto incluye:
Un objeto `url` que contiene:
`content_id`: si se vincula al contenido de HubSpot, el ID de ese contenido. Se define como `null` si se enlaza con contenido externo.
`type`: el tipo de URL. Abajo puedes consultar información sobre los tipos admitidos.
`href`: la URL del contenido. Cuando vincules a contenido de HubSpot, configúralo como `null` y usa `content_id` en su lugar.
| `{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }` |
| `supportedTypes` | Matriz | Los tipos de enlaces que los creadores de contenido pueden seleccionar. Elimina de la lista los tipos que no quieres que los creadores de contenido puedan definir. Los tipos válidos incluyen:
`EXTERNAL`
`CONTENT`
`FILE`
`EMAIL_ADDRESS`
`BLOG`
`CALL_TO_ACTION`
`PHONE_NUMBER`
`WHATSAPP_NUMBER`
`PAYMENT`
| `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]` |
| `showAdvancedRelOptions` | Booleano | De forma predeterminada, los creadores de contenido solo podrán seleccionar la opción `no_follow`.Cuando se define como `true`, los creadores de contenido también pueden seleccionar:
`sponsored`: un enlace patrocinado, como un enlace de anuncio de pago.
`user_generated_content`: contenido generado por los usuarios, como foros.
Consulta más información sobre [los atributos de los enlaces](https://moz.com/blog/nofollow-sponsored-ugc). | `false` |
## Logotipo
Los campos de logotipo permiten a los creadores de contenido especificar las imágenes de los logotipos que se utilizarán en una página, y la opción predeterminada es el logotipo del dominio. Esto es útil para los encabezados y pies de página del sitio que pueden contener el logotipo de la empresa. Los campos de logotipo también permiten la [carga diferida](/docs/cms/best-practices/testing-staging-performance/lazy-loading).
Los campos del logotipo pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"name": "logo",
"label": "Logo",
"required": false,
"locked": false,
"type": "logo",
"show_loading": true,
"default": {
"override_inherited_src": false,
"src": null,
"alt": null,
"loading": "lazy"
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `show_loading` | Cadena | Determina si los controles para elegir la [carga diferida](/docs/cms/best-practices/testing-staging-performance/lazy-loading) de la imagen se muestran en el editor de la página. | `false` |
| `default` | Objeto | Objeto de logotipo. Si `show_loading` se define como `true`, puedes incluir una propiedad `loading` para definir las opciones de [carga diferida](/docs/cms/best-practices/testing-staging-performance/lazy-loading) de la imagen. Las opciones incluyen:
`"disabled"` (predeterminado)
`"eager"`
`"lazy"`
| `{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }` |
**React**
```jsx theme={null}
import { ModuleFields, LogoField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `showLoading` | Cadena | Determina si los controles para elegir la [carga diferida](/docs/cms/best-practices/testing-staging-performance/lazy-loading) de la imagen se muestran en el editor de la página. | `false` |
| `default` | Objeto | Objeto de logotipo. Si `show_loading` se define como `true`, puedes incluir una propiedad `loading` para definir las opciones de [carga diferida](/docs/cms/best-practices/testing-staging-performance/lazy-loading) de la imagen. Las opciones incluyen:
`"disabled"` (predeterminado)
`"eager"`
`"lazy"`
| `{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }` |
## Menú
Los campos de menú ofrecen una interfaz sencilla para que los creadores de contenido creen, editen y seleccionen un [menú de navegación](/docs/cms/start-building/building-blocks/modules/menus-and-navigation) reutilizable en otras páginas. Este campo es ideal para usarlo en los menús que se utilizan en varias páginas, como la navegación principal, el pie de página y otro [contenido global](/docs/cms/start-building/building-blocks/global-content). Utiliza este campo junto con la [etiqueta "menu"](/docs/cms/reference/hubl/tags/standard-tags#menu) o la [función menu()](/docs/cms/reference/hubl/functions#menu), para mostrar un menú dentro del módulo.
Con los menús que no tiene sentido reutilizar en otras páginas, como un menú de índice, utiliza el [campo de menú simple](#simple-menu).
Los campos de menú pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"name": "menu",
"label": "Menu",
"required": false,
"locked": false,
"type": "menu",
"default": 12345678911
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Entero | El [ID del menú](/docs/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id). El valor predeterminado de `null`, hace que el menú predeterminado sea el de navegación. | `null` |
**React**
```jsx theme={null}
import { ModuleFields, MenuField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Entero | El [ID del menú](/docs/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id). El valor predeterminado de `null`, hace que el menú predeterminado sea el de navegación. | `null` |
## Número
Los campos numéricos ofrecen una interfaz sencilla para que los creadores de contenido introduzcan o ajusten opciones y valores numéricos. Pueden usarse para crear elementos basados en porcentajes o cualquier cosa en la que se necesiten números como dato de entrada.
Los campos numéricos pueden usarse en los módulos. Los campos numéricos pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"name": "number_field",
"label": "Number",
"required": false,
"locked": false,
"display": "slider",
"min": 1,
"max": 10,
"step": 1,
"type": "number",
"prefix": "",
"suffix": "",
"default": null,
"placeholder": "50"
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Número | Un número predeterminado para utilizar. | `null` |
| `prefix` | Cadena | Se agrega como prefijo al campo numérico. | |
| `suffix` | Cadena | Se agrega como sufijo al campo numérico. | |
| `placeholder` | Cadena | Agrega un valor de parámetro de sustitución al campo. | |
**React**
```jsx theme={null}
import { ModuleFields, NumberField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Número | Un número predeterminado para utilizar. | `null` |
| `prefix` | Cadena | Se agrega como prefijo al campo numérico. | |
| `suffix` | Cadena | Se agrega como sufijo al campo numérico. | |
| `placeholder` | Cadena | Agrega un valor de parámetro de sustitución al campo. | |
> [!NOTE]
>
> Los parámetros de sufijo y prefijo son para fines de visualización en el editor de contenido y no tienen ningún efecto sobre el valor numérico del campo.
## Página
Los campos de página proporcionan una interfaz para que los creadores de contenido seleccionen las páginas del sitio y las landing pages.
El valor devuelto por un campo de página es el id de la página seleccionada. Cuando se utiliza junto con las funciones [content\_by\_id](/docs/cms/reference/hubl/functions#content-by-id) o [content\_by\_ids](/docs/cms/reference/hubl/functions#content-by-ids), puedes utilizar los datos de las páginas seleccionadas en la página actual.
Los campos de página pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"name": "page_field",
"label": "Page",
"help_text": "Pulls data from the selected page.",
"required": false,
"locked": false,
"placeholder": "Page to pull from",
"type": "page",
"default": null
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Entero | Un identificador de página predeterminado para seleccionar. | `null` |
**React**
```jsx theme={null}
import { ModuleFields, PageField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Entero | Un identificador de página predeterminado para seleccionar. | `null` |
## Texto enriquecido
Los campos de texto enriquecido ofrecen a los creadores de contenido una experiencia de editor de texto WYSIWYG. Cuando se imprime el valor de un campo de texto enriquecido, se hace como HTML. Si no quieres que los creadores de contenido puedan darle formato, utiliza [campos de texto](#text).
Los campos de texto enriquecido pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"name": "description",
"label": "Description",
"required": false,
"locked": false,
"type": "richtext",
"default": null
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Cadena | La cadena de contenido para mostrar admite HTML. Nota: no se puede utilizar la [función](/docs/cms/reference/hubl/functions#get-asset-url) `get_asset_url` dentro de esta propiedad predeterminada. | `""` |
| `enabled_features` | Matriz | Una serie de elementos que permiten [configurar la barra de herramientas del editor de texto enriquecido](/docs/cms/reference/fields/rich-text-editor) y las opciones disponibles para los editores de contenido. | |
**React**
```jsx theme={null}
import { ModuleFields, RichTextField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Cadena | La cadena de contenido para mostrar admite HTML. Nota: no se puede utilizar la [función](/docs/cms/reference/hubl/functions#get-asset-url) `get_asset_url` dentro de esta propiedad predeterminada. | `""` |
| `enabledFeatures` | Matriz | Una serie de elementos que permiten [configurar la barra de herramientas del editor de texto enriquecido](/docs/cms/reference/fields/rich-text-editor) y las opciones disponibles para los editores de contenido. | |
## Menú simple
Los campos de menú simple proporcionan una interfaz sencilla para que los creadores de contenido creen un [menú de navegación](/docs/cms/start-building/building-blocks/modules/menus-and-navigation) que no sea reutilizable en otras páginas. Para los menús que deben ser reutilizables, utiliza el [campo de menú](#menu). Es una opción útil para crear un menú de tabla de contenido que enlaza con títulos de páginas muy largas, o una lista de enlaces a contenido que solo tiene sentido tener en la página actual.
Los campos de menú simples pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"name": "toc_menu",
"label": "Table of Contents",
"required": false,
"locked": false,
"type": "simplemenu",
"default": [
{
"isPublished": false,
"pageLinkId": null,
"pageLinkName": null,
"isDeleted": null,
"categoryId": null,
"subCategory": null,
"contentType": null,
"state": null,
"linkLabel": "Why is product marketing important?",
"linkUrl": null,
"linkParams": null,
"linkTarget": null,
"type": "NO_LINK",
"children": [
{
"isPublished": false,
"pageLinkId": null,
"pageLinkName": null,
"isDeleted": null,
"categoryId": null,
"subCategory": null,
"contentType": null,
"state": null,
"linkLabel": "Product Marketing Responsibilities",
"linkUrl": "#product-marketing-responsibilities",
"linkParams": null,
"linkTarget": null,
"type": "URL_LINK",
"children": []
},
{
"isPublished": false,
"pageLinkId": null,
"pageLinkName": null,
"isDeleted": null,
"categoryId": null,
"subCategory": null,
"contentType": null,
"state": null,
"linkLabel": "1. Identify the buyer personas and target audience for your product.",
"linkUrl": "#step1",
"linkParams": null,
"linkTarget": null,
"type": "URL_LINK",
"children": []
},
{
"isPublished": false,
"pageLinkId": null,
"pageLinkName": null,
"isDeleted": null,
"categoryId": null,
"subCategory": null,
"contentType": null,
"state": null,
"linkLabel": "2. Successfully create, manage and carry out your product marketing strategy.",
"linkUrl": "#step2",
"linkParams": null,
"linkTarget": null,
"type": "URL_LINK",
"children": []
}
]
},
{
"isPublished": false,
"pageLinkId": null,
"pageLinkName": null,
"isDeleted": null,
"categoryId": null,
"subCategory": null,
"contentType": null,
"state": null,
"linkLabel": "How HubSpot can help",
"linkUrl": "https://hubspot.com",
"linkParams": null,
"linkTarget": null,
"type": "URL_LINK",
"children": []
}
]
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Matriz de objetos | Estructura JSON para el menú y las opciones secundarias del menú. | `[]` |
**React**
```jsx theme={null}
import { ModuleFields, SimpleMenuField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Matriz de objetos | Estructura JSON para el menú y las opciones secundarias del menú. | `[]` |
## Espaciado
Este campo proporciona una interfaz de usuario para que los creadores de contenido definan el relleno y el margen. Los campos de espaciado tienen una propiedad `.css` que devuelve el CSS basado en el valor del campo. [Más información sobre la propiedad CSS generada](https://developers.hubspot.es/docs/cms/reference/fields/overview#generated-css).
Los campos de espaciado pueden usarse en los [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview). Los campos de espaciado solo pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"name": "img_spacing",
"label": "Spacing around image",
"required": false,
"type": "spacing",
"limits": {
"padding": {
"top": {
"max": 50,
"min": 25,
"units": ["px", "pt", "em"]
},
"left": {
"max": 50,
"units": ["px", "pt", "em"]
},
"bottom": {
"max": 50,
"units": ["px", "pt", "em"]
}
},
"margin": {
"top": {
"max": 50,
"min": 25,
"units": ["px", "pt", "em"]
},
"bottom": {
"max": 25,
"units": ["Q", "rem", "em"]
}
}
},
"default": {
"padding": {
"top": {
"value": 57,
"units": "px"
},
"bottom": {
"value": 57,
"units": "px"
},
"left": {
"value": 57,
"units": "px"
},
"right": {
"value": 57,
"units": "px"
}
},
"margin": {
"top": {
"value": 20,
"units": "px"
},
"bottom": {
"value": 20,
"units": "px"
}
}
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | : Define los valores de espaciado predeterminados. Contiene `padding` y objetos `margin`:
`padding`: puede contener `top`, `right`, `bottom`, `left`
`margin`: puede contener objetos `top` y `bottom`
Usa `units` para definir las unidades que un creador de contenido puede usar en HubSpot. Abajo puedes consultar más información sobre las unidades. | `{}` |
| `limits` | Objeto | : Define las pautas de la cantidad de espaciado `min` y `max`. Contiene objetos `padding` y `margin`:
`padding`: puede contener objetos `top`, `right`, `bottom`, `left`
`margin`: puede contener objetos `top` y `bottom`
Usa `units` para definir las unidades que un creador de contenido puede usar en HubSpot. Abajo puedes consultar más información sobre las unidades. | |
**React**
```jsx theme={null}
import { ModuleFields, SpacingField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | : Define los valores de espaciado predeterminados. Contiene `padding` y objetos `margin`:
`padding`: puede contener `top`, `right`, `bottom`, `left`
`margin`: puede contener objetos `top` y `bottom`
Usa `units` para definir las unidades que un creador de contenido puede usar en HubSpot. Abajo puedes consultar más información sobre las unidades. | `{}` |
| `limits` | Objeto | : Define las pautas de la cantidad de espaciado `min` y `max`. Contiene objetos `padding` y `margin`:
`padding`: puede contener objetos `top`, `right`, `bottom`, `left`
`margin`: puede contener objetos `top` y `bottom`
Usa `units` para definir las unidades que un creador de contenido puede usar en HubSpot. Abajo puedes consultar más información sobre las unidades. | |
Cuando uses el campo de espaciado, ten en cuenta lo siguiente:
* Debes incluir una lista de `units` al definir un `min` o un `max`.
* La propiedad `units` admite los siguientes tipos de unidades: `%`, `ch`, `em`, `ex`, `in`, `lh`, `pc`, `pt`, `px`, `Q`, `rem`, `vh`, `vmax`, `vmin`, y `vw`.
* Cuando un creador de contenido edita todo el relleno, HubSpot usará el valor `min` más alto y el valor `max` más bajo. Además, solo las unidades compartidas por todas las partes estarán disponibles para el creador de contenido.
## Etiqueta
Los campos de etiqueta permiten a los creadores de contenido seleccionar estos elementos. Este selector de etiquetas devuelve un identificador de etiqueta de blog que puede utilizarse en las funciones relacionadas con estos elementos, como [URL de la etiqueta de blog](/docs/cms/reference/hubl/functions#blog-tag-url) y [publicaciones recientes de la etiqueta de blog](/docs/cms/reference/hubl/functions#blog-recent-tag-posts).
Los campos de etiqueta pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"id": "c3395cd3-8e60-7e47-2f1b-b7ccf4d669c9",
"name": "blog_tag",
"label": "Blog Tag",
"required": false,
"locked": false,
"tag_value": "SLUG",
"type": "tag",
"default": null
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Cadena | El ID de la etiqueta. | `null` |
| `tag_value` | Cadena | El valor del output. Puede ser uno de los siguientes:
`ALL`: un objeto que contiene el nombre, el ID único y el slug de la URL de la etiqueta.
`ID`: el ID único de la etiqueta.
`NAME`: el nombre de la etiqueta.
`SLUG`: el slug de la URL de la etiqueta.
| `SLUG` |
**React**
```jsx theme={null}
import { ModuleFields, TagField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Cadena | El ID de la etiqueta. | `null` |
| `tagValue` | Cadena | El valor del output. Puede ser uno de los siguientes:
`ALL`: un objeto que contiene el nombre, el ID único y el slug de la URL de la etiqueta.
`ID`: el ID único de la etiqueta.
`NAME`: el nombre de la etiqueta.
`SLUG`: el slug de la URL de la etiqueta.
| `SLUG` |
## Texto
Los campos de texto ofrecen a los creadores de contenido una experiencia de edición de texto simple sin funcionalidad de texto enriquecido. Los campos de texto se muestran inicialmente como una sola línea, pero pueden expandirse hasta convertirse en áreas de texto y admiten múltiples líneas. Utilízalos cuando no quieras que los creadores de contenido tengan control sobre el formato. Si deseas proporcionar controles de formato, utiliza [campos de texto enriquecido](#rich-text).
Los campos de texto pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"name": "product_name",
"label": "Product Name",
"required": false,
"locked": false,
"validation_regex": "",
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": ""
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Cadena | Cadena de texto. | `""` |
**React**
```jsx theme={null}
import { ModuleFields, TextField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Cadena | Cadena de texto. | `""` |
## Alineación del texto
Este campo proporciona a los creadores de contenido una forma de alinear el contenido de texto dentro de un contenedor. No debe utilizarse para alinear otros recursos, ya que existe un [tipo de campo específico para ello](#alignment).
Los campos de alineación de texto pueden usarse en los [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview). Los campos de alineación de texto solo pueden utilizarse como [campos de estilo](https://developers.hubspot.es/docs/cms/reference/fields/overview#style-fields).

**JSON**
```json theme={null}
{
"name": "heading_align",
"label": "Heading alignment",
"required": false,
"type": "textalignment",
"default": {
"text_align": "LEFT"
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Objeto que contiene `horizontal_align` y `vertical_align`. | |
| `alignment_direction` | Cadena | Determina si se deben mostrar solo los controles de alineación horizontales, solo los verticales o ambos. Puede ser:
`HORIZONTAL`
`VERTICAL`
`BOTH`
| `BOTH` |
**React**
```jsx theme={null}
import { ModuleFields, TextAlignmentField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Objeto que contiene `horizontal_align` y `vertical_align`. | |
| `alignmentDirection` | Cadena | Determina si se deben mostrar solo los controles de alineación horizontales, solo los verticales o ambos. Puede ser:
`HORIZONTAL`
`VERTICAL`
`BOTH`
| `BOTH` |
## URL
Los campos de URL ofrecen una experiencia similar a la de los campos de enlace. Proporcionar una interfaz de usuario para que los creadores de contenido agreguen enlaces. Los campos de URL, sin embargo, no muestran una interfaz de usuario para abrir en una nueva ventana, ni indican a los motores de búsqueda que no los sigan. Utiliza este campo cuando tú, como desarrollador, quieras definir los valores para ese comportamiento. Si quieres que el usuario tenga el control, utiliza [campos de enlace](#link) en su lugar.
Los campos de URL pueden usarse en los módulos.

**JSON**
```json theme={null}
{
"name": "url",
"label": "URL",
"required": false,
"locked": false,
"supported_types": ["EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "PHONE_NUMBER", "WHATSAPP_NUMBER"],
"type": "url",
"default": {
"content_id": null,
"href": "http://example.com",
"type": "EXTERNAL"
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Objeto de URL, con tipo, href e ID de contenido (si el contenido es una página o post en HubSpot) | `{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }` |
| `supported_types` | Matriz | Lista de los tipos de enlaces que este campo permite seleccionar. Elimina de la lista los tipos que no quieres que los creadores de contenido puedan definir. Los tipos incluyen:
`EXTERNAL`: muestra un campo de entrada de texto para una URL externa.
`CONTENT`: muestra un menú desplegable que contiene el sitio web de la cuenta y las landing pages.
`FILE`: muestra un selector de archivos.
`EMAIL_ADDRESS`: muestra un campo de entrada de texto para una dirección de correo electrónico.
`BLOG`: muestra un menú desplegable que contiene las páginas de índice de los blogs de la cuenta.
`PHONE_NUMBER`: muestra un campo de entrada de texto para un número de teléfono. El número debe comenzar con `+` y contener de 7 a 15 dígitos (excluyendo el código de país).
`WHATSAPP_NUMBER`: muestra un menú desplegable que contiene los números de [WhatsApp conectados](https://knowledge.hubspot.com/es/inbox/connect-whatsapp-to-the-conversations-inbox) a la cuenta.
| `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` |
**React**
```jsx theme={null}
import { ModuleFields, UrlField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Objeto de URL, con tipo, href e ID de contenido (si el contenido es una página o post en HubSpot) | `{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }` |
| `supportedTypes` | Matriz | Lista de los tipos de enlaces que este campo permite seleccionar. Elimina de la lista los tipos que no quieres que los creadores de contenido puedan definir. Los tipos incluyen:
`EXTERNAL`: muestra un campo de entrada de texto para una URL externa.
`CONTENT`: muestra un menú desplegable que contiene el sitio web de la cuenta y las landing pages.
`FILE`: muestra un selector de archivos.
`EMAIL_ADDRESS`: muestra un campo de entrada de texto para una dirección de correo electrónico.
`BLOG`: muestra un menú desplegable que contiene las páginas de índice de los blogs de la cuenta.
`PHONE_NUMBER`: muestra un campo de entrada de texto para un número de teléfono. El número debe comenzar con `+` y contener de 7 a 15 dígitos (excluyendo el código de país).
`WHATSAPP_NUMBER`: muestra un menú desplegable que contiene los números de [WhatsApp conectados](https://knowledge.hubspot.com/es/inbox/connect-whatsapp-to-the-conversations-inbox) a la cuenta.
| `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` |
## Video
Los campos de video proporcionan a los editores de contenido un lugar para agregar HubSpot Video a su contenido del módulo sin necesidad de utilizar campos de texto enriquecido.

**JSON**
```json theme={null}
{
"id": "ca4a319e-5b58-422e-47ac-49ce1b51b507",
"name": "videoplayer_field",
"label": "Video",
"required": false,
"locked": false,
"type": "videoplayer",
"show_advanced_options": false,
"default": {
"player_id": 32173842991,
"height": 1224,
"width": 1872,
"conversion_asset": {
"type": "CTA",
"id": "c3e4fa03-2c69-461d-b9af-22b2fde86bc7",
"position": "POST"
},
"loop_video": false,
"mute_by_default": false,
"autoplay": false,
"hide_control": false
}
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Objeto de video con ajustes para `player_id`, `height`, `width`, `size_type`, `conversion_asset`, `loop_video`, `mute_by_default`, `autoplay` y `hide_control`. | `[]` |
| `show_advanced_options` | Booleano | Define si los creadores de contenido pueden ver las opciones avanzadas predeterminadas. | `false` |
**React**
```jsx theme={null}
import { ModuleFields, VideoField } from "@hubspot/cms-components/fields";
```
| Propiedad | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `default` | Objeto | Objeto de video con ajustes para `player_id`, `height`, `width`, `size_type`, `conversion_asset`, `loop_video`, `mute_by_default`, `autoplay` y `hide_control`. | `[]` |
| `showAdvancedOptions` | Booleano | Define si los creadores de contenido pueden ver las opciones avanzadas predeterminadas. | `false` |
### Parámetros del objeto conversion\_asset
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `type` | Cadena | Acepta `"FORM"`, `"CTA"` o `""` | `""` |
| `id` | Cadena | El identificador del tipo de formulario o CTA | `""` |
| `position` | Cadena | Si el recurso de conversión debe mostrarse antes de que comience el video o después de que termine. Acepta "PRE" o "POST". | `""` |
```
```
# Resumen de los campos de módulos y temas
Source: https://developers.hubspot.es/docs/cms/reference/fields/overview
Los módulos y temas de HubSpot ofrecen a los creadores de contenido opciones de personalización mediante el uso de campos. Los desarrolladores crean y organizan los campos mediante un archivo fields.json.
Dentro de los [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview) y [temas](/docs/cms/start-building/building-blocks/overview), los campos se utilizan para que los creadores de contenido controlen el estilo y la funcionalidad del módulo y el tema en el sitio web. Al desarrollar un módulo o un tema, incluirás campos en un archivo `fields.json`, los cuales estarán disponibles en los editores de temas y contenido.

A continuación, encontrarás más información sobre cómo crear y gestionar las opciones para los campos de módulos y temas. Para obtener más información sobre los tipos de campos específicos, echa un vistazo a la [guía de referencia de los tipos de módulos y campos](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields).
## Creación y administración de archivos
Puedes agregar campos al archivo de [módulo](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview) `fields.json` localmente a través de la [CLI de HubSpot](/docs/developer-tooling/local-development/hubspot-cli/reference) y en el editor de módulos en la aplicación. Para agregar campos a un [tema](/docs/cms/start-building/building-blocks/overview), debes actualizar el archivo `fields.json` del tema utilizando la CLI.
### CLI de HubSpot
Cuando se [desarrolla de forma local ](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) los campos de los módulos y temas pueden ser editados a través de un archivo `fields.json` dentro de la carpeta del módulo o tema. Para los módulos, este archivo se creará automáticamente cuando se utilice el comando[`hs create module`](/docs/developer-tooling/local-development/hubspot-cli/reference). Todas las opciones de campo disponibles en el editor de módulos están disponibles como propiedades que puedes agregar o editar en el archivo `fields.json`. Esto incluye los campos de repetición, grupos y condiciones. Uno de los beneficios de editar de manera local es que facilita la [inclusión de tus módulos en los sistemas de control de versiones como git](/docs/cms/start-building/introduction/developer-environment/github-integration).
### Editor de módulos
El [administrador de diseño](/docs/cms/start-building/introduction/developer-environment/design-manager) tiene una interfaz para la edición de módulos integrada que te permite [crear](https://knowledge.hubspot.com/es/design-manager/create-and-edit-modules), agrupar y [editar campos de módulos](https://knowledge.hubspot.com/es/design-manager/create-and-edit-modules). El editor de módulos incluye una vista previa que te permite visualizar el diseño del módulo y probar el funcionamiento de sus campos. Dado que los módulos interactúan con el diseño general, siempre es recomendable probarlos en la plantilla donde se utilizarán para identificar posibles estilos que puedan modificarlos. Ten en cuenta que si un módulo está almacenado en una carpeta bloqueada no puede ser editado de esta manera.

> [!WARNING]
>
> **Nota:** Si estás principalmente trabajando de forma local, pero quieres utilizar el editor de módulos para configurar los campos, asegúrate de [obtener](/docs/developer-tooling/local-development/hubspot-cli/reference#fetch) tus cambios. Esto es importante para quienes utilizan sistemas de control de versiones como git.
## Campos contiguos
Por opción predeterminada, los campos de los módulos en los editores de contenido se apilan de forma vertical. Sin embargo, puedes colocar los campos del módulo uno al lado del otro agregando una propiedad `display_width` a los campos en el archivo `fields.json` con un valor `half_width`.

Un solo campo con un `display_width` de `half_width` aparecerá como un ancho de la mitad de la página en el editor de contenido. Cuando el campo por encima o por debajo de ese campo en el archivo `fields.json` se establece en `half_width`, se colocarán uno al lado del otro.
```json theme={null}
// Example module fields.json file
[
{
"name": "number_field",
"label": "Number",
"required": false,
"locked": false,
"display": "slider",
"min": 1,
"max": 10,
"step": 1,
"type": "number",
"prefix": "",
"suffix": "",
"default": null,
"display_width": "half_width"
},
{
"label": "Description",
"name": "description",
"type": "text",
"required": true,
"default": "Add a description",
"display_width": "half_width"
}
]
```
## Grupos de campos
Cuando los campos están relacionados entre sí, a menudo tiene sentido agruparlos de forma visual. Puedes hacerlo creando grupos de campos, que son compatibles tanto con los módulos como con los temas. Para crear un grupo de campos de forma local, en `fields.json` crea un objeto con el `type` de `"group"`. A continuación, incluye una matriz `children` para obtener los campos que deseas agrupar.

```json theme={null}
[
{
"id": "9c00985f-01db-ac5d-73f5-80ed6c0c7863",
"name": "my_text",
"display_width": null,
"label": "Text",
"required": true,
"locked": false,
"validation_regex": "",
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": "Add text here"
},
{
"type": "group",
"name": "recipe_summary_group",
"label": "Recipe summary",
"expanded": true,
"inline_help_text": "Summarize the recipe (title and description)",
"children": [
{
"type": "text",
"label": "Recipe title",
"name": "recipe_title",
"placeholder": "Burrata salad"
},
{
"type": "text",
"label": "Recipe description",
"name": "recipe_description",
"placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough"
}
]
}
]
```
Puedes crear más agrupaciones de campos dentro de un grupo añadiendo otro objeto de tipo `"group"` dentro del primer parámetro `children` . A continuación, crea el grupo de campos del mismo modo que en el caso anterior, utilizando `children` para contener los campos. Puedes anidar grupos de campos hasta una profundidad de tres.

```json theme={null}
[
{
"type": "group",
"name": "recipe_summary_group",
"label": "Recipe summary",
"inline_help_text": "Summarize the recipe (title and description)",
"display": "inline",
"children": [
{
"type": "text",
"label": "Recipe title",
"name": "recipe_title",
"placeholder": "Burrata salad"
},
{
"type": "text",
"label": "Recipe description",
"name": "recipe_description",
"placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough"
},
{
"type": "group",
"name": "secondary_group",
"label": "Secondary group",
"expanded": false,
"children": [
{
"name": "bg_color",
"label": "Background color",
"sortable": false,
"required": false,
"locked": false,
"type": "color",
"default": {
"color": "#ff0000",
"opacity": 100
}
}
]
}
]
}
]
```
#### Opciones de visualización de grupos de campos
Puedes personalizar el siguiente comportamiento de visualización de grupos de campos:
* **Expansión:** de forma predeterminada, los grupos de campos se mostrarán colapsados en el editor. Los grupos que contengan grupos anidados se mostrarán como botones de desglose que abren el grupo en su propia vista con el grupo más interno mostrando divisores.

* **Tipo de visualización:** de forma predeterminada, los grupos que no contengan grupos anidados se mostrarán como secciones plegables con divisores visuales alrededor de los elementos secundarios. Los grupos que contengan grupos anidados se mostrarán como botones de desglose que abren el grupo en su propia vista con el grupo más interno mostrado con divisores.
* **Icono de grupo:** si quieres, puedes incluir un icono de Font Awesome que se muestre a la izquierda de la etiqueta.

```json theme={null}
[
{
"type": "group",
"name": "recipe_summary_group",
"label": "Recipe summary",
"display": "drilldown",
"inline_help_text": "Summarize the recipe (title and description)",
"icon": {
"name": "star",
"set": "fontawesome-5.14.0",
"type": "SOLID"
},
"children": [
{
"type": "text",
"label": "Recipe title",
"name": "recipe_title",
"placeholder": "Burrata salad"
},
{
"type": "text",
"label": "Recipe description",
"name": "recipe_description",
"placeholder": "fig mostarda, hazelnuts, arugula, vincotto, prosciutto, toasted sourdough"
}
]
}
]
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `display` | Cadena | El estilo de visualización del grupo de campos. Puede ser una de las siguientes:
`drilldown`: muestra el grupo colapsado con un botón para abrir los elementos secundarios del grupo en su propio panel. Esta es la visualización predeterminada para los grupos que contienen grupos anidados.
`accordion`: muestra el grupo colapsado con un botón para expandir los elementos secundarios del grupo debajo como una sección expandible. Esta es la visualización predeterminada para grupos sin grupos anidados.
`inline`: muestra el grupo y los elementos secundarios en línea sin opción de contraer el grupo.
|
| `icon` | Objeto | Añade un icono a la izquierda de la etiqueta. Contiene los siguientes parámetros:
`name`: el identificador del icono de Font Awesome.
`set`: el [conjunto de iconos](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#icon) de Font Awesome.
`type`: el estilo del icono (por ejemplo, `SOLID`, `REGULAR`).
|
| `expanded` | Booleano | Si el grupo de campos se expande de forma predeterminada. |
#### Resultados de los valores de los campos dentro de los grupos de campos
Los grupos de campos crean dicc. que contienen los valores de los campos que deseas mostrar. Si anidas grupos de campos, el grupo de campos anidado será un dicc. dentro del dicc. del grupo de campos externo. Para acceder a esos datos, deberás recorrer desde la variable raíz del tema o del módulo, según corresponda.
```html example.html theme={null}
{# printing a value from a field group `recipe_summary` is the field group,
`title` is the text field. #} {{module.recipe_summary.title}}
```
```css example.css theme={null}
/* Printing a Font field's color value, when the font field is within a field group.
`typography` is the field group, `h1_font` is the field */
h1{
color: {{ theme.typography.h1_font.color }};
}
```
#### Elementos destacados en los grupos de campos
En situaciones donde un grupo de campos se repite, puedes especificar una o más de esas ocurrencias como destacadas, lo que te permite aplicar un estilo diferente para hacer que se destaquen. Por ejemplo, esto puede ser útil en una página de productos donde desees resaltar un producto destacado.
Puedes definir un número máximo de elementos destacados por grupo de campos. En el editor, los creadores de contenido pueden marcar los elementos como destacados según sea necesario.
.png)
Para habilitar los elementos destacados en un grupo de campos, incluye las propiedades `group_occurrence_meta` en la configuración del grupo de campos. Esta propiedad almacena las siguientes propiedades:
* `featured_enabled`: se establece como `true` para habilitar los elementos destacados.
* `featured_limit`: el número máximo de elementos destacados permitidos.
El grupo de campos también debe incluir la propiedad `occurrence`.
```json theme={null}
// Field group example
{
"label": "Card",
"name": "card",
"type": "group",
"occurrence": {
"default": 2,
"min": 1,
"sorting_label_field": "card.title"
},
"group_occurrence_meta": {
"featured_enabled": true,
"featured_limit": 3
},
"children": [
{
"label": "Image",
"name": "image",
"type": "image",
"responsive": true,
"resizable": true,
"show_loading": true,
"default": {
"loading": "lazy"
}
},
{
"label": "Content",
"name": "text",
"type": "richtext",
"enabled_features": [
"advanced_emphasis",
"alignment",
"block",
"emoji",
"font_family",
"font_size",
"lists",
"standard_emphasis"
],
"default": "
This is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
"
},
{
"image": {
"loading": "lazy"
},
"text": "
This is a title
Contextual advertising can be profitable. It can either pay for your hosting and maintenance costs for you website or it can pay for a lot more.
"
}
]
}
```
Para validar si un elemento de un grupo repetido está destacado, puedes consultar la propiedad `hs_meta`. El siguiente código utiliza un [bucle "for"](https://developers.hubspot.es/docs/cms/reference/hubl/loops) para comprobar si hay elementos del grupo de campos establecidos como destacados y luego muestra el título de cada uno como un encabezado `h3`.
`{{ repeated_group_item.hs_meta.occurrence.featured }}`
```hubl theme={null}
Check out this week's featured items:
{% for item in module.card %}
{% if item.hs_meta.occurrence.featured %}
{{item.title}}
{% endif %}
{% endfor %}
```
## Campos de estilo
Los campos de estilo son un tipo especial de grupo de campos en el archivo `fields.json` de un módulo o tema que permiten a los creadores de contenido controlar el estilo de un módulo o tema en el editor de páginas y temas. A continuación, aprende como agregar los campos de estilo a un módulo o tema. También, sobre las [prácticas recomendadas para utilizar y organizar los campos de estilo](https://developers.hubspot.es/docs/cms/best-practices/fields).
### Campos de estilo del módulo
Los campos de estilo agregados a un módulo aparecerán en la pestaña *Estilos* del editor de páginas al editar el módulo:

Cuando se agregan campos de estilo al archivo `fields.json` de un módulo, se agregan dentro de un grupo de estilos. Ese grupo, sin embargo, puede contener varios grupos dentro de él, como se muestra a continuación:
```json theme={null}
// Module style fields
[
{
"type": "group",
"name": "styles",
"tab": "STYLE",
"children": [
{
"name": "img_spacing",
"label": "Spacing around image",
"required": false,
"type": "spacing",
"default": {
"padding": {
"top": {
"value": 10,
"units": "px"
},
"bottom": {
"value": 10,
"units": "px"
},
"left": {
"value": 10,
"units": "px"
},
"right": {
"value": 10,
"units": "px"
}
},
"margin": {
"top": {
"value": 10,
"units": "px"
},
"bottom": {
"value": 10,
"units": "px"
}
}
}
}
]
}
]
```
Los siguientes campos pueden utilizarse como campos de estilo en los módulos. Obtén más información sobre cada uno de los tipos de campo en la [guía de módulos y tipos de campo](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields).
* [Alineación](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#alignment)
* [Gradientes](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#gradient)
* [Espaciado](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#spacing)
* [Imagen de fondo](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#background-image)
* [Borde](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#border)
* [Booleano](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#boolean)
* [Elección](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#choice)
* [Número](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#number)
* [Color](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#color)
* [Icono](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#icon)
* [Imagen](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#image)
* [Fuente](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#font)
* [Alineación del texto](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#text-alignment)
Más información sobre los [tipos de campo de módulos y temas](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields).
Consulta la [biblioteca de recursos del CMS de HubSpot](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/modules/card.module/fields.json) para ver un ejemplo de campos de estilo dentro del archivo `fields.json` de un módulo.
### Campos de estilo del tema
Los campos de estilo agregados a un tema aparecerán en la barra lateral izquierda del editor de temas:

Todos los campos de estilo dentro del archivo `fields.json` de un tema se agregarán a la barra lateral izquierda del editor de temas, sin necesidad de colocarlos dentro de un grupo de estilos, como se muestra a continuación:
```json theme={null}
// Theme style fields
[
{
"label": "Global colors",
"name": "global_colors",
"type": "group",
"children": [
{
"label": "Primary",
"name": "primary",
"type": "color",
"visibility": {
"hidden_subfields": {
"opacity": true
}
},
"default": {
"color": "#494A52"
}
},
{
"label": "Secondary",
"name": "secondary",
"type": "color",
"visibility": {
"hidden_subfields": {
"opacity": true
}
},
"default": {
"color": "#F8FAFC"
}
}
]
},
{
"label": "Global fonts",
"name": "global_fonts",
"type": "group",
"children": [
{
"label": "Primary",
"name": "primary",
"type": "font",
"visibility": {
"hidden_subfields": {
"size": true,
"styles": true
}
},
"inherited_value": {
"property_value_paths": {
"color": "theme.global_colors.primary.color"
}
},
"default": {
"fallback": "sans-serif",
"font": "Lato",
"font_set": "GOOGLE"
}
},
{
"label": "Secondary",
"name": "secondary",
"type": "font",
"visibility": {
"hidden_subfields": {
"size": true,
"styles": true
}
},
"inherited_value": {
"property_value_paths": {
"color": "theme.global_colors.primary.color"
}
},
"default": {
"fallback": "serif",
"font": "Merriweather",
"font_set": "GOOGLE"
}
}
]
},
{
"name": "branding_color",
"label": "branding_color",
"type": "color",
"default": {
"color": "#3b7bc0", "opacity": 60
},
"inherited_value": {
"property_value_paths": {
"color": "brand_settings.primaryColor"
}
}
},
{
"name": "secondary_branding_color",
"label": "Secondary Branding color",
"type": "color",
"default": {
"color": "#ff6b6b", "opacity": 60
},
"inherited_value": {
"property_value_paths": {
"color": "brand_settings.colors[2]"
}
}
}
]
}
]
```
Los siguientes campos pueden utilizarse como campos de estilo en los módulos. Obtén más información sobre cada uno de los tipos de campo en la [guía de módulos y tipos de campo](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields).
* [Booleano](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#boolean)
* [Borde](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#border)
* [Elección](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#choice)
* [Color](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#color)
* [Fuente](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#font)
* [Imagen](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#image)
* [Número](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#number)
* [Espaciado](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#spacing)
Más información sobre los [tipos de campo de módulos y temas](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields).
Consulta la [biblioteca de recursos del CMS de HubSpot](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/fields.json) para un ejemplo de campos de estilo dentro del archivo `fields.json` de un tema.
> [!WARNING]
>
> **Nota:** Si eres un proveedor en el mercado de HubSpot, no debes reemplazar los campos de contenido existentes por campos de estilo en módulos ya creados. Cambiar la jerarquía de los campos en un archivo `fields.json` puede hacer que las instancias de los módulos existentes pierdan sus datos. En cambio, deberías agregar nuevos campos de estilo o crear una nueva versión con los campos agrupados de forma adecuada. Esto evitará que las actualizaciones causen problemas para los clientes que dependen de tus temas. Para proponer rutas de migración de los módulos antiguos, [consulta el foro de ideas de HubSpot](https://community.hubspot.com/t5/HubSpot-Ideas/Create-a-path-to-make-it-possible-to-migrate-existing-fields-to/idi-p/450311#M85938).
### CSS generado
Algunos campos de estilo ofrecen una forma de imprimir CSS directamente en función del valor del campo. Esto es especialmente útil con los campos que pueden controlar un estilo más complejo como los gradientes. Los siguientes campos de estilo tienen una propiedad `.css` generada:
* [Imagen de fondo](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#background-image)
* [Borde](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#border)
* [Color](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#color)
* [Fuente](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#font)
* [Gradientes](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#gradient)
* [Espaciado](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#spacing)
* [Alineación del texto](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#text-alignment)
```hubl theme={null}
{% require_css %}
{% end_require_css %}
```
## Repetidores
Al crear módulos que le dan formato a la información, a menudo hay tipos de información que se repiten. Por ejemplo, un módulo de recetas podría tener un campo para "Ingrediente". Sin embargo, la mayoría de las recetas tienen más de un ingrediente. Podrías proporcionar un campo de texto enriquecido, pero perderías la capacidad de garantizar un estilo consistente y añadir funcionalidades específicas para cada ingrediente. Aquí es donde entran los repetidores. HubSpot ofrece dos tipos de repetidores: campos repetitivos y grupos repetitivos.
### Campos repetitivos
Los campos que se repiten son campos normales, pero los creadores de contenido pueden agregar, eliminar y reordenar las instancias del campo. Usando el ejemplo del módulo de receta anterior, cada ingrediente podría ser un campo de texto de repetición.

Esto hace que el creador de contenido pueda agregar tantos ingredientes como desee. Desde el punto de vista del desarrollador, obtenemos una matriz que puedes usar para imprimir esa lista de ingredientes, aplicando el formato y la funcionalidad que deseas.
Los campos repetitivos son más adecuados para situaciones muy simples. En muchos casos, es más conveniente utilizar los [grupos de repetición](#repeating-groups).
> [!WARNING]
>
> **Nota:** Actualmente no es posible establecer un orden predeterminado para los campos de repetición.
#### Campos repetitivos en fields.json
```json theme={null}
// Repeating field example
{
"name": "ingredient",
"label": "Ingredient",
"required": false,
"locked": false,
"occurrence": {
"min": 1,
"max": null,
"sorting_label_field": null,
"default": 1
},
"allow_new_line": false,
"show_emoji_picker": true,
"type": "text",
"default": ["1 cup water"]
}
```
#### Revisar los elementos del módulo HTML+HubL
```html theme={null}
{% for item in module.ingredient %}
{{ item }}
{% endfor %}
```
### Grupos repetidos
Los grupos repetidos son grupos de campos con la opción de repetición activada. Los grupos repetidos permiten a los creadores de contenido agregar, eliminar y reordenar los grupos de campos. Utilizando el ejemplo del módulo de recetas, digamos que quieres integrar tu lista de ingredientes con una funcionalidad de lista de compra.

La cantidad de un ingrediente es importante para la lista de compras. Mientras que alguien podría proporcionar eso en el campo de texto, el módulo tendría que analizar el campo de texto y esperar que estemos separando de manera exitosa la cantidad del ingrediente. Aquí es donde los grupos de repetición resultan útiles. La salida de estos campos es un objeto que se puede recorrer en un bucle.
#### Grupos repetidos en fields.json
```json theme={null}
// Repeating field group example
{
"id": "ingredients",
"name": "ingredients",
"label": "Ingredients",
"required": false,
"locked": false,
"occurrence": {
"min": 1,
"max": null,
"sorting_label_field": "ingredients.ingredient",
"default": null
},
"children": [
{
"id": "ingredients.ingredient",
"name": "ingredient",
"label": "Ingredient",
"required": false,
"locked": false,
"validation_regex": "",
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": "Water"
},
{
"id": "ingredients.quantity",
"name": "quantity",
"label": "Quantity",
"required": false,
"locked": false,
"display": "text",
"min": 0,
"step": 1,
"type": "number",
"default": 1
},
{
"id": "ingredients.measurement",
"name": "measurement",
"label": "Measurement",
"help_text": "Unit of measurement (cups, tbsp, etc.)",
"required": false,
"locked": false,
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": "cups"
}
],
"type": "group",
"default": [
{
"ingredient": "Water",
"quantity": 1,
"measurement": "cups"
}
]
}
```
#### Recorrer los campos repetidos en los módulos
```html theme={null}
```
### Opciones del repetidor
Para mejorar la experiencia de edición y evitar que los creadores de contenido ingresen valores no contemplados en la programación, puedes establecer un mínimo y un máximo de elementos que pueden añadirse a un campo o grupo repetitivo.
Para los grupos repetitivos, también puedes definir qué campo servirá como etiqueta para cada elemento al visualizar el repetidor.

```json theme={null}
"occurrence" : {
"min" : 1,
"max" : 4,
"sorting_label_field" : "ingredients.ingredient",
}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `max` | Entero | Número máximo de ocurrencias de este grupo. Evita que el creador de contenido agregue más de este número de elementos en la intefaz de usuario. | `null` |
| `min` | Entero | Número mínimo de apariciones de este grupo de campos. Evita que los usuarios tengan menos de este número de elementos en la interfaz de usuario. | `null` |
| `sorting_label_field` | Cadena | Este es el ID del campo, del que se extrae el texto para mostrarlo en la interfaz de usuario en las tarjetas arrastrables. El valor predeterminado es el primer campo del grupo. | |
## Campos heredados
La propiedad `inherited_value` puede configurarse para hacer que un campo herede su valor predeterminado de otros campos. El valor predeterminado de un campo a partir del valor de otro campo, configura el `default_value_path` con la ruta del nombre del campo de destino. Cuando se establece `default_value_path`, se ignorará cualquier `default` configurado en el campo.
Para acceder a los valores de otros campos, las rutas deben incluir `module.` al principio, de manera similar a cómo se accede al valor en el código HubL del módulo.
```json theme={null}
// Inherited fields
{
"name": "body_font",
"type": "font",
"default": {
"font": "Helvetica",
"color": "#C27BA0"
}
},
{
"name": "h1_font",
"type": "font",
"default": {},
"inherited_value": {
"default_value_path": "module.body_font",
"property_value_paths" : {
"font": "module.body_font.font",
"font_set": "module.body_font.font_set"
}
}
}
```
> [!NOTE]
>
> Como la familia de fuentes se determina por una combinación `font` y `font_set`, debes incluir ambos para la heredar los campos de fuente. Aprende más sobre el [campo de fuente](https://developers.hubspot.es/docs/cms/reference/fields/module-theme-fields#font).
Para los campos complejos (campos cuyos valores son objetos), los usuarios pueden tener una mayor segmentación sobre qué propiedades se heredan mediante `property_value_path`. Las rutas referenciadas en `inherited_value` también pueden incluir claves de los valores de un campo para campos complejos.
Por ejemplo, los campos de color tienen valores de objeto que contienen el color en sí mismo, así como la opacidad. Para obtener el valor real del color sin la opacidad, la ruta debe terminar en `.color`. Por ejemplo, un campo de fuente puede heredar solo su color de un campo de color diferente:
```json theme={null}
// Inherited fields with objects
{
"name": "secondary_color",
"type": "color",
"default": {
"color": "#C27BA0",
"opacity": 100
}
},
{
"name": "h1_font",
"type": "font",
"default": {
"font": "Helvetica",
"size": 12,
"size_unit": "px"
},
"inherited_value": {
"property_value_paths": {
"color": "module.secondary_color.color"
}
}
}
```
También puedes combinar los efectos de `default_value_path` y `property_value_paths` para heredar un valor predeterminado de un campo mientras se hereda un valor de propiedad específico de un campo diferente:
```json theme={null}
// combining default_value_path and property_value_paths
{
"name": "body_font",
"type": "font",
"default": {
"font": "Helvetica",
"color": "#000000"
}
},
{
"name": "secondary_color",
"type": "color",
"default": {
"color": "#C27BA0",
"opacity": 100
}
},
{
"name": "h1_font",
"type": "font",
"default": {},
"inherited_value": {
"default_value_path": "module.body_font",
"property_value_paths": {
"color": "module.secondary_color.color"
}
}
}
```
Si un campo hereda de otro campo, pero luego se anula directamente en el nivel de la página o en la configuración del tema, su conexión con el campo que controla se interrumpe. Cualquier otro campo que se adjunte a través de `default_value_path` o `property_value_paths` ya no afectará al valor del campo.
## Visibilidad del campo
Al definir los campos del módulo y tema personalizados, puedes configurar cuándo aparece un campo agregando el objeto de `visibility` al campo en el archivo `fields.json`. Por ejemplo, puedes establecer un módulo de formulario para mostrar en un área de texto enriquecido cuando se selecciona el mensaje de agradecimiento, pero un selector de página cuando se selecciona una de redireccionamiento.
Puedes establecer la visibilidad basada en el valor de un `controlling_field_path` o en una propiedad específica dentro de ese campo usando el parámetro `property`. También puedes aplicar visibilidad a un campo individual, o a un grupo de campos para controlar la visibilidad de todos los elementos del grupo.
```json theme={null}
"visibility" : {
"controlling_field_path" : "field_name",
"controlling_value_regex" : "regular_expression_in_controlling_field",
"property": "src",
"operator" : "EQUAL"
}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `controlling_field_path` | Cadena | La ruta de destino del campo que controla la condición de visualización.
Si el campo no está anidado dentro de un grupo de campos, utiliza el nombre del campo (por ejemplo, `field_name`).
Para los campos anidados en grupos, la ruta debe coincidir con su estructura de agrupación, separados por un punto. Por ejemplo:
`field_group_name.field_name`
`parent_group.child_group.field_name`
|
| `controlling_value_regex` | Cadena | La expresión regular en el campo de control que debe estar presente para que el campo se muestre. La expresión regular debe coincidir con toda la cadena (no solo con un subconjunto) y distinguir entre mayúsculas y minúsculas. |
| `operator` | Cadena | El operador que define cómo debe validarse el valor `controlling_value_regex`. Los operadores pueden ser uno de los siguientes:
`NOT_EQUAL`
`EQUAL`
`EMPTY`
`NOT_EMPTY`
`MATCHES_REGEX`
|
| `property` | Cadena | Establece la visibilidad en función de una propiedad especifica del campo objetivo. Por ejemplo, puedes habilitar la visibilidad cuando la propiedad `src` de un campo de imagen es igual a un valor específico. Por opción predeterminada, si no se proporciona ningún valor para este campo, la visibilidad se basa en el valor convertido a cadena de `controlling_value_regex`. |
También puedes incluir un objeto `occurrence_options` dentro del objeto `visibility` para guiar el recuento de valores de un campo repetido. Este objeto debe incluir el `count` con el que comparar y una definición de `operator` . Por ejemplo, para mostrar un campo de texto solo cuando otro campo repetido tiene al menos dos elementos, podrías definir `visibility` de la siguiente manera:
```json theme={null}
[
{
"type": "group",
"name": "ingredients",
"label": "Recipe ingredients",
"display": "drilldown",
"children": [
{
"name": "ingredient",
"label": "Ingredient",
"occurrence": {
"min": 1,
"max": null,
"default": 1
},
"type": "text",
"default": ["1 cup water"]
},
{
"type": "text",
"label": "Conditional field",
"name": "conditional_field",
"visibility": {
"controlling_field_path": "ingredients.ingredient",
"occurrence_options": {
"count": 2,
"operator": "GREATER_THAN_OR_EQUAL"
}
}
}
]
}
]
```
Puedes utilizar cualquiera de los siguientes valores de `operater` :
* `"NOT_EQUAL"`
* `"EQUAL"`
* `"EMPTY"`
* `"NOT_EMPTY"`
* `"GREATER_THAN"`
* `"GREATER_THAN_OR_EQUAL"`
* `"LESS_THAN"`
* `"LESS_THAN_OR_EQUAL"`
### Visibilidad avanzada
El atributo `visibility` solo puede admitir un criterio a la vez. Para incluir varios criterios con varios operadores, así como el orden de las operaciones, puedes utilizar `advanced_visibility`.
```json theme={null}
"visibility_rules" : "ADVANCED",
"advanced_visibility" : {
"boolean_operator" : "AND",
"criteria" : [{
"controlling_field_path" : "field_name",
"controlling_value_regex" : "regular_expression_in_controlling_field",
"operator" : "MATCHES_REGEX"
},
{
"controlling_field_path" : "field_name",
"controlling_value_regex" : "regular_expression_in_controlling_field",
"operator" : "EQUAL"
}]
}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `visibility_rules` | Cadena | Por opción predeterminada, este valor se establece como `SIMPLE`. Para utilizar `advanced_visibility`, establécelo como `ADVANCED`. |
| `boolean_operator` | Cadena | El operador booleano para los criterios condicionales. Puede ser `AND`, o `OR`. |
| `criteria` | Matriz | Una matriz de objetos de visibilidad que define los criterios condicionales que deben cumplirse para que se muestre el campo. |
| `controlling_field_path` | Cadena | La ruta de puntos del campo que controlan la condición de visualización.
Si el campo no está anidado dentro de un grupo de campos, utiliza el nombre del campo (por ejemplo, `field_name`).
Para los campos anidados en grupos, la ruta debe coincidir con su estructura de agrupación, separados por un punto. Por ejemplo:
`field_group_name.field_name`
`parent_group.child_group.field_name`
|
| `controlling_value_regex` | Cadena | El valor en el campo de control que debe cumplirse para mostrar el campo. Cuando se utiliza el operador`MATCHES_REGEX`, el regex debe coincidir con toda la cadena (no con un subconjunto) y se ejecuta con precaución en la distinción entre mayúsculas y minúsculas. Un campo con un `controlling_field_path` pero `controlling_value_regex` no es visible si el campo de control tiene algún valor como non-null o non-blank. |
| `operator` | Cadena | El operador que define cómo debe validarse el valor `controlling_value_regex`. Los operadores pueden ser uno de los siguientes:
`NOT_EQUAL`
`EQUAL`
`EMPTY`
`NOT_EMPTY`
`MATCHES_REGEX`
La sintaxis regex es requerida cuando se utiliza `MATCHES_REGEX`. |
Por ejemplo, a continuación se muestra la primera parte del código del [módulo de pagos predeterminado](https://developers.hubspot.es/docs/cms/reference/modules/default-modules). Para revisar el código completo, puedes clonar el módulo en HubSpot y luego descargarlo en tu entorno local para ver el archivo `fields.json` del módulo.
```json theme={null}
[
{
"id": "payment",
"name": "payment",
"display_width": null,
"label": "Payment",
"required": true,
"locked": false,
"type": "payment",
"default": {
"id": null,
"properties": {}
}
},
{
"id": "checkout_location",
"name": "checkout_location",
"display_width": null,
"label": "Checkout behavior",
"required": false,
"locked": false,
"visibility": {
"controlling_field_path": "payment",
"controlling_value_regex": "id\":\\d+",
"operator": "MATCHES_REGEX"
},
"display": "radio",
"choices": [
["new_tab", "Open in a new tab"],
["overlay", "Sliding overlay"]
],
"type": "choice",
"default": "new_tab"
},
{
"id": "button_text",
"name": "button_text",
"display_width": null,
"label": "Button text",
"required": true,
"locked": false,
"validation_regex": "",
"visibility": {
"controlling_field_path": "payment",
"controlling_value_regex": "id\":\\d+",
"operator": "MATCHES_REGEX"
},
"allow_new_line": false,
"show_emoji_picker": false,
"type": "text",
"default": "Checkout"
},
{
"id": "icon",
"name": "icon",
"display_width": null,
"label": "Icon",
"required": false,
"locked": false,
"visibility_rules": "ADVANCED",
"advanced_visibility": {
"boolean_operator": "AND",
"criteria": [
{
"controlling_field_path": "payment",
"controlling_value_regex": "id\":\\d+",
"operator": "MATCHES_REGEX"
},
{
"controlling_field_path": "add_icon",
"controlling_value_regex": "true",
"operator": "EQUAL"
}
],
"children": []
},
"children": [
{
"id": "icon.icon",
"name": "icon",
"display_width": null,
"label": "Icon",
"required": true,
"locked": false,
"icon_set": "fontawesome-5.0.10",
"type": "icon",
"default": {
"name": "hubspot",
"type": "SOLID",
"unicode": "f3b2"
}
},
{
"id": "icon.position",
"name": "position",
"display_width": null,
"label": "Position",
"required": true,
"locked": false,
"display": "select",
"choices": [
["left", "Left"],
["right", "Right"]
],
"type": "choice",
"default": "left"
}
],
"tab": "CONTENT",
"expanded": false,
"type": "group"
}
// rest of fields.json code
]
```
El código anterior da como resultado el siguiente comportamiento:
* El primer campo (`payment`) es un campo obligatorio (menú desplegable) que permite al creador de contenido seleccionar un enlace de pago específico. En HubSpot, un creador de contenido verá lo siguiente cuando agregue el módulo a la página por primera vez:

* Una vez que se selecciona un enlace de pago, aparecerán los tres campos que siguen (`checkout_location`, `button_text` y `icon`). Esto se debe a que los campos tienen un atributo `visibility` que está controlado por el campo `payment` y requiere un valor ID en el parámetro `id` en el campo de pago.
El campo `icon` en sí utiliza `advanced_visibility` para aparecer solo cuando hay un enlace de pago presente en el campo `payment` y cuando la casilla de verificación `add_icon` está seleccionada.
Además de establecer la visibilidad dentro de `fields.json`, también puedes establecer la visibilidad en el administrador de diseño editando las opciones de *Condiciones de visualización* de un campo.

Después de configurar la visibilidad en el administrador de diseño, puedes [buscar](/docs/developer-tooling/local-development/hubspot-cli/reference#fetch) el módulo [utilizando la CLI](/docs/developer-tooling/local-development/hubspot-cli/install-the-cli) para ver el atributo `visibility` en el archivo `fields.json` del módulo.
## Inhabilitar el campo condicional
Puedes agregar condiciones a un campo para evitar la edición cuando se cumplan las condiciones especificadas. También puedes establecer un mensaje para mostrar sobre el campo cuando está inhabilitado y proporcionar detalles en el editor de contenido.

Las condiciones y el mensaje se establecen en el objeto `disabled_controls` del campo. Las condiciones para hacer un campo editable se establecen dentro del objeto `rules`, que sigue el mismo formato que [advanced\_visibility](#field-visibility).
El siguiente código muestra una implementación simple y avanzada de los criterios de `rules`:
* El campo `simple_page` incluye la lógica para inhabilitar el campo si el campo `text_field` se establece en `testing`.
* El campo `fancy_page` incluye la lógica para deshabilitar el campo si cualquiera de los valores `text_field` o `text_field_2` se establece en cualquier valor que no sea igual a `testing` y `testing2` respectivamente.
```json theme={null}
// example fields.json
[
{
"type": "text",
"name": "text_field",
"label": "Text field"
},
{
"type": "text",
"name": "text_field_2",
"label": "Text field 2"
},
{
"type": "page",
"label": "Simple Page",
"name": "simple_page",
"disabled_controls": {
"message": "This field is disabled",
"rules": {
"criteria": [
{
"controlling_field_path": "text_field",
"operator": "EQUAL",
"controlling_value_regex": "testing"
}
]
}
}
},
{
"type": "page",
"label": "Fancy Page",
"name": "fancy_page",
"disabled_controls": {
"message": "This field is disabled",
"rules": {
"boolean_operator": "OR",
"criteria": [
{
"controlling_field_path": "text_field",
"operator": "NOT_EQUAL",
"controlling_value_regex": "testing"
},
{
"controlling_field_path": "text_field_2",
"operator": "NOT_EQUAL",
"controlling_value_regex": "testing2"
}
]
}
}
}
]
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `message` | Cadena | El mensaje que se mostrará en el editor de contenido cuando el campo esté desactivado. |
| `rules` | Objeto | Las condiciones para activar el campo para la edición. |
| `criteria` | Matriz | Una matriz de objetos condicionales que define los criterios que deben cumplirse para que se muestre el campo. Esta matriz puede contener múltiples objetos condicionales separados por lógica `AND` u `OR` a través del parámetro `boolean_operator`. |
| `boolean_operator` | Cadena | El operador booleano para los criterios condicionales. Puede ser `AND` u `OR`. Cuando no se especifica, el valor predeterminado es `AND`. |
| `controlling_field_path` | Cadena | La ruta de puntos del campo que controlan la condición de visualización.
Si el campo no está anidado dentro de un grupo de campos, utiliza el nombre del campo (por ejemplo, `field_name`).
Para los campos anidados en grupos, la ruta debe coincidir con su estructura de agrupación, separados por un punto. Por ejemplo:
`field_group_name.field_name`
`parent_group.child_group.field_name`
|
| `controlling_value_regex` | Cadena | El valor en el campo de control que debe cumplirse para mostrar el campo. Cuando se utiliza el operador`MATCHES_REGEX`, el regex debe coincidir con toda la cadena (no con un subconjunto) y se ejecuta con precaución en la distinción entre mayúsculas y minúsculas. Un campo con un `controlling_field_path` pero `controlling_value_regex` no es visible si el campo de control tiene algún valor como non-null o non-blank. |
| `operator` | Cadena | El operador que define cómo debe validarse el valor `controlling_value_regex`. Los operadores pueden ser uno de los siguientes:
`NOT_EQUAL`
`EQUAL`
`EMPTY`
`NOT_EMPTY`
`MATCHES_REGEX`
La sintaxis regex es requerida cuando se utiliza `MATCHES_REGEX`. |
## Resaltador de campos del editor de temas
Cuando están en el editor de temas, el resaltador de vista previa puede ayudar a los creadores de contenido a comprender qué campos controlan qué elementos de página. La vista previa del resaltador funciona asignando los campos del tema a los selectores CSS a los que afectan, agregando un cuadro alrededor de esos elementos al pasar el cursor sobre el campo en el editor del tema.
Para configurar el resaltador de vista previa para los campos del tema, debes incluir un archivo `editor-preview.json` en el directorio raíz del tema para asignar los campos del tema a una lista de selectores CSS. En el archivo, debes incluir una matriz para cada campo de estilo que deseas resaltar que contiene los selectores CSS relevantes, utilizando el siguiente formato:
```json theme={null}
// editor-preview.json
{
"selectors": {
"theme.settings.path.1": [ ],
"theme.settings.path.2": [ ],
}
}
```
Por ejemplo, el código a continuación resaltará qué elementos de la página están controlados por el campo de fuente principal. Puedes ver el ejemplo completo en el archivo `editor-preview.json` del tema Growth predeterminado.
```json theme={null}
// editor-preview.json
{
"selectors": {
"fonts.primary": [
"button, .button, .hs-button",
"form input[type='submit'], form .hs-button",
".error-page:before",
"p",
"blockquote > footer",
"form td.is-today .pika-button",
"form .is-selected .pika-button",
"th, td",
".blog-listing__post-tag",
".blog-listing__post-author-name, .blog-post__author-name",
".pagination__link-icon svg",
".tabs__tab",
"a",
".button.button--simple",
".pagination__link .pagination__link-icon svg",
".card--dark",
".card--light",
".card--light summary, .card--light p, .card--light h1, .card--light h2, .card--light h3, .card--light h4, .card--light h5, .card--light h6, .card--light a:not(.button), .card--light span, .card--light div, .card--light li, .card--light blockquote",
".card--light .accordion__summary:before",
"tfoot th, tfoot td",
".header__language-switcher-current-label > span",
".header__language-switcher-child-toggle svg",
".header__language-switcher .lang_list_class a:not(.button)",
".header__menu-link",
".header__menu-item--depth-1 > .header__menu-link:not(.button)",
".header__menu-item--depth-1 .header__menu-child-toggle svg",
".header__menu-toggle svg",
".header__language-switcher .header__language-switcher-current-label > span",
".header p, .header h1, .header h2, .header h3, .header h4, .header h5, .header h6, .header a:not(.button), .header span, .header li, .header blockquote, .header .tabs__tab, .header .tabs__tab, .header .tabs__tab, .header .tabs__tab",
".footer .hs-menu-wrapper a",
".footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .footer p, .footer a:not(.button), .footer span, .footer div, .footer li, .footer blockquote, .footer .tabs__tab, .footer .tabs__tab, .footer .tabs__tab, .footer .tabs__tab",
".footer hr",
"form label",
"#email-prefs-form, #email-prefs-form h1, #email-prefs-form h2",
"form legend",
"form input[type='text'], form input[type='email'], form input[type='password'], form input[type='tel'], form input[type='number'], form input[type='search'], form select, form textarea",
".backup-unsubscribe input[type='email']",
"form .legal-consent-container, form .legal-consent-container .hs-richtext, form .legal-consent-container .hs-richtext p",
"form .hs-richtext, form .hs-richtext *, form .hs-richtext p, form .hs-richtext h1, form .hs-richtext h2, form .hs-richtext h3, form .hs-richtext h4, form .hs-richtext h5, form .hs-richtext h6",
"button, button, button, .button, .button, .button, .hs-button, .hs-button, .hs-button",
"button, .button, .hs-button",
".button.button--secondary, .button.button--secondary, .button.button--secondary",
".button.button--secondary",
".header__menu-item--depth-1 > .header__menu-link, .header__menu-item--depth-1 > .header__menu-link",
".header__menu-item--depth-1 > .header__menu-link",
".header__menu-submenu .header__menu-link, .header__menu-submenu .header__menu-link",
".header__language-switcher .lang_list_class a, .header__language-switcher .lang_list_class a",
".header__menu-submenu .header__menu-link:not(.button)",
".footer .hs-menu-wrapper a, .footer .hs-menu-wrapper a",
".footer .hs-menu-wrapper a",
"form .hs-richtext a",
".header__menu-item--depth-1 > .header__menu-link--active-link:not(.button)",
".footer .hs-menu-wrapper .active > a"
]
}
}
```

Para comenzar a generar este archivo, ejecuta el siguiente [comando CLI](/docs/developer-tooling/local-development/hubspot-cli/reference#generate-theme-field-selectors-for-in-app-highlighting) para crear el archivo. Durante la creación del archivo, se ejecutará un script para configurar las asignaciones iniciales de los selectores de campo.
```shell theme={null}
hs theme generate-selectors
```
| Parámetro | Descripción |
| - | - |
| `theme-directory-path` | La ruta al directorio de temas. |
Después de ejecutar el comando, deberás revisar y ajustar el archivo `editor-preview.json` para asegurarte de que los campos y los selectores estén asignados correctamente. Mientras el comando [generate-selectors](/docs/developer-tooling/local-development/hubspot-cli/reference#generate-theme-field-selectors-for-in-app-highlighting) valida qué campos afectan a qué selectores, deberás hacer las correcciones basadas en cómo se estructura tu tema. Por ejemplo, este comando no puede detectar cuando los módulos están anulando el estilo o cuando estás usando macros.
Para probar estas asignaciones, carga el tema a una cuenta y luego ve el editor de temas en esa cuenta (**Configuración** > **Sitio web** > **Temas** > **Ver tema**).
# Configurar el Editor de texto enriquecido
Source: https://developers.hubspot.es/docs/cms/reference/fields/rich-text-editor
El Editor de texto enriquecido dentro de los módulos personalizados ahora proporciona a los desarrolladores la capacidad de eliminar componentes de la barra de herramientas de configuración.
Como desarrollador, hay veces que los editores de WYSIWYG proporcionan funciones que, cuando se usan incorrectamente, pueden dificultar el objetivo de una marca unificada y causar problemas de diseño y flujo de contenido. El Editor de texto enriquecido dentro de los módulos personalizados ahora proporciona a los desarrolladores la capacidad de eliminar componentes de la barra de herramientas de configuración a través de la propiedad `enabled_features` dentro del archivo fields.json.
> [!WARNING]
>
> Nota: lo siguiente se aplica a los módulos personalizados que utilizan el campo de texto enriquecido solo en desarrollo local. El uso de esta función no deshabilitará la funcionalidad de las opciones eliminadas del Editor de texto enriquecido, solo la presentación de las opciones. Esto es por razones de compatibilidad con versiones anteriores para que el contenido existente no se vea afectado.
## Cómo usar enabled\_features
En tu archivo fields.json donde tienes tu objeto de campo de texto enriquecido, puedes activar ciertas características agregando las opciones válidas de la barra de herramientas en una matriz a la propiedad `enabled_features` como se ilustra a continuación:
```json theme={null}
// Rich text field with only Bold, Link, and Image available in the Toolbar
{
"name": "description",
"label": "Description",
"required": false,
"locked": false,
"type": "richtext",
"default": null,
"enabled_features": ["bold", "link", "image"]
}
```
El editor de contenido luego vería el editor de texto enriquecido con solo las opciones incluidas habilitadas como se ilustra en la imagen a continuación:
> [!NOTE]
>
> Nota: algunas características, como el botón "Borrar estilos" que te permite volver al estilo predeterminado para el editor, siempre estarán habilitadas y no se pueden eliminar. Si se omite la propiedad `enabled_features`, se mostrarán todas las características.

## Lista de características
A continuación se muestra una lista de características que se pueden habilitar individualmente al usar la propiedad `enabled_features`.
### Grupos de controles
| Opción | Description |
| - | - |
| `colors` | Controles de color de texto y color de fondo. |
| `fonts` | Familia de fuentes y controles de tamaño de fuente. |
| `indents` | Controles de sangría. |
| `lists` | Controles de listas numeradas y con viñetas. |
| `standard_emphasis` | Controles de negrita, cursiva y subrayado. |
| `advanced_emphasis` | Controles de tachado, superíndice, subíndice y formato de código. |
| `glyphs` | Controles de emojis, caracteres especiales e iconos. No se admite en los módulos de correo electrónico. Para agregar el selector de emojis a los módulos de correo electrónico, usa [emojis](#insert-buttons) en su lugar. |
### Formato de texto
| Opción | Description |
| - | - |
| `block` | Muestra el menú desplegable del conmutador de estilo. |
| `font_family` | Muestra el menú desplegable del conmutador de fuentes. |
| `font_size` | Muestra el menú desplegable de tamaño de la fuente. |
| `bold` | Muestra el botón de negrita. |
| `italic` | Muestra el botón de cursiva. |
| `underline` | Muestra el botón de subrayado. |
| `text_color` | Muestra el botón de color del texto. |
| `background_color` | Muestra el botón de color de fondo. |
| `alignment` | Muestra el botón de alineación. |
| `bulleted_list` | Muestra el botón de lista con viñetas. |
| `numbered_list` | Muestra el botón de listas numeradas. |
| `lineheight` | Muestra el botón de altura de línea. |
| `outdent` | Muestra el botón de atenuación. |
| `indent` | Muestra el botón de sangría. |
| `strikethrough` | Muestra el botón de tachado. |
| `superscript` | Muestra el botón de superíndice. |
| `subscript` | Muestra el botón de subíndice. |
| `code_format` | Muestra el botón de formato de código. |
### Insertar botones
| Opción | Description |
| - | - |
| `link` | Muestra el botón de enlace. |
| `image` | Muestra el botón de imagen. No se admite en los módulos de correo electrónico. |
| `emoji` | Muestra el botón de emoji. |
| `personalize` | Muestra el elemento de barra de herramientas de personalización. |
| `cta` | Muestra el elemento del menú de llamada a la acción en el menú de inserción. |
| `embed` | Muestra el elemento de menú de incrustación en el menú de inserción. |
| `video` | Muestra el elemento del menú de video en el menú de inserción. |
| `table` | Muestra el elemento del menú de la tabla en el menú de inserción. |
| `charmap` | Muestra el elemento del menú de caracteres especiales en el menú de inserción. |
| `anchor` | Muestra el elemento del menú de anclaje en el menú de inserción. |
| `hr` | Muestra la posición del menú de línea horizontal en el menú de inserción. |
| `nonbreaking_space` | Muestra el elemento de menú de espacio de no ruptura en el menú de inserción. |
| `icon` | Muestra el elemento del menú de icono en el menú de inserción. |
### Opciones avanzadas
| Opción | Description |
| - | - |
| `source_code` | Muestra el elemento del menú de código fuente en el menú avanzado. |
| `visual_blocks` | Muestra el elemento de menú mostrar bloques en el menú avanzado. |
# Filtros de HubL
Source: https://developers.hubspot.es/docs/cms/reference/hubl/filters
Lista de filtros de HubL y ejemplos para desarrolladores en el CMS de HubSpot.
Los filtros modifican la información de salida de tu HubL y pueden aplicarse a diversas instrucciones y expresiones para ajustar el marcador de plantilla que emite el servidor.
La sintaxis básica de un filtro es `|filtername` y se agrega directamente después de la instrucción o de la expresión, dentro de sus delimitadores. Algunos filtros tienen parámetros adicionales que se pueden agregar entre paréntesis. La sintaxis básica de un filtro con un parámetro de cadena, un número y un booleano es: `|filtername("stringParameter", 10, true)`. Recuerda que los parámetros de cadena deben ir entre comillas. También, hay que tener en cuenta que los filtros de HubL pueden tener un alias que sirve para el mismo propósito que el filtro principal.
Este artículo incluye todos los filtros compatibles de HubL.
> [!WARNING]
>
> ### Nota:
>
> Puedes aplicar filtros de HubL a los [tokens de personalización](https://knowledge.hubspot.com/marketing-email/use-personalization-tokens), como tokens de contacto y de empresa, en las páginas del CMS de HubSpot y blogs, pero no en los correos electrónicos.
## abs
Obtiene el valor absoluto de un número. Puedes usar este filtro para garantizar que un número sea positivo.
```text hubl.txt theme={null}
{% set my_number = -53 %}
{{ my_number|abs }}
```
```text resultados renderizados.txt theme={null}
53
```
## add
Agrega un valor numérico a otro. Este filtro funciona igual que el [operador +](/docs/cms/reference/hubl/operators-and-expression-tests#math). El parámetro entre paréntesis es el sumando que se combina con el valor numérico inicial.
```text hubl.txt theme={null}
{% set my_num = 40 %}
{{ my_num|add(13) }}
```
```text resultados renderizados.txt theme={null}
53
```
## attr
Renderiza el atributo de un diccionario. Este filtro equivale a imprimir una variable existente dentro de un diccionario, como `content.absolute_url`.
```text hubl.txt theme={null}
{{ content|attr("absolute_url") }}
```
```text resultados renderizados.txt theme={null}
https://developers.hubspot.com/docs/cms/hubl/filters
```
| Parámetro | Descripción |
| - | - |
| `attribute_name` | Especifica el atributo a imprimir |
## batch
Agrupa los elementos dentro de una secuencia.
En el siguiente ejemplo, hay una variable que contiene una secuencia de tipos de frutas. El filtro `batch` se aplica a un bucle que itera a través de la secuencia. El bucle anidado se ejecuta tres veces para imprimir 3 tipos de fruta por fila, antes de que el bucle exterior se ejecute de nuevo. Observa en el resultado final que, como solo hay cinco tipos de fruta, el último elemento se sustituye por un ` ` (el segundo parámetro).
```html example.html theme={null}
{% set rows = ["apples", "oranges", "pears", "grapes", "blueberries"] %}
{% for row in rows|batch(3, " ") %}
{% for column in row %}
{{ column }}
{% endfor %}
{% endfor %}
```
```html example.html theme={null}
apples
oranges
pears
grapes
blueberries
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `linecount` | Numérico | El número de elementos a incluir en el lote. |
| `fill_with` | Cadena | Especifica lo que hay que incluir para completar los elementos que faltan. |
## between\_times
Calcula el tiempo entre dos objetos de tipo fecha y hora en una unidad de tiempo específica.
> [!WARNING]
>
> ### Nota:
>
> Este filtro debe usarse únicamente con variables que devuelvan una fecha. A partir del 30 de septiembre de 2024, este filtro ya no devolverá la fecha actual cuando se pase un valor nulo. Después de esa fecha, un valor nulo en el filtro devolverá el 30 de septiembre de 2024.
```text hubl.txt theme={null}
{% set begin = "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{% set end = "2018-07-20T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{{ begin|between_times(end, "days") }}
```
```text resultados renderizados.txt theme={null}
6
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `end` | objeto fecha y hora | El objeto fecha y hora final. |
| `timeunit` | Cadena | Las unidades de tiempo válidas son `nanos` , `micros` , `millis` , `seconds` , `minutes` , `hours` , `half_days` , `days` , `weeks` , `months` , `years` , `decades` , `centuries` , `millennia` y `eras` . |
## bool
Convierte un valor de cadena de texto en un booleano.
```text hubl.txt theme={null}
{% if "true"|bool == true %}hello world{% endif %}
```
```text resultados renderizados.txt theme={null}
hello world
```
## capitalize
Escribe en mayúsculas la primera letra de un valor variable. El primer carácter estará en mayúscula, mientras que las demás letras estarán en minúscula. Las siguientes palabras, ya sea separadas por espacios o guiones, no tendrán la primera letra en mayúscula.
```text hubl.txt theme={null}
{% set sentence = "the first letter of a sentence should always be capitalized." %}
{{ sentence|capitalize }}
```
```text resultados renderizados.txt theme={null}
The first letter of a sentence should always be capitalized.
```
## center
Centra el texto dentro de una longitud de campo determinada utilizando espacios en blanco. Este filtro no es especialmente útil ni recomendable, ya que el compilador HTML de HubSpot elimina los espacios en blanco de forma automática. No obstante, se incluye aquí para brindar una descripción completa.
El siguiente ejemplo muestra este filtro aplicado a una variable dentro de una etiqueta pre-Tag, de modo que los espacios en blanco no se eliminan.
```html example.html theme={null}
{% set var = "string to center" %}
before{{ var|center(80) }}after
```
```html example.html theme={null}
before string to center after
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `width` | Numérico | Especifica la longitud del espacio en blanco para centrar el texto. |
## convert\_rgb
Convierte un valor HEX en una cadena RGB. Este filtro es útil si necesitas convertir las variables de color a RGB para utilizarlas con una declaración CSS RGBA. En el siguiente ejemplo, el valor establecido por un módulo de color se convierte en un valor RGB y se utiliza en una declaración CSS RGBA.
```html example.html theme={null}
{% set my_color = "#FFFFFF" %}
{{ my_color|convert_rgb }}
{% set my_color2="#000000" %}
```
```html example.html theme={null}
255, 255, 255
```
## cut
Elimina una cadena de un valor. Este filtro se puede utilizar para hacer coincidir y cortar una parte de una cadena. El parámetro especifica la parte de la cadena que debe ser eliminada. En el ejemplo a continuación, se elimina el espacio y la palabra "world" del valor original de la variable.
```text hubl.txt theme={null}
{% set my_string = "Hello world." %}
{{ my_string|cut(" world") }}
```
```text resultados renderizados.txt theme={null}
Hello.
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `characters_to_cut` | Cadena | La parte de la cadena que debe ser eliminada. |
## datetimeformat (obsoleto)
> [!WARNING]
>
> **Nota**: este filtro está [obsoleto](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions#datetimeformat-function). En su lugar, usa el filtro [format\_datetime](#format_datetime), que tiene una sintaxis más estandarizada.
## default
Si el valor no está definido, se devolverá el primer parámetro; de lo contrario, se mostrará el valor de la variable. Si quieres usar "default" con variables que se evalúan como falsas, tienes que poner el segundo parámetro como `true`.
El primer ejemplo de abajo mostrará el mensaje si la variable no está definida. El segundo ejemplo utilizó el filtro en una cadena vacía, que no está definida, pero muestra un mensaje debido al segundo parámetro.
```text hubl.txt theme={null}
{{ my_variable|default("my_variable is not defined") }}
{{ ""|default("the string was empty", true) }}
```
```text resultados renderizados.txt theme={null}
my_variable is not defined the string was empty
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `default_value` | Cadena | El valor que se devolverá si la variable no está definida. Si la variable está definida, se devolverá el valor de la variable. |
| `truthy` | Booleano | con el valor `true` para usar con variables que se evalúan como `false`. |
## dictsort
Ordena un diccionario y produce pares de clave y valor. Los diccionarios no tienen un orden predeterminado, pero puedes organizarlos por clave o por valor. El primer parámetro es un valor booleano para determinar si la regla de ordenamiento distingue entre mayúsculas y minúsculas. El segundo parámetro determina si ordenar el diccionario por clave o por valor. El siguiente ejemplo muestra un diccionario de contactos ordenado, incluyendo todos los detalles del contacto.
```text hubl.txt theme={null}
{% for item in contact|dictsort(false, "value") %}
{{item}}
{% endfor %}
```
```text resultados renderizados.txt theme={null}
A sorted contact dictionary
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `case_sensitive` | Booleano | Determina si las reglas de ordenación distinguen entre mayúsculas y minúsculas. |
| `sort_by` | `"key"` \| `"value"` | Determina si ordenar por `key` o `value`. |
## difference
Este filtro devuelve las diferencias entre dos conjuntos o listas. La lista que el filtro devuelve contiene todos los elementos únicos que están en la primera lista pero no en la segunda.
```text hubl.txt theme={null}
{{ [1, 2, 3]|difference([2, 3, 4, 5]) }}
```
```text resultados renderizados.txt theme={null}
[1]
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `list` | Matriz | La segunda lista con la que se pueden comparar los valores para encontrar las diferencias con la lista original. |
## divide
Divide el valor actual por un divisor. El parámetro que se pasa es el divisor. Este filtro es una alternativa al operador /.
```text hubl.txt theme={null}
{% set numerator = 106 %}
{{ numerator|divide(2) }}
```
```text resultados renderizados.txt theme={null}
53
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `divisor` | Numérico | El número por el que hay que dividir la variable. |
## divisible
Es una alternativa a la prueba de la expresión `divisibleby`. El filtro divisible se devolverá como 'true' si el valor es divisible por el número especificado.
```text hubl.txt theme={null}
{% set num = 10 %}
{% if num|divisible(2) %}
The number is divisible by 2
{% endif %}
```
```text resultados renderizados.txt theme={null}
The number is divisible by 2
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `divisor` | Numérico | El número que se va a utilizar cuando se evalúa si el valor es divisible. |
## escape\_html
Sustituye el contenido de una entrada HTML. Acepta una cadena y convierte los caracteres `&`, `<`, `>`, `‘`, `”` y `escape_jinjava` en secuencias seguras para HTML. Usa este filtro para las variables de HubL que se emplean en HTML pero no deben admitir código HTML.
```html example.html theme={null}
{% set escape_string = "
```
## escape\_attr
Sustituye el contenido de una entrada de atributo HTML. Acepta una cadena y convierte los caracteres `&`, `<`, `‘`, `”` y `escape_jinjava` en secuencias seguras para HTML. Utiliza este filtro para las variables HubL que se agregan a los atributos HTML.
Ten en cuenta que cuando sustituyas valores de atributos que acepten URLs, como `href`, deberías usar el filtro `escape_url`.
```html example.html theme={null}
{% set escape_string = "This markup is printed as text" %}
```
```html example.html theme={null}
```
## escape\_jinjava
Convierte los caracteres `{` y `}` en cadenas a secuencias seguras para Jinjava. Utiliza este filtro si necesitas mostrar un texto que pueda contener dichos caracteres en Jinjava.
```text hubl.txt theme={null}
{% set escape_string = "{{This markup is printed as text}}" %}
{{ escape_string|escape_jinjava }}
```
```text resultados renderizados.txt theme={null}
{{This markup is printed as text}}
```
## escape\_js
Sustituye cadenas, incluyendo `escape_jinjava`, para que puedan ser insertadas con seguridad en una declaración de variable en JavaScript. Utiliza este filtro para las variables HubL que se usan dentro de los elementos del script HTML.
```text hubl.txt theme={null}
{% set escape_string = "\tThey said 'This string can safely be inserted into JavaScript.'" %}
{{ escape_string|escape_js }}
```
```text resultados renderizados.txt theme={null}
\tThey said \x27This string can safely be inserted into JavaScript.\x27
```
## escape\_url
Sustituye el contenido de una URL, aplicando protocolos específicos, eliminando caracteres no válidos o peligrosos y codificando entidades HTML. Devuelve una respuesta vacía si una URL es válida. Utiliza este filtro para las variables HubL que se usan dentro de los atributos HTML y que deben ser URLs válidas.
```text hubl.txt theme={null}
{% set escape_string = "http://example.com/with space/" %}
```
```text resultados renderizados.txt theme={null}
```
## escapejson
Sustituye cadenas para que puedan ser utilizadas como valores en JSON.
```text hubl.txt theme={null}
{% set escape_string = "" %}
{% require_js position="head" %}
{% end_require_js %}
```
```text resultados renderizados.txt theme={null}
```
## filesizeformat
Convierte un valor numérico en un tamaño de archivo legible (por ejemplo, 13 kB, 4,1 MB, 102 Bytes, etc.). De forma predeterminada, se utilizan prefijos decimales (por ejemplo, MB y GB), pero se pueden ajustar del parámetro `binary` a `true` para utilizar prefijos binarios como mebibyte (MiB) y gibibyte (GiB).
```text hubl.txt theme={null}
{% set bytes = 10000 %}
{{ bytes|filesizeformat(binary=true) }}
```
```text resultados renderizados.txt theme={null}
9.8 KiB
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `binary` | Booleano | Si se establece como `true`, se utilizan los prefijos binarios, como mebibyte (MiB) y gibibyte (GiB). |
## first
Devuelve el primer elemento de una secuencia.
```text hubl.txt theme={null}
{% set my_sequence = ["Item 1", "Item 2", "Item 3"] %}
{{ my_sequence|first }}
```
```text resultados renderizados.txt theme={null}
Item 1
```
## float
Convierte un valor en un número de punto flotante. Si la conversión no funciona, devolverá `0.0`. Puedes anular este valor predeterminado utilizando el primer parámetro.
```text hubl.txt theme={null}
{% set my_text="25" %}
{{ my_text|float + 17 }}
```
```text resultados renderizados.txt theme={null}
42.0
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `default` | Número | Entero a devolver si la conversión no funciona. |
## forceescape
Aplica estrictamente el escape HTML. En el entorno de HubSpot no hay realmente un caso de uso para el doble escape, por lo que esto se comporta generalmente igual que el filtro de escape.
```html example.html theme={null}
{% set escape_string = "
```
## format
Aplica el formato de cadena de Python a un objeto. El valor `%s` se puede sustituir con otra variable.
```text hubl.txt theme={null}
{{ "Hi %s %s"|format(contact.firstname, contact.lastname) }}
```
```text resultados renderizados.txt theme={null}
Hi Monty Python
```
## format\_currency (obsoleto)
> [!WARNING]
>
> **Nota**: este filtro está [obsoleto](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions). En su lugar, utiliza el filtro [format\_currency\_value](#format_currency_value).
## format\_currency\_value
Da formato a un número como divisa, utilizando la divisa predeterminada del portal y la configuración regional especificada como parámetro. Reemplaza el filtro obsoleto [format\_currency](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions#format-currency).
```text hubl.txt theme={null}
{{ 100 | format_currency_value(locale='en-GB', currency='EUR', maxDecimalDigits=6, minDecimalDigits=1) }}
```
```text resultados renderizados.txt theme={null}
€100.0
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `locale` | Cadena | [La etiqueta de lenguaje local de Java](https://www.oracle.com/java/technologies/javase/jdk8-jre8-suported-locales.html). El valor predeterminado es la página `locale.Format : ISO639LanguageCodeInLowercase-ISO3166CountryCodeInUppercase`. |
| `currency` | Cadena | El [código ISO 4217 en orden alfabético](https://en.wikipedia.org/wiki/ISO_4217) de la divisa, por opción predeterminada, es la divisa predeterminada del portal. No se aceptan códigos numéricos. |
| `minDecimalDigits` | Número | El mínimo de dígitos decimales que se pueden utilizar. De manera predeterminada, utiliza el número de decimales estándar de la moneda. |
| `maxDecimalDigits` | Número | El máximo de dígitos decimales que se pueden utilizar. De manera predeterminada, utiliza el número de decimales estándar de la moneda. |
## format\_date
Le da formato al componente de fecha de un objeto fecha.
> [!WARNING]
>
> ### Nota:
>
> Este filtro debe usarse únicamente con variables que devuelvan una fecha. A partir del 30 de septiembre de 2024, este filtro ya no devolverá la fecha actual cuando se pase un valor nulo. Después de esa fecha, un valor nulo en el filtro devolverá el 30 de septiembre de 2024.
```text hubl.txt theme={null}
{{ content.publish_date | format_date('long') }}
{{ content.publish_date | format_date('yyyy.MMMM.dd') }}
{{ content.publish_date | format_date('medium', 'America/New_York', 'de-DE') }}
```
```text resultados renderizados.txt theme={null}
November 28, 2022 02022.November.28 28.11.2022
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `format` | `'short'` \| `'medium'` \| `'long'` \| `'full'` \| patrón personalizado | El formato a utilizar. Un patrón personalizado que se basa en el [Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns). |
| `timeZone` | Cadena | La zona horaria de la fecha de salida en el [formato IANA TZDB](https://data.iana.org/time-zones/tzdb/). |
| `locale` | Cadena | La configuración regional a utilizar para formatos adaptados al idioma y región. Consulta la [lista de configuraciones regionales compatibles](https://www.oracle.com/java/technologies/javase/java8locales.html). |
## format\_datetime
Da formato a los componentes de fecha y hora de un objeto fecha. El filtro reemplaza el filtro obsoleto [datetimeformat](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions#datetimeformat-filter). De manera predeterminada, devuelve una fecha y hora en la zona horaria UTC-0.
> [!WARNING]
>
> ### Nota:
>
> Este filtro debe usarse únicamente con variables que devuelvan una fecha. A partir del 30 de septiembre de 2024, este filtro ya no devolverá la fecha actual cuando se pase un valor nulo. Después de esa fecha, un valor nulo en el filtro devolverá el 30 de septiembre de 2024.
```text hubl.txt theme={null}
{{ content.publish_date | format_datetime('medium', 'America/New_York', 'de-DE') }}
```
```text resultados renderizados.txt theme={null}
12/31/69 7:00 PM
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `format` | `'short'` \| `'medium'` \| `'long'` \| `'full'` \| patrón personalizado | El formato a utilizar. Puede ser uno de los siguientes [Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns). Cuando se utiliza `long` o `full`, la marca de tiempo incluirá una Z para indicar la hora UTC de desplazamiento cero (por ejemplo, `2:23:00 PM Z`). Para eliminar el designador Z, tienes que especificar un `timeZone`. |
| `timeZone` | Cadena | La zona horaria de la fecha de salida en el [formato IANA TZDB](https://data.iana.org/time-zones/tzdb/). De forma predeterminada, devuelve la hora UTC. |
| `locale` | Cadena | La configuración regional a utilizar para formatos adaptados al idioma y región. Consulta la [lista de configuraciones regionales compatibles](https://www.oracle.com/java/technologies/javase/java8locales.html). |
## format\_number
Le da formato a un número según la configuración regional específica. Incluye un segundo parámetro para ajustar la precisión decimal máxima.
```text hubl.txt theme={null}
{{ 1000|format_number('en-US') }}
{{ 1000.333|format_number('fr') }}
{{ 1000.333|format_number('en-US', 2) }}
```
```text resultados renderizados.txt theme={null}
1,000
1 000,333
1,000.33
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `locale` | Cadena | La configuración regional que se utilizará para el formato. Consulta la [lista de configuraciones regionales compatibles](https://www.oracle.com/java/technologies/javase/java8locales.html). |
| `maxDecimalDigits` | Número | El máximo de dígitos decimales que se pueden utilizar. De forma predeterminada, utilizará el número de dígitos decimales del valor introducido. |
## format\_time
Le da formato al componente de fecha de un objeto fecha.
> [!WARNING]
>
> ### Nota:
>
> Este filtro debe usarse únicamente con variables que devuelvan una fecha. A partir del 30 de septiembre de 2024, este filtro ya no devolverá la fecha actual cuando se pase un valor nulo. Después de esa fecha, un valor nulo en el filtro devolverá el 30 de septiembre de 2024.
```text hubl.txt theme={null}
{{ content.updated | format_time('long') }}
{{ content.updated | format_time('hh:mm a') }}
{{ content.updated | format_time('medium', 'America/New_York', 'de-DE') }}
```
```text resultados renderizados.txt theme={null}
3:25:06 PM Z 03:25 PM 10:25:44
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `format` | `'short'` \| `'medium'` \| `'long'` \| `'full'` \| patrón personalizado | El formato a utilizar. Puede ser uno de los siguientes [Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns). Cuando se utiliza `long` o `full`, la marca de tiempo incluirá una Z para indicar la hora UTC de desplazamiento cero (por ejemplo, `2:23:00 PM Z`). Para eliminar el designador Z, tienes que especificar un `timeZone`. |
| `timeZone` | Cadena | La zona horaria de la fecha de salida en el [formato IANA TZDB](https://data.iana.org/time-zones/tzdb/). De forma predeterminada, devuelve la hora UTC. |
| `locale` | Cadena | La configuración regional a utilizar para formatos adaptados al idioma y región. Consulta la [lista de configuraciones regionales compatibles](https://www.oracle.com/java/technologies/javase/java8locales.html). |
## fromjson
Convierte una cadena JSON en un objeto.
```text hubl.txt theme={null}
{% set obj ='{ "name":"Brian","role":"Owner" }' %}
{{ obj|fromjson }}
```
```text resultados renderizados.txt theme={null}
{role=Owner, name=Brian}
```
## geo\_distance
Calcula la distancia elipsoidal en 2D entre dos puntos de la Tierra.
```text hubl.txt theme={null}
{{ row.location | geo_distance(37.3435, -122.0344, "mi") }} MI
```
```text resultados renderizados.txt theme={null}
861.1655563461395 MI
```
## groupby
El filtro groupby agrupa una secuencia de objetos por un atributo en común. El parámetro define el atributo común por el cual agrupar.
```html example.html theme={null}
{% for group in contents|groupby("blog_post_author") %}
```
| Parámetro | Descripción |
| - | - |
| `attribute` | El atributo por el que se va a agrupar. |
## indent
Indenta el texto dentro de una longitud utilizando espacios en blanco. Este filtro no es especialmente útil ni recomendable, ya que el compilador HTML de HubSpot elimina los espacios en blanco de forma automática. Sin embargo, se menciona aquí para ofrecer una descripción completa. El siguiente ejemplo muestra el filtro `indent` aplicado a una variable dentro de una etiqueta `
`, de modo que los espacios en blanco no se eliminen. El primer parámetro controla la cantidad de espacios en blanco y el segundo booleano cambia la sangría de la primera línea.
```html example.html theme={null}
{% set var = "string to indent" %}
{{ var|indent(2, true) }}
```
```text resultados renderizados.txt theme={null}
string to indent
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `width` | Numérico | La cantidad de espacios en blanco que se aplicarán. |
| `indent-first` | Booleano | Si se establece como `true`, se indenta la primera línea. |
## int
Convierte el valor en un entero. Si la conversión no funciona, devolverá `0`. Puedes anular este valor predeterminado utilizando el primer parámetro.
```text hubl.txt theme={null}
{% set string="25" %}
{{ string|int + 17 }}
```
```text resultados renderizados.txt theme={null}
42
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `default` | Numérico | Entero a devolver si la conversión no funciona. |
## intersect
Este filtro devuelve la intersección de dos conjuntos o listas. La lista que el filtro devuelve contiene todos los elementos únicos que están contenidos en ambas listas.
```text hubl.txt theme={null}
{{ [1, 2, 3]|intersect([2, 3, 4, 5]) }}
```
```text resultados renderizados.txt theme={null}
[2, 3]
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `list` | Matriz | La segunda lista con la que se comparará la lista original para encontrar su intersección. |
## ipaddr
Se evalúa como `true` si el valor es una dirección IPv4 o IPv6 válida.
```text hubl.txt theme={null}
{% set ip = "1.0.0.1" %}
{% if ip|ipaddr %}
The string is a valid IP address
{% endif %}
```
```text resultados renderizados.txt theme={null}
The string is a valid IP address
```
## join
Devuelve una cadena que es la concatenación de las cadenas de la secuencia. El separador entre elementos es una cadena vacía por opción predeterminada, puedes definirlo con un parámetro opcional. El segundo parámetro puede utilizarse para especificar un atributo a unir.
```text hubl.txt theme={null}
{% set my_list = [1, 2, 3] %}
{% set sep = "---" %}
{{ my_list|join }}
{{ my_list|join("|") }}
{{ my_list|join(sep) }}
```
```text resultados renderizados.txt theme={null}
123 1|2|3 1---2---3
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `delimiter` | Cadena | El delimitador a utilizar al concatenar cadenas. |
| `attribute` | Variable de HubL | Atributo de valor para unir en un objeto. |
## last
Devuelve el último elemento de una secuencia.
```text hubl.txt theme={null}
{% set my_sequence = ["Item 1", "Item 2", "Item 3"] %}
{% my_sequence|last %}
```
```text resultados renderizados.txt theme={null}
Item 3
```
## length
Devuelve el número de elementos de una secuencia o estructura de datos.
```text hubl.txt theme={null}
{% set services = ["Web design", "SEO", "Inbound Marketing", "PPC"] %}
{{ services|length }}
```
```text resultados renderizados.txt theme={null}
4
```
## list
Convierte los valores en una lista. Las cadenas se devolverán como caracteres separados a menos que estén contenidas en delimitadores de secuencia de corchetes `[ ]`.
```text hubl.txt theme={null}
{% set one = 1 %}
{% set two = 2 %}
{% set three = "three" %}
{% set four = ["four"] %}
{% set list_num = one|list + two|list + three|list + four|list %}
{{ list_num }}
```
```text resultados renderizados.txt theme={null}
[1, 2, t, h, r, e, e, four]
```
## log
Calcula el logaritmo natural de un número.
```text hubl.txt theme={null}
{{ 10|log }}
{{ 65536|log(2) }}
```
```text resultados renderizados.txt theme={null}
2.302585092994046 16.0
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `base` | Número | La base a utilizar para el cálculo logarítmico. |
## lower
Convierte todas las letras de un valor a minúsculas.
```text hubl.txt theme={null}
{% set text="Text to MAKE LowercaSe" %}
{{ text|lower }}
```
```text resultados renderizados.txt theme={null}
text to make lowercase
```
## map
Aplica un filtro a una secuencia de objetos o busca un atributo. Este filtro es especialmente útil cuando trabajas con listas de objetos y solo necesitas obtener un valor en particular.
El uso básico es la asignación en un atributo. Por ejemplo, si deseas utilizar la lógica condicional para comprobar si un valor está presente en un atributo particular de un dicc. Como alternativa, puedes permitir que aplique un filtro pasando el nombre del filtro seguido de los argumentos.
```text hubl.txt theme={null}
{# Usage 1 #}
Apply a filter to a sequence:
{% set seq = ["item1", "item2", "item3"] %}
{{ seq|map("upper") }}
{# Usage 2 #}
Look up an attribute:
{{ content|map("currentState")}}
```
```text resultados renderizados.txt theme={null}
Apply a filter to a sequence: [ITEM1, ITEM2, ITEM3]
Look up an attribute: [DRAFT]
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `filter` | Filtro a aplicar a la secuencia de objetos. | |
## md5
Calcula el [hash md5](https://en.wikipedia.org/wiki/MD5) del objeto dado.
```text hubl.txt theme={null}
{{ content.absolute_url|md5 }}
```
```text resultados renderizados.txt theme={null}
923adb4ce05a4c6342c04c80be88d15e
```
## minus\_time
Resta una cantidad de tiempo a un objeto de fecha y hora.
```text hubl.txt theme={null}
{% set date = "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{{ date }}
{{ date|minus_time(2, "months") }}
```
```text resultados renderizados.txt theme={null}
2018-07-14 14:31:30 2018-05-14 14:31:30
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `diff` | Numérico | Cantidad a restar. |
| `timeunit` | Cadena | Las unidades de tiempo válidas son `nanos` , `micros` , `millis` , `seconds` , `minutes` , `hours` , `half_days` , `days` , `weeks` , `months` , `years` , `decades` , `centuries` , `millennia` y `eras` . |
## multiply
Multiplica un valor por un número. Funciona igual que el [\ operador \*](/docs/cms/reference/hubl/operators-and-expression-tests).
```text hubl.txt theme={null}
{% set n = 20 %}
{{ n|multiply(3) }}
```
```text resultados renderizados.txt theme={null}
60
```
## plus\_time
Agrega una cantidad de tiempo a un objeto de fecha y hora.
```text hubl.txt theme={null}
{% set date = "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ") %}
{{ date }}
{{ date|plus_time(5, "days") }}
```
```text resultados renderizados.txt theme={null}
2018-07-14 14:31:30 2018-07-19 14:31:30
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `diff` | Numérico | Cantidad a restar. |
| `timeunit` | Cadena | Las unidades de tiempo válidas son `nanos` , `micros` , `millis` , `seconds` , `minutes` , `hours` , `half_days` , `days` , `weeks` , `months` , `years` , `decades` , `centuries` , `millennia` y `eras` . |
## pprint
Muestra una variable con formato legible. Muestra el tipo de variable y otra información útil para la depuración.
```text hubl.txt theme={null}
{% set this_var ="Variable that I want to debug" %}
{{ this_var|pprint }}
```
```text resultados renderizados.txt theme={null}
(String: Variable that I want to debug)
```
## random
Devuelve un elemento aleatorio de la secuencia.
> [!WARNING]
>
> ### Nota:
>
> Cuando uses este filtro, la página se [prerrenderizará](/docs/cms/best-practices/testing-staging-performance/prerendering) periódicamente en lugar de cada vez que se actualice el contenido de la página. Esto significa que el contenido filtrado no se actualizará cada vez que se cargue la página de nuevo.
>
> Esto puede no ser un problema para ciertos tipos de contenido, como mostrar una lista aleatoria de publicaciones de blog. Sin embargo, si necesitas que el contenido cambie al azar cada vez que se carga una página, deberías usar JavaScript para mostrar de forma aleatoria el contenido del lado del cliente.
```text hubl.txt theme={null}
{% for content in contents|random %}
```
## regex\_replace
Busca un patrón de expresión regular y lo sustituye por una secuencia de caracteres. El primer argumento es un patrón de expresión regular estilo RE2, el segundo es la cadena de sustitución.
Más información sobre [la sintaxis regex RE2](https://github.com/google/re2/wiki/Syntax).
```text hubl.txt theme={null}
{{ "contact-us-2"|regex_replace("[^a-zA-Z]", "") }}
```
```text resultados renderizados.txt theme={null}
contactus
```
## reject
Filtra una secuencia de objetos aplicando una [prueba de expresión](/docs/cms/reference/hubl/operators-and-expression-tests) al objeto y rechazando los que tienen éxito en la prueba.
```text hubl.txt theme={null}
{% set some_numbers = [10, 12, 13, 3, 5, 17, 22] %}
{{ some_numbers|reject("even") }}
```
```text resultados renderizados.txt theme={null}
[13, 3, 5, 17]
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `exp_text` | Cadena | El nombre de la [prueba de expresión](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests) que se aplicará al objeto. |
## rejectattr
Filtra una secuencia de objetos aplicando una prueba a un atributo de un objeto y rechazando los que tienen éxito en la prueba.
```html example.html theme={null}
{% for content in contents|rejectattr("post_list_summary_featured_image") %}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `attribute_name` | Cadena | Especifica el atributo a seleccionar. Puedes acceder a los atributos anidados utilizando la notación de puntos. |
| `exp_test` | Cadena | el nombre de la [prueba de expresión](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests) que se aplicará al objeto. |
## render
Procesa cadenas que contienen HubL de manera anticipada para que el resultado pueda pasarse a otros filtros.
```html example.html theme={null}
{{ personalization_token("contact.lastname", "default value")|render|lower }}
```
```html example.html theme={null}
mclaren
```
## replace
Reemplaza todas las instancias de una subcadena por una nueva.
```html example.html theme={null}
{% if topic %}
Posts about {{ page_meta.html_title|replace("Blog | ", "") }}
{% endif %}
```
```html example.html theme={null}
Posts about topic name
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `old` | Cadena | La subcadena que se debe reemplazar. |
| `new` | Cadena | La subcadena que será reemplazada. |
| `count` | Número | Si se proporciona, solo se reemplazan las primeras ocurrencias. |
## reverse
Revierte el objeto o devuelve un iterador que recorre el objeto en sentido inverso. Para invertir una lista utiliza [.reverse()](/docs/cms/reference/hubl/functions#reverse)
```text hubl.txt theme={null}
{% set nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] %}
{% for num in nums|reverse %}
{{ num }}
{% endfor %}
```
```text resultados renderizados.txt theme={null}
10 9 8 7 6 5 4 3 2 1
```
## root
Extrae la raíz cuadrada de un valor.
```text hubl.txt theme={null}
{{ 16|root }}
{{ 625|root(4) }}
```
```text resultados renderizados.txt theme={null}
4 5
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `nth_root` | Número | La raíz enésima a utilizar para el cálculo. |
## round
Redondea un número con la precisión especificada.
```text hubl.txt theme={null}
{{ 52.5|round }}
{{ 52.5|round(0, "floor") }}
```
```text resultados renderizados.txt theme={null}
53 52
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `precision` | Número | Especifica la precisión del redondeo. |
| `rounding_method` | `'common'` (predeterminado) \| `'ceil'` \| `'floor'` | las opciones incluyen `common` redondea hacia arriba o hacia abajo (predeterminado); `ceil` siempre redondea hacia arriba; `floor` siempre redondea hacia abajo. |
## safe
Marca el valor como seguro, lo que evita que se escape en entornos con escape automático activado.
```text hubl.txt theme={null}
{{ content.post_list_content|safe }}
```
```html example.html theme={null}
HTML post content that is not escaped.
```
## sanitize\_html
Depura el contenido de una entrada HTML para la salida de contenido de texto enriquecido. Acepta una cadena y luego elimina las etiquetas HTML que no están permitidas. Utiliza este filtro para las variables HubL que se usan en HTML y que deberían permitir un HTML seguro.
Puedes incluir los siguientes parámetros para permitir los específicos tipos de etiquetas HTML: `FORMATTING`, `BLOCKS`, `STYLES`, `LINKS`, `TABLES`, `IMAGES`. Por ejemplo, `sanitize_html(IMAGES)`.
El uso de `sanitize_html` incluirá todos los parámetros en el filtro.
También puedes incluir un parámetro `STRIP` para eliminar todo el HTML. Todo el contenido también se ejecuta mediante `escape_jinjava` para evitar la interpretación anidada.
```text hubl.txt theme={null}
{% set escape_string = "This
markup is printed as text.
" %}
{{ escape_string|sanitize_html("IMAGES") }}
```
```html example.html theme={null}
This markup is printed as text.
```
## select
Filtra una secuencia de objetos aplicando una prueba al objeto y seleccionando solo los que tienen éxito en la prueba.
```text hubl.txt theme={null}
{% set some_numbers = [10, 12, 13, 3, 5, 17, 22] %}
{{ some_numbers|select("even") }}
```
```html example.html theme={null}
[10, 12, 22]
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `exp_text` | Cadena | La prueba de expresión que se aplicará al objeto. |
## selectattr
Filtra una secuencia de objetos aplicando una prueba a un atributo de un objeto y seleccionando solo los que tienen éxito en la prueba.
```html example.html theme={null}
{% for content in contents|selectattr("post_list_summary_featured_image") %}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `attribute_name` | Cadena | El atributo que debe ponerse a prueba. Puedes acceder a los atributos anidados utilizando la notación de puntos. |
| `exp_test` | Cadena | el nombre de la [prueba de expresión](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests) que se aplicará al objeto. |
| `val` | Cadena | Valor a comprobar. |
## shuffle
Organiza de forma aleatoria el orden de iteración a través de una secuencia. El siguiente ejemplo mezcla un bucle de blog estándar.
> [!WARNING]
>
> ### Nota:
>
> Cuando uses este filtro, la página se [prerrenderizará](/docs/cms/best-practices/testing-staging-performance/prerendering) periódicamente en lugar de cada vez que se actualice el contenido de la página. Esto significa que el contenido filtrado no se actualizará cada vez que se cargue la página de nuevo.
>
> Esto puede no ser un problema para ciertos tipos de contenido, como mostrar una lista aleatoria de publicaciones de blog. Sin embargo, si necesitas que el contenido cambie al azar cada vez que se carga una página, deberías usar JavaScript para mostrar de forma aleatoria el contenido del lado del cliente.
```html example.html theme={null}
{% for content in contents|shuffle %}
```
## slice
Corta un iterador y devuelve una lista de listas que contienen esos elementos. El primer parámetro especifica cuántos elementos serán cortados y el segundo parámetro especifica los caracteres para rellenar los cortes vacíos.
```html example.html theme={null}
{% set items = ["laptops", "tablets", "smartphones", "smart watches", "TVs"] %}
{% for column in items|slice(3," ") %}
{% for item in column %}
{{ item }}
{% endfor %}
{% endfor %}
```
```html example.html theme={null}
laptops
tablets
smartphones
smart watches
TVs
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `slices` | Numérico | Cuántos artículos se cortarán. |
| `filler` | Cadena | Especifica los caracteres para rellenar los cortes vacíos. |
## sort
Ordena un iterable. Este filtro requiere que todos los parámetros se ordenen por un atributo en HubSpot. El primer parámetro es un booleano para invertir el orden de clasificación y el segundo parámetro determina si el orden distingue entre mayúsculas y minúsculas. El último parámetro especifica un atributo por el que ordenar. En el siguiente ejemplo, las entradas de un blog se representan y se ordenan alfabéticamente por nombre.
```html example.html theme={null}
{% set my_posts = blog_recent_posts("default", limit=5) %}
{% for item in my_posts|sort(False, False, "name") %}
{{ item.name }}
{% endfor %}
```
```html example.html theme={null}
A post
B post
C post
D post
E post
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `reverse` | Booleano | Establécelo como `true` para invertir el orden de clasificación. |
| `case_sensitive` | Booleano | Establécelo como `true` para que el orden distinga entre mayúsculas y minúsculas. |
| `attribute` | Cadena | Atributo por el que ordenar. Puedes omitirlo al ordenar una lista. |
## split
Divide la cadena de entrada en una lista usando el separador indicado. El primer parámetro especifica el separador entre el que se divide la variable y el segundo parámetro determina cuántas veces debe dividirse la variable. El resto de los artículos permanecerán en el grupo. En el siguiente ejemplo, una cadena de nombres se divide en el `;` para los primeros cuatro nombres.
```html example.html theme={null}
{% set string_to_split = "Mark; Irving; Helly; Dylan; Milchick; Harmony;" %}
{% set names = string_to_split|split(";", 4) %}
{% for name in names %}
{{ name }}
{% endfor %}
```
```html example.html theme={null}
Mark
Irving
Helly
Dylan; Milchick; Harmony;
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `character_to_split_by` | Cadena | Especifica el separador entre el que se divide la variable. |
| `number_of_splits` | Número | Determina cuántas veces debe dividirse la variable. Los elementos restantes permanecerán agrupados. |
## string
Convierte un tipo de variable diferente en una cadena. En el siguiente ejemplo, un número entero se convierte en una cadena (se utiliza `pprint` para confirmar el cambio de tipo de la variable).
```text hubl.txt theme={null}
{% set number_to_string = 45 %}
{{ number_to_string|string|pprint }}
```
```text resultados renderizados.txt theme={null}
(String: 45)
```
## striptags
Elimina las etiquetas SGML y XML, y reemplaza los espacios en blanco adyacentes por un espacio. Este filtro puede utilizarse para eliminar cualquier etiqueta HTML de una variable.
```html example.html theme={null}
{% set some_html = "
Some text
" %}
{{ some_html|striptags }}
```
```html example.html theme={null}
some text
```
## strtodate
Convierte una cadena y un formato de fecha en un objeto de fecha.
```text hubl.txt theme={null}
{{ '3/3/21'|strtodate('M/d/yy') }}
```
```text resultados renderizados.txt theme={null}
2021-03-03 00:00:00
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `dateFormat` | Cadena | El [formato de fecha](https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html) a utilizar. |
## strtotime
Convierte una cadena de fecha y hora y un formato datetime en un objeto de fecha y hora.
```text hubl.txt theme={null}
{{ "2018-07-14T14:31:30+0530"|strtotime("yyyy-MM-dd'T'HH:mm:ssZ")|unixtimestamp }}
```
```text resultados renderizados.txt theme={null}
1531558890000
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `datetimeFormat` | Cadena | El [formato de fecha y hora](https://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html) a utilizar. |
## sum
Agrega valores numéricos en una secuencia. El primer parámetro puede especificar un atributo opcional y el segundo parámetro establece un valor a devolver si no hay nada en la variable a sumar.
```text hubl.txt theme={null}
// Simple sum
{% set sum_this = [1, 2, 3, 4, 5] %}
{{ sum_this|sum }}
// Sum of attribute
{% set items = [15, 10] %}
{% set dict_var = [{"name": "Item1", "price": "20"}, {"name": "Item2", "price": "10"}] %}
Total: {{ dict_var|sum(attribute="price") }}
```
```text resultados renderizados.txt theme={null}
15 Total: 30
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `attribute` | Cadena | Atributo a sumar. |
| `return_if_nothing` | Cadena | Valor a devolver si no hay nada en la variable a sumar. |
## symmetric\_difference
Este filtro devuelve la diferencia simétrica de dos conjuntos o listas. La lista que el filtro devuelve contiene todos los elementos únicos que están en la primera lista pero no en la segunda, o están en la segunda lista pero no en la primera.
```text hubl.txt theme={null}
{{ [1, 2, 3]|symmetric_difference([2, 3, 4, 5]) }}
```
```text resultados renderizados.txt theme={null}
[1, 4, 5]
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `list` | Matriz | La segunda lista con la que comparar para encontrar la diferencia simétrica con la lista original. |
## title
Devuelve una versión del valor en formato de título (es decir, las palabras comenzarán con letras mayúsculas y el resto de los caracteres estarán en minúsculas).
```text hubl.txt theme={null}
{% set my_title="my title should be title case" %}
{{ my_title|title }}
```
```text resultados renderizados.txt theme={null}
My Title Should Be Title Case
```
## tojson
Escribe un objeto como una cadena JSON.
```text hubl.txt theme={null}
{% for content in contents %}
{{ content.blog_post_author|tojson }}
{% endfor %}
```
```json example.json theme={null}
{
"portalId": 1234567,
"id": 12312253109,
"created": 1566413741989,
"updated": 1566414012799,
"deletedAt": 0,
"fullName": "Sample User",
"email": "sampleUser@example.com",
"userId": null,
"username": null,
"slug": "sample-user",
"jsonBody": {
"avatar": "https://app.hubspot.com/settings/avatar/109d6874a0cb066c1c7263ac5df6ce7a",
"bio": "Sample Bio",
"facebook": "",
"linkedin": "",
"twitter": "",
"website": "https://www.hubspot.com"
},
"bio": "Sample Bio",
"facebook": "",
"linkedin": "",
"avatar": "https://app.hubspot.com/settings/avatar/109d6874a0cb066c1c7263ac5df6ce7a",
"gravatarUrl": "https://app.hubspot.com/settings/avatar/108bb5ac667ded34796271437dfe8d58",
"twitterUsername": "",
"hasSocialProfiles": false,
"website": "https://www.hubspot.com",
"twitter": "",
"displayName": "Sample User"
}
```
## trim
Elimina los espacios en blanco iniciales y finales. HubSpot ya recorta los espacios en blanco del marcado, pero este filtro está documentado para que sea más completo.
```text hubl.txt theme={null}
{{ " remove whitespace " }}
{{ " remove whitespace "|trim }}
```
```text resultados renderizados.txt theme={null}
remove whitespace remove whitespace
```
## truncate
Corta el texto después de un determinado número de caracteres. El valor predeterminado es 255. Los caracteres HTML se incluyen en este conteo.
> [!WARNING]
>
> **Nota:** ya que este filtro depende de los espacios entre palabras para acortar las cadenas, es posible que no funcione correctamente en idiomas que no los utilizan, como el japonés.
```text hubl.txt theme={null}
{{ "I only want to show the first sentence. Not the second."|truncate(40) }}
{{ "I only want to show the first sentence. Not the second."|truncate(35, true, "..........") }}
```
```text resultados renderizados.txt theme={null}
I only want to show the first sente..........
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `number_of_characters` | Número | Número de caracteres permitidos antes de cortar el texto. Por opción predeterminada es 255. |
| `breakword` | Booleano | Si es `true`, el filtro cortará el texto a lo largo. En el caso contrario, si es `false`, se descartará la última palabra. |
| `end` | Cadena | Anula los caracteres finales '...' predeterminados después del corte. |
## truncatehtml
Corta una cadena, respetando el marcado HTML (es decir, cerrará correctamente todas las etiquetas anidadas). Esto evitará que una etiqueta permanezca abierta después del corte. Los caracteres HTML no cuentan en el total de caracteres.
> [!WARNING]
>
> **Nota:** ya que este filtro depende de los espacios entre palabras para acortar las cadenas, es posible que no funcione correctamente en idiomas que no los utilizan, como el japonés.
```html example.html theme={null}
{% set html_text = "
I want to truncate this text without breaking my HTML
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `number_of_characters` | Número | Número de caracteres permitidos antes de cortar el texto. Por opción predeterminada es 255. |
| `end` | Cadena | Anula los caracteres finales '...' predeterminados después del corte. |
| `breakword` | Booleano | Valor booleano. Si es `true`, el filtro cortará el texto a lo largo. Si es `false` (predeterminado), se descartará la última palabra. Si solo utilizas uno de los parámetros opcionales, utiliza argumentos de palabra clave, como`truncatehtml(70, breakwords = false)`. |
## unescape\_html
Convierte texto con entidades codificadas en HTML a sus equivalentes en Unicode.
```text hubl.txt theme={null}
{% set escape_string = "me & you" %}
{{ escape_string|unescape_html }}
```
```text resultados renderizados.txt theme={null}
me & you
```
## union
Este filtro devuelve la unión de dos conjuntos o listas. La lista que el filtro devuelve contiene todos los elementos únicos que están en cualquiera de las dos listas.
```text hubl.txt theme={null}
{{ [1, 2, 3]|union([2, 3, 4, 5]) }}
```
```text resultados renderizados.txt theme={null}
[1, 2, 3, 4, 5]
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `list` | Matriz | La segunda lista a unir con la lista original. |
## unique
Este filtro extrae un conjunto único de una secuencia o dicc. de objetos. Al filtrar un dicc., como una lista de mensajes devueltos por una función, puedes especificar qué atributo se utiliza para desduplicar los elementos en el dicc.
```text hubl.txt theme={null}
{% set my_sequence = ["one", "one", "two", "three" ] %}
{{ my_sequence|unique }}
```
```text resultados renderizados.txt theme={null}
[one, two, three]
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `attr` | Cadena | Especifica el atributo que debe utilizarse al filtrar un valor de dicc. |
## unixtimestamp
Este filtro convierte un objeto de fecha y hora en una marca de tiempo Unix.
> [!WARNING]
>
> ### Nota:
>
> Este filtro debe usarse únicamente con variables que devuelvan una fecha. A partir del 30 de septiembre de 2024, este filtro ya no devolverá la fecha actual cuando se pase un valor nulo. Después de esa fecha, un valor nulo en el filtro devolverá el `September 30, 2024`.
```text hubl.txt theme={null}
{{ local_dt }}
{{ local_dt|unixtimestamp }}
```
```text resultados renderizados.txt theme={null}
2017-01-30 17:11:44 1485814304000
```
## upper
Convierte todas las letras de un valor a mayúsculas.
```text hubl.txt theme={null}
{% set text="text to make uppercase" %}
{{ text|upper }}
```
```text resultados renderizados.txt theme={null}
TEXT TO MAKE UPPERCASE
```
## urlencode
Escapa y codifica la URL de una cadena usando el formato UTF-8. Acepta tanto diccionarios como cadenas regulares, así como iterables por pares.
```text hubl.txt theme={null}
{% set encode_value="Escape & URL encode this string" %}
{{ encode_value|urlencode }}
```
```text resultados renderizados.txt theme={null}
Escape+%26+URL+encode+this+string
```
## urldecode
Decodifica las cadenas de URL codificadas de vuelta a la URL original. Acepta tanto diccionarios como cadenas regulares, así como iterables por pares.
```text hubl.txt theme={null}
{% set decode_value="Escape+%26+URL+decode+this+string" %}
{{ decode_value|urldecode }}
```
```text resultados renderizados.txt theme={null}
Escape & URL decode this string
```
## urlize
Convierte direcciones URL en texto sin formato a enlaces en los que se puede hacer clic. Si le pasas al filtro un número entero adicional, acortará las URL a ese número. El segundo parámetro es un booleano que dicta si el enlace es rel="no follow". El último parámetro permite especificar si el enlace se abrirá en una nueva pestaña.
| Parámetro | Tipo | Descripción |
| - | - | - |
| `shorten_text` | Número | Número entero que acortará las URL al número deseado. |
| `no_follow` | Booleano | Si se establece como `true`, el enlace incluirá `rel="no follow"`. |
| `target="_blank"` | Cadena | Especifica si el enlace se abrirá en una pestaña nueva. |
```text hubl.txt theme={null}
{{ "http://hubspot.com/"|urlize }}
{{ "http://hubspot.com/"|urlize(10,true) }}
{{ "http://hubspot.com/"|urlize("",true) }}
{{ "http://hubspot.com/"|urlize("",false,target="_blank") }}
```
```html example.html theme={null}
http://hubspot.com/http://...http://hubspot.com/http://hubspot.com/
```
## wordcount
Cuenta el número de palabras de una cadena.
> [!WARNING]
>
> Si la cadena contiene HTML, utiliza el filtro `striptags` para obtener un recuento preciso.
```text hubl.txt theme={null}
{% set count_words = "Count the number of words in this variable" %}
{{ count_words|wordcount }}
```
```text resultados renderizados.txt theme={null}
8
```
## wordwrap
Hace que las palabras se cierren al llegar a un número determinado de caracteres. Esto funciona mejor en una etiqueta `
` porque HubSpot elimina los espacios en blanco de manera predeterminada.
```text hubl.txt theme={null}
{% set wrap_text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur, ipsum non sagittis euismod, ex risus rhoncus lectus, vel maximus leo enim sit amet dui. Ut laoreet ultricies quam at fermentum." %}
{{ wrap_text|wordwrap(10) }}
```
```text resultados renderizados.txt theme={null}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur, ipsum
non sagittis euismod, ex risus rhoncus lectus, vel maximus leo enim sit amet
dui. Ut laoreet ultricies quam at fermentum.
```
| Parámetro | Descripción |
| - | - |
| `character_count` | Número de caracteres para cerar el contenido. |
## xmlattr
Crea una cadena de atributos HTML y XML, basada en los elementos de un dicc. Todos los valores que no sean nulos ni indefinidos se escapan automáticamente. Antepone un espacio al elemento si el filtro devuelve algún valor, a menos que el primer parámetro sea falso.
```html example.html theme={null}
{% set html_attributes = {"class": "bold", "id": "sidebar"} %}
```
```html example.html theme={null}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `autospace` | Booleano | Establécelo como `true` para añadir un espacio delante del elemento. |
# Funciones de HubL
Source: https://developers.hubspot.es/docs/cms/reference/hubl/functions
Una lista de referencia de todas las funciones disponibles de HubL.
Las funciones en HubL son similares a los filtros porque los dos aceptan parámetros y generan un valor. Sin embargo, no es necesario aplicar todas las funciones al valor inicial de una plantilla, ya que estas interactúan con otras áreas de tu entorno en HubSpot.
Si mantienes un sitio web antiguo, también puedes consultar la [lista de funciones de HubL obsoletas](/docs/cms/versions-deprecations/deprecated/hubl/filters-functions).
A continuación, encontrarás más información sobre cada función de HubL y su sintaxis.
## append
Agrega un solo elemento al final de una lista.
```text hubl.txt theme={null}
{% set numbers_under_5 = [1,2,3] %}
{% do numbers_under_5.append(4) %}
{{numbers_under_5}}
```
```text resultados renderizados.txt theme={null}
[1, 2, 3, 4]
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `item` | Cualquiera | Elemento que se agregará a la lista. |
## blog\_all\_posts\_url
La función `blog_all_posts_url` da como resultado la URL completa de la página de índice de todas las publicaciones del blog especificado.
El siguiente ejemplo muestra cómo se puede utilizar esta función como la etiqueta `href` de un ancla.
```html example.html theme={null}
All Marketing blog posts
```
```html example.html theme={null}
All Marketing blog posts
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `selected_blog` | ID del blog o "default" | Especifica qué blog utilizar. El ID del blog se obtiene del [campo del blog en el módulo](/docs/cms/reference/fields/module-theme-fields#blog). |
## blog\_author\_url
La función `blog_author_url` da como resultado la URL completa de la página del autor del blog especificado.
El siguiente ejemplo muestra cómo se puede utilizar esta función como la etiqueta `href` de un ancla. Que se puede combinar con `blog_authors` como se muestra en los ejemplos de esa función.
```html example.html theme={null}
Brian Halligan
```
```html example.html theme={null}
Brian Halligan
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `selected_blog` | ID del blog o el blog "default" | Especifica en qué blog existe la página del autor. Puedes especificar un blog por su ID o utilizar la variable `"default"` para seleccionar el blog predeterminado. El ID del blog está dado por el [campo de blog del módulo](/docs/cms/reference/fields/module-theme-fields#blog). |
| `author_slug` | Cadena o variable de HubL | Especifica el autor al que se va a enlazar. Puedes utilizar la variable `content.blog_post_author.slug` o un nombre con guión en minúsculas, por ejemplo: `"jane-doe"`. |
## blog\_authors
La función `blog_authors` da como resultado una secuencia de objetos con los datos del autor para el blog especificado, en orden ascendente según el slug. Esta secuencia se puede almacenar en una variable e iterarla a fin de crear filtros personalizados para las publicaciones del autor.
Se puede obtener el número de artículos publicados de cada autor usando el parámetro `author.live_posts`.
> [!WARNING]
>
> **Nota:** esta función tiene un límite de 250 autores. Esta función también tiene un límite de 10 llamadas por página.
La primera línea del ejemplo siguiente demuestra cómo la función da como resultado una secuencia de objetos de autor. El resto del ejemplo muestra un caso en el que se guarda una secuencia en una variable y luego se itera con los objetos de autor, imprimiendo el conjunto de enlaces a las páginas de los autores. En el ejemplo se asume que el blog tiene 4 autores.
```html example.html theme={null}
{{ blog_authors("default", 250) }}
{% set my_authors = blog_authors("default", 250) %}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `selected_blog` | ID del blog o "default" | Especifica qué blog utilizar, ya sea un blog específico por su ID o el blog predeterminado con `"default"`. El ID del blog está dado por el [campo de blog del módulo](/docs/cms/reference/fields/module-theme-fields#blog). |
| `limit` | Entero | Establece el límite del número de autores que se pueden obtener. |
## blog\_by\_id
La función `blog_by_id` da como resultado un blog con su ID. El siguiente código de ejemplo muestra esta función en uso, que genera una lista de elementos con los hipervínculos.
> [!WARNING]
>
> **Nota:** esta función tiene un límite de 10 llamadas por página.
```html example.html theme={null}
{% set my_blog = blog_by_id(47104297) %}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `selected_blog` | ID del blog o "default" | Especifica qué blog utilizar, ya sea un blog específico por su ID o el blog predeterminado con `"default"`. El ID del blog está dado por el [campo de blog del módulo](/docs/cms/reference/fields/module-theme-fields#blog). |
## blog\_page\_link
La función `blog_page_link` genera la URL de una vista por páginas de la lista de blogs. La función toma un parámetro numérico, que permite generar enlaces para la página actual, la siguiente, la anterior o una página específica. Esta función se utiliza generalmente en el atributo `href` de las etiquetas de ancla de la paginación y debe ser utilizada en la plantilla del listado de blogs.
Los siguientes ejemplos muestran esta función en uso como etiqueta `href` de un ancla. El primer ejemplo muestra la página actual. El segundo ejemplo toma el número 7 como el parámetro para especificar la séptima página. El tercer ejemplo utiliza la variable `next_page_num` para generar un enlace relativo al número de página actual (también puedes utilizar la variable `last_page_num` para la página anterior). El último ejemplo utiliza la variable `current_page_num` y un operador `+` para crear un enlace que esté 4 páginas más adelante de la página actual.
```html example.html theme={null}
Current pagePage 7NextPage Plus 4
```
```html example.html theme={null}
Page 1Page 7NextPage Plus 4
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `page` | Número o variable de HubL | Número de página utilizado para generar la URL o la variable de HubL del número de página. |
## blog\_popular\_posts
Esta función convierte un número determinado de publicaciones populares en una secuencia. Esta secuencia se puede guardar en una variable e iterarla mediante un bucle "for", creando un listado personalizado de las publicaciones más populares.
Los resultados de esta función se almacenan en caché durante seis horas. Para obtener publicaciones de blog usando HubL de una manera que evite el almacenamiento en caché, podrías usar [blog\_recent\_tag\_posts](#blog-recent-tag-posts) en su lugar.
En el siguiente código de ejemplo, la primera línea muestra cómo la función da como resultado una secuencia. La secuencia se guarda como una variable que luego se usa en un [bucle "for"](/docs/cms/reference/hubl/loops). [Toda variable de una publicación de blog](/docs/cms/reference/hubl/variables#blog-variables) debe usar el nombre de cada elemento del bucle en lugar de `content.`. En el ejemplo, se utiliza `pop_post.name`. Esta técnica se puede utilizar en plantillas de blog y páginas de sitio web.
> [!WARNING]
>
> **Nota:** esta función tiene un límite de 200 publicaciones. Esta función también tiene un límite de 10 llamadas por página.
```html example.html theme={null}
{% set pop_posts = blog_popular_posts("default", 5, ["marketing-tips", "sales-tips"], "popular_past_month", "AND") %}
{% for pop_post in pop_posts %}
{{ pop_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Popular post title 1, Popular post title 2, Popular post title 3, Popular post
title 4, Popular post title 5]
Popular post title 1
Popular post title 2
Popular post title 3
Popular post title 4
Popular post title 5
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `selected_blog` | ID del blog o "default" | Especifica qué blog utilizar, ya sea un blog específico por su ID o el blog predeterminado con `"default"`. |
| `limit` | Entero | Especifica el número de publicaciones que se agregarán a la secuencia, hasta un límite de 200. Si no se especifica, el valor predeterminado es 10. |
| `tag_slug` | Matriz | Lista opcional de etiquetas para filtrar las publicaciones. |
| `time_frame` | Cadena | Período de tiempo opcional de las analíticas para filtrar las publicaciones. Por opción predeterminada es `"popular_past_year"`. Debe ser una entre estas:
`"popular_all_time"`
`"popular_past_year"`
`"popular_past_six_months"`
`"popular_past_month"`
Este parámetro es obligatorio cuando se incluye el parámetro `logical_operator`. |
| `logical_operator` | Cadena | Cuando `tag_slug` contiene varias etiquetas, utiliza este operador para filtrar los resultados con la lógica `AND` u `OR`. Por opción predeterminada, esta función utiliza la lógica `OR` para devolver publicaciones con cualquiera de las etiquetas especificadas. Al incluir este parámetro, `time_frame` es obligatorio. |
## blog\_post\_archive\_url
La función `blog_post_archive_url` da como resultado una URL completa que enlaza a la página de índice de los archivos según los valores de fecha dados en el blog especificado. Esta función tiene dos parámetros obligatorios y dos opcionales. El primer parámetro es el ID de un blog o simplemente la palabra clave `"default"`. El segundo es el año de las publicaciones archivadas que deseas mostrar.
Los parámetros opcionales incluyen el mes y el día de las publicaciones archivadas que deseas mostrar, respectivamente.
El siguiente ejemplo muestra cómo se puede utilizar esta función como la etiqueta `href` de un ancla.
```html example.html theme={null}
Posts from July 5th, 2017
```
```html example.html theme={null}
Posts from July 5th, 2017
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `selected_blog` | ID del blog o "default" | Especifica qué blog utilizar, ya sea un blog específico por su ID o el blog predeterminado con `"default"`. |
| `year` | Entero | El año. |
| `month` | Entero | El mes opcional. |
| `day` | Entero | El día opcional. |
## blog\_recent\_author\_posts
La función `blog_recent_author_posts` da como resultado una secuencia de objetos de publicaciones de blog del autor especificado, ordenados según el más reciente. Esta secuencia de publicaciones se pueden almacenar en una variable e iterar con un bucle "for", creando un listado de publicaciones personalizado de un autor en particular.
La función toma tres parámetros. El primer parámetro especifica de qué blog se recogen las publicaciones de un autor. El valor debe ser el parámetro `"default"` o el ID de un blog en particular (disponible en la URL del panel de blogs). El segundo parámetro especifica el autor a utilizar. Este parámetro puede utilizar **`content.blog_post_author.slug`** para usar el autor de la publicación actual o aceptar un nombre con guion en minúsculas como `"brian-halligan"`. El tercer parámetro especifica cuántos posts se obtendrán.
La primera línea del ejemplo de abajo demuestra cómo la función devuelve una secuencia con las publicaciones de un autor. En este ejemplo, en lugar de especificar el nombre de un autor, se utiliza el autor actual de la publicación. La secuencia se guarda en una variable y se repite en bucle. [Toda variable de una publicación de blog](/docs/cms/reference/hubl/variables#blog-variables) debe usar el nombre de cada elemento del bucle en lugar de `content.`. En el ejemplo, se utiliza `author_post.name`. Esta técnica se puede utilizar en las plantillas de blogs y páginas.
> [!WARNING]
>
> **Nota:** Esta función tiene un límite de 200 publicaciones y 10 llamadas por página.
```html example.html theme={null}
{{ blog_recent_author_posts("default", content.blog_post_author.slug, 5 ) }}
{% set author_posts = blog_recent_author_posts("default", content.blog_post_author.slug, 5) %}
{% for author_post in author_posts %}
{{ author_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Post by author title 1, Post by author title 2, Post by author title 3, Post by
author title 4, Post by author title 5]
Post by author title 1
Post by author title 2
Post by author title 3
Post by author title 4
Post by author title 5
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `selected_blog` | ID del blog o blog "default" | Especifica qué blog utilizar. El ID del blog está dado por el [campo de blog del módulo](/docs/cms/reference/fields/module-theme-fields#blog). |
| `author_slug` | Cadena | Especifica el autor que se usará en el filtro. |
| `limit` | Entero | Especifica el número de publicaciones que se agregarán a la secuencia, hasta un límite de 200. |
## blog\_recent\_posts
La función `blog_recent_posts` da como resultado una secuencia de objetos de publicaciones para el blog especificado, ordenados según el más reciente. Esta secuencia de publicaciones se puede guardar en una variable e iterar mediante un bucle "for", creando un listado personalizado de publicaciones de tus publicaciones más populares.
La función toma dos parámetros. El primer parámetro especifica de qué blog se recogen los posts populares. El valor debe ser el parámetro `"default"` o el ID de un blog en particular (disponible en la URL del panel de blogs). El segundo parámetro especifica cuántos posts se obtendrán.
La primera línea del ejemplo de abajo demuestra cómo la función devuelve una secuencia. La secuencia se guarda en una variable y se repite en bucle. [Toda variable de una publicación de blog](/docs/cms/reference/hubl/variables#blog-variables) debe usar el nombre de cada elemento del bucle en lugar de `content.`. En el ejemplo, se utiliza `rec_post.name`. Esta técnica se puede utilizar no sólo en las plantillas de los blogs, sino también en otras páginas.
> [!WARNING]
>
> **Nota:** Esta función tiene un límite de 200 publicaciones y 10 llamadas por página.
```html example.html theme={null}
{{ blog_recent_posts("default", 5) }}
{% set rec_posts = blog_recent_posts("default", 5) %}
{% for rec_post in rec_posts %}
{{ rec_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Recent post title 1, Recent post title 2, Recent post title 3, Recent post
title 4, Recent post title 5]
Recent post title 1
Recent post title 2
Recent post title 3
Recent post title 4
Recent post title 5
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `selected_blog` | ID del blog o "default" | Especifica qué blog utilizar, ya sea un blog específico por su ID o el blog predeterminado con `"default"`. El ID del blog está dado por el [campo de blog del módulo](/docs/cms/reference/fields/module-theme-fields#blog). |
| `limit` | Entero | Especifica el número de publicaciones que se agregarán a la secuencia, máximo 200. |
## blog\_recent\_tag\_posts
La función `blog_recent_tag_posts` da como resultado una secuencia de objetos de publicaciones de blog correspondiente a una o varias etiquetas especificadas, ordenadas según la más reciente. Esta secuencia de publicaciones se puede guardar en una variable e iterar con un bucle "for", creando un listado de publicaciones personalizado según una o varias etiquetas en particular.
En el código de ejemplo a continuación:
* La primera línea muestra cómo la función devuelve una secuencia de publicaciones por etiqueta.
* La segunda línea muestra cómo guardar la función en una variable de secuencia. El resto del código utiliza un bucle "for" para repetir el ciclo de los valores de la variable. [Toda variable de una publicación de blog](/docs/cms/reference/hubl/variables#blog-variables) debe usar el nombre de cada elemento del bucle en lugar de `content.`. En el ejemplo, se utiliza `tag_post.name`. Puedes usar esta técnica tanto en páginas de blog como en páginas de sitio web.
Encuentra más información sobre cómo [crear una lista de publicaciones de blog relacionadas](/docs/cms/reference/hubl/tags/related-blog-posts).
> [!WARNING]
>
> **Nota:** Esta función tiene un límite de 100 publicaciones y 10 llamadas por página.
```html example.html theme={null}
{{ blog_recent_tag_posts("default", "marketing-tips", 5) }}
{% set tag_posts = blog_recent_tag_posts("default", ["marketing", "fun", "inbound"], 3, "AND") %}
{% for tag_post in tag_posts %}
{{ tag_post.name }}
{% endfor %}
```
```html example.html theme={null}
[Post about Marketing 1, Post about Marketing 2, Post about Marketing 3, Post
about Marketing 4, Post about Marketing 5]
Post about Marketing
Post about Fun
Post about Inbound
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `selected_blog` | ID del blog o "default" | Especifica qué blog utilizar, ya sea un blog específico por su ID o el blog predeterminado con `"default"`. El ID del blog está dado por el [campo de blog del módulo](/docs/cms/reference/fields/module-theme-fields#blog). |
| `tag_slug` | Cadena | Especifica la etiqueta que se utilizará en el filtro. Puedes incluir hasta 10 etiquetas, separadas por comas. Las etiquetas con varias palabras deben estar en minúsculas con los espacios reemplazados por guiones. |
| `limit` | Entero | Especifica el número de publicaciones que se agregarán a la secuencia. Este parámetro es obligatorio cuando se incluye el parámetro `logical_operator`. |
| `logical_operator` | Cadena | Cuando `tag_slug` contiene varias etiquetas, utiliza este operador para filtrar los resultados con la lógica `AND` u `OR`. Por opción predeterminada, esta función utiliza la lógica `OR` para devolver publicaciones con cualquiera de las etiquetas especificadas. Al incluir este parámetro, `limit` es obligatorio. |
## blog\_tag\_url
La función `blog_tag_url` da como resultado una URL completa enlazada a la página de índice del blog cuya etiqueta se ha especificado.
Esta función acepta dos parámetros. El primer parámetro especifica en qué blog se encuentra la página de índice de la etiqueta. El segundo parámetro especifica la etiqueta que se debe enlazar. Este parámetro puede utilizar **`topic.slug`** para una etiqueta específica de `content.topic_list` o acepta un nombre con guion en minúsculas como `"marketing-tips"`.
El siguiente ejemplo muestra cómo se puede utilizar esta función como etiqueta href de un ancla.
```html example.html theme={null}
Inbound Marketing
```
```html example.html theme={null}
Inbound Marketing
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `selected_blog` | ID del blog o "default" | Especifica qué blog utilizar, ya sea un blog específico por su ID o el blog predeterminado con `"default"`. |
| `tag_slug` | Cadena | Especifica la etiqueta a la que se va a enlazar. |
## blog\_tags
La función `blog_tags` da como resultado una secuencia de las 250 etiquetas con la mayor cantidad de artículos en el blog (en función del número de publicaciones asociadas) para el blog especificado, ordenadas según el número de publicaciones. Esta secuencia se puede almacenar en una variable e iterar para crear filtros personalizados para las etiquetas de las publicaciones. Se puede ver el número de publicaciones de cada etiqueta con `tag.live_posts`.
Esta función acepta dos parámetros. El primer parámetro especifica de qué blog se van a obtener las etiquetas. El segundo parámetro establece un límite en el número de etiquetas obtenidas.
La primera línea del ejemplo de abajo muestra cómo la función devuelve una secuencia de objetos de etiqueta. El resto del ejemplo muestra un caso en el que se guarda una secuencia en una variable y luego se itera en todos los objetos de etiqueta, imprimiendo un conjunto de enlaces a etiquetas. En el ejemplo se asume que el blog tiene 4 etiquetas.
> [!WARNING]
>
> **Nota:** Esta función tiene un límite de 250 etiquetas.
```html example.html theme={null}
{{ blog_tags("default", 250) }}
{% set my_tags = blog_tags("default", 250) %}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `selected_blog` | ID del blog o blog "default" | Especifica qué blog utilizar. El ID del blog está dado por el [campo de blog del módulo](/docs/cms/reference/fields/module-theme-fields#blog). |
| `limit` | Entero | La cantidad máxima de etiquetas que saldrán en los resultados. |
## blog\_total\_post\_count
Esta función da como resultado el número total de artículos publicados en el blog especificado. Si no se especifica ningún parámetro, contará las publicaciones del blog especificado por defecto. Como alternativa, puedes especificar el parámetro `"default"` o el ID de un blog diferente para hacer el conteo. El ID del blog está disponible en la URL del panel de control para cada blog.
> [!WARNING]
>
> **Nota:** esta función tiene un límite de 10 llamadas por página.
```text hubl.txt theme={null}
{{ blog_total_post_count }}
{{ blog_total_post_count(359485112) }}
```
```text resultados renderizados.txt theme={null}
16 54
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `selected_blog` | ID del blog o "default" | Especifica en qué blog hacer el conteo. El ID del blog está dado por el [campo de blog del módulo](/docs/cms/reference/fields/module-theme-fields#blog). |
## clear
Elimina todos los elementos de una lista. A diferencia de `pop()`, no entrega ningún resultado.
```text hubl.txt theme={null}
{% set words = ["phone","home"] %}
{% do words.clear() %}
{{words}}
```
```text resultados renderizados.txt theme={null}
[]
```
## color\_contrast
Esta función valida el contraste de color con base en [los estándares de las Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum). Tendrás que incluir dos colores como argumentos, y puedes incluir un argumento opcional para especificar la calificación (`AA` o `AAA`). El resultado serán los parámetros `true` o `false` en función de si los colores cumplen o superan los estándares.
```text hubl.txt theme={null}
{{color_contrast('#FFFFFF','#273749')}}
{{color_contrast('rgb(255, 255, 255)','rgb(229, 237, 245)','AAA')}}
Hey there
```
```text resultados renderizados.txt theme={null}
true false Hey there
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `color_1` | Color | El primer color que se va a comparar. Acepta:
Códigos hexadecimales de 6 dígitos (`#FFFFFF`)
Códigos hexadecimales de 3 dígitos (`#F0A`)
Códigos de color RGB (`rgb(12,31,1)`)
También puede usar una variable que almacene un código de color hexadecimal o RGB, por ejemplo, `theme.primary_color.color` |
| `color_2` | Color | El segundo color que se va a comparar con el primero. |
| `rating` | Cadena | El estándar de las WCAG que se utilizará para la calificación. Puede ser `AA` (predeterminado) o `AAA`. |
## color\_variant
Esta función aclara u oscurece un valor hexadecimal o una variable de color en un grado específico. El primer parámetro es el color hexadecimal (por ejemplo ("#FFDDFF") o una variable que almacene un valor hexadecimal. El segundo parámetro es el grado en el que se debe ajustar, de 0 a 255. Esta función se puede utilizar en archivos CSS para crear variaciones de color. Otro buen ejemplo es utilizarla con un parámetro de color de un módulo de color, para permitir a los usuarios especificar un color primario que genere automáticamente variaciones de color.
En el ejemplo de abajo, el color hexadecimal #3A539B se almacena en una variable llamada `base_color`. El color se modifica en -80 dando como resultado un azul más oscuro (#00034B).
```text hubl.txt theme={null}
{% set base_color ="#3A539B" %}
{{ color_variant(base_color, -80) }}
```
```text resultados renderizados.txt theme={null}
#00034b
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `base_color` | Cadena de color hexadecimal | El color inicial que se modificará. Por ejemplo, `#F7F7F7`. |
| `brightness_offset` | Entero | Un número positivo o negativo que se utiliza para aclarar u oscurecer el color de base. |
## content\_by\_id
La función **`content_by_id`** da como resultado una landing page, una página de sitio web o una publicación de blog según el ID. El único parámetro aceptado por esta función es un ID de contenido numérico.
El siguiente código de ejemplo muestra esta función en uso, que genera una lista de elementos con los hipervínculos.
> [!WARNING]
>
> **Nota:** esta función tiene un límite de 10 llamadas por página.
```html example.html theme={null}
{% set my_content = content_by_id(4715624297) %}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `id` | ID | El ID del contenido que se buscará. |
## content\_by\_ids
Dada una lista de varios ID de contenido, da como resultado un dict (diccionario) de páginas de destino, páginas de sitio web o publicaciones de blog que coinciden con esos ID.
Esta función toma un parámetro, una lista de ID de páginas o publicaciones de blog para buscar, colocadas en orden. Se pueden pasar hasta 100 objetos de contenido. El siguiente código de ejemplo muestra esta función en uso para generar una lista de elementos con sus hipervínculos.
> [!WARNING]
>
> **Nota:** esta función tiene un límite de 10 llamadas por página.
```html example.html theme={null}
{% set contents = content_by_ids([4715624297, 4712623297, 5215624284]) %}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `ids` | Lista | Una lista de ID de páginas o publicaciones de blog para buscar. Se pueden pasar hasta 100 objetos de contenido. |
## copy
Da como resultado una copia superficial de la lista. Equivalente a `a[:]`.
Una *copia superficial* construye un nuevo objeto compuesto y luego (en la medida de lo posible) inserta en él *referencias* a los objetos que se encuentran en el original.
```text hubl.txt theme={null}
{% set a = ["ham"] %}
{% set b = a.copy() %}
a: {{a}}
b: {{b}}
After Append
{% do a.append("swiss") %}
a: {{a}}
b: {{b}}
```
```text resultados renderizados.txt theme={null}
a: [ham] b: [ham] After Append a: [ham, swiss] b: [ham]
```
## count
Da como resultado el número de veces que una variable existe en una lista.
```html example.html theme={null}
{% set attendees = ["Jack","Jon","Jerry","Jessica"] %}
{% set jon_count = attendees.count("Jon") %}
There are {{jon_count}} Jon's in the list.
After append:
{% do attendees.append("Jon") %}
{% set jon_count_after_append = attendees.count("Jon") %}
There are now {{jon_count_after_append}} Jon's in the list.
```
```html example.html theme={null}
There are 1 Jon's in the list.
After append:
There are now 2 Jon's in the list.
```
## crm\_associations
Obtiene una lista de registros del CRM asociados a otro registro mediante su ID de registro, la categoría de asociación y el ID que define la asociación.
Esta función devuelve un objeto con los siguientes atributos: `has_more`, `total`, `offset` y `results`.
* `has_more` indica que hay más resultados disponibles además de este bloque (total > offset).
* `total` es el número total de resultados disponibles.
* `offset` es el desplazamiento que se utilizará para el siguiente bloque de resultados.
* *`results`* devuelve una lista de los objetos asociados especificados que coinciden con los parámetros de la función.
> [!WARNING]
>
> **Nota:** Por razones de seguridad, de los [tipos de objetos estándar de HubSpot](https://knowledge.hubspot.com/es/get-started/manage-your-crm-database#standard-objects) solo los objetos `producto` y `evento de marketing` se pueden obtener desde una página de acceso público. Cualquier otro tipo de objeto estándar debe alojarse en una página que esté [protegida por contraseña](https://knowledge.hubspot.com/es/website-pages/password-protect-a-page) o que requiera un [inicio de sesión por membresía en el CMS](https://knowledge.hubspot.com/es/website-pages/require-member-registration-to-access-private-content). Los objetos personalizados no tienen esta misma restricción.
```text hubl.txt theme={null}
{% set associated_contacts = crm_associations(847943847, "HUBSPOT_DEFINED", 2, "limit=3&years_at_company__gt=2&orderBy=email", "firstname,email", false) %}
{{ associated_contacts }}
```
```text resultados renderizados.txt theme={null}
{has_more=true, offset=3, total=203, results=[{firstname=Aimee, id=905,
email=abanks@company.com}, {firstname=Amy, id=1056, email=abroma@company.com},
{firstname=Abigael, id=957, email=adonahu@company.com}]}
```
> [!WARNING]
>
> **Nota:** Esta función se puede llamar un máximo de 10 veces por página. Cada llamada de la función `crm_associations` puede dar como resultado como máximo 100 objetos. El límite por opción predeterminada es de 10 objetos.
| Parámetro | Tipo | Descripción |
| - | - | - |
| `id` | ID | ID del registro a partir del que se deben buscar asociaciones. |
| `association category` | Cadena | La categoría de la definición de la asociación. Los valores posibles son `HUBSPOT_DEFINED`, `USER_DEFINED` y `INTEGRATOR_DEFINED`. Este parámetro puede omitirse en el caso de los tipos de asociación integrados definidos por HubSpot. |
| `association type id` | Entero | El ID de la definición de la asociación que se va a utilizar. Para saber los objetos estándar de HubSpot compatibles, consulta [ID del tipo de asociación que vas a usar](https://developers.hubspot.es/docs/guides/api/crm/associations). De otro modo, el ID de la asociación se puede encontrar en la [API del esquema de objetos del CRM](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details). |
| `query` | Cadena | El `id` del registro, o una cadena de consulta, delimitada por `&`. Todas las expresiones se suman con AND. Los operadores admitidos son:
`eq` (predeterminado)
`neq`
`lt`
`lte`
`gt`
`gte`
`is_null`
`not_null`
`in`
`nin`
`contains` (aplicable para propiedades con varios valores o propiedades de cadena, por ejemplo, *"firstname\_\_contains=Tim"*).
Las consultas pueden incluir los siguientes parámetros:
`limit`: el número máximo de resultados obtenidos en la respuesta, por ejemplo, `limit=50`.
`offset`: para distribuir los resultados en páginas si el número de resultados devueltos es superior al parámetro límite, por ejemplo, `offset=51`.
`orderBy`: ordena los resultados por una propiedad específica, por ejemplo, `orderBy=email`.
|
| `properties` | Cadena | Opcional. Una lista separada con comas de las propiedades que saldrán en los resultados. Por defecto, el resultado es un pequeño conjunto de propiedades comunes. Siempre se devuelve la propiedad ID. Se puede encontrar una lista completa de propiedades utilizando los endpoints para [obtener todas las propiedades de los contactos](https://developers.hubspot.es/docs/api-reference/legacy/crm-properties-v1-contacts/get-properties-v1-contacts-properties#get-all-contact-properties) y [obtener todas las propiedades de las empresas](https://developers.hubspot.es/docs/api-reference/legacy/crm-properties-v1-companies/get-properties-v1-companies-properties#get-all-company-properties). |
| `formatting` | Booleano | Opcional. Da formato a los valores, como las fechas y la divisa, de acuerdo con la configuración del portal. Omite o pasa el parámetro `false` con las cadenas sin procesar. |
## crm\_object
Obtiene un único registro del CRM por consulta o por ID. Los registros aparecerán en un dicc. de propiedades y valores.
Esta función también se puede [utilizar con objetos personalizados y de integraciones](/docs/cms/start-building/features/data-driven-content/crm-objects).
> [!WARNING]
>
> **Nota:** Por razones de seguridad, de los [tipos de objetos estándar de HubSpot](https://knowledge.hubspot.com/es/get-started/manage-your-crm-database#standard-objects) solo los objetos `producto` y `evento de marketing` se pueden obtener desde una página de acceso público. Cualquier otro tipo de objeto estándar debe alojarse en una página que esté [protegida por contraseña](https://knowledge.hubspot.com/es/website-pages/password-protect-a-page) o que requiera un [inicio de sesión por membresía en el CMS](https://knowledge.hubspot.com/es/website-pages/require-member-registration-to-access-private-content). Los objetos personalizados no tienen esta misma restricción.
> [!TIP]
>
> ¿Cuál es la diferencia entre los parámetros `in` y `contains`?
>
> `in` entrega resultados si el valor de la propiedad coincide con alguno de los valores dados. Por otro lado, `contains` entrega resultados si los valores de las propiedades en una selección múltiple tienen todos los valores especificados.
```text hubl.txt theme={null}
{% set contact = crm_object("contact", "email=contact@company.com", "firstname,lastname", false) %}
{% set contact = crm_object("contact", 123) %}
{{ contact.firstname }}
{{ contact.lastname }}
```
```text resultados renderizados.txt theme={null}
Brian Halligan
```
> [!WARNING]
>
> **Nota:** Esta función solo se puede llamar un máximo de 10 veces en una misma página.
| Parámetro | Tipo | Descripción |
| - | - | - |
| `object_type` | Cadena | El nombre del tipo de objeto. Los nombres de los tipos de objetos distinguen entre mayúsculas y minúsculas. Encuentra más información sobre los [tipos de objetos admitidos](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). Para encontrar los nombres de los tipos de objetos específicos de la cuenta y de integraciones disponibles en tu cuenta, utiliza la [API del esquema de objetos del CRM](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) para obtener las definiciones de los tipos y encontrar el nombre de la propiedad. Contiene el nombre del tipo de objeto interno que se debe usar para la función. En el caso de los tipos de objeto de integraciones y específicos de la cuenta con el mismo nombre que los objetos de la aplicación debes usar el [nombre completamente calificado](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) (FQN, por sus siglas en inglés) de los objetos. |
| `query` | Cadena | Opcional. El `id` del registro, o una cadena de consulta, delimitada con`&`. Todas las expresiones se suman con AND. Los operadores admitidos son:
`eq` (predeterminado)
`neq`
`lt`
`lte`
`gt`
`gte`
`is_null`
`not_null`
`in`
`nin`
`contains` (aplicable para propiedades con varios valores o propiedades de cadena, por ejemplo, *"firstname\_\_contains=Tim"*).
Las consultas pueden incluir los siguientes parámetros:
`limit`: el número máximo de resultados obtenidos en la respuesta. por ejemplo, `limit=50`.
`offset`: para distribuir los resultados en páginas si el número de resultados devueltos es superior al parámetro límite, por ejemplo, `offset=51`.
`orderBy`: ordena los resultados por una propiedad específica, por ejemplo, `orderBy=email`.
|
| `properties` | Cadena | Opcional. Una lista separada con comas de las propiedades que saldrán en los resultados. Por defecto, el resultado es un pequeño conjunto de propiedades comunes. Siempre se devuelve la propiedad ID. Se puede encontrar una lista completa de propiedades utilizando los endpoints para [obtener todas las propiedades de los contactos](https://developers.hubspot.es/docs/api-reference/legacy/crm-properties-v1-contacts/get-properties-v1-contacts-properties#get-all-contact-properties) y [obtener todas las propiedades de las empresas](https://developers.hubspot.es/docs/api-reference/legacy/crm-properties-v1-companies/get-properties-v1-companies-properties#get-all-company-properties). |
| `formatting` | Booleano | Opcional. Da formato a los valores, como las fechas y la divisa, de acuerdo con la configuración del portal. Pasa el parámetro `false` con las cadenas sin procesar. |
> [!WARNING]
>
> **Nota:** Cuando creas una consulta, los valores `range`, `distinct` `ndistinct` y `startswith` son palabras clave reservadas. Para consultar una propiedad que usa uno de esos nombres, deberás usar el siguiente formato: `range__eq=` (en lugar de `range=`).
## crm\_objects
Obtiene una lista de registros para un tipo de objeto específico del CRM de HubSpot.
Esta función devuelve un objeto con los siguientes atributos: `has_more`, `total`, `offset` y `results`.
* `has_more` indica que hay más resultados disponibles además de este bloque (total > offset).
* `total` es el número total de resultados disponibles.
* `offset` es el desplazamiento que se utilizará para el siguiente bloque de resultados.
* `results` devuelve una lista de los objetos especificados que coinciden con los parámetros de la función.
Los resultados se pueden ordenar utilizando al menos un parámetro de orden en la consulta. Por ejemplo, `crm_objects("contact", "firstname=Bob&order=lastname&order=createdate")` ordenará los contactos con el nombre `"Bob"` según el apellido y luego según el parámetro `createdate`. Para invertir el orden, agrega el signo `-` al nombre de la propiedad así: `order=-createdate`. La función de objetos del CRM también puede utilizarse con [objetos personalizados y de integraciones](/docs/cms/start-building/features/data-driven-content/crm-objects).
> [!WARNING]
>
> **Nota:** Por razones de seguridad, de los [tipos de objetos estándar de HubSpot](https://knowledge.hubspot.com/es/get-started/manage-your-crm-database#standard-objects) solo los objetos `producto` y `evento de marketing` se pueden obtener desde una página de acceso público. Cualquier otro tipo de objeto estándar debe alojarse en una página que esté [protegida por contraseña](https://knowledge.hubspot.com/es/website-pages/password-protect-a-page) o que requiera un [inicio de sesión por membresía en el CMS](https://knowledge.hubspot.com/es/website-pages/require-member-registration-to-access-private-content). Los objetos personalizados no tienen esta misma restricción.
```text hubl.txt theme={null}
{% set objects = crm_objects("contact", "firstname__not_null=&limit=3", "firstname,lastname") %}
{{ objects }}
```
```text resultados renderizados.txt theme={null}
{has_more=true, offset=3, total=331, results=[{firstname=Brian, id=44151,
lastname=Halligan}, {firstname=Dharmesh, id=44051, lastname=Shah},
{firstname=George, id=88551, lastname=Washington}]}
```
> [!WARNING]
>
> **Nota:** Esta función se puede llamar un máximo de 10 veces por página. Cada llamada de la función `crm_objects` puede dar como resultado como máximo 100 objetos. El límite por opción predeterminada es de 10 objetos.
| Parámetro | Tipo | Descripción |
| - | - | - |
| `object_type` | Cadena | El tipo de objeto por su nombre. Los nombres de los tipos de objetos distinguen entre mayúsculas y minúsculas. Se aceptan el singular y el plural en el caso de los tipos de objetos estándar (por ejemplo, `contacto`, `contactos`). Encuentra más información sobre los [tipos de objetos admitidos](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). Para encontrar los nombres de los tipos de objetos específicos de la cuenta y de integraciones disponibles en tu cuenta, utiliza la [API del esquema de objetos del CRM](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) para obtener las definiciones de los tipos y las propiedades del nombre. En el caso de los tipos de objetos específicos de integraciones y de la cuenta con el mismo nombre que los objetos propios de la aplicación, utiliza el [nombre completo cualificado](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) (FQN, por sus siglas en inglés) de los objetos. |
| `query` | Cadena | Opcional. El ID del registro o una cadena de consulta, delimitada con `&`. Todas las expresiones se suman con AND. Los operadores admitidos son:
`eq` (predeterminado)
`neq`
`lt`
`lte`
`gt`
`gte`
`is_null`
`not_null`
`in`
`nin`
`contains` (aplicable para propiedades con varios valores o propiedades de cadena, por ejemplo, *"firstname\_\_contains=Tim"*).
Ejemplo:`"email=contact@company.com"` |
| `properties` | Cadena | Opcional. Una lista separada con comas de las propiedades que saldrán en los resultados. Por defecto, el resultado es un pequeño conjunto de propiedades comunes. Siempre se devuelve el ID de la propiedad. Puedes encontrar una lista completa de las propiedades utilizando los endpoints para [obtener todas las propiedades de los contactos](https://developers.hubspot.es/docs/api-reference/legacy/crm-properties-v1-contacts/get-properties-v1-contacts-properties#get-all-contact-properties) y [obtener todas las propiedades de las empresas](https://developers.hubspot.es/docs/api-reference/legacy/crm-properties-v1-companies/get-properties-v1-companies-properties#get-all-company-properties). El ID del registro siempre se incluye en las propiedades del objeto que salen en los resultados, incluso cuando no se agrega explícitamente en la lista de propiedades. |
| `formatting` | Booleano | Opcional. Da formato a los valores, como las fechas y la divisa, de acuerdo con la configuración del portal. Pasa el parámetro `false` con las cadenas sin procesar. |
> [!WARNING]
>
> **Nota:** Cuando creas una consulta, los valores `range`, `distinct` `ndistinct` y `startswith` son palabras clave reservadas. Para consultar una propiedad que usa uno de esos nombres, deberás usar el siguiente formato: `range__eq=` (en lugar de `range=`).
## crm\_property\_definition
Permite obtener la definición de la propiedad para un tipo de objeto y un nombre de propiedad dados.
Los tipos de objetos admitidos son los objetos estándar de HubSpot (por ejemplo, los contactos), los objetos específicos del portal y los objetos de integraciones.
**HubL**
```hubl theme={null}
{{ crm_property_definition("house_listing", "agent_name") }}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `object_type` | Cadena | El nombre del tipo de objeto. Los nombres de los tipos de objetos distinguen entre mayúsculas y minúsculas. Encuentra más información sobre los [tipos de objetos admitidos](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). Para encontrar los nombres de los tipos de objetos específicos de la cuenta y de integraciones disponibles en tu cuenta, utiliza la [API del esquema de objetos del CRM](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) para obtener las definiciones de los tipos y encontrar el nombre de la propiedad. Contiene el nombre del tipo de objeto interno que se debe usar para functionFor. En el caso de los tipos de objeto de integraciones y específicos de la cuenta con el mismo nombre que los objetos de la aplicación debes usar el [nombre completamente calificado](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) (FQN, por sus siglas en inglés) de los objetos. |
| `property_name` | Cadena | El nombre de la propiedad que sirve para obtener la definición y que no distingue entre mayúsculas y minúsculas. |
## crm\_property\_definitions
Permite obtener las definiciones de las propiedades para un tipo de objeto y un conjunto de nombres de propiedades dados.
Los tipos de objetos admitidos son los objetos estándar de HubSpot (por ejemplo, los contactos), los objetos específicos del portal y los objetos de integraciones.
**HubL**
```hubl theme={null}
{{ crm_property_definitions("house_listing", "agent_name,address") }}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `object_type` | Cadena | El nombre del tipo de objeto. Los nombres de los tipos de objetos distinguen entre mayúsculas y minúsculas. Encuentra más información sobre los [tipos de objetos admitidos](/docs/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). Para encontrar los nombres de los tipos de objetos específicos de la cuenta y de integraciones disponibles en tu cuenta, utiliza la [API del esquema de objetos del CRM](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) para obtener las definiciones de los tipos y encontrar el nombre de la propiedad. Contiene el nombre del tipo de objeto interno que se debe usar para functionFor. En el caso de los tipos de objeto de integraciones y específicos de la cuenta con el mismo nombre que los objetos de la aplicación debes usar el [nombre completamente calificado](/docs/cms/start-building/features/data-driven-content/crm-objects#getting-a-custom-object-type-s-details) (FQN, por sus siglas en inglés) de los objetos. |
| `property_name` | Cadena | Opcional. Los nombres de las propiedades que sirven para obtener la definición, separados por comas, sin distinción entre mayúsculas y minúsculas. Si está vacío, se extraerán las definiciones de todas las propiedades. |
## cta
Debido a que los módulos de CTA tienen muchos parámetros con variaciones en el código de programación, puedes utilizar la función CTA para generar fácilmente una CTA particular en una plantilla, página o correo electrónico. Esta es la función que utiliza el editor de texto enriquecido cuando se agrega una CTA mediante el editor.
> [!WARNING]
>
> **Nota:** Esta función tiene un límite de 10 llamadas por página.
```text hubl.txt theme={null}
{{ cta("ccd39b7c-ae18-4c4e-98ee-547069bfbc5b") }}
{{ cta("ccd39b7c-ae18-4c4e-98ee-547069bfbc5b", "justifycenter") }}
```
```html example.html theme={null}
Start a HubSpot trial
Start a HubSpot trial
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `guid` | Cadena | El ID de la CTA que se renderiza. Se puede encontrar en la URL de la pantalla de datos de la CTA. |
| `align_opt` | Enumeración | Ajusta la alineación de la CTA. Los valores incluyen: `justifyleft`, `justifycenter`, `justifyright`, `justifyfull`. |
## extend
Permite ampliar una lista agregando todos los elementos de un bloque iterable. En otras palabras, inserta todos los elementos de una lista en otra lista.
```text hubl.txt theme={null}
{% set vehicles = ["boat","car","bicycle"] %}
{% set more_vehicles = ["airplane","motorcycle"] %}
{% do vehicles.extend(more_vehicles) %}
{{vehicles}}
```
```text resultados renderizados.txt theme={null}
[boat, car, bicycle, airplane, motorcycle]
```
## file\_by\_id
Esta función entrega los metadatos de un archivo según el ID. Acepta un único parámetro, el ID numérico del fichero que se busca. Para obtener varios archivos a la vez, utiliza la función [files\_by\_ids](#files_by_ids) en su lugar.
> [!WARNING]
>
> **Nota:** Esta función está limitada a 10 llamadas por página.
```text hubl.txt theme={null}
{% set file = file_by_id(123) %}
{{ file.friendlyUrl }}
```
```text resultados renderizados.txt theme={null}
https://www.hubspot.com/hubfs/HubSpot_Logos/HSLogo_color.svg
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `file_id` | Número | El ID del archivo que se busca. |
## files\_by\_ids
Entrega los metadatos de varios archivos según el ID. Acepta una serie de ID de archivo.
> [!WARNING]
>
> **Nota:** Esta función está limitada a 10 llamadas por página y puede aceptar hasta 100 ID de archivo.
```text hubl.txt theme={null}
{% set files = files_by_ids([123,456])%}
{% for file in files %}
URL:{{file.friendlyUrl}}
{% endfor %}
```
```text resultados renderizados.txt theme={null}
URL:https://api-na1.hubspot.com/filemanager/api/v2/files/123/example-file-1
URL:https://api-na1.hubspot.com/filemanager/api/v2/files/456/example-file-2
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `file_id` | Número | Los ID de los archivos que se buscan, separados por comas (hasta 100). |
Por ejemplo, puedes usar esta función para repetir los archivos que se han subido para un contacto. Para volver sobre los resultados, deberás usar el [filtro split de HubL](/docs/cms/reference/hubl/filters#split), ya que la propiedad del CRM será una cadena separada con punto y coma.
```hubl theme={null}
{% set objects = crm_objects("contact", "email=bh@hubspot.com", "file").results %}
{% for item in objects %}
{% set fileIDs = item.file|split(";") %}
{% set files = files_by_ids(fileIDs) %}
{% for file in files %}
{% endfor %}
{% endfor %}
```
## flag\_content\_for\_access\_check
Cuando una publicación de blog está [configurada para el acceso por autorregistro](https://knowledge.hubspot.com/es/blog/use-self-registration-for-private-blog-content), los visitantes deberán registrarse o iniciar sesión para ver el contenido completo de la publicación. Los recursos de blog predeterminados de HubSpot incluyen esta función automáticamente y también un indicador con el icono de un candado para las publicaciones que requieren autorregistro para acceder. Obtén más información sobre cómo [crear soluciones personalizadas utilizando esta función y su API correspondiente](/docs/cms/start-building/features/memberships/overview#private-blog-posts-with-self-registration).
Esta función comprueba si el visitante actual puede acceder a una publicación de blog. Cuando se llama, la función se reemplaza con el siguiente atributo:
`hs-member-content-access=`
A value of `true` indicates that the blog post requires the visitor to log in to view the full content.
```text hubl.txt theme={null}
{% for content in contents %}
...
{% endfor %}
```
```text resultados renderizados.txt theme={null}
...
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `ID` | ID | El ID del contenido que se cotejará con la persona que ha iniciado sesión en ese momento. |
## follow\_me\_links
Devuelve los [enlaces de las cuentas de redes sociales fijadas en la configuración de la cuenta](https://knowledge.hubspot.com/es/design-manager/use-default-modules-in-the-layout-editor#add-social-accounts-to-the-follow-me-module). Se utiliza en el [módulo predeterminado follow\_me](/docs/cms/reference/modules/default-modules#follow-me).
```text hubl.txt theme={null}
{% set fm = follow_me_links() %}
{{ fm }}
```
```text resultados renderizados.txt theme={null}
[FollowMeLink{type=URL, id=5142734, altName=RSS,
followMeUrl=http://website.com/rss.xml, iconName=rss,
name=http://website.com/rss.xml}]
```
## format\_address
Le da formato a una dirección según la configuración regional del contexto.
```text hubl.txt theme={null}
{{ format_address('en-us', { address: "25 First Street", address2: "2nd Floor", city: "Cambridge", state: "MA", country: "United States", zip: "02141"}) }}
```
```text resultados renderizados.txt theme={null}
[25 First Street, 2nd Floor, Cambridge, MA 02141, United States]
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `locale` | Cadena | La configuración regional que determinará el formato de la dirección. |
| `address` | Cadena | La dirección del lugar. |
| `address2` | Cadena | La segunda línea de la dirección, como el número de piso o apartamento. |
| `city` | Cadena | La ciudad de la dirección. |
| `state` | Cadena | El estado de la dirección. |
| `country` | Cadena | El país de la dirección. |
| `zip` | Cadena | El código postal de la dirección. |
## format\_company\_name
Permite darle formato al nombre de una empresa agregando sufijos honoríficos japoneses cuando corresponda.
```text hubl.txt theme={null}
{{ format_company_name("companyName", addJapaneseHonorifics) }}
```
```text resultados renderizados.txt theme={null}
HubSpot
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `companyName` | Cadena | El nombre de la empresa. |
| `useHonorificIfApplicable` | Booleano | Cuando se establece en `true` y el idioma del contexto es japonés, se agregará el sufijo honorífico para la empresa cuando corresponda. |
## format\_name
Permite dar formato al nombre de una persona colocando el apellido antes del primer nombre y agrega sufijos honoríficos japoneses cuando corresponda.
```text hubl.txt theme={null}
{{ format_name("firstName", "surname", addJapaneseHonorifics) }}
```
```text resultados renderizados.txt theme={null}
Hobbes Baron
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `firstName` | Cadena | El nombre de la persona. | |
| `surname` | Cadena | El apellido de la persona. | `False` |
| `useHonorificIfApplicable` | Booleano | Cuando se establece en `true` y el idioma del contexto es japonés, se agregará un sufijo honorífico japonés cuando corresponda. | |
## format\_datetime
Permite darle formato a los componentes de fecha y hora de un objeto de fecha, similar al filtro de HubL [format\_datetime](/docs/cms/reference/hubl/filters#format_datetime). Esta función reemplaza a la función obsoleta `datetimeformat`.
```text hubl.txt theme={null}
{{ format_datetime(content.publish_date, "short", "America/New_York", "en") }}
```
```text resultados renderizados.txt theme={null}
12/31/69 7:00 PM
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `format` | Cadena | El formato que se utilizará. Puede ser uno de los siguientes:
`short`
`medium`
`long`
`full`
un patrón personalizado basado en las normas [Unicode LDML](https://unicode.org/reports/tr35/tr35-dates.html#Date_Format_Patterns)
|
| `timeZone` | Cadena | La zona horaria de la fecha del resultado en [formato IANA TZDB](https://data.iana.org/time-zones/tzdb/). |
| `locale` | Cadena | La configuración regional que se utilizará en los formatos adaptados a la configuración regional. |
## geo\_distance
Esta función contiene 4 parámetros y calcula la altura elipsoidal 2D entre dos puntos de la Tierra. Utiliza esta función como una consulta de filtro para obtener los datos de HubDB.
```html example.html theme={null}
{% for row in hubdb_table_rows(1234567, "geo_distance(loc,1.233,-5.678,mi)__gt=500") %}
{{row.name}}
{% endfor %}
```
```html example.html theme={null}
Cambridge, MA
Salem, MA
San Diego, CA
Chicago, IL
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `point1` | Ubicación | Ubicación desde una columna de HubDB. |
| `point2_lat` | Latitud | Latitud del punto 2. |
| `point2_long` | Longitud | Longitud del punto 2. |
| `units` | Cadena | Unidades de medida del valor resultante. Las opciones son `FT` para pies, `MI` para millas, `M` para metros o `KM` para kilómetros. |
## get\_asset\_url
Esta función devuelve la URL pública de la plantilla o el archivo de programación especificado. El parámetro de esta función es la ruta del recurso en el administrador de diseño. Las URL de los archivos incluidas en el código se actualizan cada vez que se publican; por lo tanto, al utilizar esta función te aseguras de utilizar siempre la última versión del archivo.
Puedes generar automáticamente esta función en la aplicación, bien haciendo clic con el botón derecho en un **archivo** y seleccionando **Copiar URL pública**, o bien haciendo clic en **Acciones** y seleccionando luego **Copiar URL pública**.
En el siguiente ejemplo se obtiene la URL de un archivo Javascript creado en el administrador de diseño que se puede incluir como atributo `src` de una etiqueta `
```
## resize\_image\_url
Convierte la URL de la imagen almacenada en el administrador en archivos a una URL que redimensionará la imagen si así se requiere. La función acepta un parámetro obligatorio y cinco opcionales. Se debe pasar al menos un parámetro opcional.
Requerido
* **URL:** cadena, la URL de una imagen alojada en HubSpot.
Opcionales
* **width:** número, la nueva anchura de la imagen en pixeles.
* **height:** número, la nueva altura de la imagen en pixeles.
* **length:** número, la nueva longitud del lado mayor, en pixeles.
* **upscale:** booleano, utiliza las dimensiones de la imagen redimensionada incluso si superan la imagen original (las imágenes pueden aparecer borrosas).
* **upsize:** booleano, muestra la imagen redimensionada aunque sea mayor que la original en bytes.
> [!WARNING]
>
> **Nota:** las imágenes que son mayores a 4096 pixeles en altura o ancho no se redimensionarán automáticamente. En lugar de eso, tendrás que [cambiar el tamaño de la imagen manualmente](https://knowledge.hubspot.com/es/files/automatic-image-resizing-on-hubspot-content).
```text hubl.txt theme={null}
{{ resize_image_url("http://your.hubspot.site/hubfs/img.jpg", 0, 0, 300) }}
```
```text resultados renderizados.txt theme={null}
http://your.hubspot.site/hubfs/img.jpg?length=300&name=img.jpg
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `url` | Cadena | URL de una imagen alojada en HubSpot. |
| `width` | Entero (px) | El nuevo ancho de la imagen, en pixeles. |
| `height` | Entero (px) | La nueva altura de la imagen, en pixeles. |
| `length` | Entero (px) | La nueva longitud del lado más largo, en pixeles. |
| `upscale` | Booleano | Utiliza las dimensiones de la imagen redimensionada incluso si superan la imagen original (las imágenes pueden aparecer borrosas). El valor por opción predeterminada es `false`. |
| `upsize` | Booleano | Muestra la imagen redimensionada aunque sea mayor que la original en bytes. El valor por opción predeterminada es `false`. |
## reverse
Invierte el orden de los elementos de una lista. No toma ningún parámetro. Para invertir un objeto o devolver un elemento iterable para repetir la lista a la inversa, utiliza [`|reverse`](/docs/cms/reference/hubl/filters#reverse)
```text hubl.txt theme={null}
{% set numbers = [1,2,3,4] %}
{% do numbers.reverse() %}
{{numbers}}
```
```text resultados renderizados.txt theme={null}
[4, 3, 2, 1]
```
## set\_response\_code
Establece el código de respuesta como el código especificado. [404](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/404) es el único código admitido por ahora. Cuando se utiliza, la página mostrará un error `404`.
```text hubl.txt theme={null}
{{ set_response_code(404) }}
```
```text resultados renderizados.txt theme={null}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `code` | Entero | el código de la respuesta del HTTP. Actualmente, `404` es el único código admitido. |
## super
Esta función imprime el contenido de la plantilla principal en una plantilla secundaria utilizando la etiqueta [extends](/docs/cms/reference/hubl/overview#blocks-and-extends).
Por ejemplo, en el ejemplo de código de abajo, se ha creado una plantilla HTML básica con un bloque HubL llamado `sidebar` y se ha guardado como `parent.html`. Se creará un segundo archivo de plantilla que ampliará ese archivo principal. Normalmente, el valor de la etiqueta `
` se imprimiría en el bloque de la barra lateral del HTML principal. Pero al usar `super`, el contenido del bloque de la barra lateral de la plantilla principal se combina con el contenido de la plantilla secundaria.
```html example.html theme={null}
{% extends "custom/page/web_page_basic/parent.html" %}
{% block sidebar %}
Table Of Contents
{{ super() }}
{% endblock %}
```
```html example.html theme={null}
This is the parent template
Table of contents
Sidebar content from parent.
```
## today
Muestra el inicio del día de hoy (12:00am). Como alternativa, puedes agregar un parámetro para cambiar la zona horaria de la zona UTC predeterminada.
```text hubl.txt theme={null}
{{ today() }}
{{ today("America/New_York") }}
{{ unixtimestamp(today("America/New_York").plusDays(1)) }}
```
```text resultados renderizados.txt theme={null}
2018-10-23T00:00Z 2018-10-23T00:00-04:00[America/New_York] 1540353600000
```
## to\_local\_time
Convierte una marca de tiempo UNIX a la hora local, con base en la configuración de los informes en HubSpot. A continuación, puedes aplicar un filtro datetimeformat para darle formato a la fecha.
```text hubl.txt theme={null}
{{ to_local_time(eastern_dt) }}
```
```text resultados renderizados.txt theme={null}
2015-05-13 10:37:31
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `date` | Fecha y hora | Marca de tiempo UNIX para convertir a la hora local. |
## topic\_cluster\_by\_content\_id
Devuelve un objeto dicc. de HubL que representa el grupo de temas asociado a un contenido (determinado por el ID del contenido que se proporcionó), e incluye los metadatos de la página pilar asociada, el tema central y los temas secundarios. Se puede usar para "enlazar automáticamente" un contenido con su página pilar asociada \[si existe].
Los metadatos disponibles se encuentran con las etiquetas: attachableContent (los metadatos del contenido actual), topic (los metadatos del tema asociado al contenido actual), coreTopic (los metadatos del tema central del conjunto asociado) y pillarPage (los metadatos de la página pilar asociada).
Utiliza `{{ topicCluster|pprint }}` para que se muestren todas las propiedades y atributos disponibles.
```html example.html theme={null}
{{ topic_cluster_by_content_id(content.id) }}
{%- if content.id -%}
{%- set topicCluster = topic_cluster_by_content_id(content.id) -%}
{%- if topicCluster.pillarPage.url.value and topicCluster.pillarPage.publishState == "PUBLISHED" -%}
```
> [!WARNING]
>
> **Nota:** esta función tiene un límite de 10 llamadas por página.
| Parámetro | Tipo | Descripción |
| - | - | - |
| `content_id` | ID | El ID de la página que se busca. |
## truncate
La función de truncamiento actúa del mismo modo que el [filtro truncar](/docs/cms/reference/hubl/filters#truncate) pero utiliza la sintaxis de una función en lugar de la de un filtro. El primer parámetro especifica la cadena. El segundo parámetro especifica el punto en el que se debe truncar. El último parámetro especifica los caracteres que se agregarán cuando se produzca el truncamiento.
> [!WARNING]
>
> **Nota:** Debido a que esta función depende de los espacios entre las palabras para acortar las cadenas, es posible que no funcione como se espera con idiomas sin espacios entre caracteres, como el japonés.
```text hubl.txt theme={null}
{{ truncate("string to truncate at a certain length", 19, false, "...") }}
{% set longString = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales ultricies velit sit amet ornare." %}
{{ truncate(longString, 40, false, "...") }}
```
```text resultados renderizados.txt theme={null}
string to truncate ... Lorem ipsum dolor sit amet, consectetur ...
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `string_to_truncate` | Cadena | La cadena que se trunca. |
| `length` | Entero | Especifica el punto en el que se debe truncar el texto (incluye los caracteres HTML). |
| `killwords` | Booleano | Si es verdadero, la cadena cortará el texto, independientemente de si está en medio de una palabra. |
| `end` | Cadena | Los caracteres que se agregarán para indicar dónde se ha truncado el texto. |
## type
Esta función acepta un argumento y muestra el tipo de objeto. El valor devuelto es uno de los siguientes: `"bool"`, `"datetime"`, `"dict"`, `"float"`, `"int"`, `"list"`, `"long"`, `"null"`, `"str"` o `"tuple"`.
```text hubl.txt theme={null}
{{ type("Blog") }}
{% set my_type = type("Blog") %}
```
## unixtimestamp
Esta función da como resultado una marca de tiempo UNIX cuando se proporciona un objeto datetime.
```text hubl.txt theme={null}
{{ unixtimestamp(d) }}
```
```text resultados renderizados.txt theme={null}
1565983117868
```
## update
Actualiza el objeto dict con los elementos de otro objeto dict o de un elemento iterable de pares clave-valor. Utiliza esta función para combinar o fusionar objetos.
```text hubl.txt theme={null}
{% set dict_var = {"authorName": "Douglas Judy", "authorTitle": "Mastermind" } %}
{% do dict_var.update({"authorFriend": "Jake"}) %}
{% do dict_var.update({"authorLocation": "unknown"}) %}
{{ dict_var }}
```
```text resultados renderizados.txt theme={null}
{authorName=Douglas Judy, authorTitle=Mastermind, authorFriend=Jake,
authorLocation=unknown}
```
# Sentencias If
Source: https://developers.hubspot.es/docs/cms/reference/hubl/if-statements
Una guía práctica de las declaraciones if de Hubl de HubSpot para desarrolladores de CMS.
Puedes incluir lógica condicional en tus módulos y plantillas utilizando las[sentencias if](#basic-if-statement-syntax) y [sentencias unless](#unless-statements) de HubL. Las sentencias If suelen contener [operadores compatibles](/docs/cms/reference/hubl/operators-and-expression-tests) con HubL y pueden utilizarse para ejecutar [pruebas de expresión](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests).
> [!WARNING]
>
> ### Nota:
>
> Si utilizas [tokens de personalización](/docs/cms/reference/hubl/functions#personalization-token) dentro de una sentencia condicional de tu módulo de correo electrónico, debes [activar el correo electrónico programable para el módulo](/docs/cms/start-building/features/data-driven-content/emails-with-programmable-content).
>
> La información pasada a través de [v3](/docs/api-reference/marketing-marketing-emails-v3/guide) o [v4](/docs/api-reference/marketing-single-send-v4/guide) de la API de envío único no funcionará dentro de las declaraciones `if`, ya que las plantillas se compilan antes de que la información se rellene.
## Sintaxis básica de la sentencia if
HubL utiliza sentencias if para ayudar a definir la lógica de una plantilla. La sintaxis de las sentencias if de HubL es muy similar a la lógica condicional de Python. Las sentencias `if` están envueltas en [delimitadores de sentencias](/docs/cms/reference/hubl/variables-macros-syntax), comenzando con una sentencia `if` de apertura y terminando con un `endif`.
El ejemplo siguiente proporciona la sintaxis básica de una sentencia if, en la que "condición" se sustituiría por la regla booleana que ibas a evaluar como verdadera o falsa.
```hubl theme={null}
{% if condition %}
If the condition is true print this to template.
{% endif %}
```
Ahora que has visto la sintaxis básica, veamos algunos ejemplos reales de sentencias if básicas. Los siguientes ejemplos muestran sentencias if que comprueban si un módulo HubL con el nombre `my_module` y si una variable llamada `my_module` están presentes en una plantilla. Observa que sin ningún operador, la sentencia if evaluará si el módulo está definido o no en el contexto de la plantilla.
```hubl theme={null}
{% module "my_module" path="@hubspot/rich_text", label="My rich text module", html="Default module text" export_to_template_context=true %}
{% if widget_data.my_module %}
A module named "my_module" is defined in this template.
{% endif %}
{% set my_variable = "A string value for my variable" %}
{% if my_variable %}
The variable named my_variable is defined in this template.
{% endif %}
```
Observa que al evaluar el módulo HubL, el nombre del módulo se deja entre comillas dentro de la sentencia `if` y al probar la variable no se utilizan comillas alrededor del nombre de la variable. En los dos ejemplos anteriores, el módulo y la variable existen en la plantilla, por lo que las sentencias se evalúan para imprimir la marca. Ten en cuenta que estos ejemplos solo prueban si el módulo y la variable están definidos, no si tienen o no un valor.
Ahora veamos una sentencia `if` que evalúa si un módulo tiene un valor, en lugar de evaluar si existe en la plantilla. Para ello, debemos utilizar el parámetro [export\_to\_template\_context](/docs/cms/reference/modules/export-to-template-context) . En el ejemplo siguiente, si se valora el módulo de texto en el editor de contenidos, se imprimiría la marca. Si el campo de texto del módulo estuviera vacío, no se mostraría ninguna marca. Si estás trabajando con módulos personalizados, existe una sintaxis simplificada de `widget.widget_name` que se describe en el[ejemplo aquí](/docs/cms/reference/modules/configuration).
```text input.txt theme={null}
{% module "product_names" path="@hubspot/text", label="Enter the product names that you would like to render the coupon ad for", value="all of our products", export_to_template_context=True %}
{% if widget_data.product_names.value %}
For a limited time, get 50% off {{ widget_data.product_names.value}}!
{% endif %}
```
```text output.txt theme={null}
For a limited time get 50% off all of our products!
```
## Usando elif y else
Las sentencias `if` pueden hacerse más sofisticadas con sentencias condicionales adicionales o con una regla que se ejecuta cuando la condición o las condiciones son falsas. Las sentencias `elif` te permiten agregar condiciones adicionales a tu lógica que se evaluarán después de la condición anterior. Las sentencias **`else`** definen una regla que se ejecuta cuando todas las demás condiciones son falsas. Puedes tener un número ilimitado de sentencias `elif` dentro de una sola sentencia if, pero solo una sentencia `else`.
A continuación se muestra el ejemplo de sintaxis básica de la sentencia if que utiliza el [operador `<=`](/docs/cms/reference/hubl/operators-and-expression-tests#comparison) para comprobar el valor de una variable. En este ejemplo, la plantilla se imprimirá con la leyenda: "El número con nombre de la variable es menor que o igual a 6."
```hubl theme={null}
{% set number = 5 %}
{% if number <= 2 %}
Variable named number is less than or equal to 2.
{% elif number <= 4 %}
Variable named number is less than or equal to 4.
{% elif number <= 6 %}
Variable named number is less than or equal to 6.
{% else %}
Variable named number is greater than 6.
{% endif %}
```
A continuación se muestra otro ejemplo que utiliza un módulo de elección para mostrar diferentes encabezados para una página de carreras, en función del departamento elegido por el usuario. El ejemplo utiliza el [operador ==](/docs/cms/reference/hubl/operators-and-expression-tests#comparison), para comprobar ciertos valores predefinidos en el módulo de elección.
```hubl theme={null}
{% choice "department" label="Choose department", value="Marketing", choices="Marketing, Sales, Dev, Services" export_to_template_context=True %}
{% if widget_data.department.value == "Marketing" %}
Want to join our amazing Marketing team?!
We have exciting career opportunities on the {{ widget_data.department.value }} team.
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% elif widget_data.department.value == "Dev" %}
Do you love to ship code?
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% else %}
Want to work with our awesome customers?
We have exciting career opportunities on the {{ widget_data.department.value }} team.
{% endif %}
```
## Sentencias unless
Las sentencias `unless` son condicionales al igual que las sentencias `if`, pero funcionan con la lógica inversa. Se renderizará y compilará el código entre las etiquetas de apertura y cierre, a menos que la condición booleana única se evalúe como verdadera. Las sentencias unless comienzan con un **`unless`** y terminan con un **`endunless`.** Las sentencias `unless` admiten `else` pero no `elif`.
A continuación se muestra un ejemplo que imprime un encabezado "En construcción", a menos que se valore el campo de texto enriquecido. Si el campo de texto enriquecido tiene contenido, entonces ese contenido se mostrará.
```hubl theme={null}
{% module "my_page_content" path="@hubspot/rich_text", label="Enter your page content", html="" export_to_template_context=true %}
{{ widget_data.my_page_content.html }}
{% unless widget_data.my_page_content.html %}
This page is under construction.
Come back soon!
{% endunless %}
```
## ifchanged
Además de las sentencias if y unless, HubL admite las sentencias `ifchanged`. Estas sentencias pueden utilizarse para que solo se muestre la marca cuando una variable ha cambiado desde una invocación anterior de esta etiqueta.
## Sentencias if en línea
HubL admite las sentencias `if` en línea. Se pueden utilizar para escribir lógica condicional de forma concisa con [operadores y pruebas de expresión](/docs/cms/reference/hubl/operators-and-expression-tests).
```hubl theme={null}
{% set color = "Blue" if is_blue is truthy else "Red" %} // color == "blue"
{{ "Blue" if is_blue is truthy else "Red" }} // "Blue"
{% set dl = true %}
Download PDF
```
## Operadores ternarios
También es posible utilizar operadores ternarios para escribir rápidamente lógica condicional con [operadores y pruebas de expresión](/docs/cms/reference/hubl/operators-and-expression-tests#logical).
```hubl theme={null}
// If the variable is_blue is true, output "blue", otherwise output"red"
{{ is_blue is truthy ? "blue" : "red" }}
// Set the variable is_red to false if is_blue is true, otherwise set to true
{% set is_red = is_blue is truthy ? false : true %}
```
# Bucles for
Source: https://developers.hubspot.es/docs/cms/reference/hubl/loops
Los bucles for se pueden utilizar en HubL para iterar a través de secuencias de objetos.
Los bucles for se pueden utilizar en HubL para iterar a través de secuencias de objetos. Lo más habitual es que se utilicen con la renderización del [contenido del blog](/docs/cms/start-building/building-blocks/templates/blog) en formato de listado, pero también pueden utilizarse para ordenar otras variables de secuencia.
Los bucles for comienzan con una sentencia `{% for %}` y terminan con una sentencia `{% endfor %}`. Dentro de la sentencia `{% for %}` se nombra un solo elemento de la secuencia seguido de `in` y luego el nombre de la secuencia. El código entre las sentencias `for` de apertura y cierre se imprime con cada iteración, y generalmente incluye la variable impresa del elemento individual de la secuencia. A continuación se muestra la sintaxis básica de un bucle for:
```hubl theme={null}
{% for item in items %}
{{ item }}
{% endfor %}
```
A continuación se presenta un ejemplo básico que muestra cómo imprimir una secuencia de valores de variables en una lista.
```html example.html theme={null}
{% set languages = ["HTML", "CSS", "Javascript", "Python", "Ruby", "PHP", "Java"] %}
Languages
;
{% for language in languages %}
{{ language }}
{% endfor %}
```
```html example.html theme={null}
Languages
HTML
CSS
Javascript
Python
Ruby
PHP
Java
```
## Propiedades del bucle
A medida que un bucle itera, puedes utilizar la [lógica condicional](/docs/cms/reference/hubl/if-statements) para definir el comportamiento del bucle. La propiedad variable `loop.index` mantiene una cuenta del número actual de las iteraciones del bucle. Hay otras propiedades de las variables de bucle que cuentan las iteraciones de diferentes maneras. Estas propiedades se describen a continuación:
| Variable | Description |
| - | - |
| `loop.cycle` | Una función de ayuda para recorrer una lista de secuencias. Consulta la explicación más abajo. |
| `loop.depth` | Indica la profundidad de un bucle recursivo en la que se encuentra la renderización. Comienza en el nivel 1 |
| `loop.depth0` | Indica la profundidad de un bucle recursivo en la que se encuentra la renderización. Comienza en el nivel 0 |
| `loop.first` | Esta variable se evalúa como verdadera, si es la primera iteración del bucle. |
| `loop.index` | La iteración actual del bucle. Esta variable empieza a contar en 1. |
| `loop.index0` | La iteración actual del bucle. Esta variable empieza a contar en 0. |
| `loop.last` | Esta variable se evalúa como verdadera, si es la última iteración del bucle. |
| `loop.length` | El número de elementos en la secuencia. |
| `loop.revindex` | El número de iteraciones desde el final del bucle. Cuenta regresiva hasta 1. |
| `loop.revindex0` | El número de iteraciones desde el final del bucle. Cuenta regresiva hasta 0. |
A continuación se muestran algunos ejemplos que utilizan diferentes variables de bucle. El siguiente ejemplo básico utiliza `loop.index` para mantener una cuenta que se imprime con cada iteración.
```html example.html theme={null}
{% set loopy = ["Content", "Social", "Contacts", "Reports"] %}
{% for app in loopy %}
{{ loop.index }}. {{app}}
{% endfor %}
```
```html example.html theme={null}
1. Content
2. Social
3. Contacts
4. Reports
```
El siguiente ejemplo utiliza la lógica condicional para comprobar si la longitud del bucle es `divisibleby` ciertos números. A continuación, se renderiza la anchura del div de post-item en consecuencia. El ejemplo utiliza el bucle estándar de post de blog y asume que hay 6 posts en el bucle.
```html example.html theme={null}
{% for content in contents %}
{% if loop.length is divisibleby 4 %}
```
## Bucles anidados
Los bucles también pueden anidarse con bucles. El bucle for secundario se ejecutará con cada iteración del bucle for principal. En el siguiente ejemplo, se imprime una lista de elementos secundarios en un `
` anidado dentro de un `
` de elementos principales.
```html example.html theme={null}
{% set parents = ["Parent item 1", "Parent item 2", "Parent item 3"] %}
{% set children = ["Child item 1", "Child item 2", "Child item 3"] %}
{% for parent in parents %}
{{parent}}
{% for child in children %}
{{child}}
{% endfor %}
{% endfor %}
```
```html example.html theme={null}
Parent item 1
Child item 1
Child item 2
Child item 3
Parent item 2
Child item 1
Child item 2
Child item 3
Parent item 3
Child item 1
Child item 2
Child item 3
```
## cycle
La etiqueta cycle puede utilizarse dentro de un bucle for para recorrer una serie de valores de cadena e imprimirlos en cada iteración. Una de las aplicaciones más prácticas de esta técnica es aplicar la alternancia de clases a los posts de tu blog en un listado. Esta etiqueta puede utilizarse en más de dos valores y repetirá el ciclo si hay más iteraciones del bucle que valores del ciclo. En el ejemplo siguiente, se aplica una clase `odd` y `even` a los posts de un listado (el ejemplo supone que hay 5 posts en el bucle)
Ten en cuenta que **no hay espacios** entre los valores de la cadena de ciclos separados por comas.
```html example.html theme={null}
{% for content in contents %}
```
## Variables dentro de los bucles
> [!WARNING]
>
> Cualquier variable definida dentro de los bucles está limitada al ámbito de ese bucle y no puede ser llamada desde fuera del mismo.
Puedes llamar a las variables definidas fuera de un bucle, desde dentro de un bucle, pero no a la inversa.
## Pares clave y valor en los bucles
Si el diccionario de información que está recorriendo tiene pares clave y valor, un simple bucle for solo tendría acceso a los valores. Si deseas tener acceso tanto a las claves como a los valores dentro del bucle for, el HubL se formatearía así:
```text entrada.txt theme={null}
{% set dict_var = {"name": "Cool Product", "price": "$20", "size":"XL"} %}
{% for key, val in dict_var.items() %}
{{ key }}: {{ val }}
{% endfor %}
```
```text salidas.txt theme={null}
name: Cool Product
price: $20
size: XL
```
## Iterar un número determinado de veces
A veces se quiere iterar un número determinado de veces, esto puede ser útil para generar HTML o CSS. Puedes hacerlo con la función de rango.
```html example.html theme={null}
{% for x in range(0,5) %}
{{loop.index}}
{% endfor %}
```
```text salida renderizada.txt theme={null}
1 2 3 4 5
```
## Uso de las etiquetas HubL en los bucles
Cuando agregas una etiqueta a la página HubSpot asignas automáticamente un `id` al HTML que la envuelve. Esta etiqueta es única por su "nombre". En situaciones en las que se necesita utilizar una etiqueta en un bucle for, establecer nombres únicos no es práctico. Agrega el parámetro `unique_in_loop` a tu etiqueta para generar identificadores únicos. Este parámetro agrega el nombre del módulo con el número de iteración del bucle actual, asegurando que es único. Los identificadores únicos no solo son necesarios para un HTML válido, sino que son importantes para la [accesibilidad](/docs/cms/best-practices/improve-existing-sites/accessibility).
```hubl theme={null}
{% for item in module.icon_field %}
{% icon
name="{{ item.name }}",
style="{{ item.type }}",
unicode="{{ item.unicode }}",
unique_in_loop=True
%}
{% endfor %}
```
# Operadores y pruebas de expresiones
Source: https://developers.hubspot.es/docs/cms/reference/hubl/operators-and-expression-tests
Para ampliar la lógica y la funcionalidad de tus plantillas, HubL admite varios operadores clave y pruebas de expresión. Los operadores permiten ejecutar funciones matemáticas, realizar comparaciones, generar lógica más compleja en las plantillas y modificar la representación del marcado. Además, este artículo contiene una lista completa de pruebas de expresión que pueden utilizarse en HubL.
Para ampliar la lógica y la funcionalidad de tus plantillas, HubL admite varios operadores clave y pruebas de expresión. Los [operadores](/docs/cms/reference/hubl/operators-and-expression-tests#operators) permiten ejecutar funciones matemáticas, realizar comparaciones, generar lógica más compleja en las plantillas y modificar la representación del marcado. Además, este artículo contiene una lista completa de [pruebas de expresión](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests) que se pueden utilizar en HubL.
## Operadores
Los operadores son símbolos que indican al compilador de HubL que ejecute diversas operaciones que dan lugar al output final del marcador. Los operadores se colocan entre los operadores para relacionar ambos valores, ya sea para ejecutar funciones matemáticas, realizar comparaciones o implementar expresiones booleanas.

A continuación están los operadores que puedes utilizar en HubL, organizados por el tipo.
### Matemáticas
Los operadores matemáticos estándar pueden utilizarse para calcular valores en el contexto de una plantilla.
```hubl theme={null}
{% set my_num = 11 %}
{% set my_number = 2 %}
{{ my_num + my_number }}
{{ my_num - my_number }}
{{ my_num / my_number }}
{{ my_num % my_number }}
{{ my_num // my_number }}
{{ my_num * my_number }}
{{ my_num ** my_number }}
```
| Símbolo | Descripción |
| - | - |
| `+` | Suma dos objetos, generalmente valores numéricos. Para concatenar cadenas o listas, debes utilizar el [operador `~`](#other-hubl-operators). |
| `-` | Resta un número de otro. |
| `/` | Divide números |
| `%` | Devuelve el resto de la división de números |
| `//` | Divide dos números y devuelve el resultado entero truncado. Por ejemplo, `{{ 20 // 7 }}` es `2`. |
| `*` | Multiplica números |
| `**` | Eleva el operador izquierdo a la potencia del operador derecho |
### Comparación
Los operadores de comparación se pueden utilizar para evaluar valores para la lógica de la plantilla. Puedes ver algunos ejemplos de operadores de comparación en las [sentencias if](/docs/cms/reference/hubl/if-statements).
```hubl theme={null}
{% set my_num = 11 %}
{% set my_number = 2 %}
{{ my_num == my_number }}
{{ my_num != my_number }}
{{ my_num > my_number }}
{{ my_num >= my_number }}
{{ my_num < my_number }}
{{ my_num <= my_number }}
```
| Símbolo | Abreviación | Descripción |
| - | - | - |
| `==` | eq | Igual a. Evalúa como verdadero si los dos objetos tienen valores iguales. |
| `!=` | ne | No es igual a. Se evalúa como verdadero si dos objetos no son iguales. |
| `>` | gt | Mayor que. Evalúa como verdadero si el valor del operador izquierdo es mayor que el del operador derecho. |
| `>=` | gte | Mayor que o igual a. Evalúa como verdadero si el operador izquierdo es mayor o igual que el operador derecho. |
| `<` | lt | Menor que. Evalúa como verdadero si el operador izquierdo es menor que el operador derecho. |
| `<=` | lte | Menor que o igual a. Evalúa como verdadero si el operador izquierdo es menor o igual que el operador derecho. |
> [!TIP]
>
> La versión abreviada de los operadores de comparación se puede utilizar en filtros que implican la comprobación de una expresión como [`|selectattr()`](/docs/cms/reference/hubl/filters#selectattr).
### Lógica
Los operadores lógicos te permiten implementar expresiones booleanas, así como combinar varias expresiones en una sola instrucción.
```text and.txt theme={null}
Two non-empty strings:
{{ "a" and "b" }}
Empty string and non-empty string:
{{ "" and "b" }}
Two non-zero numbers:
{{ 1 and 2 }}
Zero and non-zero number:
{{ 0 and 1 }}
Two non-empty lists:
{{ [1] and [2] }}
Empty list and non-empty list:
{{ [] and [2] }}
Two non-empty dicts:
{{ {a: 1} and {b: 2} }}
Empty dict and non-empty dict:
{{ {} and {b: 2} }}
```
```text or.txt theme={null}
Two non-empty strings:
{{ "a" or "b" }}
Empty string and non-empty string:
{{ "" or "b" }}
Two non-zero numbers:
{{ 1 or 2 }}
Zero and non-zero number:
{{ 0 or 1 }}
Two non-empty lists:
{{ [1] or [2] }}
Empty list and non-empty list:
{{ [] or [2] }}
Two non-empty dicts:
{{ {a: 1} or {b: 2} }}
Empty dict and non-empty dict:
{{ {} or {b: 2} }}
```
```text is / is not.txt theme={null}
Conditional using `is` operator:
{% set string = "strings are a cat's best friend" %}
{% if string is string_containing "cat" %}
Meow
{% else %}
Woof
{% endif %}
Conditional using `not` operator:
{% set string = "strings are a cat's best friend" %}
{% if string is not string_containing "cat" %}
Meow
{% else %}
Woof
{% endif %}
```
```text (expr).txt theme={null}
{% set my_num = 10 %}
{% set my_variable = 5 %}
{{ (my_num + 2) * my_variable }}
```
```text ?.txt theme={null}
{% set date = local_dt %}
{{ date ? date : 'No date'}}
{{ todays_date ? todays_date : 'No date'}}
```
| Símbolo | Descripción |
| - | - |
| `and` | Devuelve `true` si tanto el operador izquierdo como el derecho son verdaderos. En caso contrario, devuelve `false`. Este operador no se comporta como el operador `and` en Python o el operador `&&` en JavaScript. Más información sobre el uso de los operadores `and` a continuación. |
| `or` | Devuelve el primer operador si es verdadero. En caso contrario, devuelve el segundo operador. Este operador es equivalente a `or` en Python y `\|\|` en JavaScript Más información sobre el uso de los operadores `or` a continuación. |
| `is` | Une dos operadores para una declaración afirmativa. |
| `not` | Niega una afirmación, junto con `is`. |
| `(expr)` | Agrupa una expresión para el orden de las operaciones. Por ejemplo, `(10 - 2) * variable`. |
| `?` | El [operador ternario](/docs/cms/reference/hubl/if-statements) puede utilizarse para escribir rápidamente la lógica condicional. Acepta 3 argumentos: expresión, condición verdadera, condición falsa. Evalúa una expresión y devuelve la condición correspondiente. |
**Utilizar operadores "and" y "or"**
En HubL, el operador `or` se comporta como el operador `or` en Python y como el operador `||` en JavaScript. Devolverá el primer operador si la expresión se evalúa como verdadera, en caso contrario devolverá el segundo operador. Un caso de uso habitual del operador `or` es el ajuste de un valor alternativo cuando no está definido el valor de una variable.
```hubl theme={null}
Two non-empty strings:
{{ "a" or "b" }}
Empty string and non-empty string:
{{ "" or "b" }}
Defining a fallback value:
{{ some_variable or "default value" }}
```
Sin embargo, el operador `and` se comporta de forma diferente al operador `and` en Python y al operador `&&` en JavaScript. En HubL, `and` siempre devolverá un valor booleano: cuando la expresión se evalúe como verdadera, se devolverá `true`, de lo contrario devolverá `false`. Por otra parte, los operadores de Python y JavaScript devolverán un valor de operando dependiendo si la instrucción se evalúa como verdadera o falsa.
```hubl theme={null}
Two non-empty strings:
{{ "a" and "b" }}
Empty string and non-empty string:
{{ "" and "b" }}
```
En HubL, las listas vacías (`[]`) y los dicc. vacíos (`{}`) se consideran falsos. Esto es equivalente al comportamiento en Python, pero diferente de JavaScript, donde `[]` y `{}` son veraces.
```hubl theme={null}
Empty list and non-empty list:
{{ [] or [2] }}
Empty dict and non-empty dict:
{{ {} and {b: 2} }}
```
### Otros operadores de HubL
A continuación se encuentran otros operadores importantes de HubL que pueden utilizarse para realizar diversas tareas.
| Símbolo | Descripción |
| - | - |
| `in` | Comprueba si un valor está en una secuencia. |
| `is` | Realiza una [prueba de expresión](/docs/cms/reference/hubl/operators-and-expression-tests#expression-tests). |
| `\|` | Aplica un filtro. |
| `~` | Concatena los valores. |
## Pruebas de expresión
Las pruebas de expresión son varias condiciones booleanas que pueden evaluarse utilizando operadores lógicos.
### boolean
Verifica si el objeto es booleano (en un sentido estricto, no solo si puede evaluarse como una expresión verdadera).
```text hubl.txt theme={null}
{% set isActive = false %}
{% if isActive is boolean %}
isActive is a boolean
{% endif %}
```
```text resultados renderizados.txt theme={null}
isActive is a boolean
```
### containing
La prueba de expresión comprueba si una variable de lista tiene un valor en ella.
```text hubl.txt theme={null}
{% set numbers = [1, 2, 3] %}
{% if numbers is containing 2 %}
Set contains 2!
{% endif %}
```
```text resultados renderizados.txt theme={null}
Set contains 2!
```
### containingall
La prueba de expresión comprueba si una variable de lista contiene todos los valores de otra lista.
```text hubl.txt theme={null}
{% set numbers = [1, 2, 3] %}
{% if numbers is containingall [2, 3] %}
Set contains 2 and 3!
{% endif %}
{% if numbers is containingall [2, 4] %}
Set contains 2 and 4!
{% endif %}
```
```text resultados renderizados.txt theme={null}
Set contains 2 and 3!
```
### defined
La prueba de expresión comprueba si una variable está definida en el contexto de la plantilla. Aunque puedes utilizar esta prueba de expresión, al escribir una sentencia if sin ningún operador se comprobará por opción predeterminada si la variable está definida o no.
En el siguiente ejemplo, se comprueba el parámetro de color de un módulo de color. Si el parámetro de color no tuviera ningún valor, la plantilla, por opción predeterminada, mostraría un color de fondo negro. Si se define, muestra el color de fondo establecido por el usuario.
```text hubl.txt theme={null}
{% color "my_color" color="#930101", export_to_template_context=True %}
```
```html example.html theme={null}
```
### divisibleby
Comprueba si un objeto es divisible por otro número.
Por ejemplo, a continuación se crea un bucle for que itera a través de una lista de tipos de animales. Cada tipo de animal se imprime en un div, y al quinto div tiene aplicado un estilo en línea diferente (width:100%). Este concepto podría aplicarse a un blog en el que se renderiza un marcador diferente para un determinado patrón de entradas. Para saber más sobre los bucles for y loop.index, [consulta este artículo](/docs/cms/reference/hubl/loops).
```text hubl.txt theme={null}
{% set animals = ["lions", "tigers", "bears", "dogs", "sharks"] %}
{% for animal in animals %}
{% if loop.index is divisibleby 5 %}
```
### equalto
Comprueba si el valor de una variable es igual a una constante o a otra variable. También puedes utilizar el operador `==` para realizar la misma prueba.
En el siguiente ejemplo, el ancho de loas publicaciones del blog se ajusta en función del número total de entradas en el bucle. La salida del ejemplo supone que hay 4 publicaciones en el blog.
```html example.html theme={null}
{% for content in contents %}
{% if loop.length is equalto 2 %}
Post content
{% elif loop.length is equalto 3 %}
Post content
{% elif loop.length is equalto 4 %}
Post content
{% else %}
Post content
Post content
Post content
Post content
```
### even
Comprueba si una variable numérica es un número par.
El siguiente ejemplo muestra un bucle simplificado de listado de blogs, en el que si la iteración actual del bucle es par, se asigna una clase de `even-post` al div del elemento de la entrada. De lo contrario, se asigna una clase de `odd-post`.
```html example.html theme={null}
{% for content in contents %}
{% if loop.index is even %}
```
### float
Comprueba si una variable numérica es un número de punto flotante.
```html example.html theme={null}
{% set quantity = 1.20 %}
{% if quantity is float %}
quantity is a floating point number
{% endif %}
```
```html example.html theme={null}
quantity is a floating-point number
```
### integer
Comprueba si una variable es un entero.
```html example.html theme={null}
{% set quantity = 120 %}
{% if quantity is integer %}
Quantity is an integer
{% endif %}
```
```html example.html theme={null}
Quantity is an integer
```
### iterable
Comprueba si una variable se puede recorrer en bucle.
Este ejemplo comprueba una variable llamada `jobs` para ver si puede ser iterada. Como la variable contiene una lista de trabajos, la [sentencia if](/docs/cms/reference/hubl/if-statements) se evaluaría como `true` y el bucle se ejecutaría. Si la variable contuviera un solo valor, la sentencia if imprimiría ese valor con un marcador diferente. [Más información sobre los bucles for](/docs/cms/reference/hubl/loops).
```html example.html theme={null}
{% set jobs = ["Accountant", "Developer", "Manager", "Marketing", "Support"] %}
{% if jobs is iterable %}
Available positions
{% for job in jobs %}
{{ job }}
{% endfor %}
{% else %}
Available position
{{ jobs }}
{% endif %}
```
```html example.html theme={null}
Available positions
Accountant
Developer
Manager
Marketing
Support
```
### lower
Comprueba si una cadena está en minúsculas.
El siguiente ejemplo utiliza una [instrucción unless](/docs/cms/reference/hubl/if-statements#unless-statements) y un filtro lower para asegurar que una cadena de texto introducida en un módulo de texto esté siempre en minúsculas.
```html example.html theme={null}
{% module "my_text" path="@hubspot/text" label="Enter text", value="Some TEXT that should be Lowercase", export_to_template_context=True %}
{% unless widget_data.my_text.value is lower %}
{{ widget_data.my_text.value|lower }}
{% endunless %}
```
```text resultados renderizados.txt theme={null}
some text that should be lowercase
```
### mapping
Comprueba si un objeto es un dicc. (diccionario).
El siguiente ejemplo comprueba si el objeto de contacto es un diccionario.
```html example.html theme={null}
{% if contact is mapping %}
This object is a dictionary.
{% else %}
This object is not a dictionary.
{% endif %}
```
```text resultados renderizados.txt theme={null}
This object is a dictionary.
```
### none
Comprueba si una variable tiene un valor `null`.
```html example.html theme={null}
{% module "user_email" path="@hubspot/text" label="Enter user email", value="example@hubspot.com", export_to_template_context=True %}
{% unless widget_data.user_email.value is none %}
{{ widget_data.user_email.value }}
{% endunless %}
```
```text resultados renderizados.txt theme={null}
example@hubspot.com
```
### number
Comprueba si el valor de una variable es un número.
El siguiente ejemplo comprueba si una variable es o no una variable, y si es así la convierte en millones.
```html example.html theme={null}
{% set my_var = 40 %}
{% if my_var is number %}
{{ my_var * 1000000 }}
{% else %}
my_var is not a number.
{% endif %}
```
```text resultados renderizados.txt theme={null}
40000000
```
### odd
Comprueba si una variable numérica es un número impar.
A continuación se muestra el mismo ejemplo que la prueba de expresión par inversa descrita anteriormente.
```html example.html theme={null}
{% for content in contents %}
{% if loop.index is odd %}
```
### sameas
Comprueba si dos variables tienen o no el mismo valor.
El siguiente ejemplo establece dos variables y luego comprueba si son iguales o no.
```text hubl.txt theme={null}
{% set var_one = True %}
{% set var_two = True %}
{% if var_one is sameas var_two %}
The variables values are the same.
{% else %}
The variables values are different.
{% endif %}
```
```text resultados renderizados.txt theme={null}
The variables values are the same.
```
### sequence
Similar a la prueba **iterable**, esta prueba de expresión comprueba si una variable es una secuencia.
El siguiente ejemplo comprueba si una variable es una secuencia y luego itera a través de esa secuencia de géneros musicales.
```html example.html theme={null}
{% set genres = ["Pop", "Rock", "Disco", "Funk", "Folk", "Metal", "Jazz", "Country", "Hip-Hop", "Classical", "Soul", "Electronica" ] %}
{% if genres is sequence %}
Favorite genres
{% for genre in genres %}
{{ genre }}
{% endfor %}
{% else %}
Favorite genre:
{{ genres }}
{% endif %}
```
```html example.html theme={null}
Pop
Rock
Disco
Funk
Folk
Metal
Jazz
Country
Hip-Hop
Classical
Soul
Electronica
```
### string
Comprueba si el valor almacenado en una variable es texto.
El siguiente ejemplo comprueba si una variable es o no una cadena, y si es así, aplica un filtro de título para cambiar las mayúsculas.
```text hubl.txt theme={null}
{% set my_var = "title of section" %}
{% if my_var is string %}
{{ my_var|title }}
{% else %}
my_var is not a string
{% endif %}
```
```text resultados renderizados.txt theme={null}
Title Of Section
```
### string\_containing
Comprueba si una subcadena está contenida dentro de otra cadena. Esta prueba de expresión se utiliza junto con el operador `is`.
```text hubl.txt theme={null}
{% if content.domain is string_containing ".es" %}
Markup that will only render on content hosted on .es domains
{% elif content.domain is string_containing ".jp" %}
Markup that will only render on content hosted on .jp domains
{% else %}
Markup that will render on all other domains
{% endif %}
```
```text resultados renderizados.txt theme={null}
Markup that will render on all other domains
```
### string\_startingwith
Comprueba si una cadena empieza por una cadena determinada. Se utiliza junto con el operador `is`.
```text hubl.txt theme={null}
{% if content.slug is string_startingwith "es/" %}
Markup that will only render on content hosted in a /es/ subdirectory
{% elif content.slug is string_startingwith "jp/" %}
Markup that will only render on content hosted in a /jp/ subdirectory
{% else %}
Markup that will render on all subdirectories
{% endif %}
```
```text resultados renderizados.txt theme={null}
Markup that will render on all subdirectories
```
### truthy
Comprueba si una expresión se evalúa como `True`.
El siguiente ejemplo utiliza un módulo de casilla de verificación booleana para mostrar un mensaje de alerta.
```html example.html theme={null}
{% boolean "check_box" label="Show alert", value=True, export_to_template_context=True %}
{% if widget_data.check_box.value is truthy %}
Danger!
{% endif %}
```
```html example.html theme={null}
Danger!
```
### undefined
Comprueba si una variable está indefinida en el contexto de la plantilla. Esta prueba es diferente de la de `none`, ya que undefined será `true` cuando la variable esté presente pero no tenga ningún valor; mientras que none será `true` cuando la variable tenga un valor nulo.
El siguiente ejemplo comprueba la existencia de la variable "my\_var" en una plantilla.
```text hubl.txt theme={null}
{% if my_var is undefined %}
A variable named "my_var" does not exist on this template.
{% else %}
{{ my_var }}
{% endif %}
```
```text resultados renderizados.txt theme={null}
A variable named "my_var" does not exist on this template.
```
### upper
Comprueba si una cadena está toda en mayúsculas. A continuación se muestra un ejemplo inverso de la prueba de expresión `lower` [anterior](#lower).
```text hubl.txt theme={null}
{% module "my_text" path="@hubspot/text" label="Enter text", value="Some TEXT that should be Uppercase", export_to_template_context=True %}
{% unless widget_data.my_text.value is upper %}
{{ widget_data.my_text.value|upper }}
{% endunless %}
```
```text resultados renderizados.txt theme={null}
SOME TEXT THAT SHOULD BE UPPERCASE
```
### within
Comprueba si una variable está presente en una lista.
```text hubl.txt theme={null}
{% set numbers = [1, 2, 3] %}
{% if 2 is within numbers %}
2 is in the list!
{% endif %}
{% if 4 is within numbers %}
4 is in the list!
{% endif %}
```
```text resultados renderizados.txt theme={null}
2 is in the list!
```
# Etiquetas HubL del área de arrastrar y soltar
Source: https://developers.hubspot.es/docs/cms/reference/hubl/tags/dnd-areas
Las etiquetas HubL se utilizan para construir áreas de arrastrar y soltar que permiten a los desarrolladores crear secciones de páginas que admiten cambios de diseño, estilos y de contenido directamente dentro de los editores de contenido.
[Las áreas de arrastrar y soltar](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview) permiten a los desarrolladores crear secciones de páginas y parciales globales que admiten cambios de diseño, estilo y contenido directamente en los editores de contenido. Consulta el [tutorial sobre crear un área de arrastrar y soltar](/docs/cms/start-building/building-blocks/drag-and-drop/tutorial) para una introducción a la configuración de las áreas de arrastrar y soltar.
Las áreas de arrastrar y soltar se basan en una cuadricula responsiva de 12 columnas. Las etiquetas de arrastrar y soltar generan marcas con nombres de clase que designan columnas y filas. Tendrás que agregar una hoja de estilos para orientar esos nombres de clase. Un ejemplo de estilos de diseño que podrías implementar se encuentra en la [plantilla de CMS de HubSpot](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css). Tu hoja de estilo puede agregarse a la plantilla usando [`{{ require_css() }}`](/docs/cms/reference/hubl/tags/standard-tags#require-css).
> [!WARNING]
>
> ### Nota:
>
> Las áreas de arrastrar y soltar no se pueden utilizar en [publicaciones de blog](/docs/cms/start-building/building-blocks/templates/blog) ni [plantillas de correo electrónico](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview#email) en este momento.
## dnd\_area
Un [área de arrastrar y soltar](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview) es un contenedor que hace que una parte de la página web sea editable en cuanto a su estructura, diseño y contenido. El cuerpo de una etiqueta`{% dnd_area %}` proporciona el contenido predeterminado del área de arrastrar y soltar.
Los módulos en sí no pueden contener áreas de arrastrar y soltar. Para proporcionar a los creadores de contenido una interfaz para agregar contenido uniforme dentro de un módulo, utiliza en su lugar [campos y grupos repetibles](/docs/cms/reference/fields/module-theme-fields#repeaters).
Una etiqueta `dnd_area` puede contener los siguientes parámetros:
| Parámetro | Tipo | Descripción |
| - | - | - |
| `class` | Cadena | Una clase agregada al div envolvente de un dnd\_area |
| `label` | Cadena | Se utiliza en el editor para etiquetar el área en la barra lateral. |
```text entrada.txt theme={null}
{% dnd_area "unique_name", class="main" %}
{% end_dnd_area %}
```
```text salida.txt theme={null}
```
Las etiquetas `dnd_area` también pueden contener etiquetas `dnd_section`.
> [!WARNING]
>
> ### Nota:
>
> Un creador de contenido puede cambiar la plantilla de una página por otra del mismo tipo, dependiendo de si tiene etiquetas [dnd\_area](/docs/cms/reference/hubl/tags/dnd-areas).
>
> * Las plantillas construidas con el editor de diseño visual de arrastrar y soltar pueden cambiarse por otras plantillas de arrastrar y soltar o plantillas codificadas con o sin etiquetas `dnd_area`.
> * Las plantillas codificadas con etiquetas *dnd\_area* solo pueden cambiarse por otras plantillas codificadas con etiquetas `dnd_area`.
> * Las plantillas codificadas sin etiquetas `dnd_area` solo pueden cambiarse por otras plantillas codificadas sin etiquetas `dnd_area`.
## dnd\_section
Una [`{% dnd_section %}`](/docs/cms/start-building/building-blocks/sections/sections) es una fila de nivel superior, y debe estar anidada dentro de una etiqueta `{% dnd_area %}`. [Las secciones también pueden definirse como una plantilla](/docs/cms/start-building/building-blocks/sections/sections#section-templates) y luego [incluirse](/docs/cms/start-building/building-blocks/sections/sections#section-context) en una `dnd_area`, lo que las hace ideales para estructurar rápidamente una plantilla.
Una etiqueta `dnd_section` puede contener los siguientes parámetros:
| Parámetro | Tipo | Descripción |
| - | - | - |
| `background_color` | Dict | Un dict que permite especificar un [color de fondo](#background-color). También se puede proporcionar como una cadena de texto. |
| `background_image` | Dict | Un dict que permite especificar una [imagen de fondo](#background-image). |
| `background_linear_gradient` | Dict | Un dict que permite especificar un [fondo gradiente lineal](#background-linear-gradient). |
| `full_width` | Booleano | Un booleano que determina si la sección está destinada a ser de ancho completo o limitada por un contenedor interior. |
| `margin` | Dict | Un dict que permite especificar valores de margen en `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` y `%`. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado `px`. |
| `max_width` | Entero | Un valor en píxeles que establece el ancho máximo del contenido en un dict de envoltura. |
| `padding` | Dict | Un dict que permite especificar valores de relleno en `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` y `%`. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado `px`. |
| `vertical_alignment` | Cadena | Alineación vertical del contenido secundario. Las opciones disponibles incluyen:
`TOP`
`MIDDLE`
`BOTTOM`
|
> [!WARNING]
>
> ### Nota:
>
> Solo puede utilizar un parámetro de fondo por etiqueta `dnd_section`.
```text entrada.txt theme={null}
{% dnd_section
background_image={
"backgroundPosition": "MIDDLE_CENTER",
"backgroundSize": "cover",
"imageUrl": "https://example.com/path/to/image.jpg"
},
margin={
"top": 32,
"bottom": 32
},
padding={
"top": "1em",
"bottom": "1em",
"left": "1em",
"right": "1em"
},
max_width=1200,
vertical_alignment="MIDDLE"
%}
{% end_dnd_section %}
```
```text salida.txt theme={null}
```
Las etiquetas `dnd_section` también pueden contener las siguientes etiquetas:
* `dnd_column`
* `dnd_module`
## dnd\_column
Un [`{% dnd_column %}`](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview#column) es un bloque estructural vertical que ocupa una o más columnas de diseño definidas por su fila principal.
Esta etiqueta HubL debe estar anidada dentro de una etiqueta`{% dnd_area %}`.
Una etiqueta `dnd_column` puede contener los siguientes parámetros:
| Parámetro | Tipo | Descripción |
| - | - | - |
| `background_color` | Dict | Un dict que permite especificar un [color de fondo](#background-color). |
| `background_image` | Dict | Un dict que permite especificar una [imagen de fondo](#background-image). |
| `background_linear_gradient` | Dict | Un dict que permite especificar un [fondo gradiente lineal](#background-linear-gradient). |
| `margin` | Dict | Un dict que permite especificar valores de margen en `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` y `%`. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado `px`. |
| `max_width` | Entero | Un valor en píxeles que establece el ancho máximo del contenido en un dict de envoltura. |
| `padding` | Dict | Un dict que permite especificar valores de relleno en `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` y `%`. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado `px`. |
| `vertical_alignment` | Cadena | Alineación vertical del contenido secundario. Las opciones disponibles incluyen:
`TOP`
`MIDDLE`
`BOTTOM`
|
> [!WARNING]
>
> ### Nota:
>
> Solo puedes utilizar un parámetro de fondo por etiqueta `dnd_column`.
```text entrada.txt theme={null}
{% dnd_column
offset=0,
width=12,
background_color={
r: 255,
g: 0,
b: 0,
a: 1
},
margin={
"top": "1em",
"bottom": "1em"
},
%}
{% end_dnd_column %}
```
```text salida.txt theme={null}
```
Una etiqueta `dnd_column` también puede contener `dnd_row`.
## dnd\_row
Una [`{% dnd_row %}`](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview#row) es un bloque estructural horizontal que crea una cuadricula de diseño anidada de 12 columnas en la que se pueden colocar columnas y módulos.
Esta etiqueta HubL debe estar anidada dentro de una etiqueta`{% dnd_area %}`.
Una etiqueta `dnd_row` puede incluir los siguientes parámetros:
| Parámetro | Tipo | Descripción |
| - | - | - |
| `background_color` | Dict | Un dict que permite especificar un [color de fondo](#background-color). |
| `background_image` | Dict | Un dict que permite especificar una [imagen de fondo](#background-image). |
| `background_linear_gradient` | Dict | Un dict que permite especificar un [fondo gradiente lineal](#background-linear-gradient). |
| `margin` | Dict | Un dict que permite especificar valores de margen en `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` y `%`. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado `px`. |
| `max_width` | Entero | Un valor en píxeles que establece el ancho máximo del contenido en un dict de envoltura. |
| `padding` | Dict | Un dict que permite especificar valores de relleno en `cm`, `mm`, `Q`, `in`, `pc`, `pt`, `px`, `em`, `ex`, `ch`, `rem`, `lh`, `vw`, `vh`, `vmin`, `vmax` y `%`. Cuando no se proporciona ninguna unidad de medida, se aplica el valor predeterminado `px`. |
| `vertical_alignment` | Cadena | Alineación vertical del contenido secundario. Las opciones disponibles incluyen:
```
Las etiquetas dnd\_row también pueden contener las siguientes etiquetas:
* `dnd_column`
* `dnd_module`
## dnd\_module
Un [`{% dnd_module %}`](https://developers.hubspot.es/docs/cms/start-building/building-blocks/drag-and-drop/overview#module) es un [módulo](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview) envuelto dentro de un div donde se puede agregar diseño, estilos y contenido. El módulo se especifica haciendo referencia a su ruta, que puede ser un módulo predeterminado de HubSpot (usando el espacio de nombres `@hubspot/`), o módulos que hayas construido, especificando su ruta dentro del árbol de archivos del administrador de diseño
Esta etiqueta HubL debe estar anidada dentro de una etiqueta`{% dnd_area %}`.
Una etiqueta `dnd_module` puede contener los siguientes parámetros:
| Parámetro | Tipo | Descripción |
| - | - | - |
| `path` | Cadena | La ruta a un módulo. |
| `horizontal_alignment` | Cadena | El posicionamiento horizontal, admite:`LEFT`, `CENTER`, `RIGHT` |
| `offset` | Entero | El desplazamiento desde 0 en la cuadrícula de 12 columnas. |
| `width` | Entero | El número de columnas que ocupan la cuadrícula de 12 columnas. |
| `flexbox_positioning` | Cadena | **Obsoleto, no utilizar.** En su lugar, utiliza `horizontal_alignment` junto con la fila o sección `vertical_alignment` . Valor de posición de Flexbox para el módulo. Admite una cadena que indica la posición vertical seguida de la horizontal:
`TOP_LEFT`
`TOP_CENTER`
`TOP_RIGHT`
`MIDDLE_LEFT`
`MIDDLE_CENTER`
`MIDDLE_RIGHT`
`BOTTOM_LEFT`
`BOTTOM_CENTER`
`BOTTOM_RIGHT`
|
> [!TIP]
>
> ¿Tienes un módulo antiguo cuyo nombre de campo coincide con uno de los parámetros de `dnd_module` anteriores? Puedes [pasar valores predeterminados a través de un parámetro de campos](/docs/cms/reference/modules/using-modules-in-templates#passing-fields-that-have-dnd-associated-parameters), como lo harías con un grupo de campos.
```text entrada.txt theme={null}
{% dnd_module
path="@hubspot/rich_text",
offset=0,
width=8,
%}
{% module_attribute "html" %}
```
## Fondo
Hay varias formas de establecer fondos en los elementos dnd de columna, sección y fila, [`background_image`](#background-image), [`background_linear_gradient`](#background-linear-gradient) y [`background_color`](#background-color).
### background\_color
Las etiquetas dnd de columna, sección y fila admiten colores de fondo. Puedes establecer el color de fondo predeterminado para un elemento de arrastrar y soltar utilizando `background_color`. Este parámetro es un parámetro basado en una cadena y puede incluir los siguientes formatos indicados en el ejemplo siguiente.
```hubl theme={null}
{% dnd_section %}
// Hex Value (both 3 and 6 char length)
{% dnd_column background_color="#F7F7F7" %}
{% end_dnd_column %}
{% dnd_column background_color="#FFF" %}
{% end_dnd_column %}
// Both RGB and RGBA
{% dnd_column background_color="rgb(255,255,255)" %}
{% end_dnd_column %}
{% dnd_column background_color="rgba(0,0,0,.25)" %}
{% end_dnd_column %}
{% end_dnd_section %}
```
### background\_linear\_gradient
Los elementos dnd de columna, sección y fila admiten gradientes lineales de fondo. Puedes establecer un gradiente predeterminado utilizando el parámetro `background_linear_gradient`. El parámetro espera un dict. Actualmente solo admite dos paradas de color.
| Parámetro | Tipo | Descripción |
| - | - | - |
| `direction` | Cadena | La dirección del gradiente.
`to bottom`
`to top`
`to left`
`to right`
|
| `colors` | matriz | Matriz de cadenas de color. Actualmente admite 2 valores, el inicial y el final. Los valores se proporcionan como cadenas, y se admiten los siguientes formatos:
`RGB`
`RGBA`
`3 char hex`
`6 char hex`
`8 char hex`
|
```hubl theme={null}
{% dnd_section
background_linear_gradient={
"direction": "to bottom",
"colors": [
"#1EB6C3",
"#2A2859"
]
}
%}
{% dnd_module path="@hubspot/rich_text" width="6" %}
{% end_dnd_module %}
{% end_dnd_section %}
```
### background\_image
Los elementos dnd de columna, sección y fila admiten imágenes de fondo. Puedes proporcionar una imagen de fondo predeterminada utilizando el parámetro `background_image` que espera un dict.
| Clave | Tipo | Descripción |
| - | - | - |
| `backgroundPosition` | Cadena | La posición de fondo de la imagen. Admite una cadena que indica la posición vertical seguida de la horizontal.
`TOP_LEFT`
`TOP_CENTER`
`TOP_RIGHT`
`MIDDLE_LEFT`
`MIDDLE_CENTER`
`MIDDLE_RIGHT`
`BOTTOM_LEFT`
`BOTTOM_CENTER`
`BOTTOM_RIGHT`
|
| `backgroundSize` | Cadena | La propiedad de tamaño de fondo CSS utilizada para la imagen. Los valores admitidos son:
`cover`
`contain`
`auto`
|
| `imageUrl` | Cadena | URL absoluta de la imagen. |
```hubl theme={null}
{% dnd_section
background_image = {
"backgroundPosition": "MIDDLE_CENTER",
"backgroundSize": "cover",
"imageUrl": "https://www.example.com/bg-image.jpg"
},
%}
{% dnd_module path="@hubspot/rich_text" width="6" %}
{% end_dnd_module %}
{% end_dnd_section %}
```
## Cómo se trasladan los parámetros de estilo de dnd a la página
Cuando utilizas parámetros basados en estilo, como los [fondos](#background), los márgenes o el relleno, los nombres de las clases se calculan automáticamente para las secciones, columnas, filas y módulos. Los valores de propiedad que has asignado se agregan a los nombres de clase creados automáticamente y el código CSS resultante se coloca antes de la etiqueta de cierre `` en la página en una etiqueta `
" The Content Optimization System
matches content with context to create a highly personalized, relevant and
meaningful customer experience.
"
Dharmesh Shah,HubSpot
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `module_id` | Cadena | El ID del módulo que se renderizará. |
| `path` | Cadena | La ruta del módulo que se renderizará. Incluye la barra inclinada para la ruta absoluta, de lo contrario la ruta es relativa a la plantilla. Consulta los módulos predeterminados de HubSpot con rutas correspondientes a sus etiquetas de HubL, como @hubspot/rich\_text, @hubspot/linked\_image, etc. |
## Marcadores de posición del editor
Para mostrar el contenido del marcador de posición de un módulo en el editor, puedes añadir el contenido predeterminado a los campos del módulo o utilizar la etiqueta de HubL `editor_placeholder`. Esta etiqueta puede ser útil cuando el módulo no tiene o necesita contenido predeterminado, o bien para optimizar la construcción del módulo.

Para agregar un marcador de posición del editor a un módulo personalizado, añade primero una [instrucción "if"](/docs/cms/reference/hubl/if-statements) al HTML del módulo para que muestre el marcador de posición cuando no haya contenido seleccionado en el editor. Por ejemplo, el siguiente código podría utilizarse para agregar un marcador de posición del editor a un módulo CTA:
```hubl theme={null}
{% if module.label %}
{% cta guid="{{ module.guid }}" label="my_cta" %}
{% elif is_in_editor %}
{% editor_placeholder %}
{% endif %}
```
> [!NOTE]
>
> La primera instrucción `if` identifica si el módulo está presente. Luego, la
> instrucción `elif` identifica si el módulo se renderiza en el contexto del
> editor utilizando la variable `is_in_editor`. Esta variable devuelve `true` si
> el contenido se está renderizando en cualquier editor de contenidos, pero
> puedes especificar aún más con las variables del [editor y la vista previa
> ](/docs/cms/reference/hubl/variables#in-app-editor-and-preview-variables).
Luego, define el contenido del marcador de posición en el archivo `meta.json` del módulo.
```json theme={null}
{
"global": false,
"host_template_types": ["PAGE"],
"module_id": 62170380654,
"is_available_for_new_content": true,
"placeholder": {
"show_module_icon": true,
"title": "Call to action",
"description": "Select a CTA"
}
}
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `show_module_icon` | Booleano | Determina si se debe mostrar el ícono del módulo. |
| `title` | Cadena | El título que aparece en el marcador de posición. |
| `description` | Cadena | La descripción que aparece en el marcador de posición. |
## Columna flexible
Las columnas flexibles son columnas verticales en una plantilla que permiten a los creadores de contenido insertar y eliminar módulos en la página utilizando el [editor de contenido](https://knowledge.hubspot.com/es/website-pages/edit-page-content-in-a-drag-and-drop-area). Al codificar una columna flexible con HubL, puedes elegir otros módulos de HubL para que aparezcan en la columna flexible por opción predeterminada. El código de ejemplo que aparece a continuación muestra la sintaxis básica y una columna flexible de ejemplo con un módulo de texto enriquecido y un formulario como contenido predeterminado.
Ten en cuenta que las columnas flexibles solo pueden agregarse a las plantillas de página, pero no a las plantillas de blog o de correo electrónico. Los módulos no pueden contener columnas flexibles, pero pueden contener [campos y grupos repetibles](/docs/cms/reference/fields/module-theme-fields#repeaters), lo que proporciona una funcionalidad similar.
```text input.txt theme={null}
{% widget_container "my_flexible_column" label="My flex column"%}
{% module "rich_text" path="@hubspot/rich_text" %}
{% module "linked_image" path="@hubspot/linked_image" %}
{% end_widget_container %}
```
```text output.txt theme={null}
Something Powerful
Tell The Reader More
The headline and subheader tells us what you're
offering, and the form header closes the deal. Over here
you can explain why your offer is so great it's worth filling out a form
for.
```
> [!WARNING]
>
> ### Nota:
>
> Cuando uses esta etiqueta, la `label` debe seguir el valor `name` de la columna flexible para funcionar en el editor de contenido. Por ejemplo, la siguiente sintaxis no es válida:
>
> `[% widget_container label="My label" "my_flexible_column" %}`
## Formulario
Permite a los usuarios seleccionar un formulario de HubSpot para agregarlo a su página. El siguiente código incluye un ejemplo de uso de la sintaxis estándar de etiquetas HubL y un ejemplo de uso de [la sintaxis de bloques](/docs/cms/reference/modules/using-modules-in-templates#block-syntax).
```text input.txt theme={null}
{% form "my_form"
form_to_use="{formID}",
title="Free Trial"
%}
{% module_block form "my_form"
form_follow_ups_follow_up_type="",
form_to_use="9e633e9f-0634-498e-917c-f01e355e83c6",
title="Free Trial",
notifications_are_overridden=True,
response_message="Thanks for submitting the form.",
response_type="inline",
overrideable=True,
gotowebinar_webinar_key="",
webinar_id="",
webinar_source"",
label="Form"
%}
{% module_attribute "notifications_override_email_addresses" is_json=True %}
["email_address@website.com"]
{% end_module_attribute %}
{% end_module_block %}
```
```text output.txt theme={null}
Free Trial
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `form_key` | Cadena | Especifica un ID único para el formulario a nivel de página. |
| `form_to_use` | Cadena | Especifica qué formulario cargar de forma predeterminada, basándose en el ID del formulario. Este ID está disponible en la URL del editor de formularios de cada formulario. |
| `title` | Cadena | Rellena una etiqueta `h3` en el encabezado del formulario. |
| `no_title` | Booleano | Si es `True`, se elimina la etiqueta h3 que está encima del título. |
| `form_follow_ups_follow_up_type` | Enumeración | Especifica las acciones de seguimiento, como inscribir a un contacto en un workflow o enviar un correo de seguimiento simple. Los valores posibles son `no_action`, `simple` y `automation`. |
| `simple_email_for_live_id` | Número | Especifica el ID del correo de seguimiento simple para la página publicada. |
| `simple_email_for_buffer_id` | Número | Especifica el ID del correo de seguimiento simple para la versión de guardado automático de una página. |
| `follow_up_type_simple` | Booleano | Si es "True", permite un correo de seguimiento simple. Alternativa de `form_follow_ups_follow_up_type`. |
| `follow_up_type_automation` | Booleano | Si es "True", inscribe los envíos de formularios en un workflow. Alternativa de `form_follow_ups_follow_up_type`. |
| `simple_email_campaign_id` | Número | Especifica el ID del correo de seguimiento simple. Alternativa de `simple_email_for_live_id`. |
| `form_follow_ups_workflow_id` | Número | Especifica el ID del workflow en el que se inscriben los envíos de formularios. |
| `response_redirect_url` | Cadena | Si se redirecciona a una página externa, este parámetro especifica la URL a la que se debe redireccionar. |
| `response_redirect_id` | Número | Si se redirecciona a una página alojada en HubSpot, este parámetro especifica el ID de la página. El ID de la página está disponible en la URL del editor de páginas de cada página. |
| `response_response_type` | Enumeración | Determina si se redirecciona a otra página o si se muestra un mensaje de agradecimiento en línea cuando se envía el formulario. El valor de este parámetro debe ser `"redirect"` o `"inline"` (predeterminado). |
| `response_message` | Cadena | Establece un mensaje de agradecimiento en línea. Este parámetro es compatible con HTML. |
| `notifications_are_overridden` | Booleano | Si es `True`, el formulario enviará notificaciones a las direcciones de correo electrónico seleccionadas en el parámetro `notifications_override_email_addresses`, en lugar de a los valores predeterminados del formulario. Por opción predeterminada es `False`. |
| `notifications_override_guid_buffer` | Cadena | ID de la configuración de anulación en la versión de autoguardado de la página. |
| `notifications_override_guid` | Cadena | ID de la configuración de anulación en la versión publicada de la página. |
| `notifications_override_email_addresses` | JSON | La sintaxis de bloques admite una lista JSON de destinatarios de correo electrónico que serán notificados al enviar los formularios. Estas direcciones de correo electrónico anulan la configuración de notificación por correo electrónico establecida en el formulario. |
| `sfdc_campaign` | Cadena | Especifica la campaña de Salesforce en la que se inscribirán los contactos que envíen el formulario. El valor de este parámetro debe ser el ID de la campaña de SFDC y solo está disponible para los portales que tienen la [integración con Salesforce](https://knowledge.hubspot.com/es/salesforce/install-the-hubspot-salesforce-integration). |
| `gotowebinar_webinar_key` | Cadena | Especifica el webinario de GoToWebinar en el que se inscribirán los contactos tras enviar el formulario. Solo disponible para las cuentas que utilizan la [integración de GoToWebinar](https://knowledge.hubspot.com/es/integrations/use-the-gotowebinar-integration-with-hubspot). |
| `webinar_id` | Cadena | Un campo más genérico que especifica el ID del webinario de Microsoft Teams o GoToWebinar en el que inscribir a los contactos tras enviar el formulario. Solo disponible en cuentas que utilicen las integraciones [GoToWebinar](https://knowledge.hubspot.com/es/integrations/use-the-gotowebinar-integration-with-hubspot) o [Microsoft Teams](https://knowledge.hubspot.com/es/integrations/connect-hubspot-and-microsoft-teams), y cuando `support_all_webinar_types` esté configurado como `true` en la [definición de campos de formulario](/docs/cms/reference/fields/module-theme-fields#form). |
| `webinar_source` | Cadena | El ID de la app de integración, ya sea GoToWebinar (`35161`) o Microsoft Teams (`221635`). |
## Pie de página
Presenta la información de derechos de autor con el año y el nombre de la empresa especificados en la [configuración de correos de marketing](https://knowledge.hubspot.com/es/marketing-email/edit-email-footer-addresses#edit-your-default-email-footer-information-in-your-settings) de la cuenta.
```text input.txt theme={null}
{% page_footer "page_footer" %}
```
```text output.txt theme={null}
```
## Galería
Genera una etiqueta de galería de HubSpot. Esta etiqueta de la galería está basada en [Slick](http://kenwheeler.github.io/slick/). Mientras que puedes crear un módulo de galería con la sintaxis estándar de HubL, si quieres predefinir diapositivas predeterminadas usando HubL, debes usar la sintaxis de bloques. A continuación se muestran ambos métodos. Las imágenes de la galería se cargan de forma diferida mediante JavaScript.
```text input.txt theme={null}
{% gallery "crm_gallery" %}
<-- Block syntax -->
{% widget_block gallery "Gallery" display_mode="standard" sizing="static", transition="slide", caption_position="below", auto_advance=True, overrideable=True, description_text="", show_pagination=True, label="Gallery", loop_slides=True, num_seconds=5 %}
{% widget_attribute "slides" is_json=True %}
[{
"caption": "CRM Contacts App",
"show_caption": true,
"link_url": "http://www.hubspot.com/crm",
"alt_text": "Screenshot of CRM Contacts",
"img_src": "http://go.hubspot.com/hubfs/Contacts-View-1.png?t=1430860504240",
"open_in_new_tab": true
},
{
"caption": "HubSpot CRM Contact Profile",
"show_caption": true,
"link_url": "http://www.hubspot.com/",
"alt_text": "HubSpot CRM Contact Profile",
"img_src": "http://cdn2.hubspot.net/hubfs/53/Contact-Profile.png?t=1430860504240",
"open_in_new_tab": true
}]
{% end_widget_attribute %}
{% end_widget_block %}
```
```text output.txt theme={null}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `slides` | JSON | Una lista JSON con el título predeterminado, la URL del enlace, el texto alt, el src de la imagen y si se abre en una nueva pestaña o no. Consulta la sintaxis de bloques anterior. | |
| `loop_slides` | Booleano | Cuando es "True", muestra las diapositivas en un bucle continuo. | `True` |
| `num_seconds` | Número | Tiempo en segundos de pausa entre diapositivas. | `5` |
| `show_pagination` | Booleano | Proporciona botones debajo del deslizador para navegar entre las diapositivas. | `True` |
| `sizing` | Enumeración | Determina si el deslizador cambia de tamaño según la altura de las diapositivas. Los valores posibles son: "static" o "resize". | `"static"` |
| `auto_advance` | Booleano | Avanza automáticamente las diapositivas después del tiempo establecido en num\_seconds. | `False` |
| `transition` | Enumeración | Define el tipo de transición de las diapositivas. Los valores posibles son: "fade" o "slide". | `"slide"` |
| `caption_position` | Enumeración | Modifica la posición de los subtítulos en la parte superior o inferior de la diapositiva. Los valores posibles son "below" o "superimpose". | `"below"` |
| `display_mode` | Enumeración | Determina cómo se mostrará la galería de imágenes. Los valores posibles son: "standard", "lightbox", "thumbnail". | `"standard"` |
| `lightboxRows` | Número | Si "display\_mode" se define como "lightbox", este parámetro controlará el número de filas mostradas dentro del lightbox. | `3` |
## Encabezado
Genera un módulo de encabezado que mostrará el texto como una etiqueta h1 a h6.
```text input.txt theme={null}
{% header "header" %}
{% header "my_header" header_tag="h1", overrideable=True, value="A clear and bold header", label="Header" %}
```
```text output.txt theme={null}
A clear and bold header
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `header_tag` | Cadena | Selecciona la etiqueta de encabezado que se va a renderizar. Los valores posibles son: h1, h2, h3, h4, h5, h6. | `h1` |
| `value` | Cadena | Representa el texto predeterminado dentro del módulo del encabezado. | `"A clear bold header"` |
## Ícono
Agrega una etiqueta de ícono que permite a los usuarios seleccionar un ícono para usarlo. Los conjuntos de íconos compatibles son FontAwesome [5.0.10](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.0.10), [5.14.0](https://github.com/FortAwesome/Font-Awesome/releases/tag/5.14.0) y [6.4.2](https://github.com/FortAwesome/Font-Awesome/releases/tag/6.4.2).
Esta etiqueta no puede utilizarse en los módulos habilitados para correo electrónico.
```text input.txt theme={null}
{% icon
name="Accessible Icon"
style="REGULAR"
unicode="f368"
icon_set="fontawesome-5.14.0"
purpose="decorative"
title="Accessible Icon"
%}
```
```text output.txt theme={null}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `name` | Cadena | Nombre del ícono. | |
| `style` | Cadena | Estilo del ícono. Valores posibles: `REGULAR` o `SOLID` | `REGULAR` |
| `unicode` | Cadena | La representación en caracteres Unicode del ícono. | |
| `icon_set` | Cadena | El conjunto de íconos de FontAwesome que se va a utilizar. Los valores posibles son:
`fontawesome-5.14.0`
`fontawesome-5.0.10`
`fontawesome-6.4.2`
| |
| `purpose` | Cadena | El propósito del ícono, utilizado para la [accesibilidad](https://docs.fontawesome.com/v5/web/other-topics/accessibility). Los valores posibles son `decorative` o `semantic`. Si se define como `decorative`, se agregará un atributo adicional de `aria-hidden="true"` al ícono. | `decorative` |
| `title` | Cadena | El elemento de título del svg del ícono, junto con un atributo `labelledby` que apunta al título. | |
## Imagen
Crea una etiqueta de imagen que permite a los usuarios seleccionar una imagen desde el editor de contenidos. Si quieres que la imagen se vincule a una URL de destino, debes usar linked\_image debajo.
```text input.txt theme={null}
{% image "image" %}
{% image "executive_image" label="Executive photo", alt="Photo of Brian Halligan", src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300" %}
```
```text output.txt theme={null}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `alt` | Cadena | Define el texto alternativo predeterminado para la imagen. | |
| `src` | Cadena | Rellena el atributo src de la etiqueta img. | |
| `width` | Número | Define el atributo de anchura de la etiqueta img. | `The width of the image` |
| `height` | Número | Fija una altura mínima en un atributo de estilo de la etiqueta img **solo para las plantillas de correo**. | `The height of the image` |
| `hspace` | Número | Define el atributo hspace de la etiqueta img. | |
| `align` | Cadena | Define el atributo align de la etiqueta img. Los valores posibles son: izquierda (left), derecha (right) y centro (center). | |
| `style` | Cadena | Agrega declaraciones de CSS en línea a la etiqueta img. Por ejemplo style="border:1px solid blue; margin:10px" | |
| `loading` | Cadena | Controla el atributo de carga del elemento img. [Se utiliza para la carga diferida en el navegador.](/docs/cms/best-practices/testing-staging-performance/lazy-loading) | |
## Src de la imagen
Un módulo src de la imagen crea un selector de imágenes en el editor de contenidos, pero en lugar de imprimir una etiqueta img, muestra la URL de la imagen. Esta etiqueta se usa generalmente con el parámetro `no_wrapper=True`, de modo que la imagen src se puede agregar al CSS en línea o a otros marcadores. Una alternativa al uso de esta etiqueta es utilizar el parámetro [`export_to_template_context`](/docs/cms/reference/modules/export-to-template-context).
```text input.txt theme={null}
{% image_src "image_src" %}
{% image_src "executve_image_src" src="//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg", no_wrapper=True %}
```
```text output.txt theme={null}
//cdn2.hubspot.net/hub/53/file-733888614-jpg/assets/hubspot.com/about/management/dharmesh-home.jpg
```
| Parámetro | Tipo | Descripción |
| - | - | - |
| `src` | Cadena | Especifica el src de la imagen de la URL predeterminada. |
## Selector de idiomas
Agrega un ícono de globo con enlaces a las versiones traducidas de una determinada página del CMS. Más información sobre los [contenidos multilingües aquí](https://knowledge.hubspot.com/es/website-and-landing-pages/create-pages-in-multiple-languages).
```text input.txt theme={null}
{% language_switcher "language_switcher" overrideable=false, display_mode="localized", label="Language Switcher" %}
```
```text output.txt theme={null}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `display_mode` | Enumeración | El idioma del texto en el selector de idiomas. Los valores son:
`Pagelang` significa que el nombre de los idiomas se mostrará en el idioma de la página en la que se está el selector.
`Localized` significa que el nombre de cada idioma aparecerá en ese idioma.
`Hybrid` es una combinación de ambas opciones.
| `Localized` |
## Imagen enlazada
Genera una imagen seleccionable por el usuario dentro de un enlace. Esta etiqueta tiene todos los parámetros de un módulo de imagen con dos parámetros adicionales que especifican la URL de destino del enlace y si el enlace se abre en una nueva ventana.
```text input.txt theme={null}
{% linked_image "linked_image" %}
{% linked_image "executive_image"
label="Executive photo",
link="https://twitter.com/bhalligan", \
open_in_new_tab=True,
alt="Photo of Brian Halligan",
src="//cdn2.hubspot.net/hub/53/file-733888619-jpg/assets/hubspot.com/about/management/brian-home.jpg", width="300"
%}
```
```text output.txt theme={null}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `alt` | Cadena | Define el texto alternativo predeterminado para la imagen. | |
| `src` | Cadena | Rellena el atributo src de la etiqueta img. | |
| `width` | Número | Define el atributo de anchura de la etiqueta img. | `The width of the image` |
| `height` | Número | Fija una altura mínima en un atributo de estilo de la etiqueta img solo para **las plantillas de correo.** | `The height of the image` |
| `hspace` | Número | Define el atributo hspace de la etiqueta img. | |
| `align` | Cadena | Define el atributo align de la etiqueta img. Los valores posibles son: izquierda (left), derecha (right) y centro (center). | |
| `style` | Cadena | Agrega declaraciones de CSS en línea a la etiqueta img. Por ejemplo style="border:1px solid blue; margin:10px" | |
| `open_in_new_tab` | Booleano | Selecciona si se abre o no la URL de destino en otra pestaña. | `False` |
| `link` | Cadena | Define la URL de destino del enlace que envuelve la etiqueta img. | |
| `target` | Cadena | Define el atributo de destino de la etiqueta del enlace. | |
| `loading` | Cadena | Controla el atributo de carga del elemento img. [Se utiliza para la carga diferida en el navegador.](/docs/cms/best-practices/testing-staging-performance/lazy-loading) | |
## Logotipo
Una etiqueta de logotipo muestra el logotipo de tu empresa desde la [configuración del kit de marca](https://knowledge.hubspot.com/es/branding/edit-your-logo-favicon-and-brand-colors#edit-your-logo) de la cuenta.
```text input.txt theme={null}
{% logo "logo" %}
{% logo "my_logo" width="200" %}
```
```text output.txt theme={null}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `alt` | Cadena | Define el texto alternativo predeterminado para la imagen. | `Value in brand kit settings` |
| `src` | Cadena | Rellena el atributo src de la etiqueta img. | `Value in brand kit settings` |
| `link` | Cadena | Define la URL de destino del enlace que envuelve la etiqueta img. | |
| `width` | Número | Define el atributo de anchura de la etiqueta img. | `The width of the image` |
| `height` | Número | Fija una altura mínima en un atributo de estilo de la etiqueta img solo para **las plantillas de correo.** | `The height of the image` |
| `hspace` | Número | Define el atributo hspace de la etiqueta `img`. | |
| `align` | Cadena | Define el atributo align de la etiqueta `img`. Los valores posibles son `left`, `right` y `center`. | |
| `style` | Cadena | Agrega declaraciones de CSS en línea a la etiqueta img. Por ejemplo:`style="border:1px solid blue; margin:10px"` | |
| `suppress_company_name` | Booleano | Oculta el nombre de la empresa si no se elige un logotipo de imagen. | `False` |
| `use_account_default` | Booleano | Se establece como `true` para utilizar el nombre de la empresa desde la configuración predeterminada de la cuenta. | `False` |
| `open_in_new_tab` | Booleano | Selecciona si se abre o no la URL de destino en otra pestaña. | `False` |
| `override_inherited_src` | Booleano | Cuando se define como `true`, utiliza el src del widget del logotipo en lugar del src heredado de la configuración o de la plantilla. | `True` |
| `heading_level` | Cadena | Cuando se utilizan logotipos basados en texto no enlazados, se envuelve el logotipo basado en texto en una de las siguientes opciones disponibles como etiqueta HTML: `h1`, `h2`, `h3`, `h4`. | `h1` |
| `loading` | Cadena | Controla el atributo de carga del elemento img de [la carga diferida en el navegador.](/docs/cms/best-practices/testing-staging-performance/lazy-loading) | |
## Menú
Genera un menú avanzado basado en un árbol de menús en **Configuración de contenido > Menús avanzados.** Consulta los [menús y la navegación](/docs/cms/start-building/building-blocks/modules/menus-and-navigation) para obtener más información sobre el uso de los menús en las [plantillas](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview) y los [módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview). Si `id` se define como `null`, la etiqueta de menú mostrará el menú predeterminado de la cuenta de HubSpot.
```text input.txt theme={null}
{% menu "menu" %}
{% menu "my_menu"
id=456,
site_map_name="Default",
overrideable=False,
root_type="site_root",
flyouts="true",
max_levels="2",
flow="horizontal",
label="Advanced Menu"
%}
```
```text output.txt theme={null}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `id` | Número | ID del árbol de menús desde los menús avanzados en la configuración de contenido. | |
| `site_map_name` | Cadena | Nombre del árbol de menús de los menús avanzados en la configuración del contenido. | `"default"` |
| `root_type` | Enumeración | Especifica el tipo de menús avanzados. Las opciones son: "site\_root", "top\_parent", "parent", "page\_name", "page\_id", y "breadcrumb". Estos valores corresponden a estático, dinámico por sección, dinámico por página y breadcrumb. | `"site_root"` |
| `flyouts` | Cadena | Cuando es "True", se agrega una clase al árbol de menús que se puede adaptar para permitir que los elementos del menú secundario aparezcan cuando se coloca el cursor encima del menú principal. Si es "False", los elementos del menú secundario aparecerán siempre. | `"true"` |
| `max_levels` | Número | Determina el número de niveles de menús anidados que se muestran en el marcado. Este parámetro define cuántas opciones secundarias del árbol de menú se pueden expandir dentro del menú. | `2` |
| `flow` | Enumeración | Define la orientación de los elementos del menú. Esto agrega clases al árbol de menú para que puedan aplicarse estilos personalizados. Los valores posibles son "horizontal", "vertical" or "vertical\_flyouts". Los menús horizontales muestran los elementos de lado a lado, y los menús verticales los muestran de arriba hacia abajo. | `"horizontal"` |
| `root_key` | Cadena | Se utiliza para encontrar la raíz del menú. Cuando root\_type se define como page\_id o page\_name, este parámetro debe ser el ID de la página o la etiqueta de la página, respectivamente. | `"horizontal"` |
| `label` | Cadena | Contenido enriquecido para describir esta entidad | `False` |
| `label` | Cadena | Contenido enriquecido para describir esta entidad | `False` |
## Require\_css
Una etiqueta HubL que pone en cola un elemento de estilo para ser representado en el ``.
Esta etiqueta es similar a la [require\_css función ](/docs/cms/reference/hubl/functions#require-css), excepto que esta etiqueta inserta el estilo en línea en lugar de hacerlo desde una hoja de estilo. Esta etiqueta tampoco se desduplica con otras instancias del CSS en la misma página. Si estás creando un módulo y quieres insertar una hoja de estilos, pero planeas usar ese módulo varias veces en una misma página, es posible que prefieras utilizar la función `require_css`.
```text input.txt theme={null}
{{ standard_header_includes }}
{% require_css %}
{% end_require_css %}
{{ standard_footer_includes }}
```
```text output.txt theme={null}
```
## Require\_head
Una etiqueta HubL que pone en cola todo lo que se coloca dentro de ella en el `standard_header_includes`, que se encuentra en el `` de la plantilla. Para la mayoría de Javascript y CSS, consulta `require_js` y `require_css`. Algunos casos de uso de `require_head` incluyen el suministro de metaetiquetas y etiquetas de enlace especiales (como prefetch y preconnect) de los módulos.
```hubl theme={null}
{% require_head %}
{% end_require_head %}
```
## Require\_js
Una etiqueta HubL que pone en cola un elemento de script para ser renderizado. Para poner en cola un script para renderizarlo en el `
`desde un archivo diferente a través de un elemento `` (en lugar de en línea como se muestra aquí), utiliza la función HubL [`require_js(absolute_url)`](/docs/cms/reference/hubl/functions#require-js).
```text input.txt theme={null}
{{ standard_header_includes }}
{% require_js position="footer" %}
{% end_require_js %}
{{ standard_footer_includes }}
```
```text output.txt theme={null}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `position` | Cadena | Establece la posición en la que se renderizará el script en línea. Las opciones incluyen: `"head"` y `"footer"`. | `"footer"` |
## Texto enriquecido
Crea un editor de contenidos WYSIWYG.
```text input.txt theme={null}
{% rich_text "rich_text" %}
{% rich_text "left_column" label="Enter HTML here" html="
The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.
The headline and subheader tells us what you're offering, and the form
header closes the deal. Over here you can explain why your offer is so great
it's worth filling out a form for.
Remember:
Bullets are great
For spelling out benefits and
Turning visitors into leads.
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `html` | Cadena | Contenido de texto enriquecido predeterminado para el módulo. | `
Something Powerful
Tell The Reader More
The headline and subheader tells us what you're offering, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.
Remember:
Bullets are great
For spelling out [benefits](#) and
Turning visitors into leads.
` |
## Listado de RSS
Carga una lista de contenidos desde un canal RSS interno o externo.
> [!WARNING]
>
> ### Nota:
>
> Este módulo se carga de forma asíncrona en el lado del cliente. Como resultado, si quieres modificar la sección de publicaciones después de que se haya cargado, tendrás que definir una función JS global para manejar esa manipulación. Utiliza la función `hsRssFeedComplete(feeds)`, donde `feeds` es el selector de jQuery de todos los listados de publicaciones que se han completado. Puedes modificar directamente el objeto DOM en esa función.
```text input.txt theme={null}
{% rss_listing "rss_listing" %}
{% rss_listing "my_rss_listing" rss_url="", publish_date_text="posted at", feed_source={rss_url="", is_external=False, content_group_id="30808594297"}, click_through_text="Read more", show_date=True, include_featured_image=True, overrideable=False, publish_date_format="short", show_detail=True, show_author=True, number_of_items="3", is_external=False, title="", content_group_id="24732847", label="RSS Listing", limit_to_chars="200", attribution_text="by" %}
```
```text output.txt theme={null}
First things first: Cron jobs are scripts that get executed based on
time. Understanding where this shorthand name comes from may help
you remember this:
Read more
This article was authored by a member of the HubSpot developer
community, Joshua Beatty.
Read more
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `show_title` | Booleano | Muestra u oculta el título del listado de publicaciones RSS. | `True` |
| `show_date` | Booleano | Muestra la fecha de la publicación. | `True` |
| `show_author` | Booleano | Muestra el nombre del autor. | `True` |
| `show_detail` | Booleano | Muestra el resumen de la publicación hasta el número de caracteres fijado por el parámetro `limit_to_chars`. | `True` |
| `title` | Cadena | Rellena el encabezado del listado de publicaciones RSS. | |
| `limit_to_chars` | Número | Número máximo de caracteres que se mostrarán en el resumen. | `200` |
| `publish_date_format` | Cadena | Formato de la fecha de publicación. Los valores posibles son `"short"`, `"medium"` y `"long"`. También acepta formatos personalizados, como `"MMMM d, yyyy 'at' h:mm a"`. | `"short"` |
| `attribution_text` | Cadena | El texto que atribuye un autor a una publicación. | `"by"` |
| `click_through_text` | Cadena | El texto que se mostrará como enlace de redirección al final del resumen de una publicación. | `"Read more"` |
| `publish_date_text` | Cadena | El texto que indica cuándo se publicó una entrada de blog. | `"posted at"` |
| `include_featured_image` | Booleano | Muestra una imagen destacada con el enlace de la publicación para los listados de publicaciones RSS generados por HubSpot. | `False` |
| `item_title_tag` | Cadena | Especifica la etiqueta HTML del título de cada publicación. | `span` |
| `is_external` | Booleano | El listado de publicaciones RSS es de un blog externo. | `False` |
| `number_of_items` | Número | Número máximo de publicaciones que se mostrarán. | `5` |
| `publish_date_language` | Cadena | Especifica el idioma de la fecha de publicación. | `en_US` |
| `rss_url` | Cadena | La URL donde se encuentra el listado de publicaciones RSS. | |
| `content_group_id` | Cadena | ID del blog cuando la fuente del listado de publicaciones es un blog interno. | |
| `select_blog` | Cadena | Se puede utilizar para seleccionar un listado de publicaciones del blog interno de HubSpot. | `default` |
| `feed_source` | Cadena | Definir la fuente del listado de publicaciones RSS. Cuando es interno, el formato general es `{rss_url="", is_external=False, content_group_id="2502431580"}`. Cuando es externo, el formato general es `{rss_url="http://blog.hubspot.com/marketing/rss.xml", is_external=True}`. | |
| `tag_id` | Número | ID de la etiqueta cuando la fuente del listado de publicaciones es un blog interno. | |
## Encabezado de la sección
Genera un título html y un subtítulo `
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `orientation` | Enumeración | Define las clases de marcadores de menú para permitir adaptar la orientación de los elementos del menú en la página. Los valores posibles son `"horizontal"` y `"vertical"`. | `"horizontal"` |
| `menu_tree` | JSON | Estructura del menú, incluidos los nombres de los enlaces de las páginas y las URL de destino. | `[]` |
## Compartir en redes sociales
Las etiquetas de contenido compartido en redes sociales generan íconos de redes sociales que pueden utilizarse para compartir una página determinada. Este módulo se puede utilizar con la [sintaxis de bloques](/docs/cms/reference/modules/using-modules-in-templates#block-syntax) para personalizar las imágenes de los íconos y mucho más.
```text input.txt theme={null}
{% social_sharing "social_sharing" %}
{% social_sharing "my_social_sharing" use_page_url=True %}
Block Syntax Example:
{% widget_block social_sharing "my_social_sharing" label="Social Sharing", use_page_url=True, overrideable=True %}
{% widget_attribute "pinterest" is_json=True %}{"custom_link_format": "", "pinterest_media": "http://cdn1.hubspot.com/hub/158015/305390_10100548508246879_837195_59275782_6882128_n.jpg", "enabled": true, "network": "pinterest", "img_src": "https://static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "twitter" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "twitter", "img_src": "https://static.hubspot.com/final/img/common/icons/social/twitter-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "linkedin" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "linkedin", "img_src": "https://static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "facebook" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "facebook", "img_src": "https://static.hubspot.com/final/img/common/icons/social/facebook-24x24.png"}{% end_widget_attribute %}
{% widget_attribute "email" is_json=True %}{"custom_link_format": "", "enabled": true, "network": "email", "img_src": "https://static.hubspot.com/final/img/common/icons/social/email-24x24.png"}{% end_widget_attribute %}
{% end_widget_block %}
```
```text output.txt theme={null}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `use_page_url` | Booleano | Si es "True", el módulo comparte la URL de la página de forma predeterminada. | `True` |
| `link` | Cadena | Especifica una URL diferente para compartirla, si `use_page_url` es "False". | |
| `pinterest` | JSON | Parámetros para el formato del enlace de Pinterest y la fuente de la imagen del ícono. | `See block syntax example, above` |
| `twitter` | JSON | Parámetros para el formato del enlace de Twitter y la fuente de la imagen del ícono. | `See block syntax example, above` |
| `linked_in` | JSON | Parámetros para el formato del enlace de LinkedIn y la fuente de la imagen del ícono. | `See block syntax example, above` |
| `facebook` | JSON | Parámetros para el formato del enlace de Facebook y la fuente de la imagen del ícono. | `See block syntax example, above` |
| `email` | JSON | Parámetros para el formato del enlace para compartir el correo y la fuente de la imagen del ícono. | `See block syntax example, above` |
## Separador
Una etiqueta espaciadora genera una etiqueta span vacía. Esta etiqueta se puede estilizar para actuar como espaciador. En los diseños de arrastrar y soltar, el módulo de espacio se encuentra dentro de un contenedor con una clase de span1 a span12, que determina cuánto espacio debe ocupar el módulo dentro de la cuadrícula responsiva de doce columnas.
```text input.txt theme={null}
{% space "space" %}
{% space "spacer" label="Horizontal Spacer" %}
```
```text output.txt theme={null}
```
## Etiquetas de la página del sistema
Las siguientes etiquetas se pueden utilizar en las [páginas del sistema](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview#system-pages), como las páginas de restablecimiento de contraseñas o de suscripción por correo electrónico.
### Copia de seguridad de cancelaciones de suscripción por correo electrónico
La etiqueta de cancelación de suscripción con copia de seguridad se muestra a los destinatarios de correo electrónico si HubSpot no puede determinar su dirección de correo, cuando el destinatario intenta cancelar la suscripción. Esta etiqueta muestra un formulario para que el contacto ingrese su dirección de correo electrónico y cancele la suscripción de las comunicaciones por correo electrónico. Se debe utilizar en una [plantilla del sistema de respaldo de cancelación de la suscripción.](https://knowledge.hubspot.com/es/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages)
```text input.txt theme={null}
{% email_simple_subscription "email_simple_subscription" %}
{% email_simple_subscription "email_simple_subscription"
header="Email Unsubscribe",
input_help_text="Your email address:",
input_placeholder="email@example.com",
button_text="Unsubscribe",
label="Backup Unsubscribe"
%}
```
```text output.txt theme={null}
Email Unsubscribe
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `header` | Cadena | Muestra el texto en una etiqueta h1 encima del formulario de cancelación de suscripción. | `"Email Unsubscribe"` |
| `input_help_text` | Cadena | Muestra el texto de ayuda en una etiqueta h3 encima del campo del formulario de cancelación de suscripción a los correos. | `"Your email address:"` |
| `input_placeholder` | Cadena | Agrega el texto de marcador de posición en el campo de dirección de correo electrónico. | `"email@example.com"` |
| `button_text` | Cadena | Cambia el texto del botón de envío del formulario de cancelación de suscripción. | `"Unsubscribe"` |
### Suscripciones a correos
Este módulo se muestra cuando un destinatario de correo electrónico va a editar sus preferencias de suscripción. Debe utilizarse en una [plantilla del sistema de preferencias de suscripción.](https://knowledge.hubspot.com/es/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages)
```text input.txt theme={null}
{% email_subscriptions "email_subscriptions" %}
{% email_subscriptions "email_subscriptions"
resubscribe_button_text="Yes, resubscribe me!",
unsubscribe_single_text="Uncheck the types of emails you do not want to receive:",
subheader_text="\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n",
unsubscribe_all_unsubbed_text="You are presently unsubscribed from all of our emails. Would you like to receive our emails again?",
button_text="Update email preferences", label="Subscription Preferences", header="Communication Preferences",
unsubscribe_all_option="Unsubscribe me from all mailing lists.",
unsubscribe_all_text="Or check here to never receive any emails:"
%}
```
```text output.txt theme={null}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `header` | Cadena | Muestra el texto en una etiqueta h1 encima del formulario de preferencias de suscripción. | `"Communication Preferences"` |
| `subheader_text` | Cadena | Introduce el texto debajo del encabezado y encima de las preferencias de cancelación de suscripción. | `"
If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.
"` |
| `unsubscribe_single_text` | Cadena | Muestra el texto en un `
` encima de las opciones de suscripción. | `"Uncheck the types of emails you do not want to receive:"` |
| `unsubscribe_all_text` | Cadena | Muestra el texto en un `
` encima de la entrada de la casilla de verificación para cancelar la suscripción a todos los correos electrónicos. | `"Or check here to never receive any emails:"` |
| `unsubscribe_all_unsubbed_text` | Cadena | Introduce el texto dentro de un `
` que se muestra si la suscripción de un contacto está actualmente cancelada para todos los correos electrónicos. | `"You are presently unsubscribed from all of our emails. Would you like to receive our emails again?"` |
| `unsubscribe_all_option` | Cadena | Define el texto que está junto a la entrada de la casilla de verificación de cancelación de suscripción a todos los correos electrónicos. | `"Unsubscribe me from all mailing lists."` |
| `button_text` | Cadena | Define el texto del botón de envío que actualiza las preferencias de suscripción. | `"Update email preferences"` |
| `resubscribe_button_text` | Cadena | Define el texto del botón de envío para cuando los contactos se vuelvan a suscribir. | `"Yes, resubscribe me!"` |
### Confirmación de suscripción a correos
La actualización de confirmación de suscripción al correo electrónico es un módulo que puede agregarse a la plantilla de agradecimiento para cuando un destinatario actualiza sus preferencias de suscripción o las cancela. Debe utilizarse en una [plantilla del sistema de preferencias de suscripción.](https://knowledge.hubspot.com/es/design-manager/use-system-templates-to-customize-error-subscription-and-password-prompt-pages)
```text input.txt theme={null}
{% email_subscriptions_confirmation "email_subscriptions_confirmation" %}
{% email_subscriptions_confirmation "email_subscriptions_confirmation"
label="Subscriptions Update Confirmation",
unsubscribe_all_success="You have successfully unsubscribed from all email communications.",
subscription_update_success="You have successfully updated your email preferences.",
subheader_text="\n If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n"
%}
```
```text output.txt theme={null}
example@email.com
If this is not your email address, please ignore this page since the
email associated with this page was most likely forwarded to you.
You have successfully updated your email preferences.
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `header` | Cadena | Muestra el texto en una etiqueta h1 encima del formulario de cancelación de suscripción. | `"Communication Preferences"` |
| `subheader_text` | Cadena | Muestra el texto encima del mensaje de confirmación. | `"
If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.
"` |
| `unsubscribe_all_success` | Cadena | Define el texto que se mostrará cuando alguien cancele la suscripción a todas las comunicaciones por correo electrónico. | `"You have successfully unsubscribed from all email communications."` |
| `subscription_update_success` | Cadena | Define el texto cuando un destinatario actualiza sus preferencias de suscripción. | `"You have successfully updated your email preferences."` |
### Inicio de sesión de membresías
Crea un formulario de inicio de sesión para dar acceso a [contenido privado](https://knowledge.hubspot.com/es/website-pages/require-member-registration-to-access-private-content).
```text input.txt theme={null}
{% member_login "my_login" %}
{% member_login "my_login"
email_label="Email",
password_label="Password",
remember_me_label="Remember Me",
reset_password_text="Forgot your password?",
submit_button_text="Login",
show_password="Show password"
%}
```
```text output.txt theme={null}
You've made too many attempts at this request. Please try this action again
in a few minutes.
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `email_label` | Cadena | La etiqueta para el campo del correo electrónico. | `"Email"` |
| `password_label` | Cadena | La etiqueta para el campo de la contraseña. | `"Password"` |
| `remember_me_label` | Cadena | La etiqueta de la casilla de verificación "Recordarme". | `"Remember Me"` |
| `reset_password_text` | Cadena | El texto para el hipervínculo de cambio de contraseña. | `"Forgot your password?"` |
| `submit_button_text` | Cadena | El texto para el botón de envío. | `"Login"` |
| `show_password` | Cadena | El texto del enlace para revelar la contraseña. | `"Show password"` |
### Registro de membresías
Crea un formulario de registro para acceder a [contenido privado](https://knowledge.hubspot.com/es/website-pages/require-member-registration-to-access-private-content).
```text input.txt theme={null}
{% member_register "my_register" %}
{% member_register "my_register"
email_label="Email",
password_label="Password",
password_confirm_label="Confirm Password",
submit_button_text="Save Password",
show_password="Show password"
%}
```
```text output.txt theme={null}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `email_label` | Cadena | La etiqueta para el campo del correo electrónico. | `"Email"` |
| `password_label` | Cadena | La etiqueta para el campo de la contraseña. | `"Password"` |
| `password_confirm_label` | Cadena | La etiqueta para el campo de confirmación de la contraseña. | `"Confirm Password"` |
| `submit_button_text` | Cadena | El texto para el botón de envío. | `"Save Password"` |
| `show_password` | Cadena | El texto del enlace para revelar la contraseña. | `"Show password"` |
### Solicitud de restablecimiento de contraseña
Crea un formulario para enviar un correo electrónico de restablecimiento de contraseña para acceder a páginas protegidas por contraseña.
```text input.txt theme={null}
{% password_reset_request "my_password_reset_request" %}
{% password_reset_request "my_password_reset_request"
email_label="Email",
submit_button_text="Send Reset Email"
%}
```
```text output.txt theme={null}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `email_label` | Cadena | La etiqueta para el campo del correo electrónico. | `"Email"` |
| `submit_button_text` | Cadena | El texto para el botón de envío. | `"Send Reset Email"` |
| `password_reset_message` | Cadena | El mensaje que aparece después de solicitar el correo de cambio de contraseña. | `False` |
### Restablecimiento de contraseña
Renderiza un formulario de restablecimiento de contraseña para acceder a páginas protegidas por contraseña.
```text input.txt theme={null}
{% password_reset "my_password_reset" password_label="Password", password_confirm_label="Confirm Password", submit_button_text="Save password", show_password="Show password" %}
```
```text output.txt theme={null}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `password_label` | Cadena | La etiqueta de texto para el campo de la contraseña. | `"Email"` |
| `password_confirm_label` | Cadena | La etiqueta de texto para el campo de confirmación de contraseña. | `"Send Reset Email"` |
| `submit_button_text` | Cadena | La etiqueta de texto para el botón de envío del formulario. | `False` |
| `show_password` | Cadena | La etiqueta de texto del botón para mostrar el valor de la contraseña introducida. | `False` |
| `password_requirements` | Cadena | La etiqueta de texto que describe los requisitos de la contraseña. | `False` |
### Solicitud de la contraseña
Agrega un solicitud de contraseña a las páginas protegidas con contraseña.
```text input.txt theme={null}
{% password_prompt "password_prompt" %}
{% password_prompt "my_password_prompt"
submit_button_text="Submit",
bad_password_message="Sorry, please try again.\n",
label="Password Prompt"
%}
```
```text output.txt theme={null}
```
| Parámetro | Tipo | Descripción | Predeterminado |
| - | - | - | - |
| `submit_button_text` | Cadena | Etiqueta para el botón que está debajo del campo de la contraseña. | `"Submit"` |
| `bad_password_message` | Cadena | Se muestra un mensaje si se introduce una contraseña incorrecta. | `"
```
```css theme={null}
/* module.css */
/* CSS that makes the image show adjacent to the text,
and positioned based on the positioning field.*/
/* The media query ensures that on mobile the image
will always appear above the text for
visual consistency. */
@media (min-width: 768px) {
.img-text__wrapper {
display: flex;
align-items: row;
}
.img-text__img,
.img-text__text {
flex: 1;
padding: 10px;
}
.img-text--img-right {
flex-direction: row-reverse;
}
}
```
### bloque require\_css
Cuando necesitas dar a los creadores de contenido un control directo sobre propiedades específicas y cuando las clases no son ideales, las etiquetas de estilo con bloques `require_css` son la mejor opción.
Para dar a los creadores de contenido un control directo sobre propiedades específicas sin usar clases, puedes agregar estilos al archivo `module.html` dentro de las etiquetas `require_css`. Por ejemplo:
```hubl theme={null}
{% require_css %}
{% end_require_css %}
```
Debido a que `module.html` puede renderizar HubL, puedes utilizar los valores de los campos del módulo como variables CSS. Cuando un creador de contenido actualiza el campo en el editor de la página, el CSS se actualizará para coincidir. Este bloque mueve las etiquetas `
{% end_require_css %}
```
### Agregar estilo en línea
Cuando se necesita dar a los creadores de contenidos un control granular sobre sólo unas pocas propiedades y cuando las clases no son ideales, puedes agregar directamente los valores a un atributo de estilo en el HTML.
```hubl theme={null}
{# Module.html #}
```
Si tienes muchas propiedades y el código se vuelve difícil de leer, considera cambiar al método de bloque `require_css`.
### Importar archivos CSS específicos
`require_css` es una función de HubL que puedes agregar a module.html y que indica a HubSpot que un módulo o plantilla en particular requiere un archivo CSS concreto para mostrarse. Se agrega una etiqueta de enlace que apunta al archivo css a la página `` dentro de `standard_header_includes`.
La función `require_css` sólo cargará ese archivo CSS una vez, independientemente de las veces que ese mismo archivo sea requerido por los módulos y plantillas de una página concreta. Esto lo hace ideal para situaciones en las que los estilos pueden ser compartidos a través de múltiples módulos, pero donde agregar el CSS directamente a las hojas de estilo principales utilizadas en cada página de tu sitio puede no tener sentido.
`require_css` y los archivos CSS enlazados cumplen el mismo propósito, pero `require_css` puede utilizarse de forma condicional en función de los valores de los campos. Así se evita cargar un código innecesario.
```hubl theme={null}
{{ require_css(get_asset_url("/modules/shared_layout_styles.css")) }}
```
## JavaScript (module.js)
Utiliza el archivo `module.js` para agregar JavaScript a un módulo.
Al igual que el archivo `module.css`, el archivo `module.js` no soporta HubL.
### Scripts basados en los valores de los campos
Hay algunas maneras de construir módulos, donde el JavaScript actúa de manera diferente basándose en los valores de los campos. Entender qué método utilizar y cuándo puede significar beneficios de rendimiento en cada página en la que se utilice el módulo.
Por ejemplo, tienes un módulo de imágenes personalizado, quieres dar a los creadores de contenido la posibilidad de hacer que la imagen se abra en un lightbox. Los creadores de contenido sólo quieren eso para imágenes específicas, y no para todas las instancias del módulo.
### Atributos de los datos
Los atributos de datos son atributos personalizados estándar de HTML 5 que los desarrolladores agregan a los elementos. Al igual que todos los elementos admiten `class="yourClassName"`, todos los elementos admiten `data-your-attribute="yourValue"`.
```hubl theme={null}
```
Puedes usar atributos de datos para pasar los valores de los campos de tus instancias de módulos para que sean manejados por tu archivo module.js.
Para utilizar los valores de tu archivo module.js, tendrás que recorrer todas las instancias de tu módulo. Agregar un nombre de clase específico del módulo al elemento envolvente más externo de tu módulo te dará un objetivo a utilizar, para que puedas hacer un bucle a través de cada una de tus instancias del módulo.
```js theme={null}
// module.js
let imgModules = document.getElementsByClassName("img-module");
Array.from(imgModules).forEach(function (element) {
// loop through each of the instances of the module
// set data attributes to variables to make it easy to work with
let isLightboxEnabled = element.dataset.lightbox;
let captionStyle = element.dataset.caption;
if (isLightboxEnabled) {
element.addEventListener("click", function () {
showLightbox(captionStyle); // Execute your code for the action you want to take, you can pass your data attributes into functions from libraries.
});
}
});
```
Los atributos de datos te permitirán recuperar los valores de los campos para cada instancia del módulo en tu module.js.
### bloque require\_js
En situaciones avanzadas, tal vez cuando se utiliza una biblioteca de plantillas de JavaScript o un framework reactivo como Vue.js o React.js, puedes preferir la salida de sólo los datos, mientras que el framework maneja la representación.
En este caso, utiliza una etiqueta de script rodeada por un bloque [`require_js`](https://developers.hubspot.com/es/docs/cms/hubl/functions#require-js) para proporcionar variables a las que puedas acceder desde el script de la plantilla.
```hubl theme={null}
{% require_js %}
{% end_require_js %}
```
Esta técnica puede ser útil para suministrar a las aplicaciones avanzadas un conjunto inicial de datos a partir del cual se puede renderizar. Esto elimina una llamada inicial de JavaScript para recuperar los datos.
### require\_js
[`require_js`](https://developers.hubspot.com/es/docs/cms/hubl/functions#require-js) es una función de HubL que indica a HubSpot que un módulo o plantilla en particular requiere un archivo JavaScript concreto para cargarse correctamente. La función toma dos parámetros: la ruta del archivo y la ubicación a la que se debe agregar el archivo ("encabezado" o "pie de página").
En un módulo `require_js` sólo se puede agregar al module.html. El archivo JavaScript al que se hace referencia en la sentencia `require_js` sólo se cargará una vez por página, independientemente del número de veces que lo requieran los módulos y plantillas dentro de la página. Esto reduce el número de peticiones HTTP y evita la duplicación de código.
Algunas situaciones en las que esto resulta útil:
* Si tienes varios módulos o plantillas que requieren el mismo JavaScript, puedes usar `require_js` para compartir ese script entre módulos.
* Si trabajas con un bundler de JavaScript como webpack, puede ser más fácil enviar tus archivos js a una ubicación específica. Usando `require_js`, puedes asociar el JavaScript con tu módulo.
`require_js` y los archivos javascript enlazados sirven para el mismo propósito, pero `require_js` puede hacerse condicionalmente en base a los valores de los campos. Esto evita que se cargue un código innecesario. También tienes la opción adicional de cargar JavaScript en el encabezado, si lo necesitas.
> [!TIP]
>
> Debido aque JavaScript bloquea la visualización, la ubicación predeterminada en la [`require_js`](https://developers.hubspot.com/es/docs/cms/hubl/functions#require-js) coloca JavaScript es el "pie de página". [Más información sobre la optimización del rendimiento.](/docs/cms/best-practices/testing-staging-performance/speed)
## Información relacionada
* [Optimizar la velocidad de tu sitio CMS Hub](/docs/cms/best-practices/testing-staging-performance/speed)
* [Módulos](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview)
* [Campo de módulo](https://developers.hubspot.es/docs/cms/reference/fields/overview)
# Evaluaciones de estado de compilación
Source: https://developers.hubspot.es/docs/cms/reference/react/build-health-checks
# Biblioteca de @hubspot/cms-components
Source: https://developers.hubspot.es/docs/cms/reference/react/cms-components-library
# Islas
Source: https://developers.hubspot.es/docs/cms/reference/react/islands
# Parciales de JS
Source: https://developers.hubspot.es/docs/cms/reference/react/js-partials
# Desarrollo local
Source: https://developers.hubspot.es/docs/cms/reference/react/local-development
# Estilo de CMS React
Source: https://developers.hubspot.es/docs/cms/reference/react/styling
# Pruebas de CMS React
Source: https://developers.hubspot.es/docs/cms/reference/react/testing
# Referencia de las funciones sin servidor (administrador de diseño)
Source: https://developers.hubspot.es/docs/cms/reference/serverless-functions/serverless-functions
Información de referencia para las funciones sin servidor creadas con el administrador de diseño, incluidos serverless.json, archivos de función, endpoints, comandos CLI y gestión de paquetes.
> **Productos compatibles**
> [!WARNING]
>
> ### Nota:
>
> Esta página contiene información de referencia para las funciones sin servidor creadas con el administrador de diseño. Históricamente, esta es la forma original de crear funciones sin servidor para tus páginas CMS y todavía es admitido. Sin embargo, en el futuro se recomienda [crear y desplegar funciones sin servidor con los proyectos para desarrolladores de HubSpot](/docs/cms/start-building/features/serverless-functions/getting-started-with-serverless-functions). Las funciones sin servidor basadas en proyectos pueden incluir dependencias de terceros y tener un acceso más directo a la autenticación mediante tokens de acceso a aplicaciones privadas.
En este artículo, aprende sobre los archivos que se encuentran dentro de una [carpeta `.functions` sin servidor](/docs/cms/start-building/features/serverless-functions/overview#serverless-function-folders) y los comandos CLI que puedes utilizar con las funciones sin servidor.
Para obtener un resumen general de las funciones sin servidor, consulta la [descripción general de las funciones sin servidor](/docs/cms/start-building/features/serverless-functions/overview).
Para obtener más información sobre la creación de funciones sin servidor con proyectos para [módulos renderizados y parciales de JavaScript](https://github.hubspot.com/cms-js-building-block-examples/), consulta la [documentación de proyectos de desarrollador](https://developers.hubspot.es/docs/cms/reference/serverless-functions/serverless-functions-in-projects).
## Serverless.json
En la carpeta `.functions`, el archivo `serverless.json` almacena la configuración de la función sin servidor. Este es un archivo obligatorio y asigna tus funciones a sus [endpoints](#endpoints).
```json theme={null}
{
"runtime": "nodejs20.x",
"version": "1.0",
"environment": {
"globalConfigKey": "some-value"
},
"secrets": ["secretName"],
"endpoints": {
"events": {
"file": "function1.js",
"method": "GET"
},
"events/update": {
"method": "POST",
"file": "action2.js",
"environment": {
"CONFIG_KEY": "some-other-value"
},
"secrets": ["googleKeyName", "otherkeyname"]
}
}
}
```
| clave | Tipo | Descripción |
| - | - | - |
| `runtime` | Cadena | El entorno de tiempo de ejecución. Compatible con [Node.js](https://nodejs.org/en/about/) v20 (`nodejs20.x`). |
| `version` | Cadena | versión del esquema de funciones sin servidor de HubSpot. (Versión actual 1.0) |
| `environment` | Objeto | Variables de configuración pasadas a la función ejecutante como [variables de entorno](https://nodejs.org/docs/latest-v10.x/api/process.html#process_process_env) en tiempo de ejecución. Puedes usar esto para agregar una lógica para usar una versión de prueba de una API en lugar de la real basada en una variable de entorno. |
| `secrets` | Matriz | Una matriz que contiene los nombres de los [secretos](#secrets) que tu función sin servidor utilizará para la autenticación. No almacenes secretos directamente en este archivo, solo haz referencia a los nombres de los secretos. |
| `endpoints` | Objeto | Los endpoints definen las rutas que se exponen y tu asignación a archivos JavaScript específicos, dentro de tu carpeta de funciones. Obtén más información sobre los [endpoints](#endpoints). |
> [!NOTE]
>
> HubSpot dejará [de dar soporte a Node 18](https://developers.hubspot.com/changelog/deprecation-of-node-v18-in-all-serverless-functions-and-cli) después del 1 de octubre de 2025. Después de esa fecha, las funciones sin servidor con un tiempo de ejecución inferior a la v20 no podrán desplegarse.
> [!WARNING]
>
> ### Nota:
>
> No asignes el mismo nombre a tus secretos y variables de entorno. Si lo haces, se producirán conflictos al devolver tus valores en la función.
### Endpoints
Cada endpoint puede tener sus propias [variables de entorno](https://nodejs.org/docs/latest-v10.x/api/process.html#process_process_env) y secretos. Las variables especificadas fuera de los endpoints deben utilizarse para los ajustes de configuración que se aplican a todas las funciones y endpoints.
```json theme={null}
"events/update": {
"method": "POST",
"file": "action2.js",
"environment": {
"configKey": "some-other-value"
},
"secrets": ["googleAPIKeyName","otherKeyName"]
}
```
| clave | Tipo | Descripción |
| - | - | - |
| `method` | Cadena o matriz de cadenas | [Método o métodos HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods) que admite el endpoint. El valor predeterminado es [GET](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods/GET). |
| `file` | Cadena | Ruta al archivo de la función JavaScript con la implementación para el endpoint. |
El endpoint puede invocarse llamando a una URL en uno de los dominios conectados a la cuenta de HubSpot, incluidos los subdominios predeterminados `.hs-sites.com`, con la siguiente estructura de URL:
`https://{domainName}/_hcms/api/{endpoint-name/path}?portalid={hubId}`.
| Parámetro | Descripción |
| - | - |
| `domainName` | Un dominio conectado a la cuenta de HubSpot. |
| `/_hcms/api/` | La ruta reservada para las funciones sin servidor. Todos los endpoints existen dentro de esta ruta. |
| `endpoint-name/path` | El nombre del endpoint o la ruta que especificaste en el archivo `serverless.json`. |
| `portalid` | Un parámetro de consulta opcional que contiene el ID de tu cuenta de HubSpot. Proporcionar esto en la solicitud te permitirá probar tus funciones dentro de las vistas previas de módulos y plantillas. |
Por ejemplo, si `website.com` y `subdomain.brand.com` están conectados a la cuenta, podrías llamar a la función utilizando `https://website.com/_hcms/api/{endpoint-name/path}` o `https://subdomain.brand.com/_hcms/api/{endpoint-name/path}`.
## Archivo de funciones
Además del archivo de configuración `serverless.json`, la carpeta `.functions` también contendrá un archivo JavaScript [Node.js](https://nodejs.org/en/) que define la función. También puedes aprovechar la biblioteca de [solicitudes](https://github.com/request/request#readme) para realizar solicitudes HTTP a las [API de HubSpot](https://developers.hubspot.es/docs/api-reference/overview) y otras API.
Por ejemplo:
```js theme={null}
// Require axios library, to make API requests.
const axios = require("axios");
// Environment variables from your serverless.json
// process.env.globalConfigKey
exports.main = (context, sendResponse) => {
// your code called when the function is executed
// context.params
// context.body
// context.accountId
// context.limits
// secrets created using the CLI are available in the environment variables.
// process.env.secretName
//sendResponse is what you will send back to services hitting your serverless function.
sendResponse({ body: { message: "my response" }, statusCode: 200 });
};
```
### Objeto de contexto
El objeto de contexto contiene información contextual sobre la ejecución de la función, almacenada en los siguientes parámetros.
| Parámetro | Descripción |
| - | - |
| `accountId` | El ID de la cuenta de HubSpot que contiene la función. |
| `body` | Lleno si la solicitud se envía como `POST` con un tipo de contenido `application/json`. |
| `contact` | Si la solicitud proviene de un contacto con cookies, el objeto contacto estará lleno con un conjunto de propiedades básicas junto con la siguiente información:
`vid`: ID de visitante del contacto.
`isLoggedIn`: cuando se utiliza CMS Memberships, esto será `true` si el contacto ha iniciado sesión en el dominio.
`listMemberships`: una matriz de ID de listas de contactos de las que este contacto es miembro.
|
| `headers` | Contiene los [títulos](#headers) enviados por el cliente que llega a tu endpoint. |
| `params` | Rellenado con valores de cadena de consulta junto con cualquier valor HTML Form-POSTed. Se estructuran como un mapa con cadenas como claves y una matriz de cadenas para cada valor.`context.params.yourvalue` |
| `limits` | Devuelve lo cerca que estás de alcanzar los [límites de velocidad de las funciones sin servidor](/docs/cms/start-building/features/serverless-functions/overview#know-your-limits).
`executionsRemaining`: cuántas ejecuciones por minuto quedan.
`timeRemaining`: cuánto tiempo de ejecución permitido queda.
|
### Encabezados
Si necesitas conocer los encabezados del cliente que está llegando a tu endpoint, puedes acceder a ellos a través de `context.headers`, similar a cómo accederías a la información a través de `context.body`.
A continuación, revisa algunos de los encabezados comunes que proporciona HubSpot. Para obtener una lista completa, consulta la documentación de encabezados HTTP de [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers).
| título | Descripción |
| - | - |
| `accept` | Comunica qué tipos de contenido, expresados como [tipos MIME](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/MIME_types), entiende el cliente. [Consulta MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Accept). |
| `accept-encoding` | Comunica la codificación del contenido que el cliente entiende. [Consulta MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Accept-Encoding). |
| `accept-language` | Comunica qué idioma humano y localización se prefiere. [Consulta MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Accept-Language). |
| `cache-control` | Contiene directivas para el almacenamiento en caché. [Consulta MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cache-Control). |
| `connection` | Comunica si la conexión de red permanece abierta. [Consulta MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Connection). |
| `cookie` | Contiene las cookies enviadas por el cliente. [Consulta MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cookie). |
| `host` | Comunica el nombre de dominio y el número de puerto TCP de un servidor de escucha. [Consulta MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Host). |
| `true-client-ip` | Dirección IP del usuario final. [Consulta Cloudflare true-client-ip](https://developers.cloudflare.com/network/true-client-ip-header/). |
| `upgrade-insecure-requests` | Comunica la preferencia del cliente por una respuesta cifrada y autentificada. [Consulta MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Upgrade-Insecure-Requests). |
| `user-agent` | Cadena definida por el proveedor que identifica la aplicación, el sistema operativo, el proveedor de la aplicación y la versión. [Consulta MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/User-Agent). |
| `x-forwarded-for` | Identifica la dirección IP de origen de un cliente a través de un proxy o equilibrador de carga. [Consulta MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/X-Forwarded-For). |
#### Redireccionamiento enviando un encabezado
Puedes realizar un redireccionamiento desde tu función sin servidor enviando una respuesta con un encabezado *location* y un statusCode `301`.
```js theme={null}
sendResponse({
statusCode: 301,
headers: {
Location: "https://www.example.com",
},
});
```
### Establecer las cookies desde tu endpoint
Desde tu función sin servidor puedes decirle al cliente (navegador web) que establezca una cookie.
```js theme={null}
exports.main = (context, sendResponse) => {
sendResponse({
body: { ... },
'Set-Cookie': 'myCookie1=12345; expires=...; Max-Age=...',
statusCode: 200
});
}
```
### Establecer varios valores para un solo encabezado
En el caso de los encabezados que admiten múltiples valores, puedes utilizar `multiValueHeaders`, para pasar los valores. Por ejemplo: puedes decirle al navegador que establezca varias cookies.
```js theme={null}
exports.main = (context, sendResponse) => {
sendResponse({
body: { ... },
multiValueHeaders: {
'Set-Cookie': [
'myCookie1=12345; expires=...; Max-Age=...',
'myCookie2=56789; expires=...; Max-Age=...'
]
},
statusCode: 200
});
}
```
## Secretos
Cuando necesites autenticar una solicitud de función sin servidor, usarás secretos para almacenar valores como claves de API o tokens de acceso a aplicaciones privadas. Con la CLI, puedes agregar secretos a tu cuenta de HubSpot para almacenar esos valores, a los que luego podrás acceder a través de variables de entorno (`process.env.secretName`). Los secretos se gestionan a través de la CLI de HubSpot utilizando los siguientes comandos:
* [`hs secrets list`](/docs/developer-tooling/local-development/hubspot-cli/reference#list-secrets)
* [`hs secrets add`](/docs/developer-tooling/local-development/hubspot-cli/reference#add-a-secret)
* [`hs secrets delete`](/docs/developer-tooling/local-development/hubspot-cli/reference#remove-a-secret)
Una vez agregados a través de la CLI, los secretos pueden ponerse a disposición de las funciones mediante la inclusión de una matriz de `secrets` que contenga el nombre del secreto. Esto le permite almacenar tu código de función en el [control de versiones](/docs/cms/start-building/introduction/developer-environment/github-integration) y usar secretos sin exponerlos. Sin embargo, nunca debes devolver el valor de tu secreto a través del registro de la consola o como respuesta, ya que esto expondrá el secreto en los registros o en las páginas del front-end que llaman a tu función sin servidor.
> [!WARNING]
>
> ### Nota:
>
> Debido al almacenamiento en caché, puede tardar aproximadamente un minuto ver los valores actualizados de los secretos. Si acabas de actualizar un secreto pero todavía estás viendo el valor anterior, vuelve a comprobarlo después de aproximadamente un minuto.
## Uso de funciones sin servidor con el elemento de formulario
Al enviar funciones sin servidor, utiliza javascript para manejar el envío del formulario y utiliza el encabezado `"contentType" : "application/json"` en tu solicitud. No utilices el atributo `