Provedly wird auf Webflow über das Feld Footer code in den Site settings installiert, was etwa eine Minute dauert. Das Widget rendert in einem Shadow DOM, es ignoriert also deine Webflow-Klassen, und deine Webflow-Klassen ignorieren es. Nachdenken musst du über die Daten: Webflow Ecommerce gibt dir keinen Stripe-Webhook, den du auf Provedly richten kannst, Bestellungen erreichen das Widget also über die Records API oder per CSV und werden als „Imported“ gekennzeichnet.
Installation in den Site settings
- Leg im Provedly-Dashboard ein Widget an und kopiere den Token.
- Öffne in Webflow die Site settings und dann Custom code.
- Füge das Tag in das Feld Footer code ein und veröffentliche.
<script
src="https://provedly.app/w/widget.js"
data-token="pp_your_token"
async
defer
></script>
Custom Code erfordert einen Webflow-Site-Plan; die kostenlose Staging-Domain ohne Plan gibt ihn nicht aus. Füge sowohl deine eigene Domain als auch deine webflow.io-Staging-Domain unter den erlaubten Domains im Website-Eintrag in Provedly hinzu, sonst verweigert der Konfigurations-Endpunkt auf Staging die Antwort, und du denkst, die Installation sei fehlgeschlagen.
Wenn du das Widget von bestimmten Seiten fernhalten willst, nutze keinen Custom Code pro Seite. Setz das Tag auf der ganzen Website ein und stell in Provedly das URL-Targeting ein („all except“ /checkout, /order-confirmation). So gibt es eine einzige verlässliche Quelle.
Die Installation prüfen
Veröffentliche, öffne die Staging-URL in einem privaten Fenster und warte ein paar Sekunden. Wenn kein Toast erscheint, sind die üblichen Ursachen in dieser Reihenfolge: Die Domain fehlt bei den erlaubten Domains, das Widget hat noch keine Datensätze, oder die Seite ist per URL-Targeting ausgeschlossen. Ein Widget ohne Datensätze rendert nichts, poste also einen Testdatensatz über die API oder importiere eine kurze CSV, bevor du schließt, dass die Installation kaputt ist.
Eine CTA-Leiste hinzufügen
Leisten nutzen einen eigenen Loader mit derselben Installationsmethode:
<script
src="https://provedly.app/w/cta.js"
data-token="pp_your_bar_token"
async
defer
></script>
Die Position sticky oben sitzt über deiner Webflow-Navbar, ohne dass du die Navbar bearbeiten musst. Wenn deine Navigation position: fixed ist, prüf die Vorschau auf einem Handy; vielleicht willst du die Leiste lieber nach unten verschieben. Es gibt drei Arten von Leisten: einen Countdown bis zu einem echten Datum in einer Zeitzone deiner Wahl, einen Evergreen-Timer, der pro Besucher läuft und das auch sagt, und einen Zähler, der nach einem veröffentlichten Plan weiterläuft. Siehe Features: Leisten und Ehrliche Countdown-Timer.
Bestellungen hineinbekommen
Webflow Ecommerce wickelt Zahlungen über Stripe ab, aber das Stripe-Konto ist mit Webflow verbunden, und die Stripe-Quelle von Provedly braucht einen Webhook-Endpunkt für checkout.session.completed, der in deinem eigenen Stripe-Konto registriert ist. Soweit es die Einstellungen von Webflow zulassen, kannst du das nicht über das Ecommerce-Panel konfigurieren. Realistisch bleiben also diese Optionen:
| Quelle | Wie | Label |
|---|---|---|
| Automatisierung (Make, Zapier, n8n) bei „neue Bestellung“ | POST an die Records API | Imported |
| Webflow Logic oder eine kleine Serverless-Funktion | POST an die Records API | Imported |
| Regelmäßiger Export der Bestellungen | CSV-Import | Imported |
| Dein eigener Stripe Checkout außerhalb von Webflow Ecommerce | Stripe-Webhook | Verified |
Ein Aufruf der Records API aus einer Automatisierung sieht so aus:
POST /api/v1/widgets/pp_your_token/records
Authorization: Bearer <widget api key>
Content-Type: application/json
{
"name": "{{customer name}}",
"city": "{{shipping city}}",
"country": "{{shipping country code}}",
"product_name": "{{first item name}}",
"price": "{{formatted total}}",
"external_id": "{{order id}}"
}
Sende external_id, damit ein wiederholter Lauf der Automatisierung kein Duplikat erzeugen kann; der zweite Versuch liefert 422. Der Endpunkt ist unter /docs#api dokumentiert.
Wenn du über eine Webflow-Website verkaufst, aber über deine eigenen Stripe-Checkout-Links oder ein separates Formular mit Stripe abrechnest, kannst du den Webhook selbst registrieren, und diese Käufe werden als Verified markiert. Stripe-Webhooks für verifizierte Käufe erklärt das.
Warum Imported keine Herabstufung ist
Es ist verlockend, „Imported“ als minderwertiges Badge zu sehen. Es ist ein Label zur Herkunft, nicht zur Qualität. Provedly kann den POST einer Automatisierung nicht kryptografisch bestätigen, so wie es ein signiertes Stripe-Event bestätigt, also sagt es dem Besucher genau das. Jedes Badge verlinkt auf eine öffentliche Verifizierungsseite, die die Quellen, Zahlen, den letzten verifizierten Kauf und die Ehrlichkeitsrichtlinie des Widgets auflistet. Ein Webflow-Shop mit ehrlichen Imported-Datensätzen und einem echten Live-Besucherzähler steht besser da als ein Shop mit einem Widget, in dem der Händler „47 Personen sehen sich das an“ in ein Textfeld getippt hat, was laut ihren Angeboten Stand Oktober 2026 die meisten konkurrierenden Tools erlauben.
Live-Besucherzähler auf Webflow
Der Live-Besucherzähler braucht keine zusätzliche Einrichtung. Er zählt Besucher, die die Seite in den letzten 90 Sekunden geöffnet hatten, basierend auf einem Heartbeat alle 30 Sekunden, und blendet sich unter dem von dir gesetzten Minimum aus, statt eine schmeichelhafte Zahl zu zeigen. Bei einer Portfolio- oder Agenturwebsite mit mäßigem Traffic heißt das oft, dass der Zähler während Kampagnen erscheint und sonst still verschwindet. Das ist das richtige Verhalten.
Design in Webflow-Begriffen
Du kannst das Widget nicht mit Webflow-Klassen gestalten, und das musst du auch nicht. Wähl im Dashboard ein Theme: Clean white für die meisten hellen Webflow-Templates, Midnight oder Deep ocean für dunkle, Electric violet oder Sunset blaze, wenn die Marke laut ist. Die Formate für Name und Ort stehen standardmäßig auf „Sarah M.“ und „Austin, US“. Die Begründung liest du in Ein Toast-Theme wählen, das zu deiner Marke passt.
Häufige Fragen
Funktioniert das Widget in der Vorschau des Webflow Designers?
Nein. Custom Code in den Site settings läuft nur auf der veröffentlichten Website. Veröffentliche auf Staging, füge die Staging-Domain zu den erlaubten Domains hinzu und teste dort.
Kann ich das Widget nur auf der Preisseite zeigen?
Ja. Installiere es auf der ganzen Website und nutze URL-Targeting mit „only these“ und /pricing. Kein Code pro Seite nötig.
Deckt der Free-Plan eine Webflow-Website ab?
Ja. Free enthält eine Website, ein Widget, eine Leiste und 2.000 Impressionen pro Monat (etwa 700 Besuche bei rund 3 Benachrichtigungen pro Besuch), mit sichtbarem „by Provedly“-Badge.
Installiere es in einer Minute und sieh deine erste echte Benachrichtigung: loslegen.