Banner com texto dinâmico para sites Webflow: nos bastidores do banner LTD da Latenode
Revelando a Magia: Automação do Webflow para Componentes
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.
Experimente nosso LTD - Automatize processos de negócios de forma eficiente e econômica
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.
Redução 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.
Experimente nosso LTD - Automatize processos de negócios de forma eficiente e econômica
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.
