Pessoal, eu vi um exemplo de criar ingresso personalizado com a foto do usuario, mas eu queria criar uma opção para capturar uma foto que será enviada pelo usuario durante o fluxo e criar o cartão no nifty com ela… por exemplo, foto do filho, do pet. Estou começando agora a aprender a ferramenta e nao faço ideia de como fazer isso, aliás, se seria possivel.
Solved
Criar cartao personalizado com imagem enviada pelo usuario
Best answer by Fabio Gaulke
Vamos lá…
A primeira parte está ok. Mas removi a Ação com Requisição externa para capturar a foto do perfil, pois não será necessário nesse fluxo:
Depois de enviar a imagem e capturar a URL para o campo "Foto_Pet” algumas coisas precisam mudar para esse caso:
- A requisição com o Image Compare não vai mais funcionar, pois não estamos capturando a foto de perfil do contato. Essa parte pode ser excluída e só é necessário manter a condição verificando se o campo Foto_Pet está com alguma coisa.
- Como o Nifty Images não está funcionando corretamente com o link que é recebido diretamente pela Meta no campo Foto_Pet, será necessário fazer upload dessa imagem para algum serviço externo, capturar o link novo e usar este como parâmetro no link do Nifty Images.
- Para isso, recomendo o IMGBB (https://imgbb.com/)
- Crie uma conta gratuita no IMGBB.
- Após criada e logada, no canto superior esquerdo, clique em Sobre/ API.
- Adicione uma Chave API clicando em "Add API Key” (copie e guarde a chave por enquanto).
- De volta ao Manychat, adicione uma Ação com uma Requisição Externa do tipo POST
- Na URL = https://api.imgbb.com/1/upload?expiration=600&key=SUA_CHAVE_API&image=VARIAVEL_Foto_Pet
- Também mantive um parâmetro "expiration=600”. Isso faz a imagem automaticamente ser excluída após 10 minutos.
- Na URL = https://api.imgbb.com/1/upload?expiration=600&key=SUA_CHAVE_API&image=VARIAVEL_Foto_Pet
- Em Mapeamento de respostas, precisaremos enviar a url informada pelo IMGBB para um campo personalizado. Neste caso, podemos substituir o link em Foto_Pet
- O JSONPath é "$.data.url”
- Isso fará com que a URL seja aceita pelo Nifty Images
- O JSONPath é "$.data.url”
- Também dividi o próximo bloco de texto e adicionei mais esperas para totalizar, pelo menos, 20 segundos até mandar a imagem, pois pode demorar até isso para que todo o processamento da requisição esteja completo.
Ficará assim:
Testei aqui e funcionou conforme o esperado. 🙌
Detalhe Importante: Vi que você deixou uma área em círculo na imagem do Nifty para receber a foto enviada. Acontece que, se o contato enviar uma imagem que não seja quadrada, mas em formato vertical ou horizontal (o que é 99% de probabilidade), não fica como esperado, mas sim como se fosse uma foto com cantos bem arredondados… Recomendo fazer alguns testes e ajustar o design da melhor forma.
Ficou mais complexo, mas espero que ajude! 🙏
Aqui está o link para o template: https://app.manychat.com/flowPlayerPage?share_hash=451931_96192db6db1ca839186e837d71e2913109bdb7e8
+3Oi,
É possível sim e até bastante simples…
Você vai precisar usar o bloco de Coleta de Dados:
- Definir o tipo de resposta para Imagem
- Salvar a resposta em um campo personalizado de texto
Depois, basta seguir a mesma lógica de criar um ingresso personalizado com a foto do perfil, mas basta incluir a variável com o campo personalizado que você definir na coleta de dados. 😉
Eu ainda incluiria uma espera inteligente de uns 10/15 segundos antes de enviar as coisas para o Nifty, pois costuma demorar alguns segundos até esse link de imagem fique disponível. Isso pode evitar erros em que o Nifty crie a imagem antes do link estar disponível.
Espero que ajude!
segue a automação: https://app.manychat.com/flowPlayerPage?share_hash=2490267_42984dd17f7c056040737ab62c8eebba8b3d50b9
+3
Isso é algo que pode ser usado por outras pessoas para acessar informações de seus contatos, conta e até criar novos usuários e enviar mensagens se passando por você.
Inclusive, tire o compartilhamento do seu fluxo. Como essa requisição está configurada nele, qualquer pessoa que compartilhar também terá acesso a essa chave.
Já vou montar aqui o que você precisa fazer para que o seu fluxo funcione. 😉
+3Vamos lá…
A primeira parte está ok. Mas removi a Ação com Requisição externa para capturar a foto do perfil, pois não será necessário nesse fluxo:
Depois de enviar a imagem e capturar a URL para o campo "Foto_Pet” algumas coisas precisam mudar para esse caso:
- A requisição com o Image Compare não vai mais funcionar, pois não estamos capturando a foto de perfil do contato. Essa parte pode ser excluída e só é necessário manter a condição verificando se o campo Foto_Pet está com alguma coisa.
- Como o Nifty Images não está funcionando corretamente com o link que é recebido diretamente pela Meta no campo Foto_Pet, será necessário fazer upload dessa imagem para algum serviço externo, capturar o link novo e usar este como parâmetro no link do Nifty Images.
- Para isso, recomendo o IMGBB (https://imgbb.com/)
- Crie uma conta gratuita no IMGBB.
- Após criada e logada, no canto superior esquerdo, clique em Sobre/ API.
- Adicione uma Chave API clicando em "Add API Key” (copie e guarde a chave por enquanto).
- De volta ao Manychat, adicione uma Ação com uma Requisição Externa do tipo POST
- Na URL = https://api.imgbb.com/1/upload?expiration=600&key=SUA_CHAVE_API&image=VARIAVEL_Foto_Pet
- Também mantive um parâmetro "expiration=600”. Isso faz a imagem automaticamente ser excluída após 10 minutos.
- Na URL = https://api.imgbb.com/1/upload?expiration=600&key=SUA_CHAVE_API&image=VARIAVEL_Foto_Pet
- Em Mapeamento de respostas, precisaremos enviar a url informada pelo IMGBB para um campo personalizado. Neste caso, podemos substituir o link em Foto_Pet
- O JSONPath é "$.data.url”
- Isso fará com que a URL seja aceita pelo Nifty Images
- O JSONPath é "$.data.url”
- Também dividi o próximo bloco de texto e adicionei mais esperas para totalizar, pelo menos, 20 segundos até mandar a imagem, pois pode demorar até isso para que todo o processamento da requisição esteja completo.
Ficará assim:
Testei aqui e funcionou conforme o esperado. 🙌
Detalhe Importante: Vi que você deixou uma área em círculo na imagem do Nifty para receber a foto enviada. Acontece que, se o contato enviar uma imagem que não seja quadrada, mas em formato vertical ou horizontal (o que é 99% de probabilidade), não fica como esperado, mas sim como se fosse uma foto com cantos bem arredondados… Recomendo fazer alguns testes e ajustar o design da melhor forma.
Ficou mais complexo, mas espero que ajude! 🙏
Aqui está o link para o template: https://app.manychat.com/flowPlayerPage?share_hash=451931_96192db6db1ca839186e837d71e2913109bdb7e8
Eu fiz os ajustes conforme ensinou e rodou. A única coisa diferente é que ele nao gera na primeira tentativa, mesmo com 20,40 segundos. A imagem só é criada se eu mandar gerar novamente. Imagino que seja pela questão do tempo de requisição que você citou. Mas enfim,
SEM PALAVRAS PARA AGRADECER!!!
Caso tenha algum canal no youtube, instagram, me passa para eu segui-lo.
Jesus te abençoe!
1 person likes this
+3Fico feliz que tenha ajudado,
Estranho não estar funcionando com mais tempo de espera. Nos testes que fiz acabou dando certo. Pode ser alguma coisa no processamento do fluxo… Eu ainda testaria dividir o bloco com o texto e a imagem… deixando um para o texto e um novo step com a imagem… talvez isso gere a requisição semelhante ao que acontece quando clica-se para gerar novamente.
Outra coisa que também podes testar é colocar um texto com botão antes da imagem perguntando algo do tipo “pronto para resgatar o seu ingresso?” e um botão para levar á imagem…
Canal no YouTube está nos planos para 2025 😁
Desejo um ótimo final de semana e sucesso no “CarnaUAU”! 🙌
Olá,
Fiz conforme falado. Eu também contei o tempo médio que gastava considerando o “gerar novamente” e aumentei o tempo de espera antes do botão resgatar, dessa forma conseguiu gerar de primeira. Mais uma vez obrigada e ótimo feriado.
“Canal no YouTube está nos planos para 2025 😁” - Certeza que vai ser sucesso!!!! Já tem uma seguidora.
1 person likes this
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.