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

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

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

Lassen Sie uns tiefer eintauchen und untersuchen, wie Sie Webflow-Komponenten, APIs und CMS nutzen können, um dasselbe Ergebnis wie mit einer automatisierten Website zu erzielen. Los geht‘s!

Automatisierung dynamischer Webflow-Banner

Für Early Adopter haben wir bei Latenode Lifetime Deal Plans entwickelt: ein begrenztes Angebot mit nur 1,000 verfügbaren Paketen. Wir möchten transparent sein und die Anzeige dieser Informationen direkt auf der Website ist entscheidend.

Aber wie? Einmal täglich manuell aktualisieren? Wer ist für diesen Vorgang verantwortlich? Wer verwaltet abgeschlossene, sich wiederholende Aufgaben?

Natürlich nicht, es geht nur um Automatisierung! Schauen Sie sich das Ergebnis an, insbesondere diese Nummer 937.

Wie funktioniert die Automatisierung der Webflow-Integration?

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

Was der Webflow-Banner-Automatisierungsprozess beinhaltet:

LTD-Kauf: Ein Benutzer kauft eine LTD über Stripe.

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

JavaScript: stellt mithilfe eines geheimen Schlüssels 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 nicht verkauften LTDs geändert hat.

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

Es gibt einen Teil der ...Veröffentlichungsänderungen: Webflow veröffentlicht die aktualisierten Informationen automatisch auf der Website und ändert die Anzahl der LTDs auf dem Banner. 

So sieht die Sammlung in Webflow aus. Sie müssen die Anzahl nicht manuell ändern, das Skript erledigt alles automatisch

Das Latenode-Team ist auch begeistert, dass das Banner-Update vom gesamten Site-Update getrennt ist.

Wenn Sie einen bestimmten Teil der Site manuell aktualisieren, wird normalerweise die gesamte Site aktualisiert. Dies kann dazu führen, dass die Seite für die zweite Person, die gerade an der Site arbeitet, aktualisiert wird und alle Fortschritte verloren gehen. Sie können dieses Szenario also sicher verwenden, ohne befürchten zu müssen, die Arbeit zu verlieren, an der Sie stundenlang gearbeitet haben!

Schauen Sie sich das Latenode-Szenario genauer an:

Lassen Sie uns nun noch tiefer in den technischen Teil der Automatisierung eintauchen und sehen, was sich in unseren Knoten befindet:

Webhook

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

JavaScript

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

Ich habe keine einzige Zeile Code geschrieben und das alles mit Hilfe eines AI-Assistent. Hier ist ein Artikel darüber, wie Sie Code in Automatisierungen integrieren, auch wenn Sie nicht programmieren können.

JS stellt über einen geheimen Schlüssel eine Verbindung zu Stripe her.

Hier können Sie sehen, wie viele erfolgreiche Zahlungen es 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 Information: Das Banner zeigt immer die genaue Anzahl der verbleibenden LTDs an, wodurch ein Gefühl der Dringlichkeit erzeugt und das Interesse des Benutzers gesteigert wird.
  
• Zeitersparnis: Durch die Automatisierung entfällt die Notwendigkeit manueller Informationsaktualisierungen, sodass dem Latenode-Team Zeit für andere Aufgaben bleibt.
  
• Zuverlässigkeit: Das Szenario funktioniert einwandfrei und gewährleistet eine genaue Datenanzeige.
  
• Flexibilität: Die Automatisierung kann problemlos auf andere Aufgaben angepasst werden, beispielsweise die Anzeige der Anzahl der Webinar-Anmeldungen oder Wettbewerbsteilnehmer.
  

Latenode-Gemeinschaft

Die Erstellung einer solchen Automatisierung mag komplex erscheinen, aber Latenode bietet alle notwendigen Tools und Unterstützung für die Implementierung.

Es gibt einen Teil der ...Latenode Discord-Community: Die aktive und freundliche Latenode-Community auf Discord ist immer bereit, bei Fragen und Problemen zu helfen.

Reaktionsschnelle Latenode-Unterstützung: Das Latenode-Team bietet schnellen und qualifizierten Support und hilft beim Einrichten und Starten von Automatisierungen.

Webflow-Dokumentation

Klar und detailliert Webflow-API-Dokumentation ermöglicht die einfache Erstellung von HTTP-Anfragen zur Interaktion mit der Plattform.

Es gibt einen Teil der ...Schlussfolgerung

Die LTD-Bannerautomatisierung von Latenode ist ein Paradebeispiel dafür, wie No-Code-Tools zur Lösung echter Geschäftsprobleme eingesetzt werden können. Dank Latenode und Webflow kann jeder Benutzer ähnliche Automatisierungen erstellen, die Effizienz seiner Projekte verbessern und Zeit sparen.

Und als Bonus möchte ich noch eine Anmerkung hinzufügen: Während wir diesen Artikel geschrieben haben, war die LTD-Bannerautomatisierung bereits in Aktion! Wenn wir uns jetzt die Latenode-Website ansehen, können wir das Ergebnis dieses Szenarios in Echtzeit sehen.

Wie Sie sehen, ist die Anzahl der verbleibenden LTDs seit Beginn dieses Artikels zurückgegangen. Dies ist ein Beweis für die Wirksamkeit der Automatisierung und ihre Fähigkeit, Änderungen in Echtzeit widerzuspiegeln. Das Szenario funktioniert einwandfrei, aktualisiert das Banner mit den neuesten Informationen und erzeugt bei potenziellen Kunden ein Gefühl der Dringlichkeit.