Verwenden Sie diesen Artikel, um eine Banner-Nachricht zu erstellen, zu konfigurieren und zu starten. Sie lernen, wie Sie den Bannerinhalt verfassen, eine Schaltfläche zum Schließen wählen, einen Call-to-Action hinzufügen, eine Zielgruppe ansprechen, ein Ziel festlegen, die Zustellung planen und eine Vorschau vor der Veröffentlichung anzeigen. Banner sind in den Essential-, Advanced- und Expert-Plänen verfügbar.
Erstellen Sie ein Banner
Gehen Sie zuerst im Hauptmenü zu Outbound und klicken Sie oben rechts auf + Neue Nachricht.
Wählen Sie dann Banner als Inhaltstyp aus.
Sie können auch mit einer vorgefertigten Vorlage beginnen, indem Sie diesen Inhaltstyp in der linken Seitenleiste auswählen.
Diese Anleitung beginnt mit einem leeren Banner.
Hinweis: Banner werden standardmäßig im Web Messenger angezeigt. Um Banner in nativen mobilen Apps, Kiosken oder anderen Nicht-Web-Oberflächen anzuzeigen, auf denen der Messenger nicht vorhanden ist, verwenden Sie die Contacts Banners API (verfügbar unter Intercom-Version: Preview).
Geben Sie Ihrem Banner zuerst einen Titel.
Verfassen Sie dann den Inhalt für Ihr Banner. Sie können fett, kursiv, Links und Emojis 😉 verwenden.
Um Emojis einzufügen, können Sie:
Auf macOS – Rechtsklick irgendwo im Eingabefeld und Emojis & Symbole auswählen.
Auf Windows – drücken Sie die Tasten
Windows+.
Smart Links sind Deep Links zu spezifischen Intercom-Inhalten (wie Artikeln oder Produkttouren). Sie können nur eingefügt werden, indem Sie im Banner-Editor Text markieren und den Link-Einfüger verwenden, um den Zielinhalt auszuwählen. Der Zielinhalt muss live sein – pausierte oder unveröffentlichte Inhalte sind nicht verlinkbar.
Hinweis:
Smart Links in Bannern sind auf Mobilgeräten nicht verfügbar.
Es ist ratsam, Ihre Nachricht knapp zu halten. Für längere Nachrichten versuchen Sie, eine Chat- oder Post-Nachricht zu senden.
Banner unterstützen keine Zeilenumbrüche. Die Eingabetaste erzeugt im Banner-Texteditor keine neue Zeile – dies ist eine bekannte Einschränkung. Die Formatierung ist auf fett, kursiv, Links und Emojis beschränkt. Wenn Sie mehrzeiligen Inhalt benötigen, verwenden Sie stattdessen eine Chat- oder Post-Nachricht.
Wo möglich, sollten Sie Ihre Banner-Nachricht mit Datenattributen wie Kundenname oder Firmeninformationen personalisieren:
Wählen Sie als Nächstes aus, von wem das Banner stammen soll und ob Sie deren Avatar einbeziehen möchten.
Soll das Banner schließbar sein?
Entscheiden Sie als Nächstes, ob Sie eine Schließen-Schaltfläche auf Ihrem Banner anzeigen möchten:
Eine Schließen-Schaltfläche ermöglicht es Ihren Kunden, die Nachricht sofort nach dem Lesen auszublenden:
Das ist perfekt für freundliche Erinnerungen, Aktionen oder andere nicht dringende Nachrichten.
Wenn Sie die Schließen-Schaltfläche ausblenden, bleibt das Banner für Ihre Kunden bestehen, bis sie nicht mehr den Zielgruppenregeln entsprechen oder die im Abschnitt Aktion wählen konfigurierte Aktion abgeschlossen haben.
Wichtig:
Wenn Sie die Schließen-Option bei einem bestehenden Banner ausblenden, sehen alle, die es geschlossen haben, es erneut.
Wenn ein Kunde zur Zielgruppe mehrerer Banner gehört und das erste nicht schließbar ist, erhält er keine weiteren Banner. — Um andere Banner zuerst zu senden, pausieren Sie vorübergehend das nicht schließbare Banner, setzen es dann wieder live und es wird nach anderen aktiven Bannern gesendet.
Banner in einer Serie werden nur einmal angezeigt, unabhängig davon, ob sie eine Schließen-Schaltfläche haben oder nicht. Danach setzt der Nutzer seinen Weg in der Serie fort.
Persistente (nicht schließbare) Banner sind perfekt für dringendere/wichtigere Mitteilungen an Ihre Kunden. Zum Beispiel:
Zeigen Sie ein Banner, bis ein Nutzer eine unbezahlte Rechnung beglichen hat.
Erinnern Sie einen Nutzer daran, dass er mit einem Test-Arbeitsbereich/-Daten arbeitet.
Zeigen Sie ein Banner bezüglich Plattformwartung, solange das Problem besteht.
Wählen Sie einen Call-to-Action
Jetzt ist es Zeit, die Aktion auszuwählen, die am besten zu Ihrem Ziel für die Nachricht passt.
Wenn Sie eine Nachricht senden, um Ihre Kunden einfach zu informieren oder zu warnen und keine Aktion erforderlich ist, lassen Sie dies auf ‚Keine‘. Andernfalls kann das Banner:
Eine URL öffnen.
Eine URL über eine Schaltfläche öffnen.
Nach Emoji-Reaktionen fragen.
Sammeln Sie die E-Mail-Adressen der Besucher.
Starten Sie eine Product Tour.
Je nach gewählter Aktion gibt es verschiedene Optionen zur Konfiguration.
Öffnen Sie eine URL
Diese Aktion fügt am Ende Ihrer Banner-Nachricht einen Call-to-Action (CTA)-Link hinzu. Sie können definieren:
Den Linktext.
Die zu öffnende URL.
Ob der Link in einem neuen Tab geöffnet werden soll oder nicht.
Ob das Banner nach dem Klicken des Links ausgeblendet werden soll oder nicht.
Fügen Sie user oder company attributes für eine dynamische URL hinzu. Klicken Sie einfach auf das {...} -Symbol, wenn Sie über das URL-Feld fahren:
Öffnen Sie eine URL über eine Schaltfläche
Diese Aktion fügt am Ende Ihrer Banner-Nachricht eine Call-to-Action (CTA)-Schaltfläche hinzu. Sie können definieren:
Den Linktext.
Die zu öffnende URL.
Ob der Link in einem neuen Tab geöffnet werden soll oder nicht.
Ob das Banner nach dem Klicken des Links ausgeblendet werden soll oder nicht.
Sie können auch eine Farbe für Ihre Schaltfläche auswählen:
Fragen Sie nach Reaktionen
Diese Aktion ermöglicht es Ihnen, schnelles Feedback von Kunden in Form von Emojis zu sammeln. Wählen Sie einfach aus, welche Emojis sie auswählen können und ob das Banner nach der Auswahl ausgeblendet werden soll oder nicht.
Hinweis: Ein Workflow kann nicht ausschließlich durch eine ausgehende Banner-Reaktion gestartet werden. Stattdessen kann eine Reaktion verwendet werden, um eine Zielgruppe im Auslöser eines Workflows oder als Bedingung innerhalb eines Zweigs zu definieren.
Sammeln Sie Besucher-E-Mails
Diese Aktion fügt am Ende Ihrer Nachricht ein Feld hinzu, um einfach E-Mail-Adressen von Besuchern Ihrer Website zu sammeln.
Hinweis: Wenn ein Banner einen E-Mail-Sammler enthält, wird automatisch eine versteckte Regel angewendet, sodass das Banner nur Besuchern oder leads angezeigt wird, deren E-Mail-Adresse unbekannt ist. Wenn die E-Mail-Adresse eines Kunden bereits bei Intercom bekannt ist, wird das Banner nicht angezeigt.
Starten Sie eine Product Tour
Diese Aktion ermöglicht es Ihren users, direkt in die Product Tour Ihrer Wahl zu springen, die im gleichen Tab oder in einem neuen geöffnet wird.
Hinweis: Sie können nur Product Tours mit einer aktivierten shareable URL auswählen.
Gestalten Sie Ihr Banner
Wählen Sie im Abschnitt Style des Banner-Editors eine Hintergrundfarbe für Ihr Banner und ob es oben oder unten auf Ihrer Seite erscheinen soll. Sie können auch zwischen zwei Layout-Stilen wählen: inline oder floating.
Die zwei Layout-Optionen für die Banner-Platzierung werden unten beschrieben.
Inline
Ein inline Banner ist vollflächig und sitzt zwischen Ihrem Seiteninhalt und dem oberen Fensterbereich. Beim Scrollen bewegt sich der Seiteninhalt hinter dem Banner.
Floating
Ein floating Banner ist zentriert auf Ihrer Seite und sitzt über dem Inhalt, wobei es alles dahinter verdeckt. Es bewegt sich nicht beim Scrollen.
Textfarbe
Wenn Sie eine Hintergrundfarbe für Ihr Banner wählen, wird die Textfarbe automatisch für Kontrast und Lesbarkeit angepasst:
Hinweis: Es ist nicht möglich, Banner durch benutzerdefiniertes HTML oder CSS zu erstellen. Wenn Ihr Banner feste Elemente auf Ihrer Seite überlagert (z. B. eine Navigationsleiste), sehen Sie den Abschnitt Inline banner overlaying navbar unten für eine CSS-Lösung.
Tipp: Wenn Sie verschiedene Stile Ihrer Banner-Nachricht testen möchten, probieren Sie einen A/B-Test. Erfahren Sie mehr in diesem Artikel.
Legen Sie eine Zielgruppe für Ihr Banner fest
Definieren Sie im Schritt Choose your audience die Filter, die bestimmen, welche Kunden Ihr Banner sehen. Die Zielgruppenregeln werden dynamisch ausgewertet, sodass Kunden, die die Regeln nicht mehr erfüllen, das Banner nicht mehr sehen.
Zum Beispiel, wenn Sie einen Rabatt für Ihren Pro-Plan ankündigen, könnten Sie alle Kunden ansprechen, die derzeit Ihren Free-Plan nutzen:
Tipp: Wenn Sie eine URL anvisieren, ist es eine gute Idee, diese direkt aus Ihrer App oder Website zu kopieren und einzufügen, da so alle im Adressfeld des Browsers versteckten Zeichen, wie abschließende Schrägstriche, erfasst werden.
Wie die Priorität der Banneranzeige funktioniert
Wenn ein Kunde die Audience-Regeln für mehrere Banner erfüllt, wird ihm das zuerst live geschaltete Banner angezeigt. Sobald der Kunde dieses Banner wegklickt, wird ihm das nächste Banner in der Reihenfolge der Live-Schaltung angezeigt.
Setzen Sie ein Ziel für Ihr Banner
Die Definition eines Ziels ermöglicht es Intercom zu messen, ob Ihr Banner die beabsichtigte Aktion auslöst. Ein Ziel ist eine Bedingung, die bei Erfüllung als Conversion für dieses Banner gezählt wird.
Zum Beispiel, wenn Sie Kunden ermutigen, ihren Plan zu upgraden, ist ein geeignetes Ziel Plan is Pro. Intercom verfolgt, wie viele Kunden, die das Banner gesehen haben, diese Bedingung anschließend erfüllen:
Um ein Ziel zu setzen, gehen Sie zum Ziel-Schritt im Banner-Editor und definieren Sie die Bedingung, die Sie verfolgen möchten. Im folgenden Beispiel ist das Ziel auf Plan is Pro gesetzt:
Sie können auch die Wirksamkeit Ihres Banners insgesamt mit einem Kontrollgruppentest prüfen. Erfahren Sie mehr in diesem Artikel.
Sie können Ihr Banner auch so planen, dass es nur in einem bestimmten Datumsbereich oder zu bestimmten Tageszeiten angezeigt wird. Verwenden Sie den Planen-Schritt, um ein Startdatum, Enddatum oder beides festzulegen. Außerhalb des geplanten Zeitfensters wird das Banner selbst Kunden, die die Audience-Regeln erfüllen, nicht angezeigt.
Vorschau und Live-Schaltung Ihres Banners
Nachdem Sie die Konfiguration Ihres Banners abgeschlossen haben, klicken Sie auf Speichern und Schließen. Eine Vorschau-Schaltfläche erscheint oben rechts im Banner-Editor. Verwenden Sie diese, um zu sehen, wie das Banner auf Ihrer Website aussehen wird, bevor es live geht.
Wenn Sie mit der Vorschau zufrieden sind, klicken Sie auf Live schalten. Das Banner wird sofort Kunden angezeigt, die Ihre Audience-Regeln erfüllen. Sie können das Banner jederzeit von der Outbound-Seite pausieren oder bearbeiten.
Banner auf Nicht-Web-Oberflächen anzeigen
Standardmäßig werden Banner über den Web Messenger angezeigt. Wenn Sie eine native mobile App, einen Kiosk oder eine andere eingebettete Erfahrung erstellen, bei der der Messenger nicht vorhanden ist, ermöglicht Ihnen die Contacts Banners API, Banner serverseitig abzurufen und anzuzeigen sowie Wegklicks zu erfassen, sodass Ihre Kunden die richtige Nachricht unabhängig von der Oberfläche sehen.
Wie es funktioniert
Die API stellt zwei Endpunkte bereit:
GET /contacts/{id}/banners— gibt die Banner zurück, die ein Kontakt derzeit erfüllt, jeweils mit Inhalt und einer view_id.POST /contacts/{id}/banners/{view_id}/dismiss— zeichnet einen Wegklick für eine Banneransicht auf.
Die Contacts Banners API ist unter Intercom-Version: Preview verfügbar. Siehe die API-Referenz für vollständige Endpunktdetails.
Wichtige Verhaltensweisen
Audience-Matching wird serverseitig durchgeführt: Das bedeutet, die API bewertet Kontaktattribute, Firmenattribute und andere serverseitige Regeln. Banner, die auf clientseitigen Targeting-Regeln basieren (wie Seiten-URL oder Verweildauer), werden von diesem Endpunkt nicht zurückgegeben, da diese Regeln nur im Browser ausgewertet werden können.
Impressionen werden beim Aufruf des Listen-Endpunkts erfasst: Der Aufruf von
GET /contacts/{id}/bannerszählt jedes zurückgegebene Banner als angezeigt. Rufen Sie diesen Endpunkt nur zum Zeitpunkt der beabsichtigten Banneranzeige auf – nicht spekulativ oder bei jedem Seitenaufruf.Wegklicks sind geräteübergreifend: Wenn ein Kunde ein Banner über
POST /contacts/{id}/banners/{view_id}/dismisswegklickt, wird dieser Wegklick mit dem Web Messenger geteilt. Wenn derselbe Kunde später Ihre Web-App besucht, wird ihm kein Banner angezeigt, das er bereits auf dem Mobilgerät weggeklickt hat – und umgekehrt.
Wann Sie diese API verwenden sollten
Die Contacts Banners API ist konzipiert für:
Native mobile Apps (iOS und Android), bei denen das Messenger SDK nicht verwendet wird.
Kiosk- oder In-Store-Anzeigenoberflächen.
Eingebettete Tools oder Portale, bei denen der Web Messenger nicht installiert werden kann.
Wenn Sie Banner in einer Standard-Web-App anzeigen, in der der Messenger bereits installiert ist, benötigen Sie diese API nicht – Banner werden automatisch für Kunden angezeigt, die die Audience-Regeln erfüllen.
So verwenden Sie die Contacts Banner API
Um die Contacts Banners API zu verwenden:
Erstellen und konfigurieren Sie Ihr Banner in Outbound.
Legen Sie Ihre Audience mit serverseitigen Attributen (Kontakt- oder Firmendaten) fest. Verlassen Sie sich nicht auf Seiten-URL- oder Verweildauer-Regeln, wenn das Banner über die API angezeigt werden soll.
Schalten Sie das Banner live.
Rufen Sie GET /contacts/{id}/banners zum Zeitpunkt der Anzeige auf, um passende Banner für einen Kontakt abzurufen.
Rendern Sie den Bannerinhalt in Ihrer App oder Schnittstelle.
Wenn ein Kunde das Banner wegklickt, rufen Sie POST /contacts/{id}/banners/{view_id}/dismiss auf, um den Wegklick zu erfassen.
Tipp: Für vollständige Endpunktreferenzen und Anfrage-/Antwortschemas siehe die Dokumentation der Contacts Banners API.
Inline-Banner überlagert Navbar
Wenn Sie feste Elemente auf Ihrer Website haben, wird erwartet, dass das Inline-Banner die Navbar überlagert. Dies lässt sich durch Änderungen am HTML/CSS Ihrer Website beheben.
Die Inline-Banner fügen dem Body der Seite position:relative und margin-top: 48px hinzu (das ist die Höhe des Banners).
Wenn Ihre Navbar auf Ihrer Website position:fixed oder position:sticky verwendet, bleibt Ihre Navbar immer oben. Das bedeutet, dass ein live geschaltetes Inline-Banner die Navbar nicht wie üblich nach unten „schieben“ kann, was dazu führt, dass es die Navbar überlagert.
Die folgenden CSS-Änderungen sorgen dafür, dass das Inline-Banner die Navbar nicht überlagert:
Verwenden Sie
position:absolute, um die Navigationsleiste innerhalb des Bodys zu positionieren.Wenn Sie derzeit
top: 0nachposition:fixedauf Ihrer Seite haben, ersetzen Sie dies durchmargin-top: 0
Alternativ können Sie auch schwebende Banner verwenden oder das Banner unten auf der Seite positionieren.
Testen Sie Ihr Banner
Bevor Sie ein Banner an Ihre gesamte Kundenbasis senden, können Sie sein Verhalten in einer Live-Umgebung testen, indem Sie die Zielgruppe auf sich selbst oder ein Teammitglied beschränken.
Identifizieren Sie einen Testuser: Stellen Sie sicher, dass Sie ein Benutzerprofil in Ihrem Workspace haben, auf das Sie zugreifen können (z. B. Ihre eigene Mitarbeiter-E-Mail).
Legen Sie spezifische Zielgruppenregeln fest: Fügen Sie im Abschnitt Wählen Sie Ihre Zielgruppe eine Regel hinzu, um nur diesen bestimmten Benutzer anzusprechen.
Beispiel: E-Mail ist
name@company.com
Setzen Sie das Banner live: Da die Zielgruppe strikt auf Ihre E-Mail beschränkt ist, werden keine anderen Kunden dieses Banner sehen.
Überprüfen Sie das Verhalten: Melden Sie sich als dieser Testuser in Ihrem Produkt an. Bestätigen Sie, dass das Banner erscheint, korrekt aussieht und dass Schaltflächen oder Links wie erwartet funktionieren.
Aktualisieren Sie die Zielgruppe: Sobald Sie mit dem Test zufrieden sind, bearbeiten Sie die Zielgruppenregeln des Banners, um Ihr gewünschtes Kundensegment anzusprechen (z. B. „Alle users“ oder Plan ist Free), um es tatsächlich zu starten.