In-App-Nachricht-Template erstellen

Verwenden Sie Content > In-App Message, um eine wiederverwendbare Bibliothek von In-App- und In-Browser-Nachrichtenlayouts aufzubauen. Sie können Designs aus dem Drag-and-Drop-Editor speichern oder Farbprofil- und CSS-Template-Assets für den traditionellen Editor erstellen.

1. Schritt: In-App-Nachricht-Templates öffnen

Gehen Sie im Braze-Dashboard zu Content > In-App Message.

2. Schritt: Erstellungsmethode wählen

Wie Sie ein Template hinzufügen, hängt von Ihrem Ziel ab:

Hinweis

Farbprofile und CSS-Templates gelten für den traditionellen Editor. Wenn Sie den Drag-and-Drop-Editor verwenden, nutzen Sie die Stileinstellungen für die Gestaltung auf Nachrichtenebene.

3. Schritt: Templates verwalten

Unter Content > In-App Message können Sie Templates filtern, suchen oder öffnen, um sie zu bearbeiten. Sie können Templates wie andere Template-Typen duplizieren und archivieren. Einen Überblick über Template- und Medien-Workflows finden Sie unter Templates.

Um auf In-App-Nachricht-Templates zuzugreifen, benötigen Sie Nutzer:innenberechtigungen zum Anzeigen oder Bearbeiten von In-App-Nachricht-Templates.

Farbprofile und CSS-Templates erstellen

Hinweis

Die folgenden Optionen gelten für den traditionellen Editor. Wenn Sie den Drag-and-Drop-Editor verwenden, nutzen Sie stattdessen die Stileinstellungen.

Sie können vorhandene Templates bearbeiten oder + Create wählen und Color Profile oder CSS Template auswählen, um neue Templates für Ihre In-App-Nachrichten zu erstellen.

Farbprofil

Sie können das Farbschema Ihres Nachricht-Templates anpassen, indem Sie entweder einen HEX-Farbcode eingeben oder auf das farbige Feld klicken und eine Farbe mit dem Farbwähler auswählen. Wenn dieses Profil standardmäßig angewendet werden soll, wenn Sie neue In-App-Nachrichten im traditionellen Editor erstellen, wählen Sie Use as default profile.

Wählen Sie Save Color Profile, wenn Sie fertig sind.

CSS-Template

Sie können ein vollständiges CSS-Template für Ihre Web-Modal-In-App-Nachricht anpassen.

Benennen und taggen Sie Ihr CSS-Template und wählen Sie dann, ob es Ihr Standard-Template sein soll. Sie können Ihr eigenes CSS in den bereitgestellten Bereich schreiben. Dieser Bereich ist bereits mit dem CSS vorausgefüllt, das in Ihrer Nachrichtenvorschau angezeigt wird, und Sie können es an Ihre Bedürfnisse anpassen.

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

Sie können alles bearbeiten – von der Hintergrundfarbe bis hin zu Schriftgröße und -stärke und mehr.

Modal mit CSS (nur Web)

Wenn Sie eine reine Web-Nachricht vom Typ „Web Modal mit CSS“ verwenden, können Sie Ihr eigenes Template anwenden oder Ihr eigenes CSS in den bereitgestellten Bereich schreiben. Dieser Bereich ist bereits mit dem CSS vorausgefüllt, das in Ihrer Nachrichtenvorschau angezeigt wird, aber Sie können es an Ihre Bedürfnisse anpassen.

Wenn Sie Ihr eigenes Template anwenden möchten, wählen Sie Apply Template und wählen Sie aus der In-App-Nachricht-Template-Galerie. Wenn keine Optionen verfügbar sind, können Sie ein CSS-Template mit dem CSS-Template-Builder unter Templates > In-App Message Templates hinzufügen.