Bannière avec texte dynamique pour les sites Web Webflow : dans les coulisses de la bannière LTD de Latenode

Comme le savent les meilleurs développeurs Webflow, un site Web autonome offre moins de valeur qu'un site intégré à d'autres systèmes d'entreprise. Chez Latenode, nous sommes de grands fans de l'automatisation et de Webflow, c'est pourquoi nous utilisons les deux pour améliorer notre site Web.

Dans cet article, nous expliquons comment nous avons créé une bannière Webflow dynamique avec un compteur de plans Lifetime Deals vendus. La pile technologique ? Webflow, Stripe et notre propre plateforme d'automatisation low-code Latenode.

Plongeons plus profondément et explorons comment utiliser les composants, les API et le CMS Webflow pour obtenir le même résultat qu'un site Web automatisé. C'est parti !

Automatisation de la bannière Webflow dynamique

Pour les premiers utilisateurs, nous avons chez Latenode mis au point des formules Lifetime Deal : une offre limitée avec seulement 1,000 XNUMX forfaits disponibles. Nous souhaitons être transparents et afficher ces informations directement sur le site Web est essentiel.

Mais comment ? En mettant à jour manuellement une fois par jour ? Qui est responsable de ce processus ? En gérant les tâches répétitives terminées ?

Bien sûr que non, tout est une question d'automatisation ! Regardez le résultat, en particulier ce numéro 937.

Comment fonctionne l’automatisation de l’intégration Webflow ?

Le cœur de l’automatisation est un scénario qui connecte la plateforme de paiement Stripe à Webflow, où le site Web Latenode est hébergé.

Ce que comprend le processus d’automatisation des bannières Webflow :

Achat LTD : Un utilisateur achète un LTD via Stripe.

Déclencheur de webhook : Stripe envoie un signal à Latenode lorsqu'un achat LTD se produit, puis lance automatiquement le webhook et active l'ensemble du script

JavaScript : se connecte à Stripe à l'aide d'une clé secrète et compte le nombre de paiements LTD réussis.

Requête HTTP (première) : La première requête HTTP récupère des informations sur la collection dans Webflow contenant les données de la bannière afin de récupérer l'information selon laquelle le nombre de LTD invendues a changé

Requête HTTP (deuxième) : La deuxième requête HTTP met à jour la collection Webflow, diminuant ainsi le nombre de LTD restants d'un.

LesModifications de publication : Webflow publie automatiquement les informations mises à jour sur le site Web, en modifiant le nombre de LTD sur la bannière. 

Voici à quoi ressemble la collection dans Webflow, vous n'avez pas besoin de modifier le nombre manuellement, le script fait tout automatiquement

L'équipe de Latenode est également ravie que la mise à jour de la bannière soit distincte de la mise à jour de l'ensemble du site.

En général, lorsque vous mettez à jour manuellement une partie particulière du site, l'ensemble du site est mis à jour, ce qui peut entraîner l'actualisation de la page pour la deuxième personne travaillant sur le site à ce moment-là et toute la progression serait perdue. Vous pouvez donc utiliser ce scénario en toute sécurité sans craindre de perdre le travail que vous avez effectué pendant des heures !

Regardons de plus près le scénario Latenode :

Plongeons maintenant encore plus profondément dans la partie technique de l’automatisation et voyons ce qu’il y a à l’intérieur de nos nœuds :

Webhook

Agit comme un pont entre Stripe et le scénario. Dès qu'un achat LTD se produit, Stripe envoie un signal à Latenode lorsqu'un achat LTD se produit, puis lance automatiquement le webhook et active l'ensemble du script

JavaScript

Utilisé pour compter le nombre de paiements LTD réussis dans Stripe.

Je n'ai pas écrit une seule ligne de code et j'ai réalisé tout cela avec l'aide d'un Assistant IA. Voici un article sur la façon d'intégrer du code dans les automatisations même si vous ne savez pas programmer.

JS se connecte à Stripe par clé secrète.

Voyez combien de paiements réussis il y a ici :

Requêtes HTTP

Deux requêtes HTTP interagissent avec l'intégration de l'API Webflow. La première requête récupère des informations sur la collection contenant les données de la bannière. La deuxième requête met à jour cette collection, en modifiant le nombre de LTD restants.

Avantages de l'utilisation des automatisations

• Information à jour:La bannière affiche toujours le nombre exact de LTD restants, créant un sentiment d’urgence et augmentant l’intérêt des utilisateurs.
  
• Gain de temps:L'automatisation élimine le besoin de mises à jour manuelles des informations, libérant ainsi le temps de l'équipe Latenode pour d'autres tâches.
  
• Fiabilité:Le scénario fonctionne parfaitement, garantissant un affichage précis des données.
  
• Flexibilité:L'automatisation peut être facilement adaptée à d'autres tâches, comme l’affichage du nombre d’inscriptions aux webinaires ou de participants au concours.
  

Communauté Latenode

Créer une telle automatisation peut sembler complexe, mais Latenode fournit tous les outils et le support nécessaires à sa mise en œuvre.

LesCommunauté Discord de Latenode:La communauté active et amicale de Latenode sur Discord est toujours prête à répondre à toutes vos questions et problèmes.

Support réactif de Latenode: L'équipe Latenode fournit un support rapide et qualifié, aidant à la mise en place et au lancement des automatisations.

Documentation Webflow

Clair et détaillé Documentation de l'API Webflow permet de créer facilement des requêtes HTTP pour interagir avec la plateforme.

LesPour aller plus loin

L'automatisation des bannières LTD de Latenode est un excellent exemple de la manière dont les outils sans code peuvent être utilisés pour résoudre de vrais problèmes commerciaux. Grâce à Latenode et Webflow, n'importe quel utilisateur peut créer des automatisations similaires, améliorant ainsi l'efficacité de ses projets et gagnant du temps.

Et en bonus, j'aimerais ajouter une remarque : pendant que nous écrivions cet article, l'automatisation des bannières LTD était déjà en action ! En fait, si nous regardons le site Web de Latenode en ce moment, nous pouvons voir le résultat de ce scénario en temps réel.

Comme vous pouvez le constater, le nombre de LTD restants a diminué depuis que nous avons commencé à rédiger cet article. Cela témoigne de l'efficacité de l'automatisation et de sa capacité à refléter les changements en temps réel. Le scénario fonctionne parfaitement, met à jour la bannière avec les dernières informations et crée un sentiment d'urgence chez les clients potentiels.