Criar uma mensagem no app com arrastar e soltar

O editor de arrastar e soltar é a forma recomendada para criar a maioria das mensagens no app. Crie mensagens modais e em tela cheia com os mesmos layouts principais do editor tradicional, além de mais personalização por meio de linhas, Content Blocks, modelos e fluxos de várias páginas. Para conhecer os blocos de construção do editor, consulte Blocos do editor.

Se você quiser usar seus modelos HTML personalizados existentes ou modelos criados por terceiros, eles precisam ser recriados no editor de arrastar e soltar.

Não tem certeza se sua mensagem no app deve ser enviada usando uma Campaign ou um Canvas? Campaigns são melhores para mensagens únicas e direcionadas, enquanto Canvas são melhores para jornadas de usuário com várias etapas. Depois de selecionar onde criar sua mensagem, siga estas etapas para criar uma mensagem no app com arrastar e soltar.

Pré-requisitos

Requisitos de SDK

Pré-requisitos adicionais

• Para o Web SDK, a opção de inicialização allowUserSuppliedJavascript deve estar definida como true. A opção enableHtmlInAppMessages também permite que essas mensagens funcionem, mas está obsoleta e deve ser substituída por allowUserSuppliedJavascript.
• Se você usa o Google Tag Manager, precisa ativar “Allow HTML In-App Messages” na configuração do GTM.

Etapa 1: Crie uma mensagem no app

Crie uma nova mensagem no app ou etapa do Canvas e selecione Editor de arrastar e soltar como sua experiência de edição.

Etapa 2: Selecione seu modelo

Depois de selecionar o editor de arrastar e soltar como sua experiência de edição, você pode escolher:

• Começar com um modelo modal em branco
• Usar um modelo de mensagem no app de arrastar e soltar da Braze
• Selecionar um modelo de mensagem no app de arrastar e soltar salvo

Selecione Criar mensagem para começar a projetar sua mensagem no app no editor de arrastar e soltar.

Você também pode acessar todos os modelos na seção Modelos do dashboard.

Etapa 3: Adicionar páginas adicionais (opcional)

Adicionar páginas à sua mensagem no app permite guiar os usuários por um fluxo sequencial, como um fluxo de integração ou jornada de boas-vindas. Você pode gerenciar páginas na seção Pages da guia Build.

• adicionando páginas
• excluindo ou renomeando páginas

As mensagens no app começam com uma página por padrão. Para adicionar uma nova página:

1. Selecione + Add page.
2. Selecione na lista de modelos personalizados ou fornecidos pela Braze.
3. Dê um nome significativo à página. Isso ajudará quando você conectar as páginas entre si.

Dica

Você pode adicionar até 10 páginas por mensagem no app.

Para duplicar uma página existente:

1. Passe o mouse sobre a página na lista e selecione Mais opções.
2. Selecione Duplicate.
3. Dê um nome significativo à página. Isso ajudará quando você conectar as páginas entre si.

Para excluir ou renomear uma página:

1. Passe o mouse sobre a página na lista e selecione Mais opções.
2. Selecione Rename ou Delete.

Etapa 3a: Conectar páginas entre si

Mensagens no app com várias páginas são sequenciais, o que significa que os usuários interagem com a mensagem tocando ou clicando para avançar para a próxima página no fluxo.

Para conectar páginas entre si:

1. Selecione sua página inicial.
2. Selecione um elemento de botão ou imagem no canvas.
3. Defina On-click behavior como Go to page.
4. Selecione a página para a qual deseja vincular a partir da página inicial.
5. Continue até que todas as páginas estejam vinculadas.

Se uma página não estiver vinculada a nenhuma outra página, a mensagem não poderá ser lançada.

Nota

Os usuários podem selecionar o botão X de fechar para sair da mensagem a qualquer momento. Esse botão não pode ser removido.

Etapa 4: Crie e projete sua mensagem no app

É aqui que sua mensagem desfila na passarela, vestida com o estilo característico da sua marca. Com uma combinação de blocos do editor e configurações de estilo, você pode personalizar e projetar sua mensagem no app.

• Para ver uma lista dos blocos do editor disponíveis e suas propriedades, consulte Blocos do editor.
• Para obter ajuda na personalização da aparência da sua mensagem, confira Configurações de estilo.
• Para conhecer as práticas recomendadas na criação de mensagens da direita para a esquerda, consulte Criação de mensagens da direita para a esquerda.

Etapa 5: Teste sua mensagem no app

A seção Prévia e Teste permite que você tenha uma prévia das suas mensagens no app em diferentes dispositivos e envie uma mensagem de teste para o seu dispositivo. Aqui, você pode garantir que os detalhes estejam alinhados em todas as suas plataformas para sua campanha de mensagem no app de arrastar e soltar.

É importante sempre testar suas mensagens no app antes de enviar suas campanhas. Assim, você consegue visualizar como a mensagem final vai aparecer do ponto de vista do usuário.

Prévia da mensagem como usuário

Aviso

Para enviar um teste para Grupos de Teste de Conteúdo ou para usuários individuais, o push precisa estar ativado nos seus dispositivos de teste antes do envio.

Você pode ter uma prévia das mensagens na guia Prévia e Teste como se fosse um usuário. Você pode selecionar um usuário específico, um usuário aleatório ou criar um usuário personalizado:

• Usuário aleatório: A Braze seleciona aleatoriamente um usuário do banco de dados e exibe a prévia da mensagem no app com base nos atributos ou nas informações de eventos desse usuário.
• Selecionar usuário: Você pode selecionar um usuário específico com base no endereço de e-mail ou no external_id. A prévia da mensagem no app será exibida com base nos atributos e nas informações de eventos desse usuário.
• Usuário personalizado: Você pode personalizar um usuário. A Braze oferece campos para todos os atributos e eventos disponíveis. Insira as informações que você quer ver na prévia.

Checklist de teste

Considere as seguintes perguntas ao testar sua mensagem no app:

• Você testou a mensagem em diferentes dispositivos?
• As imagens e mídias aparecem e funcionam como esperado?
• O Liquid funciona como esperado? Você definiu um valor de atributo padrão para o caso de o Liquid não retornar nenhuma informação?
• Seu texto está claro, conciso e correto?
• Seus botões direcionam o usuário para onde ele deve ir?

Perguntas frequentes

Por que os cliques no corpo não aparecem na minha página de análise de dados?

Os cliques no corpo não são coletados automaticamente para mensagens no app criadas com o editor de arrastar e soltar. Para saber mais, consulte os changelogs do SDK para iOS e Android.

Posso segmentar com base em cliques em botões?

Sim, você pode segmentar com base em cliques em até dois botões da sua mensagem. Para isso, defina o Identificador para relatórios dos seus botões como “0” e “1”. Esses valores correspondem, respectivamente, aos filtros de segmentação “Clicou no botão 1 da mensagem no app” e “Clicou no botão 2 da mensagem no app”.

Posso personalizar minha mensagem no app usando HTML ou JavaScript personalizado, ou transferir mensagens HTML existentes para o editor?

Não é possível transferir mensagens HTML existentes diretamente para o editor, mas você pode inserir HTML, CSS e JavaScript brutos em um bloco de Código personalizado. Com os blocos de Código personalizado, você pode incorporar vídeos de terceiros e Liquid avançado, como Connected Content ou instruções condicionais. Para ver os métodos JavaScript brazeBridge e exemplos de rastreamento de cliques, consulte Mensagens no app em HTML personalizado.

Por que a visualização do criador no editor de arrastar e soltar pode parecer diferente da mensagem final?

O editor de arrastar e soltar renderiza sua mensagem dentro de um criador e aplica estilos e padrões exclusivos da prévia para que você possa montar e revisar o layout. Esses tratamentos ajudam você a ver a estrutura e o conteúdo de espaço reservado durante a edição. Eles não são incluídos na mensagem que seus usuários recebem.

Exemplos comuns de comportamento exclusivo do editor:

• O editor envolve os blocos de Código personalizado em um contêiner bz-html-code-block com um min-height padrão de 40px, para que blocos vazios ou curtos continuem visíveis durante a edição
• Imagens em branco ou que contêm Liquid exibem um espaço reservado no editor
• Grupos de caixas de seleção e botões de opção pré-selecionam a primeira opção para que você possa ter uma prévia do estado ativo

Se algo parecer diferente apenas no editor, geralmente é um comportamento da prévia. Ao solucionar problemas na mensagem entregue, revise os estilos e a marcação nos blocos da sua mensagem, e não a moldura exclusiva do editor ou os padrões da prévia.

Como posso criar uma mensagem no app do tipo slideup?

Atualmente, o editor é limitado apenas a mensagens modais e em tela cheia. Você pode alternar entre os tipos de exibição na seção Contêiner da mensagem do painel Estilos da mensagem.

Posso salvar minha mensagem no app como modelo depois de criá-la dentro da minha Campaign ou do meu Canvas?

Sim. Para qualquer mensagem no app que você queira reutilizar em uma futura Campaign ou etapa do Canvas, é possível salvá-la como modelo personalizado usando o botão Salvar como modelo, disponível depois que você sai do editor. Antes de salvá-la como modelo, você precisa primeiro lançar a Campaign OU salvá-la como rascunho.

Você também pode criar e salvar modelos de mensagem no app acessando Conteúdo > Mensagem no app.

Por que minha sintaxe Liquid aparece como texto simples na minha mensagem no app paginada?

Se a sintaxe Liquid aparecer como texto simples ao testar uma mensagem no app paginada (em vez do conteúdo personalizado), pode haver um erro de sintaxe Liquid em uma das páginas. Um erro de sintaxe em uma página afeta a renderização do Liquid em todas as páginas da mensagem, porque as páginas não são independentes.

Para solucionar o problema:

1. Verifique todas as páginas da sua mensagem em busca de erros de sintaxe Liquid. Uma prévia com problema em uma página não significa que o erro está nessa página. Como as páginas não são independentes, o erro de sintaxe pode estar em qualquer lugar da mensagem.
2. Confirme se todas as Liquid tags estão fechadas e formatadas corretamente.