Skip to content

Criar um modelo de mensagem no app

Use Content > In-App Message para criar uma biblioteca reutilizável de layouts de mensagens no app e no navegador. Você pode salvar designs do editor de arrastar e soltar ou criar ativos de Color Profile e CSS Template para o editor tradicional.

Etapa 1: Abrir modelos de mensagens no app

No dashboard da Braze, acesse Content > In-App Message.

Etapa 2: Escolher como criar um modelo

A forma de adicionar um modelo depende do seu objetivo:

Objetivo O que fazer
Salvar um layout de arrastar e soltar para reutilização No criador de mensagens no app de arrastar e soltar, selecione Save as template depois de sair do editor (primeiro você precisa lançar a Campaign OU salvá-la como rascunho). O modelo aparecerá em Templates > In-App Message Templates para sua próxima mensagem.
Criar um perfil de cores ou modelo CSS (editor tradicional) Na página In-App Message Templates, selecione + Create e escolha Color Profile ou CSS Template. Para mais informações, consulte Perfis de cores e modelos CSS.
Personalizar um modelo da Braze Crie uma mensagem no app no editor de arrastar e soltar, escolha um modelo da Braze, faça suas personalizações e selecione Save as template. Para descrições de cada modelo da Braze, consulte Modelos de mensagens no app.

Etapa 3: Gerenciar seus modelos

Em Content > In-App Message, filtre, pesquise ou abra um modelo para editar. Você pode duplicar e arquivar modelos como outros tipos de modelo. Para uma visão geral dos fluxos de trabalho de modelos e mídia, consulte Modelos.

Para acessar modelos de mensagens no app, você precisa de permissões de usuário para visualizar ou editar modelos de mensagens no app.

Criar perfis de cores e modelos CSS

Você pode editar modelos existentes ou selecionar + Create e escolher Color Profile ou CSS Template para criar novos modelos para suas mensagens no app.

Perfil de cores

Você pode personalizar o esquema de cores do seu modelo de mensagem inserindo um código de cor HEX ou selecionando a caixa colorida e escolhendo uma cor com o seletor de cores. Se quiser que esse perfil seja aplicado por padrão ao criar novas mensagens no app no editor tradicional, selecione Use as default profile.

Selecione Save Color Profile quando terminar.

O editor de modelo de perfil de cores de mensagens no app.

Modelo CSS

Você pode personalizar um modelo CSS completo para sua mensagem no app modal web.

Nomeie e adicione tags ao seu modelo CSS e escolha se ele será seu modelo padrão. Você pode escrever seu próprio CSS no espaço fornecido. Esse espaço já vem pré-preenchido com o CSS mostrado na pré-visualização da sua mensagem, e você pode ajustá-lo conforme suas necessidades.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

.ab-message-header, .ab-message-text {
  color: #333333;
  text-align: center;
}

.ab-message-header {
  font-size: 20px;
  font-weight: bold;
}

.ab-message-text {
  font-size: 14px;
  font-weight: normal;
}

.ab-close-button svg {
  fill: #9b9b9b;
}

.ab-message-button {
  border: 1px solid #1b78cf;
  font-size: 14px;
  font-weight: bold;
}
.ab-message-button:first-of-type {
  background-color: white;
  color: #1b78cf;
}
.ab-message-button:last-of-type, .ab-message-button:first-of-type:last-of-type {
  background-color: #1b78cf;
  color: white;
}

.ab-background {
  background-color: white;
}

.ab-icon {
  background-color: #0073d5;
  color: white;
}

.ab-page-blocker {
  background-color: rgba(51, 51, 51, .75);
}

Você pode editar tudo, desde a cor de fundo até o tamanho e peso da fonte, e muito mais.

Modal com CSS (somente web)

Se você optar por usar uma mensagem Modal Web somente para web com CSS, poderá aplicar seu próprio modelo ou escrever seu próprio CSS no espaço fornecido. Esse espaço já vem pré-preenchido com o CSS mostrado na pré-visualização da sua mensagem, mas você pode ajustá-lo conforme suas necessidades.

Se quiser aplicar seu próprio modelo, selecione Apply Template e escolha na galeria de modelos de mensagens no app. Se você não tiver nenhuma opção, pode adicionar um modelo CSS usando o construtor de modelos CSS em Templates > In-App Message Templates.
New Stuff!