Skip to content

Crear una plantilla de mensaje dentro de la aplicación

Usa Contenido > Mensaje dentro de la aplicación para crear una biblioteca reutilizable de diseños de mensajes dentro de la aplicación y en el explorador. Puedes guardar diseños del editor de arrastrar y soltar o crear activos de Perfil de color y Plantilla CSS para el editor tradicional.

Paso 1: Abre las plantillas de mensajes dentro de la aplicación

En el panel de Braze, ve a Contenido > Mensaje dentro de la aplicación.

Paso 2: Elige cómo crear una plantilla

La forma de añadir una plantilla depende de tu objetivo:

Objetivo Qué hacer
Guardar un diseño de arrastrar y soltar para reutilizarlo En el creador de mensajes dentro de la aplicación de arrastrar y soltar, selecciona Save as template después de salir del editor (primero debes lanzar la Campaign O guardarla como borrador). La plantilla aparecerá en Templates > In-App Message Templates para tu próximo mensaje.
Crear un perfil de color o una plantilla CSS (editor tradicional) En la página In-App Message Templates, selecciona + Create y luego elige Color Profile o CSS Template. Para más detalles, consulta Perfiles de color y plantillas CSS.
Personalizar una plantilla de Braze Crea un mensaje dentro de la aplicación en el editor de arrastrar y soltar, elige una plantilla de Braze, realiza tus personalizaciones y selecciona Save as template. Para descripciones de cada plantilla de Braze, consulta Plantillas de mensajes dentro de la aplicación.

Paso 3: Administra tus plantillas

En Contenido > Mensaje dentro de la aplicación, filtra, busca o abre una plantilla para editarla. Puedes duplicar y archivar plantillas como cualquier otro tipo de plantilla. Para un resumen de los flujos de trabajo de plantillas y medios, consulta Plantillas.

Para acceder a las plantillas de mensajes dentro de la aplicación, necesitas permisos de usuario para ver o editar plantillas de mensajes dentro de la aplicación.

Crear perfiles de color y plantillas CSS

Puedes editar plantillas existentes o seleccionar + Create y elegir Color Profile o CSS Template para crear nuevas plantillas para tus mensajes dentro de la aplicación.

Perfil de color

Puedes personalizar la combinación de colores de tu plantilla de mensaje introduciendo un código de color HEX o seleccionando el cuadro de color y eligiendo un color con el selector de colores. Si quieres que este perfil se aplique de forma predeterminada cuando crees nuevos mensajes dentro de la aplicación en el editor tradicional, selecciona Use as default profile.

Selecciona Save Color Profile cuando hayas terminado.

El editor de plantillas de perfil de color para mensajes dentro de la aplicación.

Plantilla CSS

Puedes personalizar una plantilla CSS completa para tu mensaje dentro de la aplicación de tipo modal web.

Nombra y etiqueta tu plantilla CSS, luego elige si será tu plantilla predeterminada. Puedes escribir tu propio CSS en el espacio proporcionado. Este espacio ya está rellenado con el CSS que se muestra en la vista previa de tu mensaje, y puedes ajustarlo según tus necesidades.

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);
}

Puedes editar todo, desde el color de fondo hasta el tamaño y peso de la fuente, y más.

Modal con CSS (solo web)

Si eliges usar un mensaje de tipo modal web solo para web con CSS, puedes aplicar tu propia plantilla o escribir tu propio CSS en el espacio proporcionado. Este espacio ya está rellenado con el CSS que se muestra en la vista previa de tu mensaje, pero puedes ajustarlo según tus necesidades.

Si eliges aplicar tu propia plantilla, selecciona Apply Template y elige de la galería de plantillas de mensajes dentro de la aplicación. Si no tienes ninguna opción, puedes añadir una plantilla CSS usando el constructor de plantillas CSS en Templates > In-App Message Templates.
New Stuff!