Eine Kaufbenachrichtigung sollte aussehen, als käme sie von deiner Website, nicht so, als hätte ein Drittanbieter eine Ecke des Bildschirms gemietet. Provedly liefert fünf Themes, und die richtige Wahl hängt vor allem an zwei Fragen: Ist deine Seite hell oder dunkel, und ist deine Marke leise oder laut? Dieser Beitrag geht jedes Theme durch, die Einstellungen drumherum und die Fehler, durch die ein Toast angeschraubt wirkt.
Die fünf Themes
| Theme | Charakter | Passt zu |
|---|---|---|
| Clean white | Helle Karte, neutraler Text | Den meisten hellen Websites, SaaS, dokumentationslastigen Seiten |
| Deep ocean | Dunkelblaue Fläche | Dunklen oder marineblau geprägten Marken, Fintech, Entwicklertools |
| Midnight | Fast schwarze Fläche | Websites im Dark Mode, Fotografie, Premiumprodukten |
| Electric violet | Gesättigter Akzent | Marken mit kräftigem Lila oder Verlauf als Identität |
| Sunset blaze | Warmer, energiegeladener Akzent | Konsumentenmarken, Launches, Food und Events |
Weil das Widget in einem Shadow DOM rendert, bekommst du genau das Theme, das du auswählst. Das CSS deiner Website kann es nicht umgestalten, und seine Styles können nicht nach außen dringen. Das beseitigt das Problem „auf der Live-Website sah es anders aus“, heißt aber auch, dass die Wahl des Themes die ganze Designentscheidung ist; triff sie bewusst.
Passe es an die Fläche an, nicht ans Logo
Der häufigste Fehler ist, den Toast an die Logofarbe anzupassen. Ein violettes Logo auf einer weißen Seite heißt nicht, dass Electric violet richtig ist; der Toast liegt auf der Seite, nicht auf dem Logo. Passe ihn an die Fläche an, die er überlagert. Wenn deine Seiten weiß oder hellgrau sind, wirkt Clean white nativ. Wenn deine Seiten dunkel sind, gilt das für Midnight oder Deep ocean.
Nutze die Akzent-Themes, wenn die Marke selbst überall kontrastreich ist. Ein Toast in Sonnenuntergangsfarben auf einer zurückhaltenden weißen Seite zieht den Blick jedes Mal in die Ecke, wenn er einfliegt, und das nutzt sich bis zur dritten Benachrichtigung ab. Denk daran, dass Besucher standardmäßig bis zu 5 pro Session sehen.
Die Einstellungen rund um das Theme
Position
Unten links ist die Konvention, die die meisten Besucher als „Aktivität, keine Warnung“ zu lesen gelernt haben. Unten rechts konkurriert mit Chat-Widgets und Cookie-Bannern. Positionen oben konkurrieren mit deiner Navigation und mit CTA-Leisten. Prüfe die Position gegen alles, was sonst auf deiner Seite fixiert ist, besonders mobil, wo sich ein Toast und ein sticky In-den-Warenkorb-Button überlappen können. Mit Geräte-Targeting kannst du Toasts nur auf dem Desktop laufen lassen, wenn es mobil eng ist.
Avatar-Stil
Ein Avatar gibt dem Auge einen Ankerpunkt. Provedly unterstützt einen Bild-Avatar, der aus dem Feld avatar_url von API- und CSV-Datensätzen gespeist wird; Webhook-Datensätze aus Stripe und Shopify enthalten keine Fotos, daher nutzen die meisten Widgets einen Stil ohne Foto. Nimm keine Stockfotos von Gesichtern, um die Lücke zu füllen. Eine Benachrichtigung über „Sarah M. aus Austin“ mit dem Porträt eines Models ist ein erfundenes Detail über einem echten Kauf, und genau so etwas soll die Verifizierungsseite verhindern.
Formate für Name und Ort
Das Theme bestimmt das Aussehen, die Formate den Ton. Die Standards sind Vorname plus Initiale („Sarah M.“) und Stadt plus Land („Austin, US“). Volle Namen wirken aufdringlich und sind meist ein Datenschutzfehler; nur Initialen („S. M.“) wirken ausweichend. Stadt und Land sind konkret genug, um glaubwürdig zu sein, ohne auf eine Straße zu zeigen. Bei einem lokalen Unternehmen, bei dem ein Ortsname eine kleine Gemeinschaft identifiziert, ist „country“ oder „none“ rücksichtsvoller. Siehe Formate für Name und Ort: Datenschutz als Standard.
Timing gehört zum Design
Die Wahl des Themes ist visuell, aber den Rhythmus nehmen die Leute tatsächlich wahr. Die Standards sind 3 Sekunden Startverzögerung, 6 Sekunden auf dem Bildschirm, 30 Sekunden Abstand und 5 pro Session. Auf einer langen Landingpage wirkt ein größerer Abstand ruhiger. In einem Produktraster, das Leute schnell überfliegen, passt der Standard. Was auch immer du einstellst, halte es auf allen Seiten gleich; ein Toast, der auf einer Seite sofort und auf einer anderen nach zehn Sekunden erscheint, wirkt zufällig.
Das Badge
Im Free-Plan zeigt der Toast ein kleines „by Provedly“-Badge. Ab Starter ist das Badge optional. So oder so verlinkt jeder Toast auf die öffentliche Verifizierungsseite, die Quellen, Zahlen und den letzten verifizierten Kauf auflistet. Auch wenn du das Badge ausblendest, lass den Link erreichbar; er unterscheidet eine überprüfbare Benachrichtigung von Dekoration.
Ein schneller Entscheidungsweg
- Helle Seite, leise Marke: Clean white.
- Dunkle Seite: Midnight für neutrales Schwarz, Deep ocean für eine Tendenz zu Blau.
- Marke, die auf einem lauten Akzent beruht, der überall verwendet wird: Electric violet oder Sunset blaze.
- Unsicher: Clean white, unten links, Standards. Danach eine Sache nach der anderen ändern.
Sieh dir jedes Theme auf einer echten Seite an statt nur im Dashboard. Öffne deine Website mit installiertem Widget, wechsle das Theme und lade neu. Der Unterschied zwischen „das gehört zu uns“ und „das ist Werbung“ ist nach zwei Toasts offensichtlich.
Häufige Fragen
Kann ich Farben über die fünf Themes hinaus anpassen?
Themes sind feste Sets, so gewählt, dass der Toast auf jeder Website lesbar und einheitlich bleibt. Leisten bieten mehr Kontrolle über Farben, einschließlich Hintergrund- und Textfarbe des Buttons, weil sie größere Flächen sind.
Wirkt sich das Theme auf den Live-Besucherzähler aus?
Der Live-Besucherzähler nutzt dasselbe Theme, damit beide Elemente als ein System wirken. Außerdem blendet er sich unter deinem Minimum aus, statt eine kleine, wenig überzeugende Zahl zu zeigen.
Sehen Themes auf Shopify anders aus?
Nein. Das App-Embed für Shopify nutzt denselben Renderer und dieselbe Isolierung per Shadow DOM, ein Theme sieht auf Shopify also genauso aus wie auf einer statischen Website.
Probier alle fünf in wenigen Minuten auf deiner eigenen Seite aus: kostenlos starten.