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

Como os principais desenvolvedores do Webflow sabem, um site independente oferece menos valor do que um integrado a outros sistemas empresariais. Na Latenode, somos grandes fãs de automação e 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 Lifetime Deals Plans vendidos. A pilha de tecnologia? Webflow, Stripe e nossa própria plataforma de automação de low-code Latenode.

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

Automação de Banner Webflow Dinâmico

Para os primeiros adeptos, nós da Latenode descobrimos os Planos de Oferta Vitalícia: uma oferta limitada com apenas 1,000 pacotes disponíveis. Queremos ser transparentes, e mostrar essas informações diretamente no site é crucial.

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

Claro que não, é tudo sobre automações! 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 LTD: Um usuário compra uma LTD por meio do Stripe.

Gatilho do Webhook: O Stripe envia um sinal para o 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 contendo os dados do banner para recuperar as informações de que o número de LTDs não vendidos mudou

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

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

É assim que a coleção se parece no Webflow, você não precisa alterar a contagem manualmente, o script faz tudo automaticamente

A equipe do Latenode também está entusiasmada porque a atualização do Banner é separada da atualização do site inteiro.

Geralmente, 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 trabalhando no site naquele momento e todo o progresso seria perdido. Então você pode usar esse cenário com segurança, sem medo de perder o trabalho que vem fazendo há horas!

Uma análise detalhada do cenário do Latenode:

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

webhook

Atua como uma ponte entre o Stripe e o cenário. Assim que uma compra LTD ocorre, o Stripe envia um sinal para o Latenode quando uma compra LTD ocorre, então inicia 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.

O JS se conecta ao Stripe por chave secreta.

Veja quantos pagamentos foram bem-sucedidos 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ção atualizada: 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 de informações, liberando tempo da equipe do Latenode para outras tarefas.
  
• Confiabilidade: O cenário opera perfeitamente, garantindo a exibição precisa dos dados.
  
• Flexibilidade:A automação pode ser facilmente adaptada a outras tarefas, como exibir o número de inscrições em webinars ou participantes de concursos.
  

Comunidade Latenode

Criar tal automação pode parecer complexo, mas o Latenode fornece todas as ferramentas e suporte necessários para sua implementação.

‍Comunidade Latenode Discord: A comunidade ativa e amigável do Latenode no Discord está sempre pronta para ajudar com quaisquer dúvidas e problemas.

Suporte Latenode responsivo: A equipe da Latenode fornece suporte rápido e qualificado, auxiliando na configuração e no lançamento de automações.

Documentação do Webflow

Claro e detalhado Documentação da API do Webflow permite a criação fácil de solicitações HTTP para interagir com a plataforma.

‍Conclusão

A automação de banner LTD da Latenode é um excelente exemplo de como ferramentas no-code podem ser usadas para resolver problemas reais de negócios. Graças à Latenode e à Webflow, qualquer usuário pode criar automações semelhantes, melhorando a eficiência de seus projetos e economizando tempo.

E, como bônus, gostaria de acrescentar uma nota: enquanto escrevíamos este artigo, a automação do banner LTD já estava em ação! Na verdade, se dermos uma olhada no site do Latenode agora mesmo, podemos 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 é uma prova da eficácia da automação e da capacidade de refletir mudanças 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.