Banner mit dynamischem Text für Webflow-Websites: Hinter den Kulissen von Latenode's LTD Banner

Die besten Webflow-Entwickler wissen, dass eine eigenständige Website weniger Wert hat als eine, die in andere Geschäftssysteme integriert ist. Bei Latenode sind wir große Fans von Automatisierung und Webflow, deshalb nutzen wir beides, um unsere Website zu verbessern.

In diesem Artikel zeigen wir dir, wie wir ein dynamisches Webflow-Banner mit einem Zähler für verkaufte Lifetime-Deals-Pläne erstellt haben. Der technische Hintergrund? Webflow, Stripe und unsere eigene Low-Code-Automatisierungsplattform Latenode.

Lass uns tiefer eintauchen und herausfinden, wie du Webflow-Komponenten, APIs und CMS nutzen kannst, um das gleiche Ergebnis einer automatisierten Website zu erzielen. Los geht's!

Automatisierung von dynamischen Webflow-Bannern

Für Early Adopters haben wir auf Latenode die Lifetime Deal Plans entwickelt: ein begrenztes Angebot mit nur 1.000 verfügbaren Paketen. Wir wollen transparent sein, und deshalb ist es wichtig, diese Informationen direkt auf der Website zu veröffentlichen.

Aber wie? Manuelles Aktualisieren einmal pro Tag? Wer ist für diesen Prozess verantwortlich? Sich wiederholende Aufgaben erledigen?

Natürlich nicht, es geht nur um Automatisierungen! Sieh dir das Ergebnis an, vor allem diese 937-Nummer.

Wie funktioniert die Automatisierung der Webflow-Integration?

Der Kern der Automatisierung ist ein Szenario, das die Stripe-Zahlungsplattform mit Webflow verbindet, wo die Website Latenode gehostet wird.

Was der Webflow Banner Automatisierungsprozess beinhaltet:

LTD-Kauf: Ein/e Nutzer/in kauft ein LTD über Stripe.

Webhook-Auslöser: Stripe sendet ein Signal an Latenode , wenn ein LTD-Kauf stattfindet, startet dann automatisch den Webhook und aktiviert das gesamte Skript

JavaScript : stellt mit einem geheimen Schlüssel eine Verbindung zu Stripe her und zählt die Anzahl der erfolgreichen LTD-Zahlungen.

HTTP-Anfrage (Erste): Die erste HTTP-Anfrage ruft Informationen über die Sammlung in Webflow ab, die die Bannerdaten enthält, um die Information abzurufen, dass sich die Anzahl der unverkauften LTDs geändert hat

HTTP-Anfrage (Zweite): Die zweite HTTP-Anfrage aktualisiert die Webflow-Sammlung und verringert die Anzahl der verbleibenden LTDs um eins.

‍Veröffentlichung vonÄnderungen: Webflow veröffentlicht die aktualisierten Informationen automatisch auf der Website und ändert dabei die Anzahl der LTDs auf dem Banner. 

So sieht die Sammlung in Webflow aus. Du musst die Anzahl nicht manuell ändern, das Skript macht alles automatisch

Latenode Das Team ist außerdem begeistert, dass das Banner-Update unabhängig von der Aktualisierung der gesamten Website ist.

Wenn du einen bestimmten Teil der Website manuell aktualisierst, wird normalerweise die gesamte Website aktualisiert, was dazu führen kann, dass die Seite für die zweite Person, die in diesem Moment an der Website arbeitet, aktualisiert wird und alle Fortschritte verloren gehen würden. Du kannst dieses Szenario also gefahrlos nutzen, ohne befürchten zu müssen, dass die Arbeit, an der du stundenlang gearbeitet hast, verloren geht!

Schau dir das Latenode Szenario genau an:

Jetzt wollen wir noch tiefer in den technischen Teil der Automatisierung eintauchen und sehen, was in unseren Knoten steckt:

Webhook

Er fungiert als Brücke zwischen Stripe und dem Szenario. Sobald ein LTD-Kauf stattfindet, sendet Stripe ein Signal an Latenode , das dann automatisch den Webhook startet und das gesamte Skript aktiviert

JavaScript

Wird verwendet, um die Anzahl der erfolgreichen LTD-Zahlungen in Stripe zu zählen.

Ich habe keine einzige Zeile Code geschrieben und das alles mit Hilfe eines KI-Assistenten erreicht. Hier ist ein Artikel darüber, wie du Code in Automatisierungen integrieren kannst, auch wenn du keine Ahnung vom Programmieren hast.

JS Verbindet sich mit Stripe über einen geheimen Schlüssel.

Sieh dir an, wie viele erfolgreiche Zahlungen es hier gibt:

HTTP-Anfragen

Zwei HTTP-Anfragen interagieren mit der Webflow-API-Integration. Die erste Anfrage ruft Informationen über die Sammlung ab, die die Bannerdaten enthält. Die zweite Anfrage aktualisiert diese Sammlung und ändert die Anzahl der verbleibenden LTDs.

Vorteile der Verwendung von Automatisierungen

• Aktuelle Informationen: Das Banner zeigt immer die genaue Anzahl der verbleibenden LTDs an, wodurch ein Gefühl der Dringlichkeit entsteht und das Interesse der Nutzer/innen steigt.
  
• Zeitersparnis: Durch die Automatisierung entfällt die Notwendigkeit, Informationen manuell zu aktualisieren, so dass das Team von Latenode mehr Zeit für andere Aufgaben zur Verfügung hat.
  
• Verlässlichkeit: Das Szenario funktioniert einwandfrei und gewährleistet eine genaue Datenanzeige.
  
• Flexibilität: Die Automatisierung kann leicht an andere Aufgaben angepasst werden, z. B. an die Anzeige der Anzahl der Webinaranmeldungen oder Wettbewerbsteilnehmer.
  

Latenode Gemeinschaft

Die Erstellung einer solchen Automatisierung mag komplex erscheinen, aber Latenode bietet alle notwendigen Werkzeuge und Unterstützung für ihre Umsetzung.

‍Latenode Discord Gemeinschaft: Die aktive und freundliche Latenode Community auf Discord ist immer bereit, dir bei allen Fragen und Problemen zu helfen.

Responsive Latenode Unterstützung: Das Team von Latenode bietet prompten und qualifizierten Support und hilft bei der Einrichtung und dem Start von Automatisierungen.

Webflow-Dokumentation

Die übersichtliche und detaillierte Webflow-API-Dokumentation ermöglicht die einfache Erstellung von HTTP-Anfragen zur Interaktion mit der Plattform.

Fazit

LatenodeDie LTD-Banner-Automatisierung ist ein Paradebeispiel dafür, wie No-Code-Tools genutzt werden können, um echte Geschäftsprobleme zu lösen. Dank Latenode und Webflow kann jeder Benutzer ähnliche Automatisierungen erstellen und so die Effizienz seiner Projekte verbessern und Zeit sparen.

Und als Bonus möchte ich noch anmerken: Während wir diesen Artikel schrieben, war die LTD-Banner-Automatisierung bereits in Aktion! Wenn wir jetzt einen Blick auf die Website Latenode werfen, können wir das Ergebnis dieses Szenarios in Echtzeit sehen.

Wie du sehen kannst, ist die Anzahl der verbleibenden LTDs gesunken, seit wir diesen Artikel geschrieben haben. Das ist ein Beweis für die Effektivität der Automatisierung und die Fähigkeit, Änderungen in Echtzeit zu berücksichtigen. Das Szenario funktioniert einwandfrei, aktualisiert das Banner mit den neuesten Informationen und schafft bei potenziellen Kunden ein Gefühl der Dringlichkeit.