Criar um modelo de mensagem no app

Use Modelos > Modelos de mensagens no app 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 Perfil de cores e Modelo CSS para o editor tradicional.

Etapa 1: Abrir Modelos de mensagens no app

No dashboard da Braze, acesse Modelos > Modelos de mensagens no app.

Etapa 2: Escolher como criar um modelo

A forma de adicionar um modelo depende do seu objetivo:

Etapa 3: Gerenciar seus modelos

Em Modelos > Modelos de mensagens no app, 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.

Você precisa de permissão para acessar modelos. Por exemplo, conceda “Access Campaigns, Canvases, Cards, Content Blocks, Feature Flags, Segments, Media Library, Locations, Promotion Codes, and Preference Centers” ou a permissão granular equivalente para visualizar ou editar modelos de mensagens no app. Para mais informações, consulte Permissões de usuário.

Criar perfis de cores e modelos CSS

Você pode editar modelos existentes ou selecionar + Criar e escolher Perfil de cores ou Modelo CSS 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 Usar como perfil padrão.

Selecione Salvar perfil de cores quando terminar.

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 Aplicar modelo 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 Modelos > Modelos de mensagens no app.