Como INTEGRAR o AUTOMA ao N8N - Obtenha dados na Web sem API - 2024 | Autotic

pa automatizador tudo beleza seja novamente bem-vindo ao canal da Toti o canal onde você encontra diversos conteúdos acerca de automação em marketing digital temos automação de e-mail temos automação de WhatsApp temos também automação de tarefas Ok e nesse vídeo vamos entrar em automação web tá Já já já vou falar aí da da novidade né que a gente vai apresentar aqui para você tá se você já se interessa por esse conteúdo né você já vem aprendendo aí através de nossos vídeos nossos cursos não deixa de dar um like aí nesse vídeo tá também se inscrever no

canal e ativar os sininhos para poder estar acompanhando aí todas as novidades tá bom caso você ainda não conheça né você tá aqui pela primeira vez no canal meu nome é Hugo eu sou consultor em automação de marketing aqui na auto e hoje eu vou falar sobre Como você consegue integrar o automa tá que é uma uma plataforma incrível Open sce tá 100% gratuito para você fazer automações webs tá Como você vai poder integrar essa plataforma com o ntn que é a plataforma que já utilizamos para poder fazer a integração eh aliás automação né usando

apis tá então esse vídeo aqui ele tá sensacional tá é uma coisa que a gente nunca imaginou que um dia daria para fazer e a gente vai vai mostrar para você que dá para fazer tá Ou seja é possível você unir aí a automação web com Automação eh de apis né Ou seja a automação ali front-end com a automação backend e gerar aí resultados incríveis aí pro seu negócio e também para os seus clientes Tá bom então antes de nós mostrarmos aqui né como vai ser feito aí essa integração entre as duas plataformas Deixa eu

só falar rapidamente sobre o automa tá o automa e eu não sei se você já teve a oportunidade de utilizar selenio ele é como se fosse a solução selenio selenio é um é uma biblioteca né digamos assim um Framework né voltado para e teste de soft tá principalmente no sentido aí de testes funcionais ou seja onde você precisa automatizar ali uma determinada interação com o sistema web para validar crit né de aceite para saber se determinada função ali está funcionando perfeitamente tá E aí muitas pessoas já estavam utilizando o serenum para automatizar determinadas tarefas e

na web né às vezes para poder ali e fazer um login automático ou então para poder também fazer raspagem de dados né ou seja pegar determinadas informações ali da página e etc tá sendo que agora veio o automa tá o automa ele é como se fosse o ntn porém voltado para automação web Ou seja você fazer uma automação ali eh a nível de interface gráfica né enquanto o ntn você precisa ali das apis né dos serviços né para poder eh consultar a informação e levar informação para um outro serviço por meio de api aqui no

automa você simplesmente vai poder eh automatizar um processo né uma tarefa que você manualmente Faria na internet tá e você vai poder fazer isso tudo de forma automática ou seja o seu próprio computador vai fazer isso para ti tá e o legal disso pessoal é que o automa ele é open service Ou seja é de graça tá ele disponibiliza um plugin aqui do New Chrome tá não sei se tem para outros navegadores Eu não parei para poder investigar Mas você pode aqui instalar ele no Chrome e começar a fazer as suas automações ele ele tem

um uma interface bem parecida com o ntn né a automação é você vai montando um fluxo e ali você tem vários comandos né comandos por exemplo para poder abrir uma Instância do navegador um um node ali né um módulo para poder fazer um input ou seja escrever alguma informação em algum campo de texto da tela você tem node ali para poder captar algum alguma informação né algum dado ali na tela eh enfim você tem chromes né para poder agendar ali a automação no tempo que você quiser enfim um monte de coisa pode armazenar informações ele

tem um Storage né um armazenamento ali local nele para você poder armazenar as informações como fosse uma uma planilha interna ali enfim dá para fazer um monte de coisa eu não tenho tanta propriedade para falar porque o automa eu conhecia há pouco tempo Tá mas desde já eu já me impressionei com o potencial dele Beleza então eu já tenho o automa aqui instalado tá a aqui no no no meu computador caso você não tenha Você vai clicar aqui em get for Chrome tá E aí vai instalar e vai aparecer um ícone assim ó igual esse

aqui eh do automa tá Quando você clicar deixa deixa eu até fechar aqui ó já tô com o meu ntn aberto tá Quando você clicar aqui vai abrir essa tela aqui tá eh com o resumo aqui de alguns workflows digamos assim né que você já criou tá e a possibilidade também de você iniciar uma gravação né ou então você fazer uma captura aqui de de elemento ou então até mesmo você já acessar o dashboard tá então por exemplo quando você clica aqui ó ele já vai abrir o dashboard para você tá que é igual do

do ntn né Mais ou menos assim ó onde você pode vir aqui criar um novo workflow né ou então editar algum tá então é bem parecido tá ó então que que eu vou fazer aqui eu vou fazer um exemplo de automação onde a gente vai e fazer uma consulta da cotação atual do Bitcoin tá E e trazer essa informação pro ntn para que a gente possa dar continuidade essa automação com por exemplo sei lá fazer um disparo de um WhatsApp fazer um desparo de um e-mail ou seja você poder obter essa informação por meio da

da automação web né ou seja da da interface web Ou seja você não precisaria de api é claro que e existe apis para isso né inclusive o propan ele tem lá o node narrativo do diec coin né e onde você pode puxar informações ali de criptomoedas Tá mas por exemplo a maioria das pessoas não tem um API de criptomoedas tá E aí como é que faria para poder consultar essa informação usando a automação web ou seja Tem certas informações que você pode obter na sua automação sem precisar da api E aí nesse caso onde você

vai contar com o automa tá e o que o automa não pode fazer né Por exemplo aqui no automa talvez tenha mas eu não procurei saber mas por exemplo eu não vi aqui uma forma de notificar pelo WhatsApp por exemplo se tem por e-mail não sei mas a notificação eu já poderia fazer isso no lado do ntn tá dando para entender então você consegue extrair o melhor das duas plataformas né e criar uma solução completa aí no seu negócio ou para os seus clientes tá o que importa é atingir o resultado não importa se você

vai usar duas ou mais plataformas Mas é você atingir o resultado que você espera tá E aí o que que a gente vai fazer aqui tá começando a gente vai criar eh um novo workflow tá com base aqui na gravação do zero tá então ele vai gravar a interação que eu vou fazer ali no navegador e ele automaticamente vai gerar esse fluxo para mim tá então ao invés de eu ficar adicionando os as etapas né na mão embora eu possa fazer isso tá esse Record aqui já Vai facilitar ele já vai capturando as minhas interações

e vai montando o fluxo tá então o que que eu vou fazer aqui eu vou clicar aqui em Record tá eh vou dar um nome aqui por exemplo ó cotação cotação bcoin tá E aí vou dar um Record aqui tá E aí ele já tá gravando tá então quando eu abrir aqui uma nova aba por exemplo V já vou acessar aqui site do Google tá ó ess o site do Google e aí ele já tá gravando aqui ó você já pode perceber aí no canto superior direito da tela né que já tá gravando e aí

eu vou colocar aqui por exemplo Bitcoin hoje tá E aí vou clicar aqui em pesquisa Google ó repare que já apresentou aqui a informação na minha tela tá E aí como é que eu faço para poder capturar a informação que eu quero na tela eu vou usar essa função aqui chamada select Element tá onde você vai apontar para qual elemento você quer capturar a informação ou o texto tá eh o automa assim como o selenio né se você um dia já usou selenio você vai ver que ele se baseia em identificadores ali eh do do

do CSS né então ele pode pegar a informação ali com base no ID do elemento ou no CSS selector ou então no Name ou então até mesmo no xpf né que seria a posição do elemento ali na página HTML tá geralmente ele pega pelo CSS selector ou pelo xpf tá então ó eu vou clicar aqui ó em cima do valor aqui da cotação do Bitcoin em real tá ele já ficou vermelho significando que foi capturado o CSS selecto dele tá E aqui eu posso escolher o seguinte se eu quero pegar o texto dele né que

é o Val dele digamos assim ou um valor de atributos né Por exemplo se fosse um link eu poderia pegar aqui o href dele que seria o o a URL do link né Se fosse por exemplo uma imagem eu poderia pegar o sear né que seria talvez o caminho ali da imagem tá nesse caso aqui eu vou escolher para pegar o texto beleza e aí eu já posso criar aqui o nome da variável que eu quero armazenar essa informação eu vou colocar aqui btc né que é abreviação de Bitcoin para ele armazenar o valor nessa

variável tá vou dar um save ó eu acredito que já deve ter salvado e vou fechar aqui tá eh vou abrir aqui já vou dar um Stop aqui ó tá eu também poderia ter dado Stop lá na no naquele popup pequenininho ali tinha um botão vermelho tá mas eu vou dar um um um Stop daqui tá E aí vou abrir aqui ó abri tá eh e aí o que que eu vou fazer aqui eu vou rodar ele pela primeira vez só para você entender como é que é a dinâmica aqui do automa tá então eu

tenho aqui o botão save para poder salvar se eu fizer alguma modificação tá eh E aí eu tenho um botão aqui de play para poder executar tá então só Resumindo aqui ele criou um Trigger de execução manual que é como se fosse o start do ntn em seguida ele já colocou aqui um new tab né porque é como eu criasse ali uma nova aba né Eh aqui acho que se não me engano é onde eu coloco ali a URL que eu quero acessar por isso que ele acabou criando aqui um outro new tab tá esse

form é o input que ele faz ali no campo de pesquisa do Google né colocando ali a keyword a palavra chave que eu quero e em seguida esse Trigger event aqui se eu não me engano deixa eu ver aqui se não me falha a memória porque tem certas coisas que eu não sei identificar né porque como é recente ainda para mim essa plataforma Tem coisas que eu não sei o que significa mas esse clique Element aqui eu acredito que significa o clique do botão pesquisar tá E aí pesquisando não se bem que pesquisar é esse

aqui ó eu acho que esse aqui é porque eu cliquei fora né eu dei não sei se você reparou depois que eu digitei apareceu o auto complete eu cliquei fora para poder o auto complete sair então acho Por isso que gerou esse clique Element aqui tá Então esse clique Element aqui de fato é do botão pesquisar do Google tá E aí em seguida assim que aparece a tela lá com a cotação eu faço a captura do valor do Bitcoin tá E aí aqui ele acabou adicionando um um swit Tab né que é como você fazer

uma troca ali de de de aba mas na verdade eu queria que ele fechasse a aba atual tá então eu posso simplesmente apagar esse aqui e aí eu posso clicar aqui ó para voltar e vai aparecer ó igualzinho eh não sei se você já usou elemento né do WordPress você tem ali os elementos né para poder adicionar aqui ao fluxo ou então igual o ntn também né você tem aqui os nodes digamos assim para você adicionar ao seu fluxo caso ele não foi adicionado automaticamente pela gravação tá então eu posso chegar aqui e E aí

eu posso por exemplo colocar o Close Tab tá ó vou colocar aqui e aqui é só para ver ó que ele vai fechar a aba que tiver ativa tá que no caso é ABA ali da pesquisa do Google Beleza vou salvar vamos testar aqui para ver como isso funciona na prática tá olha só que legal ele já acessou o site do Google pesquisou ali Bitcoin hoje capturou a informação que é a cotação do Bitcoin e já fechou e e já fechou a tela tá deixa eu ver aqui Ah se bem que ele aqui ele acabou

pegando a aba do n deixa eu apagar isso às vezes ele acaba pegando alguns eventos que não deveria né porque às vezes a gente acaba clicando em outra parte ali durante a gravação então ele acaba pegando coisa fora do escopo tá mas não tem problema você pode tirar tá perfeito Vou salvar vamos executar de novo só para ver como como está agora ó ó lá Bitcoin hoje olha só que sensacional isso aqui ó ou seja em poucos segundos eu já fiz a pesquisa ali no Google extraí a informação e essa informação já está no automa

pronta para ser encaminhado para qualquer lugar que eu quiser tá E aí se eu voltar aqui no automa eh você tem aqui o menu log tá E ele te mostra as execuções né se tiveram erro se tiveram êxito né E aí quando eu venho aqui na última execução Se eu vir em variáveis né você vai ver aqui que eu tenho a variável que eu tá E o respectivo valor do Bitcoin em real né que ele captou aqui no formato string tá então repare ó variáis né que são variáveis o nome da minha variável E o

respectivo valor dela tá se eu clico aqui em Ray ele me dá mais ou menos ali a a estrutura Jon né que eu devo passar lá pro pro ntn tá E aí como é que eu passo isso para o ntn é bem simples tá se você tem acompanhado aí nossos outros vídeos de integração com nsat com e que mais eh Type bot Zap make você vai ver que é tudo por meio de web Hook né ou então uma chamada api né uma requisição http que a gente consegue pegar as informações ali e passar ali no

corpo da requisição e pronto ele já joga para url de web Hook do ntm e ali você prossegue com a automação é basicamente a mesma dinâmica para todas as plataformas tá e não é diferente aqui com automa então o que que eu vou fazer aqui eu vou adicionar agora um elemento chamado http request tá que é igualzinho o htp request do ntn ok porém esse aqui tem por finalidade transferir as informações aqui do meu fluxo né do automa lá para o ntn por meio de uma url de web Hook tá E e aí que que

eu vou fazer aqui eu vou voltar aqui no meu ntn tá E aí vou clicar aqui em add workflow na verdade deixa eu ver se eu tenho já um workflow É se bem que eu tenho um workflow aqui do automa tá então você cria aí um novo workflow pode botar aqui o nome automa tá E aí você vai adicionar o node web Hook beleza ó E aí você vai colocar aqui o método post né para receber ali as informações no corpo da requisição tá pode botar uma URL amigável no caso vou botar automa beleza e

tu já pode copiar aqui a URL de teste Tá bom vamos salvar volto lá no meu automa tá E e aí eu vou abrir aqui ó o meu htp request E aí eu posso na descrição colocar aqui ó envia envia dados ao n8n tá método de requisição post Ok Cola a URL de web Hook do seu ntn aqui tá content Type você mantém application Jon ok que é a estrutura eh que o ntn trabalha tá eh time out você deixa 10 segundos mesmo porque geralmente não costuma ultrapassar esse tempo e aqui em Body é onde

você vai colocar a os campos né que você quer é passar lá pro seu ntm tá E aí a único que você vai fazer é o seguinte você vai dar uma quebra de linha aqui tá para ficar nessa estrutura aqui e aí você vai colocar os campos que você quer transferir tá no caso aqui como eu só peguei a cotação do Bitcoin então só vou informar esse campo aqui é claro que se fosse uma automação você captando por exemplo o nome e-mail telefone de um contato de um lead aí você já poderia mencionar esses três

Campos aqui tá e a estrutura é a estrutura de Jon que a gente já vem trabalhando no ntn você já sabe como é tá então eu vou colocar aqui ó o campo o único campo né que eu captei a informação vou botar de btc tá é claro que eu poderia botar B Bitcoin Bitcoin ou então Bitcoin underline cotação tá lembrando que não pode ter espaço tá bom tem que ser no formato mesmo de uma variável tá então para facilitar vou botar btc só beleza E aí você dá dois pontos e aí abre e fecha aspas

né E aí Claro você poderia colocar aqui um valor fixo né Por exemplo ó assim então até o número mesmo né Por exemplo 210 1000 vamos dizer que estaria a cotação do Bitcoin agora tá mas como a gente quer pegar de fato exatamente o valor da cotação que veio lá do eh da da nossa automação aqui do do automa né a gente tem que referenciar a variável da mesma forma que a gente faz lá no ntn tá eh sendo que a gente vai fazer isso dentro de aspas ok então dentro de aspas você vai abrir

Chaves duas vezes e vai fechar Chaves duas vezes igual no eico né quando a gente vai colocar ali uma expressão a gente coloca Chaves duplas né para poder dizer que ali vai entrar uma variável Tá Hugo como é que eu a ponta uma variável aqui no no no Body aqui do do htp request do automa você vai digitar variá tá vai dar um ponto e vai colocar o nome da sua variável que é qual btc Ok é a variável que eu defini quando eu peguei a a cotação ali do Bitcoin tá só isso aí você

já pode fechar aqui é claro que se você tivesse outros Campos né você poderia dar um vírgula aqui E aí colocaria outra aqui né por exemplo é eum vamos dizer que eu peguei etério também né E aí mesma coisa ó eu chegaria aqui eí colocaria etério n Claro de acordo com a variável que você escolheu ao capturar aquela informação e aí você vai adicionando quantos Campos você quiser nessa estrutura Tá mas como eu só peguei Bitcoin só vou deixar esses aqui e bom vou fechar aqui já tá anoitecendo aqui né já são 6:20 por isso

que você deve estar percebendo que tá um pouquinho escuro mas vou tentar terminar o quanto antes antes que fique totalmente escuro tá E e aí o que que a gente vai fazer Beleza já apontei aqui a variável pro meu http request tá Vou salvar e aí eu vou executar primeiro aqui só para você ver como funciona tá então por exemplo ó vou executar tá aqui meu workflow ele já tá no modo escuto tá E aí vou dar um play aqui no meu automa para ele rodar a automação ó onde ele vai pegar a cotação do

Bitcoin e olha já jogou aqui para o meu NN Olha que incrível isso aqui ó quando eu abro aqui ó olha só que legal aqui ó em B né que são a os os dados né de corpo olha só aqui a variável btc e o valor dela aqui ó bacana isso aqui né e aqui você tem a possibilidade de fazer o que quiser com essa informação né Por exemplo se você quiser aqui jogar por e-mail né Você pode botar aqui o node sem dmail tá claro você tem que apontar para uma credencial válida de smtp

tá aí aqui eu posso botar Auto como remetente aqui em eu posso colocar um e-mail de destinatário qualquer aqui né só para só para eu testar né ver se tá certo tá certo assunto eu posso botar cotação btc tá então cotação cotação do Bitcoin tá E aqui no corpo né que é aqui no na estrutura HTML eu já posso montar o template do email né então por exemplo eu já posso pegar aqui a informação já jogar aqui né e montando agora aqui o meu template então eu posso chegar aqui posso botar assim ó aação do

Bitcoin em E aí eu posso botar uma variável aqui de data né eu posso colocar aqui a palavra reservada today ele vai retornar à data atual tá mas aí eu preciso formatar aí eu posso botar um true loc string tá E aí posso colocar aqui no formato Brasil né PTBR ele me retorna assim ó tá então a cotação do Bitcoin opa sem aqui do Bitcoin em 15/01 de24 aí eu ponho dois pontos então só posso botar aqui ó votação do Bitcoin em E aí a data aqui tá e embaixo o valor beleza e aí eu

posso até dar uma formatada aqui né se eu quiser por exemplo e colocar aqui a a meta tag né H1 o valor ficar grande né bem visível eu posso fazer isso tá aqui data eu posso botar em né Posso botar aqui ó strong né ó strong beleza que aí vai ficar em a data e aqui a cotação vai ficar em uma fonte maior tá pronto meu template já está pronto OK E aí eu ajeito aqui assim ó salvo e pronto ó vou clicar aqui no modo escuta novamente tá eh já vou abrir aqui o meu

e-mail do Gmail tá ó então repare que não tem novo e-mail aqui tá E agora eu vou só executar minha automação aqui do automa beleza ó vou executar ele já abriu a nova aba digitou Bitcoin hoje pegou a cotação do Bitcoin fechou a aba já mandou aqui pro meu pro meu ntn que enviou o e-mail e chegou o e-mail aqui olha só não deu acho que não deu nem 30 segundos aqui você já teve ali a cotação do Bitcoin em tempo real no seu e-mail né através dessa união né do automa com o ntn tá

vendo que você consegue fazer quando você une aí duas ou mais plataformas né por isso que eu venho falando né a gente não pode ficar aqui ah eu faço tudo no ntn eu faço tudo no automa não você tem que ver o melhor dos dois extrair o melhor dos dois para conseguir resultado surpreendente tá então se eu clicar aqui ó no e-mail ó ele já vai abrir aqui para mim ó cotação em Bitcoin em um do 15 é claro que aqui ele deu um erro aqui de formatação mas depois pode corrigir lá no netm mas

a princípio ele coloca a data aqui e aparece a cotação aqui ó numa fonte bem grande beleza e aí depois Você pode até eh colocar né se você quiser colocar aqui um um um intervalo né Por exemplo aqui o fluxo tá sendo executado manualmente eu dou um play aqui ele executa Mas você também poderia editar aqui ó por exemplo tirar a execução manual e colocar por exemplo numa espe num especif num específico específico dia né Desculpa até travei aqui e aí você pode por exemplo colocar aqui ó ó eh ah Quais são os dias específicos

eu quero colocar você pode por exemplo botar Ah eu quero de segunda a sexta tá OK Ah qual o horário ah eu quero todos esses dias às 9 da manhã beleza Ou então às 9:30 da manhã tá então de segunda a sexta às 9:30 da da manhã esse meu essa minha automação aqui do automa tá vai rodar e vai pegar lá a cotação do Bitcoin beleza e aí vai mandar pro ntn e vai disparar um e-mail para mim então você já tem uma automação aí sem precisar utilizar a API de um serviço aí de cryptomoedas

de cotação de criptomoedas somente extraindo a informação ali diretamente da web E aí gostou então já deixa um like aí nesse vídeo tá se você não se inscreveu ainda no canal se inscreva também para poder apoiar em nosso trabalho é muito importante que você se inscreva que o canal ele vai ganhando cada vez mais relevância tá E os vídeos vai alcançando mais pessoas que com certeza também precisam né Desse conhecimento dessas dicas né para poder dar um up aí e em seus negócios Tá bom então é isso aí obrigado pela atenção se ficou alguma dúvida

deixa aí nos comentários e logo mais a gente vai respondendo um grande abraço e valeu