Esta página foi traduzida automaticamente e pode conter imprecisões. Para relatar um erro de tradução, abra um issue no GitHub.

blocos do editor de arrastar e soltar

Os blocos de editor são os vários blocos disponíveis no editor de arrastar e soltar. Este artigo de referência inclui uma série de blocos que representam os diferentes tipos de conteúdo que você pode usar em suas mensagens.

in-app messages
email

Usando blocos de editor de mensagem no app

Os blocos de editor estão localizados na seção Build para mensagens no app. Para usá-los, arraste um bloco do editor para dentro de uma coluna. Ele se ajustará automaticamente à largura da coluna. Cada bloco do editor tem suas próprias configurações, como o controle granular do preenchimento. O painel do lado direito muda automaticamente para um painel de propriedades do elemento de conteúdo selecionado.

Tipos

A tabela a seguir descreve como você pode usar cada tipo de bloco de editor.

Nome Descrição

Título Insere um texto de título na mensagem.

Parágrafo Insere um texto de parágrafo na mensagem.

Botão Adiciona um botão padrão. As propriedades desse bloco permitem a edição, a configuração de links e o registro de análise de dados.

Botão de opção Adiciona uma lista de opções das quais os usuários podem selecionar uma. Quando enviado, o perfil de usuário registra o atributo personalizado associado, que deve ser uma string para ser salvo. Atributos personalizados com outros tipos de dados não são salvos no perfil de usuário.

Imagem Insere uma imagem da biblioteca de mídia.

Link Insere um hyperlink que os usuários podem clicar para navegar para uma URL especificada. Pode ser incorporado dentro do texto ou de forma independente.

Espaçador Adiciona espaço ou preenchimento entre outros blocos.

Código personalizado Insere e executa HTML, CSS ou JavaScript personalizados para personalização avançada.

Captura de telefone Insere um campo de formulário para números de telefone. Quando enviado, o usuário é inscrito no grupo de inscrições de SMS ou WhatsApp.

Captura de e-mail Insere um campo de formulário para endereços de e-mail. Quando enviado, o endereço de e-mail é adicionado ao perfil desse usuário na Braze.

Texto curto Insere um campo de formulário que aceita atributos padrão (como nome e sobrenome) ou uma string de atributo personalizado de sua escolha.

Menu suspenso Insere um dropdown com uma lista predefinida de itens dos quais os usuários podem selecionar um. Você pode adicionar quaisquer strings de atributos personalizados à lista.

Caixa de seleção Insere uma caixa de seleção. Se o usuário marcar a caixa, o atributo do bloco é definido como true. Se deixado desmarcado, seu atributo é definido como false.

Grupo de caixas de seleção Os usuários podem selecionar entre várias opções apresentadas. Os valores são definidos ou adicionados a um atributo personalizado de array definido.

Propriedades

As informações das propriedades de cada bloco de editor são fornecidas nas tabelas a seguir.

Título e parágrafo

Propriedade

Descrição

Família da fonte

O estilo da fonte para o texto

Peso da fonte

Determina a espessura do texto

Tamanho da fonte

Determina o tamanho do texto

Altura da linha

Modifica a distância entre as linhas de texto

Espaçamento entre letras

Modifica a distância entre cada caractere

Alinhamento de texto

Move o texto para ser alinhado à esquerda, ao centro, à direita ou justificado

Cor do texto

Modifica a cor do texto

Botão

Propriedade

Descrição

Largura do botão

Modifica a largura do botão para ser automática ou manual

Família da fonte

O estilo da fonte para o texto

Peso da fonte

Determina a espessura do texto

Tamanho da fonte

Determina o tamanho do texto

Espaçamento entre letras

Modifica a distância entre cada caractere

Alinhamento do botão

Move o botão para ser alinhado à esquerda, ao centro ou à direita

Cor do texto do botão

Modifica a cor do texto no botão

Cor de fundo

Modifica a cor do fundo do botão

Estilo da borda

Determina o estilo da borda do botão

Raio da borda

Determina o quão arredondados você deseja que sejam os cantos

Imagem

Importante:

Se você está carregando imagens com Conteúdo conectado ou Liquid, certifique-se de que a URL da imagem comece com https://. Usar http:// pode causar falha no seu app.

Propriedade

Descrição

URL

O endereço hospedado da imagem

Alinhamento

Move a imagem para ser alinhada à esquerda, ao centro ou à direita

Cor de fundo

Modifica a cor do fundo da imagem

Estilo da borda

Determina o estilo da borda da imagem

Raio da borda

Determina o quão arredondados você deseja que sejam os cantos da imagem

Link

Propriedade

Descrição

Família da fonte

O estilo da fonte para o texto

Peso da fonte

Determina a espessura do texto

Espaçamento entre letras

Modifica a distância entre cada caractere

Cor do texto

Modifica a cor do texto

Espaçador

Propriedade

Descrição

Cor de fundo

Modifica a cor de fundo do espaçador

Altura

Modifica a altura do espaçador. Você também pode modificar isso usando as alças de redimensionamento no espaçador.

Código personalizado

Propriedade

Descrição

Código personalizado

Permite adicionar, editar ou excluir HTML, CSS e JavaScript de uma mensagem no app.

Captura de telefone

Propriedade

Descrição

Grupo de inscrições

O grupo de inscrições de SMS ou WhatsApp ao qual o usuário será inscrito ao coletar seu número de telefone, com a opção de coletar números de todos os países

Alinhamento de texto

Move o texto para ser alinhado à esquerda, ao centro, à direita ou justificado

Texto do espaço reservado

Um número de telefone de exemplo para exibir

Captura de e-mail

Propriedade

Descrição

Família da fonte

O estilo da fonte para o texto

Peso da fonte

Determina a espessura do texto

Tamanho da fonte

Determina o tamanho do texto

Altura da linha

Modifica a distância entre as linhas de texto

Cor do texto

Modifica a cor do texto

Espaçamento entre letras

Modifica a distância entre cada caractere

Alinhamento de texto

Move o texto para ser alinhado à esquerda, ao centro, à direita ou justificado

Texto do espaço reservado

Um endereço de e-mail de exemplo para exibir

Ações

Você pode atribuir uma ação que ocorre quando um usuário toca em um botão, link ou imagem na mensagem. Você também pode usar Liquid para personalizar as ações. As informações das ações de cada bloco de editor são fornecidas nas tabelas a seguir.

Botão

Ação

Descrição

Enviar formulário quando o botão for clicado

Envia o formulário e executa o comportamento ao clicar selecionado. Desative esta opção para executar apenas o comportamento ao clicar.

Definir comportamentos específicos para cada plataforma

Personaliza o comportamento do botão para cada plataforma separadamente.

Comportamento ao clicar

Determina a ação quando o usuário clica no botão, como fechar a mensagem, abrir a URL da web, fazer deeplinking em uma página específica do app, ir para outra página ou solicitar permissão de push.

Registrar atributos ou eventos personalizados

Determina se clicar no botão atualizará o perfil do usuário com dados personalizados. Você também pode selecionar o identificador para relatórios.

Imagem

Para especificações de imagem, consulte nossas especificações de imagem de mensagem no app.

Ação

Descrição

Texto alternativo

O texto que aparece no lugar de uma imagem se a imagem não for carregada. Leitores de tela anunciam o texto alternativo para explicar imagens, então use uma linguagem simples para fornecer informações-chave sobre uma imagem.

Enviar formulário quando a imagem for clicada

Envia o formulário e executa o comportamento ao clicar selecionado. Desative esta opção para executar apenas o comportamento ao clicar.

Definir comportamentos específicos para cada plataforma

Personaliza o comportamento da imagem para cada plataforma separadamente.

Comportamento ao clicar

Determina a ação quando o usuário clica na imagem, como fechar a mensagem, abrir a URL da web, fazer deeplinking em uma página específica do app, ir para outra página ou solicitar permissão de push.

Registrar atributos ou eventos personalizados

Determina se clicar na imagem atualizará o perfil do usuário com dados personalizados. Você também pode selecionar o identificador para relatórios.

Link

Ação

Descrição

URL

O hyperlink para navegar

Identificador para relatório

Determina qual identificador é usado para relatórios

Usando blocos de editor de e-mail

Os blocos de editor estão localizados na seção Conteúdo para mensagens de e-mail. Para usar um bloco de editor, arraste um bloco de editor para dentro de uma coluna no editor de arrastar e soltar. Ele se ajustará automaticamente à largura da coluna. Cada bloco do editor tem suas próprias configurações, como o controle granular do preenchimento.

Para saber mais sobre como usar e personalizar esses blocos de editor em seu e-mail, confira Outras personalizações.

Dica:

Você também pode adicionar atributos personalizados a qualquer URL dentro dos blocos de editor Image, Button ou Text.

Tipos

A tabela a seguir descreve como os usuários podem usar cada tipo de bloco de editor.

Nome

Descrição

Título

Adiciona texto para cabeçalhos dentro do e-mail.

Parágrafo

Insere texto na mensagem. Uma barra de ferramentas ajuda na funcionalidade de edição de texto e fontes.

Lista

Adiciona uma lista com marcadores.

Botão

Adiciona um botão padrão. As propriedades desse bloco permitem editar e definir links facilmente.

Divisor

Insere uma linha sólida, pontilhada ou tracejada para ajudar no espaçamento.

Espaçador

Adiciona espaço, ou “padding”, entre outros blocos.

Imagem

Insere uma imagem da Biblioteca de mídia.

Vídeo

Cria um link para o conteúdo do vídeo.

Redes sociais

Insere o ícone da plataforma de redes sociais. Você pode fazer upload de imagens personalizadas para ícones específicos da marca.

Ícones

Insere um ícone. Você pode fazer upload de imagens personalizadas. A Braze usa um ícone de espaço reservado grande até que você faça upload de uma imagem.

HTML

Insere HTML bruto. Recomendado para Liquid, como Conteúdo conectado ou declarações condicionais.

Cria um menu flexível para a mensagem que você está projetando.

Personalização em e-mail

Liquid: Em Conteúdo > Personalização, selecione um atributo, copie o snippet e cole-o em um bloco de texto (Liquid básico) ou bloco HTML (Liquid avançado). Em geral, embora você possa usar Liquid básico em blocos de texto, recomendamos usar blocos HTML para lógicas mais complexas, a fim de evitar problemas de layout. Note que o Liquid não é compatível com blocos de imagem ou campos de URL de botão.
Conteúdo conectado: Adicione um bloco HTML e insira sua chamada {% connected_content %} nele.

Propriedades

Os detalhes das propriedades de cada bloco de editor são fornecidos nas tabelas a seguir.

Título

Consulte a tabela a seguir para obter detalhes sobre as propriedades do bloco do editor Title.

Propriedades

Descrição

Título

Seleciona o estilo do cabeçalho.

Família da fonte

Esse é o estilo da fonte do seu título.

Peso da fonte

Esse é o grau de negrito da fonte.

Tamanho da fonte

Determina o tamanho do seu texto.

Cor do texto

Modifica a cor do título.

Cor do link

Modifica a cor do link.

Alinhar

Move o título para a esquerda, centro ou direita.

Altura da linha

Modifica a distância entre as linhas de texto.

Espaçamento de linha

Modifica a distância entre cada caractere.

Direção do texto

Padrão da esquerda para a direita, mas pode ser editado para ser da direita para a esquerda.

Parágrafo

Consulte a tabela a seguir para obter detalhes sobre as propriedades do bloco do editor Paragraph.

Propriedades

Descrição

Família da fonte

Esse é o estilo da fonte do texto do parágrafo.

Peso da fonte

Esse é o grau de negrito da fonte.

Tamanho da fonte

Determina o tamanho do seu texto.

Cor do texto

Modifica a cor do título.

Cor do link

Modifica a cor do link.

Alinhar

Move o título para a esquerda, centro ou direita.

Espaçamento de parágrafo

Modifica o espaço entre os parágrafos.

Altura da linha

Modifica a distância entre as linhas de texto.

Espaçamento entre letras

Modifica a distância entre cada caractere.

Direção do texto

Padrão da esquerda para a direita, mas pode ser editado para ser da direita para a esquerda.

Lista

Consulte a tabela a seguir para obter detalhes sobre as propriedades do bloco do editor List.

Propriedades

Descrição

Tipo de lista

Esse é o tipo de lista. Pode ser com marcadores ou numerada.

Tipo de estilo de lista

Determina o estilo da sua lista.

Iniciar lista a partir de

Determina o número inicial da sua lista.

Família da fonte

Esse é o estilo da fonte do texto do parágrafo.

Peso da fonte

Esse é o grau de negrito da fonte.

Tamanho da fonte

Determina o tamanho do seu texto.

Cor do texto

Modifica a cor do título.

Cor do link

Modifica a cor do link.

Alinhar

Move o título para a esquerda, centro ou direita.

Espaçamento dos itens da lista

Modifica o espaço entre os itens da lista.

Recuo dos itens da lista

Modifica o recuo dos itens da lista.

Altura da linha

Modifica a distância entre as linhas de texto.

Espaçamento entre letras

Modifica a distância entre cada caractere.

Direção do texto

Padrão da esquerda para a direita, mas pode ser editado para ser da direita para a esquerda.

Divisor

Consulte a tabela a seguir para obter detalhes sobre o bloco do editor Divider.

Propriedades

Descrição

Transparente

Se ativada, as opções “line” e “width” serão removidas.

Linha

Os diferentes formatos de linha, seja pontilhada, tracejada ou sólida. Além disso, você pode modificar a espessura e a cor da linha divisória.

Largura

Ajusta a extensão do divisor em incrementos de 5.

Alinhar

Move a linha para a esquerda, para o centro ou para a direita.

Espaçador

Consulte a tabela a seguir para obter detalhes sobre o bloco do editor Spacer.

Propriedades

Descrição

Altura

Ajusta a altura do bloco espaçador. O padrão é 60px.

Imagem

Consulte a tabela a seguir para obter detalhes sobre o bloco do editor Image. Para imagens dinâmicas (imagens com Liquid ou Conteúdo conectado), você deve definir uma imagem de fallback para usar as configurações de largura automática. Para especificações de imagem, consulte nossas especificações de imagem de e-mail.

Importante:

Se você está carregando imagens com Conteúdo conectado ou Liquid, certifique-se de que a URL da imagem comece com https://. Usar http:// pode causar falha no seu app.

Propriedades

Descrição

Largura automática

Modifica a largura da imagem em pixels.

Alinhar

Orienta a imagem para a esquerda, centro ou direita do bloco.

Imagem com Liquid

Use a lógica Liquid para definir dinamicamente diferentes imagens dentro do mesmo bloco de conteúdo.

URL

Defina uma imagem usando o endereço onde está hospedada.

Texto alternativo

Uma breve descrição da imagem que fornece aos usuários as mesmas informações mostradas na imagem. Isso é essencial para a acessibilidade de leitores de tela ou quando a imagem não carrega.

Imagem com cantos arredondados

Renderiza a imagem com cantos arredondados. Por padrão, as imagens são renderizadas com cantos quadrados.

Ação

Aciona uma ação quando o usuário clica na imagem.

Opções do bloco

Define o preenchimento ao redor do bloco da imagem.

Dica:

Para Auto Width, o redimensionamento automático da imagem escolhe o melhor tamanho para a imagem com base em uma combinação da largura da imagem e do espaço disponível no layout:

As imagens mais largas do que o espaço disponível serão definidas com 100% de largura e manterão essa proporção no celular, usando toda a largura da tela do dispositivo.
Imagens menores do que o espaço disponível usarão o tamanho natural da imagem para evitar efeitos de distorção ou imagens borradas.

Vídeo

Consulte a tabela a seguir para obter detalhes sobre o bloco do editor Video.

Propriedades

Descrição

URL

O URL do vídeo. Note que apenas o YouTube e o Vimeo são compatíveis.

Título

Gerado automaticamente a partir dos metadados do vídeo ou pode ser personalizado.

Estilo do ícone de reprodução

Inclui diferentes opções para o botão de reprodução localizado na parte superior de uma imagem de vídeo.

Cor do ícone de reprodução

Opção para selecionar Claro ou Escuro para o botão de reprodução.

Tamanho do ícone de reprodução

Escolha o tamanho em pixels para o botão de reprodução. Intervalo pré-fixado de 50 px a 80 px (incrementado em 5 px).

Dica:

Os vídeos hospedados pelo Vimeo só funcionarão se estiverem definidos como públicos. Todas as outras configurações de segurança disponíveis no Vimeo (por exemplo, “Hide from Vimeo.com”) gerarão um formato de link diferente que não é compatível com este bloco de conteúdo. Esses tipos de links são alterados pelo construtor, o que impede a Braze de gerar uma miniatura.

Redes sociais

Consulte a tabela a seguir para obter detalhes sobre o bloco do editor Social.

Propriedades

Descrição

Selecione a coleção de ícones

Define o estilo da sua coleção de ícones.

Configure a coleção de ícones

Define o URL de cada ícone social. Inclui o botão de alternância Mais opções para editar o título e o texto alternativo.

Alinhar

Move o ícone social para a esquerda, centro ou direita.

Espaçamento do ícone

Determina o espaçamento entre cada ícone social.

Ícones

Consulte a tabela a seguir para obter detalhes sobre o bloco do editor Icons.

Propriedades

Descrição

Família da fonte

Esse é o estilo da fonte do texto do parágrafo.

Peso da fonte

Esse é o grau de negrito da fonte.

Tamanho da fonte

Determina o tamanho do seu texto.

Cor do texto

Modifica a cor do título.

Cor do link

Modifica a cor do link.

Alinhar

Move o ícone para a esquerda, centro ou direita.

Espaçamento entre letras

Modifica a distância entre cada caractere.

Tamanho do ícone

Determina o tamanho do seu ícone.

Espaçamento do ícone

Modifica o espaço do ícone.

Preenchimento do ícone

Modifica o preenchimento do ícone.

HTML

Consulte a tabela a seguir para obter detalhes sobre o bloco do editor HTML.

Propriedades

Descrição

Editor de HTML

Digite o HTML bruto.

Ações

Você pode atribuir uma ação que ocorre quando um usuário toca em um botão, link ou imagem na mensagem. Você também pode usar Liquid para personalizar as ações. Os detalhes das ações de cada bloco de editor são fornecidos nas tabelas a seguir.

Botão

Consulte a tabela a seguir para obter detalhes sobre o bloco do editor Button.

Propriedades

Descrição

Tipo de link

Determina a ação ao clicar no botão e define o protocolo apropriado.

URL

Dinâmico com base no tipo de link Abrir página da web.

Para, Assunto e Corpo

Para o tipo de link Enviar e-mail, define o endereço de e-mail do destinatário, o assunto e o conteúdo que serão preenchidos em um rascunho de e-mail quando o usuário selecionar o botão.

Tel

Para os tipos de link Fazer chamada e Enviar SMS, define o número de telefone para o qual o usuário ligará ou enviará mensagem ao selecionar o botão.

Mensagem

Para o tipo de link Enviar SMS, define o conteúdo que será preenchido em um rascunho de mensagem SMS quando o usuário selecionar o botão.

Opções do botão

Define várias opções do botão, como fonte, largura, cor e outras.

Passar o mouse sobre o botão

O estilo do botão quando um usuário passa o mouse sobre ele usando um mouse ou trackpad. Isso inclui a cor de fundo do botão, a cor da fonte e os estilos de borda.

New Stuff!