Campos de módulo e tema

Adicione campos aos módulos e temas para permitir que os criadores de conteúdo controlem os diferentes aspectos de uma página dentro do editor de páginas. Saiba mais sobre todos os campos disponíveis para módulos e temas, além de suas propriedades disponíveis. Para obter mais informações sobre a implementação de campos de tema e módulo, incluindo grupos de campos e campos de repetição, consulte a visão geral dos campos de tema e módulo.

Propriedades utilizadas por todos os campos

Todos os campos compartilham um conjunto de propriedades comuns. Estes são campos gerais, como o nome do campo ou o texto de ajuda exibido para os criadores de conteúdo usando o campo no módulo ou tema.

{
  "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 | Descrição | Padrão | | --- | --- | --- | --- | --- | | name | String | O nome do campo, que você usará ao incorporar o campo e seus valores no módulo ou tema. Não pode conter espaços ou caracteres especiais. | richtext_field, date_field, etc. | | label | String | O texto que o criador do conteúdo vê com a descrição do campo. Pode conter espaços. | Rich text field, Date field, etc. | | required | Booleano | Determina se o campo pode ser deixado em branco no editor. Se true, o conteúdo não poderá ser publicado sem um valor no campo. | false | | locked | Booleano | Determina se o campo pode ser editado no editor de conteúdo. Se true, o campo não aparecerá no editor de conteúdo. | false | | type | String | O tipo de campo. Os tipos de campo são exclusivos por campo e podem ser encontrados na documentação de cada campo abaixo. | | | inline_help_text | String | O texto que exibe o rótulo do campo abaixo do campo (limite 400 caracteres). Melhor usado para informações necessárias para usar o campo. Você pode incluir as seguintes tags de HTML (outras tags serão ignoradas na renderização): a, b, br, em, i, p, small, strong, span. | | | help_text | String | O texto que é exibido no editor dentro de uma dica de ferramenta ao passar o cursor do mouse para ajudar o criador de conteúdo (limite de 300 caracteres). Melhor usado para informações complementares, mas não necessárias para usar o campo. Você pode incluir as seguintes tags de HTML (outras tags serão ignoradas na renderização): a, b, br, em, i, p, small, strong, span. | | | id | String | O ID exclusivo do campo, que é definido pelo HubSpot. Ao criar localmente, não é necessário especificar este ID. | | | visibility | Matriz | Define as condições de exibição do campo. Por exemplo, você pode definir um campo para exibir apenas quando outro campo de caixa de seleção tiver sido selecionado. Saiba mais sobre a visibilidade. | | | display_width | String | Por padrão, os campos são de largura completa no editor. Quando dois campos consecutivos no arquivo fields.json estiverem definidos como half_width, eles aparecerão um ao lado do outro no editor. | | | | alias_mapping | String | Um alias para o campo, que mapeia valores de campo existentes para um novo local sem quebrar o conteúdo existente. Isso pode ser útil quando for necessário atualizar um campo que está sendo usado no conteúdo ativo, como mover um campo da aba Conteúdo para a aba Estilos. Saiba mais sobre mapeamento de alias. | False |

Alinhamento

JSON
React

{
  "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	Descrição	Padrão
`default`	Objeto	Objeto contendo `horizontal_align` e `vertical_align`.
`alignment_direction`	String	Determina se apenas os controles de alinhamento horizontal ou vertical, ou ambos, devem ser mostrados. Pode ser: `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

import { ModuleFields, AlignmentField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Objeto	Objeto contendo `horizontal_align` e `vertical_align`.
`alignmentDirection`	String	Determina se apenas os controles de alinhamento horizontal ou vertical, ou ambos, devem ser mostrados. Pode ser: `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

Imagem de fundo

JSON
React

{
  "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	Descrição	Padrão
`default`	Objeto	O objeto que contendo o src da imagem, a posição do plano de fundo e o tamanho do fundo.	`null`

import { ModuleFields, BackgroundImageField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Objeto	O objeto que contendo o src da imagem, a posição do plano de fundo e o tamanho do fundo.	`null`

Blog

JSON
React

{
  "name": "blog",
  "label": "Blog",
  "required": false,
  "locked": false,
  "type": "blog",
  "default": 1234567890
}

Parâmetro	Tipo	Descrição	Padrão
`default`	”default” / id do blog	Especifica qual blog é selecionado por padrão. Este parâmetro aceita argumentos padrão ou um ID de blog (disponível na URL do painel do blog).	`null`

import { ModuleFields, BlogField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	”default” / id do blog	Especifica qual blog é selecionado por padrão. Este parâmetro aceita argumentos padrão ou um ID de blog (disponível na URL do painel do blog).	`null`

Booleano

JSON
React

{
  "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	Descrição	Padrão
`default`	Booleano	Define se o estado padrão deste campo é `true` ou `false`.	`false`
`display`	String	Escolha o estilo de exibição visual para o campo. Pode aparecer como um `toggle` ou `checkbox`.	`checkbox`

import { ModuleFields, BooleanField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Booleano	Define se o estado padrão deste campo é `true` ou `false`.	`false`
`display`	String	Escolha o estilo de exibição visual para o campo. Pode aparecer como um `toggle` ou `checkbox`.	`checkbox`

Um botão pode fazer sentido quando o valor do campo ativa/desativa outros campos que são mostrados de forma condicional. Outra situação em que um botão pode ser útil é quando o campo representa uma grande mudança de design para o módulo.As caixas de seleção fazem sentido para alterações menores que podem não ter um efeito tão significativo na exibição do módulo, como ocultar ou mostrar pequenos elementos individuais.

Borda

JSON
React

{
  "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	Descrição	Padrão
`default`	Booleano	Objeto com chaves para o raio da borda, as partes superior e inferior e os lados direito e esquerdo.	`{}`

import { ModuleFields, BorderField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Booleano	Objeto com chaves para o raio da borda, as partes superior e inferior e os lados direito e esquerdo.	`{}`

Escolha

JSON
React

{
  "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	Descrição	Padrão
`choices`	Matriz	Matriz contendo as opções selecionáveis, formatadas como um valor interno exclusivo seguido do rótulo.	`[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]`
`default`	Valor	Define o valor padrão selecionado da matriz de opções.
`multiple`	Booleano	Campo opcional que permite que várias opções sejam selecionadas quando definido como `true`.Defina `display` como `checkbox` ou `select` para configurar se o campo será exibido como uma lista de caixas de seleção ou um menu suspenso.	`false`
`display`	String	Defina a aparência do campo usando um dos seguintes valores: `select`: renderiza um menu suspenso. Permite selecionar várias opções quando `multiple` está definido como `true`. `checkbox`: processa uma lista de caixas de seleção selecionáveis. Permite selecionar várias opções quando `multiple` está definido como `true` e `reordering_enabled` está definido como `false`. `radio`: processa uma lista de opções de botão de seleção. Não permite selecionar várias opções. `buttons`: apresenta um conjunto de botões com base no `preset` especificado. Não permite selecionar várias opções.	`"select"`
`reordering_enabled`	Booleano	Quando definido como `true`, permite que os criadores de conteúdo reordenem as opções do campo no editor. Para habilitar isso, `multiple` também deve ser definido como `true`.	`false`
`preset`	String	Configura o botão predefinido para usar quando `display` estiver definido como `buttons`. Para cada predefinição, você precisará configurar os rótulos `choices` para corresponder a um conjunto específico de valores. Saiba mais sobre estas opções predefinidas abaixo.

import { ModuleFields, ChoiceField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`choices`	Matriz	Matriz contendo as opções selecionáveis, formatadas como um valor interno exclusivo seguido do rótulo.	`[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]`
`default`	Valor	Define o valor padrão selecionado da matriz de opções.
`multiple`	Booleano	Campo opcional que permite que várias opções sejam selecionadas quando definido como `true`.Defina `display` como `checkbox` ou `select` para configurar se o campo será exibido como uma lista de caixas de seleção ou um menu suspenso.	`false`
`display`	String	Defina a aparência do campo usando um dos seguintes valores: `select`: renderiza um menu suspenso. Permite selecionar várias opções quando `multiple` está definido como `true`. `checkbox`: processa uma lista de caixas de seleção selecionáveis. Permite selecionar várias opções quando `multiple` está definido como `true` e `reordering_enabled` está definido como `false`. `radio`: processa uma lista de opções de botão de seleção. Não permite selecionar várias opções. `buttons`: apresenta um conjunto de botões com base no `preset` especificado. Não permite selecionar várias opções.	`"select"`
`reorderingEnabled`	Booleano	Quando definido como `true`, permite que os criadores de conteúdo reordenem as opções do campo no editor. Para habilitar isso, `multiple` também deve ser definido como `true`.	`false`
`preset`	String	Configura o botão predefinido para usar quando `display` estiver definido como `buttons`. Para cada predefinição, você precisará configurar os rótulos `choices` para corresponder a um conjunto específico de valores. Saiba mais sobre estas opções predefinidas abaixo.

Predefinições do botão de escolha

Para configurar um campo de escolha para exibir botões em vez de um menu suspenso, caixas de seleção ou botões de opção, você pode usar uma das predefinições abaixo. Cada predefinição permite um conjunto específico de rótulos de opções, que você precisará incluir na matriz choices. Esses rótulos não podem ser personalizados.

{
"name": "layout",
"type": "choice",
"label": "Layout",
"required": false,
"locked": false,
"display": "buttons",
"preset": "layout",
"choices": [
["cards_value", "cards"],
["tiles_value", "tiles"],
["minimal_value", "minimal"]
]
}

import { ModuleFields, ChoiceField } from '@hubspot/cms-components/fields';

Predefinição	Rótulos de escolha	Exemplo
`case`	`none` \| `upper` \| `lower`

Cor

JSON
React

{
  "name": "bg_color",
  "label": "Background color",
  "required": false,
  "locked": false,
  "type": "color",
  "default": {
    "color": "#ff0000",
    "opacity": 100
  },
  "limited_options": ["#000000", "#ffffff"]
}

Parâmetro	Tipo	Descrição	Padrão
`default`	Objeto	Define a cor e a opacidade padrão selecionadas.	`{ "color" : "#ffffff", "opacity" : 100 }`
`show_opacity`	Booleano	Define se a entrada de opacidade é mostrada. `true`: a entrada de opacidade é mostrada. `false`: a entrada de opacidade é ocultada. Se não for definido, a entrada de opacidade não será exibida em módulos de e-mail, mas será exibida em outros tipos de módulo.	`undefined`
`limited_options`	Matriz	Uma matriz de strings que oculta a grade de cores padrão e substitui a lista de cores favoritas (o rótulo “Favoritos” se torna “Cores disponíveis”). Os valores na matriz devem ser um código hexadecimal ou um `color` valor hexadecimal em qualquer caminho de herança.	`undefined`

import { ModuleFields, ColorField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Objeto	Define a cor e a opacidade padrão selecionadas.	`{ "color" : "#ffffff", "opacity" : 100 }`
`showOpacity`	Booleano	Define se a entrada de opacidade é mostrada. `true`: a entrada de opacidade é mostrada. `false`: a entrada de opacidade é ocultada. Se não for definido, a entrada de opacidade não será exibida em módulos de e-mail, mas será exibida em outros tipos de módulo.	`undefined`
`limitedOptions`	Matriz	Uma matriz de strings que oculta a grade de cores padrão e substitui a lista de cores favoritas (o rótulo “Favoritos” se torna “Cores disponíveis”). Os valores na matriz devem ser um código hexadecimal ou um `color` valor hexadecimal em qualquer caminho de herança.	`undefined`

CTA

JSON
React

{
  "name": "cta",
  "label": "CTA",
  "required": false,
  "locked": false,
  "type": "cta",
  "default": null
}

Parâmetro	Tipo	Descrição	Padrão
`default`	String	A CTA selecionada por padrão. Espera um ID de CTA que pode ser encontrado na URL ao editar uma CTA no gerenciador de CTA.	`null`

import { ModuleFields, CTAField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	String	A CTA selecionada por padrão. Espera um ID de CTA que pode ser encontrado na URL ao editar uma CTA no gerenciador de CTA.	`null`

Objeto do CRM

JSON
React

{
  "name": "crmobject_field",
  "label": "CRM object",
  "required": false,
  "locked": false,
  "object_type": "CONTACT",
  "properties_to_fetch": [],
  "type": "crmobject",
  "default": {
    "id": 1
  }
}

Parâmetro	Tipo	Descrição	Padrão
`object_type`	String	Tipo de objeto do CRM que o usuário pode escolher. Tipos de objetos do CRM suportados
`properties_to_fetch`	Matriz	Matriz de nomes de propriedades associadas ao tipo de objeto em forma de string. Exemplo: `"date_of_birth"` é uma propriedade associada a um contato. Use isso para limitar as informações que são disponibilizadas na página apenas àquelas de que você precisa.
`default`	Objeto	Objeto com ID da instância do objeto selecionado por padrão. ID de contato, ID de empresa etc.	`null`

import { ModuleFields, CRMObjectField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`objectType`	String	Tipo de objeto do CRM que o usuário pode escolher. Tipos de objetos do CRM suportados
`propertiesToFetch`	Matriz	Matriz de nomes de propriedades associadas ao tipo de objeto em forma de string. Exemplo: `"date_of_birth"` é uma propriedade associada a um contato. Use isso para limitar as informações que são disponibilizadas na página apenas àquelas de que você precisa.
`default`	Objeto	Objeto com ID da instância do objeto selecionado por padrão. ID de contato, ID de empresa etc.	`null`

Propriedade do objeto do CRM

JSON
React

{
  "name": "crmobjectproperty_field",
  "label": "CRM object property",
  "required": true,
  "locked": false,
  "object_type": "contact",
  "type": "crmobjectproperty",
  "default": {
    "property": "field_of_study"
  }
}

Parâmetro	Tipo	Descrição
`object_type`	String	Tipo de objeto do CRM que o usuário pode escolher. Saiba mais sobre os tipos de objeto do CRM compatíveis.
`default`	Objeto	Contém a propriedade padrão para exibir.

Além disso, você pode usar os seguintes snippets para retornar outros detalhes da propriedade:

{{ module.fieldname.property }}: retorna o nome interno da propriedade.
{{ module.fieldname.property_definition.label }}: retorna o rótulo da propriedade.
{{ module.fieldname.property_definition.type }}: retorna o tipo de propriedade (por exemplo, string).

import { ModuleFields, CRMObjectPropertyField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição
`objectType`	String	Tipo de objeto do CRM que o usuário pode escolher. Saiba mais sobre os tipos de objeto do CRM compatíveis.
`default`	Objeto	Contém a propriedade padrão para exibir.

Data

JSON
React

{
  "name": "event_start_date",
  "label": "Event Date",
  "required": false,
  "locked": false,
  "type": "date",
  "default": 1577854800000
}

Parâmetro	Tipo	Descrição	Padrão
`default`	Data/hora	O carimbo de data/hora Unix Epoch para a data e a hora que você quer usar por padrão. Deixe como nulo para permitir que o seletor de data e hora indique a data e a hora atuais para o criador do conteúdo.	`null`

import { ModuleFields, DateField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Data/hora	O carimbo de data/hora Unix Epoch para a data e a hora que você quer usar por padrão. Deixe como nulo para permitir que o seletor de data e hora indique a data e a hora atuais para o criador do conteúdo.	`null`

Data e hora

JSON
React

{
  "name": "event_start",
  "label": "Event Start",
  "required": false,
  "locked": false,
  "type": "datetime",
  "default": 1577854800000
}

Parâmetro	Tipo	Descrição	Padrão
`default`	Data/hora	O carimbo de data/hora Unix Epoch para a data e a hora que você quer usar por padrão. Deixe como nulo para permitir que o seletor de data e hora indique a data e a hora atuais para o criador do conteúdo.	`null`

import { ModuleFields, DateTimeField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Data/hora	O carimbo de data/hora Unix Epoch para a data e a hora que você quer usar por padrão. Deixe como nulo para permitir que o seletor de data e hora indique a data e a hora atuais para o criador do conteúdo.	`null`

Endereço de e-mail

JSON
React

{
  "name": "emails",
  "label": "Email address",
  "required": false,
  "locked": false,
  "type": "email",
  "default": null
}

Parâmetro	Tipo	Descrição	Padrão
`default`	Matriz	Matriz de strings de endereços de e-mail `["bob@example.com", "dennis@example.com"]`	`null`

import { ModuleFields, EmailField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Matriz	Matriz de strings de endereços de e-mail `["bob@example.com", "dennis@example.com"]`	`null`

Incorporação

JSON
React

{
  "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 | Descrição | Padrão | | --- | --- | --- | --- | --- | | supported_source_types | Matriz | Tipos de fontes suportados para URLs oEmbed (oembed), código de incorporação HTML (html) ou Media Bridge (media_bridge). | ["oembed", "html"] | | supported_oembed_types | Matriz | O tipo de oEmbed suportado, inclui "photo", "video", "link" e "rich". Não se aplica a supported_source_types de html | [ "photo", "video", "link", "rich" ] | | supported_media_bridge_providers | Matriz | Matriz de IDs de provedor que determina quais provedores de Media Bridge estão disponíveis para selecionar conteúdo.Observação: esse parâmetro também será preenchido durante a instalação de um Aplicativo de provedor de Media Bridge. | | | | type | String | Este parâmetro está sempre definido como "embed" | "embed" | | default | Dict | Uma matriz contendo o parâmetro "source_type". Este parâmetro tem um valor baseado em string das opções fornecidas no parâmetro "supported_source_types". | oembed |

import { ModuleFields, EmbedField } from "@hubspot/cms-components/fields";

| Prop | Tipo | Descrição | Padrão | | --- | --- | --- | --- | --- | | supportedSourceTypes | Matriz | Tipos de fontes suportados para URLs oEmbed (oembed), código de incorporação HTML (html) ou Media Bridge (media_bridge). | ["oembed", "html"] | | supportedOembedTypes | Matriz | O tipo de oEmbed suportado, inclui "photo", "video", "link" e "rich". Não se aplica a supported_source_types de html | [ "photo", "video", "link", "rich" ] | | supportedMediaBridgeProviders | Matriz | Matriz de IDs de provedor que determina quais provedores de Media Bridge estão disponíveis para selecionar conteúdo.Observação: esse parâmetro também será preenchido durante a instalação de um Aplicativo de provedor de Media Bridge. | | | | type | String | Este parâmetro está sempre definido como "embed" | "embed" | | default | Dict | Uma matriz contendo o parâmetro "source_type". Este parâmetro tem um valor baseado em string das opções fornecidas no parâmetro "supported_source_types". | oembed |

Arquivo

JSON
React

{
  "name": "file_field",
  "label": "File",
  "required": false,
  "locked": false,
  "type": "file",
  "picker": "file",
  "default": null
}

Parâmetro	Tipo	Descrição	Padrão
`default`	String	URL do arquivo.	`null`
`picker`	String	Valores aceitáveis: “file”, “document”, “image”. O seletor mostra os ativos que foram carregados no gerenciador de arquivos ou no gerenciador de documentos, dependendo deste parâmetro.	`file`

import { ModuleFields, FileField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	String	URL do arquivo.	`null`
`picker`	String	Valores aceitáveis: “file”, “document”, “image”. O seletor mostra os ativos que foram carregados no gerenciador de arquivos ou no gerenciador de documentos, dependendo deste parâmetro.	`file`

E-mail de acompanhamento

JSON
React

{
  "name": "followup_email",
  "label": "Followup email",
  "required": false,
  "locked": false,
  "type": "followupemail",
  "default": null
}

Parâmetro	Tipo	Descrição	Padrão
`default`	String	ID de e-mail	`null`

import { ModuleFields, FollowUpEmailField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	String	ID de e-mail	`null`

Fonte

Observação:

A família de fontes é determinada pela combinação das propriedades font e font_set. Você deve incluir ambas para carregar a fonte. Ao herdar campos, você precisa herdar ambos os valores.
Ocultar subcampos relacionados ao CSS com visibility não impedirá que o CSS seja exibido no estilo retornado pelo objeto de campo. Você ainda precisará incluir manualmente o CSS no objeto styles.

JSON
React

{
  "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	Descrição	Padrão
`default`	Objeto	Objeto de fonte com definições de tamanho, unidade de tamanho, cor e estilos para negrito, itálico e sublinhado.	`{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }`
`load_external_fonts`	Booleano	O HubSpot carregará automaticamente a fonte web selecionada na página se ela estiver selecionada e referenciada pelo HubL em uma folha de estilo ou em um módulo. Defina como falso se você já estiver carregando a fonte na página, assim a fonte não será carregada duas vezes.	`true`
`visibility`	Objeto	Usando o objeto aninhado `hidden_subfields`, você pode definir um booleano para os controles do campo de fonte que devem ser ocultados. Os subcampos incluem: `font`, `size`, `bold`, `italic`, `underline` e `color`.
`variant`	String	Ao usar uma fonte da Web; a variante da fonte que você deseja usar. Por exemplo, para usar um peso de fonte de 700, defina como `"700"`. Para usar itálico e um peso de fonte de 400, defina como `"400i"`.
`limited_options`	Matriz	Matriz de strings que substitui a lista de todas as opções de fonte. Os valores na matriz devem ser um nome de fonte codificado ou uma fonte `name` propriedade em qualquer caminho de herança. Por exemplo `theme.typography.body_text.name`.	`undefined`

import { ModuleFields, FontField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Objeto	Objeto de fonte com definições de tamanho, unidade de tamanho, cor e estilos para negrito, itálico e sublinhado.	`{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }`
`loadExternalFonts`	Booleano	O HubSpot carregará automaticamente a fonte web selecionada na página se ela estiver selecionada e referenciada pelo HubL em uma folha de estilo ou em um módulo. Defina como falso se você já estiver carregando a fonte na página, assim a fonte não será carregada duas vezes.	`true`
`visibility`	Objeto	Usando o objeto aninhado `hidden_subfields`, você pode definir um booleano para os controles do campo de fonte que devem ser ocultados. Os subcampos incluem: `font`, `size`, `bold`, `italic`, `underline` e `color`.
`variant`	String	Ao usar uma fonte da Web; a variante da fonte que você deseja usar. Por exemplo, para usar um peso de fonte de 700, defina como `"700"`. Para usar itálico e um peso de fonte de 400, defina como `"400i"`.
`limitedOptions`	Matriz	Matriz de strings que substitui a lista de todas as opções de fonte. Os valores na matriz devem ser um nome de fonte codificado ou uma fonte `name` propriedade em qualquer caminho de herança. Por exemplo `theme.typography.body_text.name`.	`undefined`

Formulário

JSON
React

{
  "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	Descrição
`default`	Objeto	Um objeto que contém os detalhes da resposta de envio do formulário. Inclui os seguintes parâmetros: `response_type`, que pode ser um dos seguintes: `inline:` uma mensagem de texto em linha. `redirect`: redirecione o visitante após o envio. `message`: o texto a ser exibido após o envio do formulário. `redirect_id`: para formulários redirecionados, defina como um ID de conteúdo HubSpot para redirecionar os remetentes para uma página HubSpot. `redirect_url`: para formulários redirecionados, defina como um URL específico para redirecionar os remetentes a uma página.
`disable_inline_form_editing`	String	Defina a propriedade `disable_inline_form_editing` como `true` para ocultar todos os controles de edição de formulário integrados no módulo de formulário. Isso inclui os campos do formulário, o texto do botão de envio, as opções de privacidade e consentimento de dados e o CAPTCHA.
`required_property_types`	Matriz	Uma matriz que especifica quais formulários podem ser selecionados com base nos tipos de propriedade dos campos do formulário. Os valores incluem: `"CONTACT"`, `"COMPANY"` e `"TICKET"`.
`support_all_webinar_types`	Booleano	Quando definido para `true`, o formulário mostrará um seletor de webinar mais genérico que permite selecionar webinars do Microsoft Teams, além do GoToWebinar. Os valores do campo do formulário também mudarão ligeiramente para economizar `webinar_id` e `webinar_source` em vez de `gotowebinar_webinar_key`. Você precisará passar esses valores de propriedade mais genéricos de volta para a Tag de formulário ao lado `gotowebinar_webinar_key`.
`embed_versions`	Matriz	Uma matriz que especifica quais formulários podem ser selecionados com base na versão do formulário. Os valores incluem `"v2"` para formulários herdados e `"v4"` para novos formulários do editor.

import { ModuleFields, FormField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição
`default`	Objeto	Um objeto que contém os detalhes da resposta de envio do formulário. Inclui os seguintes parâmetros: `response_type`, que pode ser um dos seguintes: `inline:` uma mensagem de texto em linha. `redirect`: redirecione o visitante após o envio. `message`: o texto a ser exibido após o envio do formulário. `redirect_id`: para formulários redirecionados, defina como um ID de conteúdo HubSpot para redirecionar os remetentes para uma página HubSpot. `redirect_url`: para formulários redirecionados, defina como um URL específico para redirecionar os remetentes a uma página.
`disableInlineFormEditing`	String	Defina a propriedade `disableInlineFormEditing` como `true` para ocultar todos os controles de edição de formulário integrados no módulo de formulário. Isso inclui os campos do formulário, o texto do botão de envio, as opções de privacidade e consentimento de dados e o CAPTCHA.
`requiredPropertyTypes`	Matriz	Uma matriz que especifica quais formulários podem ser selecionados com base nos tipos de propriedade dos campos do formulário. Os valores incluem: `"CONTACT"`, `"COMPANY"` e `"TICKET"`.
`supportAllWebinarTypes`	Booleano	Quando definido para `true`, o formulário mostrará um seletor de webinar mais genérico que permite selecionar webinars do Microsoft Teams, além do GoToWebinar. Os valores do campo do formulário também mudarão ligeiramente para economizar `webinar_id` e `webinar_source` em vez de `gotowebinar_webinar_key`. Você precisará passar esses valores de propriedade mais genéricos de volta para a Tag de formulário ao lado `gotowebinar_webinar_key`.
`embedVersions`	Matriz	Uma matriz que especifica quais formulários podem ser selecionados com base na versão do formulário. Os valores incluem `"v2"` para formulários herdados e `"v4"` para novos formulários do editor.

Gradiente

JSON
React

{
  "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	Descrição
`default`	Objeto	O objeto que contêm a orientação de um gradiente (“side_or_corner”) e paradas de cor para o gradiente como uma matriz de objetos.

import { ModuleFields, GradientField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição
`default`	Objeto	O objeto que contêm a orientação de um gradiente (“side_or_corner”) e paradas de cor para o gradiente como uma matriz de objetos.

Linha do HubDB

JSON
React

{
  "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	Descrição	Padrão
`table_name_or_id`	String	O nome ou o ID da tabela do HubDB. Este campo é obrigatório.
`columns_to_fetch`	Matriz	Uma matriz de nomes de colunas para buscar na tabela. Se for deixado em branco, retornará todas as colunas da tabela.	`[]`
`display_columns`	Matriz	Uma matriz de nomes de colunas para usar no rótulo de opção. Se for deixado em branco, retornará apenas a primeira coluna da tabela.	`[]`
`display_format`	String	O formato em que você deseja que os dados da coluna fossem exibidos no seletor de linha do HubDB usando o símbolo de porcentagem e o número para designar uma coluna. Ex: %0 (%1) apareceria como Column0Value (Column1Value)	`""`
`default`	Objeto	Objeto que contém “id” para definir a linha de hubdb padrão.	`{ "id" : null }`

import { ModuleFields, HubDBRowField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`tableNameOrId`	String	O nome ou o ID da tabela do HubDB. Este campo é obrigatório.
`columnsToFetch`	Matriz	Uma matriz de nomes de colunas para buscar na tabela. Se for deixado em branco, retornará todas as colunas da tabela.	`[]`
`displayColumns`	Matriz	Uma matriz de nomes de colunas para usar no rótulo de opção. Se for deixado em branco, retornará apenas a primeira coluna da tabela.	`[]`
`displayFormat`	String	O formato em que você deseja que os dados da coluna fossem exibidos no seletor de linha do HubDB usando o símbolo de porcentagem e o número para designar uma coluna. Ex: %0 (%1) apareceria como Column0Value (Column1Value)	`""`
`default`	Objeto	Objeto que contém “id” para definir a linha de hubdb padrão.	`{ "id" : null }`

Tabela HubDb

JSON
React

{
  "name": "recipe_table",
  "label": "Recipe Table",
  "required": false,
  "locked": false,
  "type": "hubdbtable",
  "default": 2010782
}

Parâmetro	Tipo	Descrição	Padrão
`default`	String	ID da tabela do HubDB	`null`

import { ModuleFields, HubDBTableField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	String	ID da tabela do HubDB	`null`

Ícone

JSON
React

{
  "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	Descrição	Padrão
`default`	Objeto	Objeto de ícone
`icon_set`	String	O ícone do FontAwesome que deve ser usado. Estes são os possíveis valores: `fontawesome-6.4.2` `fontawesome-5.14.0` `fontawesome-5.0.10`	`fontawesome-5.0.10`

import { ModuleFields, IconField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Objeto	Objeto de ícone
`iconSet`	String	O ícone do FontAwesome que deve ser usado. Estes são os possíveis valores: `fontawesome-6.4.2` `fontawesome-5.14.0` `fontawesome-5.0.10`	`fontawesome-5.0.10`

Imagem

Os campos de imagem são suportados nos módulos. As imagens podem ser usadas como campos de estilo. Você somente deve usar campos de imagem como campos de estilo se a imagem for puramente representativa, ou seja, não transmita significado e não seja uma imagem de fundo. Isso serve para seguir as práticas recomendadas de acessibilidade.

JSON
React

{
  "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	Descrição	Padrão
`default`	Objeto	Define as propriedades para dimensionamento de imagens, texto alternativo e muito mais. Pode conter as seguintes propriedades: `size_type`: se a imagem é dimensionada automática ou manualmente: `"auto"`: ajuste automaticamente o tamanho da imagem com base em suas dimensões originais. `"auto_custom_max"`: o HubSpot ajustará automaticamente o tamanho da imagem com base nas dimensões máximas definidas usando as propriedades `"max_height"` e `"max_width"`. `"exact":` o HubSpot dimensionará a imagem com base nas dimensões especificadas pelas propriedades `"height"` e `"width"`. `src`: o URL da imagem padrão. Deve ser um caminho absoluto para uma imagem. `alt`: o texto alternativo padrão da imagem. `loading`: as opções de carregamento lento da imagem. Pode ser definido como `"disabled"` (padrão), `"eager"` ou `"lazy"`.	`{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }`
`responsive`	Booleano	Determina se a imagem deve agir de forma responsível ou se deve ter altura e largura fixas.	`true`
`show_loading`	Booleano	Determina se os controles para escolher carregar a imagem de forma lenta são mostrados no editor de páginas.	`false`

import { ModuleFields, ImageField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Objeto	Define as propriedades para dimensionamento de imagens, texto alternativo e muito mais. Pode conter as seguintes propriedades: `size_type`: se a imagem é dimensionada automática ou manualmente: `"auto"`: ajuste automaticamente o tamanho da imagem com base em suas dimensões originais. `"auto_custom_max"`: o HubSpot ajustará automaticamente o tamanho da imagem com base nas dimensões máximas definidas usando as propriedades `"max_height"` e `"max_width"`. `"exact":` o HubSpot dimensionará a imagem com base nas dimensões especificadas pelas propriedades `"height"` e `"width"`. `src`: o URL da imagem padrão. Deve ser um caminho absoluto para uma imagem. `alt`: o texto alternativo padrão da imagem. `loading`: as opções de carregamento lento da imagem. Pode ser definido como `"disabled"` (padrão), `"eager"` ou `"lazy"`.	`{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }`
`responsive`	Booleano	Determina se a imagem deve agir de forma responsível ou se deve ter altura e largura fixas.	`true`
`showLoading`	Booleano	Determina se os controles para escolher carregar a imagem de forma lenta são mostrados no editor de páginas.	`false`

Link

JSON
React

{
  "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	Descrição	Padrão
`default`	Objeto	O URL padrão e o comportamento de abertura do link. Este objeto inclui: O objeto `url` que contém: `content_id`: se estiver vinculando ao conteúdo do HubSpot, o ID desse conteúdo. Defina como `null` se estiver vinculando a conteúdo externo. `type`: o tipo de URL. Saiba mais sobre os tipos suportados abaixo. `href`: o URL do conteúdo. Ao vincular ao conteúdo do HubSpot, defina como `null` e use`content_id` em vez disso.	`{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }`
`supported_types`	Matriz	Os tipos de links que os criadores de conteúdo podem selecionar. Remova os tipos da lista que você não quer que os criadores de conteúdo tenham acesso para definir. Os tipos de valores incluem: `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	Por padrão, os criadores de conteúdo só poderão selecionar a opção `no_follow`.Quando definido como `true`, os criadores de conteúdo também podem selecionar: `sponsored`: um link patrocinado, como um link de anúncio pago. `user_generated_content`: conteúdo gerado por usuários, como fóruns. Saiba mais sobre atributos de link.	`false`

import { ModuleFields, LinkField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Objeto	O URL padrão e o comportamento de abertura do link. Este objeto inclui: O objeto `url` que contém: `content_id`: se estiver vinculando ao conteúdo do HubSpot, o ID desse conteúdo. Defina como `null` se estiver vinculando a conteúdo externo. `type`: o tipo de URL. Saiba mais sobre os tipos suportados abaixo. `href`: o URL do conteúdo. Ao vincular ao conteúdo do HubSpot, defina como `null` e use`content_id` em vez disso.	`{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }`
`supportedTypes`	Matriz	Os tipos de links que os criadores de conteúdo podem selecionar. Remova os tipos da lista que você não quer que os criadores de conteúdo tenham acesso para definir. Os tipos de valores incluem: `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	Por padrão, os criadores de conteúdo só poderão selecionar a opção `no_follow`.Quando definido como `true`, os criadores de conteúdo também podem selecionar: `sponsored`: um link patrocinado, como um link de anúncio pago. `user_generated_content`: conteúdo gerado por usuários, como fóruns. Saiba mais sobre atributos de link.	`false`

Logotipo

JSON
React

{
  "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	Descrição	Padrão
`show_loading`	String	Determina se os controles para escolher carregar a imagem de forma lenta são mostrados no editor de páginas.	`false`
`default`	Objeto	Objeto de logotipo. Se `show_loading` estiver definido como `true`, você poderá incluir uma propriedade `loading` para definir as opções de carregamento lento da imagem. As opções incluem: `"disabled"` (padrão) `"eager"` `"lazy"`	`{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }`

import { ModuleFields, LogoField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`showLoading`	String	Determina se os controles para escolher carregar a imagem de forma lenta são mostrados no editor de páginas.	`false`
`default`	Objeto	Objeto de logotipo. Se `show_loading` estiver definido como `true`, você poderá incluir uma propriedade `loading` para definir as opções de carregamento lento da imagem. As opções incluem: `"disabled"` (padrão) `"eager"` `"lazy"`	`{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }`

JSON
React

{
  "name": "menu",
  "label": "Menu",
  "required": false,
  "locked": false,
  "type": "menu",
  "default": 12345678911
}

Parâmetro	Tipo	Descrição	Padrão
`default`	Inteiro	O ID de menu para o menu. Valor padrão é `null`; assume o menu padrão na navegação.	`null`

import { ModuleFields, MenuField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Inteiro	O ID de menu para o menu. Valor padrão é `null`; assume o menu padrão na navegação.	`null`

Número

JSON
React

{
  "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	Descrição	Padrão
`default`	Número	Um número padrão a ser usado.	`null`
`prefix`	String	Adicionado como um prefixo ao campo de número.
`suffix`	String	Adicionado como um sufixo ao campo de número.
`placeholder`	String	Adiciona um valor de espaço reservado ao campo.

import { ModuleFields, NumberField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Número	Um número padrão a ser usado.	`null`
`prefix`	String	Adicionado como um prefixo ao campo de número.
`suffix`	String	Adicionado como um sufixo ao campo de número.
`placeholder`	String	Adiciona um valor de espaço reservado ao campo.

Os parâmetros de sufixo e prefixo são para fins de exibição no editor de conteúdo e não afetam o valor numérico do campo.

Página

JSON
React

{
  "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	Descrição	Padrão
`default`	Inteiro	Um ID de página predefinido a ser selecionado.	`null`

import { ModuleFields, PageField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Inteiro	Um ID de página predefinido a ser selecionado.	`null`

Rich text

JSON
React

{
  "name": "description",
  "label": "Description",
  "required": false,
  "locked": false,
  "type": "richtext",
  "default": null
}

Parâmetro	Tipo	Descrição	Padrão
`default`	String	A string de conteúdo a ser exibida suporta HTML. Observação: você não pode usar a função `get_asset_url` dentro dessa propriedade padrão.	`""`
`enabled_features`	Matriz	Uma matriz de itens que permite configurar a barra de ferramentas do editor de rich text e determinar quais opções estão disponíveis para os editores de conteúdo.

import { ModuleFields, RichTextField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	String	A string de conteúdo a ser exibida suporta HTML. Observação: você não pode usar a função `get_asset_url` dentro dessa propriedade padrão.	`""`
`enabledFeatures`	Matriz	Uma matriz de itens que permite configurar a barra de ferramentas do editor de rich text e determinar quais opções estão disponíveis para os editores de conteúdo.

JSON
React

{
  "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	Descrição	Padrão
`default`	Matriz de objetos	Estrutura JSON para menus e menus secundários.	`[]`

import { ModuleFields, SimpleMenuField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Matriz de objetos	Estrutura JSON para menus e menus secundários.	`[]`

Espaçamento

JSON
React

{
  "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	Descrição	Padrão
`default`	Objeto	Define os valores de espaçamento padrão.Contém os objetos `padding` e `margin`: `padding`: pode conter os objetos `top`, `right`, `bottom`, `left` `margin`: pode conter os objetos `top` e `bottom` Use `units` para definir as unidades que um criador de conteúdo pode usar no HubSpot. Saiba mais sobre as unidades abaixo.	`{}`
`limits`	Objeto	Define as diretrizes para a quantidade `min` e `max` de espaçamento. Contém os objetos `padding` e `margin`: `padding`: pode conter os objetos `top`, `right`, `bottom` e `left` `margin`: pode conter os objetos `top` e `bottom` Use `units` para definir as unidades que um criador de conteúdo pode usar no HubSpot. Saiba mais sobre as unidades abaixo.

import { ModuleFields, SpacingField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Objeto	Define os valores de espaçamento padrão.Contém os objetos `padding` e `margin`: `padding`: pode conter os objetos `top`, `right`, `bottom`, `left` `margin`: pode conter os objetos `top` e `bottom` Use `units` para definir as unidades que um criador de conteúdo pode usar no HubSpot. Saiba mais sobre as unidades abaixo.	`{}`
`limits`	Objeto	Define as diretrizes para a quantidade `min` e `max` de espaçamento. Contém os objetos `padding` e `margin`: `padding`: pode conter os objetos `top`, `right`, `bottom` e `left` `margin`: pode conter os objetos `top` e `bottom` Use `units` para definir as unidades que um criador de conteúdo pode usar no HubSpot. Saiba mais sobre as unidades abaixo.

Ao usar o campo de espaçamento, observe o seguinte:

Você deve incluir uma lista units ao definir min ou max.
A propriedade units suporta os seguintes tipos de unidade: %, ch, em, ex, in, lh, pc, pt, px, Q, rem, vh, vmax, vmin e vw.
Quando um criador de conteúdo edita todos os deslocamentos de uma vez, o HubSpot usa o maior valor min e o menor valor max. Além disso, somente as unidades compartilhadas por todos os lados estarão disponíveis para o criador do conteúdo.

Tag

JSON
React

{
  "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	Descrição	Padrão
`default`	String	A ID da tag.	`null`
`tag_value`	Sting	O valor de saída. Pode ser um de: `ALL`: um objeto que contém o nome, a ID exclusiva e o espaçador de URL da tag. `ID`: a ID exclusiva da tag. `NAME`: o nome da tag. `SLUG`: o espaçador de URL da tag.	`SLUG`

import { ModuleFields, TagField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	String	A ID da tag.	`null`
`tagValue`	Sting	O valor de saída. Pode ser um de: `ALL`: um objeto que contém o nome, a ID exclusiva e o espaçador de URL da tag. `ID`: a ID exclusiva da tag. `NAME`: o nome da tag. `SLUG`: o espaçador de URL da tag.	`SLUG`

Texto

JSON
React

{
  "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	Descrição	Padrão
`default`	String	String de texto.	`""`

import { ModuleFields, TextField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	String	String de texto.	`""`

Alinhamento de texto

JSON
React

{
  "name": "heading_align",
  "label": "Heading alignment",
  "required": false,
  "type": "textalignment",
  "default": {
    "text_align": "LEFT"
  }
}

Parâmetro	Tipo	Descrição	Padrão
`default`	Objeto	Objeto contendo `horizontal_align` e `vertical_align`.
`alignment_direction`	String	Determina se apenas os controles de alinhamento horizontal ou vertical, ou ambos, devem ser mostrados. Pode ser: `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

import { ModuleFields, TextAlignmentField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Objeto	Objeto contendo `horizontal_align` e `vertical_align`.
`alignmentDirection`	String	Determina se apenas os controles de alinhamento horizontal ou vertical, ou ambos, devem ser mostrados. Pode ser: `HORIZONTAL` `VERTICAL` `BOTH`	`BOTH`

URL

JSON
React

{
  "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	Descrição	Padrão
`default`	Objeto	Objeto de URL, com tipo, href e id do conteúdo (se o conteúdo for uma página ou post no HubSpot)	`{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }`
`supported_types`	Matriz	Lista dos tipos de links que podem ser selecionados pelos criadores de conteúdo. Remova os tipos da lista que você não quer que os criadores de conteúdo tenham acesso para definir. Os tipos incluem: `EXTERNAL`: renderiza um campo de entrada de texto para um URL externo. `CONTENT`: renderiza um menu suspenso contendo o site da conta e landing pages. `FILE`: renderiza um seletor de arquivos. `EMAIL_ADDRESS`: renderiza um campo de entrada de texto para um endereço de e-mail. `BLOG`: renderiza um menu suspenso contendo as páginas de listagem de blog da conta. `PHONE_NUMBER`: renderiza um campo de entrada de texto para um número de telefone. O número deve começar com `+` e conter de 7 a 15 dígitos (excluindo o código do país). `WHATSAPP_NUMBER`: renderiza um menu suspenso contendo a lista de números do WhatsApp conectados.	`[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]`

import { ModuleFields, UrlField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Objeto	Objeto de URL, com tipo, href e id do conteúdo (se o conteúdo for uma página ou post no HubSpot)	`{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }`
`supportedTypes`	Matriz	Lista dos tipos de links que podem ser selecionados pelos criadores de conteúdo. Remova os tipos da lista que você não quer que os criadores de conteúdo tenham acesso para definir. Os tipos incluem: `EXTERNAL`: renderiza um campo de entrada de texto para um URL externo. `CONTENT`: renderiza um menu suspenso contendo o site da conta e landing pages. `FILE`: renderiza um seletor de arquivos. `EMAIL_ADDRESS`: renderiza um campo de entrada de texto para um endereço de e-mail. `BLOG`: renderiza um menu suspenso contendo as páginas de listagem de blog da conta. `PHONE_NUMBER`: renderiza um campo de entrada de texto para um número de telefone. O número deve começar com `+` e conter de 7 a 15 dígitos (excluindo o código do país). `WHATSAPP_NUMBER`: renderiza um menu suspenso contendo a lista de números do WhatsApp conectados.	`[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]`

Vídeo

JSON
React

{
  "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	Descrição	Padrão
`default`	Objeto	Objeto de vídeo com configurações para `player_id`, `height`, `width`, `size_type`, `conversion_asset`, `loop_video`, `mute_by_default`, `autoplay` e `hide_control`.	`[]`
`show_advanced_options`	Booleano	Se os criadores de conteúdo podem ver as opções padrão avançadas.	`false`

import { ModuleFields, VideoField } from "@hubspot/cms-components/fields";

Prop	Tipo	Descrição	Padrão
`default`	Objeto	Objeto de vídeo com configurações para `player_id`, `height`, `width`, `size_type`, `conversion_asset`, `loop_video`, `mute_by_default`, `autoplay` e `hide_control`.	`[]`
`showAdvancedOptions`	Booleano	Se os criadores de conteúdo podem ver as opções padrão avançadas.	`false`

Parâmetros de objeto conversion_asset

Parâmetro	Tipo	Descrição	Padrão
`type`	String	Aceita `"FORM"`, `"CTA"` ou `""`	`""`
`id`	String	O ID do formulário ou tipo de CTA	`""`
`position`	String	Se o ativo de conversão deve ser mostrado antes do início do vídeo ou depois de este terminar. Aceita “PRE” ou “POST”.	`""`

​Propriedades utilizadas por todos os campos

​Alinhamento

​Imagem de fundo

​Blog

​Booleano

​Borda

​Escolha

​Predefinições do botão de escolha

​Cor

​CTA

​Objeto do CRM

​Propriedade do objeto do CRM

​Data

​Data e hora

​Endereço de e-mail

​Incorporação

​Arquivo

​E-mail de acompanhamento

​Fonte

​Observação:

​Formulário

​Gradiente

​Linha do HubDB

​Tabela HubDb

​Ícone

​Imagem

​Link

​Logotipo

​Menu

​Número

​Página

​Rich text

​Menu simples

​Espaçamento

​Tag

​Texto

​Alinhamento de texto

​URL

​Vídeo

​Parâmetros de objeto conversion_asset

Propriedades utilizadas por todos os campos

Alinhamento

Imagem de fundo

Blog

Booleano

Borda

Escolha

Predefinições do botão de escolha

Cor

CTA

Objeto do CRM

Propriedade do objeto do CRM

Data

Data e hora

Endereço de e-mail

Incorporação

Arquivo

E-mail de acompanhamento

Fonte

Observação:

Formulário

Gradiente

Linha do HubDB

Tabela HubDb

Ícone

Imagem

Link

Logotipo

Menu

Número

Página

Rich text

Menu simples

Espaçamento

Tag

Texto

Alinhamento de texto

URL

Vídeo

Parâmetros de objeto conversion_asset