Banner com texto dinâmico para sites do Webflow: bastidores do banner LTD do Latenode

Como os principais desenvolvedores do Webflow sabem, um site autônomo oferece menos valor do que um site integrado a outros sistemas de negócios. Em Latenode, somos grandes fãs da automação e do Webflow, e é por isso que usamos ambos para aprimorar nosso site.

Neste artigo, compartilhamos como criamos um banner dinâmico do Webflow com um contador de planos Lifetime Deals vendidos. A pilha de tecnologia? Webflow, Stripe e nossa própria plataforma de automação de baixo código Latenode.

Vamos nos aprofundar e explorar como utilizar os componentes do Webflow, as APIs e o CMS para obter o mesmo resultado de um site automatizado. Vamos lá!

Automação do banner dinâmico de fluxo da Web

Para os primeiros usuários, nós da Latenode descobrimos os Lifetime Deal Plans: uma oferta limitada com apenas 1.000 pacotes disponíveis. Queremos ser transparentes, e mostrar essas informações diretamente no site é fundamental.

Mas como? Você atualiza manualmente uma vez por dia? Quem é responsável por esse processo? Gerenciando tarefas repetitivas concluídas?

É claro que não, é tudo uma questão de automação! Dê uma olhada no resultado, especialmente neste número 937.

Como funciona a automação da integração do Webflow?

O núcleo da automação é um cenário que conecta a plataforma de pagamento Stripe com o Webflow, onde o site Latenode está hospedado.

O que o processo de automação do Webflow Banner inclui:

Compra de LTD: Um usuário compra um LTD por meio do Stripe.

Acionador de webhook: O Stripe envia um sinal para Latenode quando ocorre uma compra LTD e, em seguida, inicia automaticamente o webhook e ativa todo o script

JavaScript: conecta-se ao Stripe usando uma chave secreta e conta o número de pagamentos LTD bem-sucedidos.

Solicitação HTTP (primeira): A primeira solicitação HTTP recupera informações sobre a coleção no Webflow que contém os dados do banner para recuperar a informação de que o número de LTDs não vendidos foi alterado

Solicitação HTTP (segunda): A segunda solicitação HTTP atualiza a coleção do Webflow, diminuindo o número de LTDs restantes em um.

‍Publicação dealterações: O Webflow publica automaticamente as informações atualizadas no site, alterando o número de LTDs no banner. 

Esta é a aparência da coleção no Webflow. Você não precisa alterar a contagem manualmente, o script faz tudo automaticamente

Latenode A equipe também está entusiasmada com o fato de a atualização do banner ser separada da atualização de todo o site.

Normalmente, quando você atualiza manualmente uma parte específica do site, o site inteiro é atualizado, o que pode fazer com que a página seja atualizada para a segunda pessoa que estiver trabalhando no site naquele momento e todo o progresso seja perdido. Portanto, você pode usar esse cenário com segurança, sem medo de perder o trabalho que vem fazendo há horas!

Dê uma olhada no cenário Latenode :

Agora vamos nos aprofundar ainda mais na parte técnica da automação e ver o que está dentro dos nossos nós:

Webhook

Atua como uma ponte entre o Stripe e o cenário. Assim que ocorre uma compra LTD, o Stripe envia um sinal para Latenode quando ocorre uma compra LTD e, em seguida, lança automaticamente o webhook e ativa todo o script

JavaScript

Usado para contar o número de pagamentos LTD bem-sucedidos no Stripe.

Não escrevi uma única linha de código e consegui tudo isso com a ajuda de um assistente de IA. Aqui está um artigo sobre como integrar código em automações, mesmo que você não saiba programar.

JS Conecta-se ao Stripe por meio de uma chave secreta.

Veja quantos pagamentos bem-sucedidos você recebeu aqui:

Solicitações HTTP

Duas solicitações HTTP interagem com a integração da API do Webflow. A primeira solicitação recupera informações sobre a coleção que contém os dados do banner. A segunda solicitação atualiza essa coleção, alterando o número de LTDs restantes.

Benefícios do uso de automações

• Informações atualizadas: O banner sempre exibe o número exato de LTDs restantes, criando um senso de urgência e aumentando o interesse do usuário.
  
• Economia de tempo: A automação elimina a necessidade de atualizações manuais das informações, liberando o tempo da equipe do Latenode para outras tarefas.
  
• Confiabilidade: O cenário funciona sem falhas, garantindo a exibição precisa dos dados.
  
• Flexibilidade: A automação pode ser facilmente adaptada a outras tarefas, como a exibição do número de registros de webinars ou de participantes de concursos.
  

Latenode Comunidade

A criação dessa automação pode parecer complexa, mas o site Latenode fornece todas as ferramentas e o suporte necessários para sua implementação.

‍Latenode Comunidade do Discord: A comunidade ativa e amigável do Latenode no Discord está sempre pronta para ajudar você com qualquer dúvida ou problema.

Responsivo Latenode suporte: A equipe do Latenode oferece suporte rápido e qualificado, auxiliando na configuração e no lançamento de automações.

Documentação do Webflow

A documentação clara e detalhada da API do Webflow permite a criação fácil de solicitações HTTP para interagir com a plataforma.

‍Conclusão

Latenodeda LTD é um excelente exemplo de como as ferramentas sem código podem ser usadas para resolver problemas reais de negócios. Graças ao Latenode e ao Webflow, qualquer usuário pode criar automações semelhantes, aumentando a eficiência de seus projetos e economizando tempo.

E, como bônus, gostaria de acrescentar uma observação: enquanto escrevíamos este artigo, a automação do banner LTD já estava em ação! De fato, se dermos uma olhada no site Latenode agora mesmo, poderemos ver o resultado desse cenário em tempo real.

Como você pode ver, o número de LTDs restantes diminuiu desde que começamos a escrever este artigo. Isso comprova a eficácia e a capacidade da automação de refletir as alterações em tempo real. O cenário está funcionando perfeitamente, atualizando o banner com as informações mais recentes e criando um senso de urgência entre os clientes em potencial.