Banner with Dynamic Text For Webflow Websites: Behind the Scenes of Latenode's LTD Banner

As top Webflow developers know, a standalone website offers less value than one integrated with other business systems. At Latenode, we are big fans of automation and Webflow, which is why we use both to enhance our website.

In this article, we share how we created a dynamic Webflow banner with a counter of sold Lifetime Deals Plans. The tech stack? Webflow, Stripe, and our own low-code automation platform Latenode.

Let’s dive deeper and explore how to utilize Webflow components, APIs, and CMS to achieve the same result of an automated website. Let's go!

Automation of Dynamic Webflow Banner

For early adopters, we at Latenode figured out Lifetime Deal Plans: a limited offer with only 1,000 available packages. We want to be transparent, and showing this info directly on the website is crucial.

But how? Manually updating once a day? Who's responsible for that process? Managing completed repetitive tasks?

Of course not, it's all about automations! Take a look at the result, especially this 937 number.

How Does the Automation of Webflow Integration Work?

The core of the automation is a scenario that connects the Stripe payment platform with Webflow, where the Latenode website is hosted.

What the Webflow Banner automation process includes:

LTD purchase: A user purchases an LTD through Stripe.

Webhook Trigger: Stripe sends a signal to Latenode when an LTD purchase occurs, then automatically launches the webhook and activates the entire script

JavaScript : connects to Stripe using a secret key and counts the number of successful LTD payments.

HTTP request (First): The first HTTP request retrieves information about the collection in Webflow containing the banner data in order to retrieve the information that the number of unsold LTDs has changed

HTTP request (Second): The second HTTP request updates Webflow collection, decreasing the number of remaining LTDs by one.

‍Publishing changes: Webflow automatically publishes the updated information on the website, changing the number of LTDs on the banner. 

This is how the collection looks like in Webflow, you don't need to change count manually, the script does everything automatically

Latenode team is also thrilled that the Banner Update is separate from the whole site update.

Usually when you manually update a particular part of the site, the entire site is updated, which can cause the page to refresh for the second person working on the site at that moment and all progress would be lost. So you can safely use this scenario without fear of losing the work you've been doing for hours!

Close Look at the Latenode scenario:

Now let's dive even deeper in the technical part of the automation and see what's inside our nodes:

Webhook

Acts as a bridge between Stripe and the scenario. As soon as an LTD purchase occurs, Stripe sends a signal to Latenode when an LTD purchase occurs, then automatically launches the webhook and activates the entire script

JavaScript

Used to count the number of successful LTD payments in Stripe.

I didn't write a single line of code and achieved all this with the help of an AI assistant. Here's an article about how to integrate code into automations even if you don't know how to program.

JS Connects to Stripe by secret key.

See how many successful payments there are here:

HTTP requests

Two HTTP requests interact with the Webflow API Integration. The first request retrieves information about the collection containing the banner data. The second request updates this collection, changing the number of remaining LTDs.

Benefits of using automations

• Up-to-date information: The banner always displays the exact number of remaining LTDs, creating a sense of urgency and increasing user interest.
  
• Time savings: Automation eliminates the need for manual information updates, freeing up the Latenode team's time for other tasks.
  
• Reliability: The scenario operates flawlessly, ensuring accurate data display.
  
• Flexibility: The automation can be easily adapted to other tasks, such as displaying the number of webinar registrations or contest participants.
  

Latenode Community

Creating such automation might seem complex, but Latenode provides all the necessary tools and support for its implementation.

‍Latenode Discord community: The active and friendly Latenode community on Discord is always ready to help with any questions and issues.

Responsive Latenode support: The Latenode team provides prompt and qualified support, assisting in setting up and launching automations.

Webflow documentation

Clear and detailed Webflow API documentation allows for easy creation of HTTP requests to interact with the platform.

‍Conclusion

Latenode's LTD banner automation is a prime example of how no-code tools can be used to solve real business problems. Thanks to Latenode and Webflow, any user can create similar automations, improving the efficiency of their projects and saving time.

And, as a bonus, I'd like to add a note: while we were writing this article, the LTD banner automation was already in action! In fact, if we take a look at the Latenode website right now, we can see the result of this scenario in real-time.

As you can see, the number of remaining LTDs has decreased since we started writing this article. This is a testament to the automation's effectiveness and ability to reflect real-time changes. The scenario is working flawlessly, updating the banner with the latest information, and creating a sense of urgency among potential customers.