Sobre
"Input" significa entrada de dados. As funcionalidades dos "Inputs" são ferramentas essenciais para coletar informações dos usuários durante a interação com o bot. Elas permitem que você crie campos para entrada que vão coletar dados de texto, e-mail, data, arquivo e muito mais.
Usando os blocos de Inputs, você pode coletar dados específicos e personalizar a experiência do usuário com base nas respostas fornecidas. Nesta categoria encontramos blocos de funcionalidades:
Texto;
E-mail;
Data;
Botão;
Pagamento;
Arquivo;
Número;
Website;
Telefone;
Seleção de Imagem;
Avaliação.
Neste artigo, vamos explorar como configurar e utilizar essas funcionalidades para otimizar a coleta de informações no seu bot.
❗Informação importante
Em vários campos dos blocas de inputs você vai se deparar com o botão com desenho de uma pessoa. Esse botão serve para inserir ou criar variáveis. As variáveis são dados, como o nome, respostas a perguntas específicas ou qualquer informação relevante coletadas ao longo da conversa com o usuário.
Ao clicar neste botão é possível inserir uma variável já existente. Também há como criar uma variável digitando seu nome no campo de busca e depois clicando no botão "Criar".
As variáveis poder podem ser usadas nos inputs para acrescentar informações personalizadas aos itens adicionados ao bot.
Texto
O input "texto" permite que os usuários digitem respostas de forma livre durante a interação com o bot. Esse tipo de input é flexível e pode ser usado em diversas situações para capturar dados essenciais e personalizar a experiência da conversa.
O bloco de texto possibilita solicitar ao usuário uma resposta curta ou longa.
Exemplo visão do usuário bloco buuble de texto + bloco input de texto:
Passo a passo
1º passo: insira um bloco de texto no fluxo do bot. Para isso, clique no input "Texto" e arraste para a tela de edição do bot.
Dê um nome para o novo grupo (isso ajuda na identificação) e clique no campo "Digite sua resposta".
2º passo: por padrão, o bloco é configurado para receber uma resposta de texto curta. Caso queira coletar um resposta de texto longa ative a chave da opção "Texto longo?".
❗Informação importante
As configurações dos demais campos do formulário funcionam da mesma forma para reposta de texto curto ou longo.
3º passo: preencha os demais campos do formulário.
Placeholder: texto de exemplo que aparece dentro do campo de entrada antes do usuário começar a digitar. Ele serve como dica ou instrução sobre o que deve ser inserido naquele campo, desaparecendo quando o usuário começa a digitar.
Exemplo: Digite seu nome.Legenda do botão: é o texto exibido no botão que o usuário clica para enviar ou confirmar a entrada de texto. Ele deve indicar claramente a ação que será realizada.
Exemplos: "Enviar", "Confirmar" ou "Próximo".
Salve a resposta em uma variável: essa opção permite armazenar a resposta do usuário em uma variável específica. Ou seja, o dado será guardado com um nome identificador, que pode ser usado posteriormente no fluxo da conversa.
Digite o nome da variável no campo e depois clique em "Criar".
Exemplo: Nome do lead.
O input "e-mail" serve para coletar o endereço de e-mail dos usuários, garantindo que o dado inserido seja um endereço no formato correto. Esse tipo de input é útil para registros, assinaturas de newsletters, ou qualquer situação onde seja necessário capturar um e-mail para comunicação futura.
Uma mensagem de nova tentativa será exibida sempre que o Toolzz Bots detectar que o e-mail não está formatado corretamente (por exemplo, sem o @). Entretanto, ele não verifica se o endereço de e-mail é válido. Para essa validação, será necessário acionar um bloco Webhook e utilizar uma API de serviço de validação de e-mails.
Exemplo visão do usuário bloco buuble de texto + bloco input de e-mail:
Passo a passo
1º passo: insira um bloco de e-mail no fluxo do bot. Para isso, clique no input "Email" e arraste para a tela de edição do bot.
Dê um nome para o novo grupo (isso ajuda na identificação) e clique no campo "Digite seu email".
2º passo: preencha os demais campos do formulário.
Placeholder: texto de exemplo que aparece dentro do campo de entrada antes do usuário começar a digitar. Ele serve como dica ou instrução sobre o que deve ser inserido naquele campo, desaparecendo quando o usuário começa a digitar.
Exemplo: Digite seu e-mail.Legenda do botão: é o texto exibido no botão que o usuário clica para enviar ou confirmar a entrada de texto. Ele deve indicar claramente a ação que será realizada.
Exemplos: "Enviar", "Confirmar" ou "Próximo".
Mensagem de nova tentativa: é possível personalizar a mensagem que avisará ao usuário que o e-mail não está no formato correto.
Exemplo: Este não é um e-mail válido. Poderia digitá-lo novamente?
Salve a resposta em uma variável: essa opção permite armazenar a resposta do usuário em uma variável específica. Ou seja, o dado será guardado com um nome identificador, que pode ser usado posteriormente no fluxo da conversa.
Digite o nome da variável no campo e depois clique em "Criar".
Exemplo: E-mail lead.
Data
O input "Data" permite que os usuários selecionem uma data específica a partir de um calendário interativo. Ele serve para coletar informações relacionadas a datas, como datas de nascimento, agendamentos de compromissos ou datas de eventos. Esse tipo de input facilita a entrada de dados precisos e formatados corretamente, melhorando a experiência do usuário e a precisão das informações coletadas.
É possivel solicitar uma data específica, inclusive incluindo às horas ou um intervalo de tempo. O input usará o seletor de data nativo dispositivo ou navegador usado para responder ao bot.
Exemplo visão do usuário bloco buuble de texto + bloco input de data:
Passo a passo
1º passo: insira um bloco de data no fluxo do bot. Para isso, clique no input "Data" e arraste para a tela de edição do bot.
Dê um nome para o novo grupo (isso ajuda na identificação) e clique no campo "Selecione uma data".
2º passo: preencha os demais campos do formulário.
Ative a chave a opção "Intervalo?" para permitir que o usuário selecione duas datas, para marcar o início e o fim de um período. Com a opção ativada aparecerão duas novas opções:
Legenda de: insira um texto descritivo que será exibido junto ao campo onde o usuário selecionará a data de início do intervalo. Por exemplo, "Data de início".
Legenda até: igual ao campo anterior, mas será exibido onde é selecionada a data de fim do intervalo. Por exemplo, "Data de término".
Ative a chave da opção "Com tempo?" para adicionar campos de seleção de hora ao input de data, permitindo ao usuário escolher além de uma data, também um horário.
Legenda do botão: insira um texto que será exibido no botão usado para confirmar a seleção da data. Por exemplo, "Confirmar".
A opção "Min" define a data mínima que o usuário pode selecionar. Por exemplo, se você quiser permitir que os usuários escolham datas apenas a partir de 1º de janeiro de 2024, configure o campo com "01-01-2024".
A opção "Máx" define a data máxima que o usuário pode selecionar. Por exemplo, se se os usuários podem escolher datas até 31 de dezembro de 2024, configure como "31-12-2024".
Formatar: defina como a data selecionada será exibida. Você pode usar formatos como "DD/MM/AAAA" para exibir a data como "31/12/2024".
Exemplos de formatação de data sendo dd para dia / MM para mês / yyyy para ano / HH para hora / mm para minuto / ss para segundo:
dd - MM - yyyy
dd - MM - yyyy HH: mm : ss
dd / MM/ yy
dd / MM / yyyy HH: mm:ss
d.MM.yy
Salve a resposta em uma variável: essa opção permite armazenar a resposta do usuário em uma variável específica. Ou seja, o dado será guardado com um nome identificador, que pode ser usado posteriormente no fluxo da conversa.
Digite o nome da variável no campo e depois clique em "Criar".
Exemplo: Data da reunião x.
Botão
O input "botão" permite adicionar botões interativos na conversa, que os usuários podem clicar para selecionar uma opção ou realizar uma ação específica. Ele serve para simplificar a interação, guiando os usuários de forma clara e direta através de escolhas predefinidas, como "Sim" ou "Não", "Próximo" ou "Anterior", ou qualquer outra ação relevante.
Exemplo visão do usuário bloco buuble de texto + bloco input de botão + buuble texto:
Passo a passo
1º passo: insira um bloco de botão no fluxo do bot. Para isso, clique no input "Botão" e arraste para a tela de edição do bot. Dê um nome para o novo grupo (isso ajuda na identificação).
2º passo: clique no campo "Clique aqui para editar" e digite o que estará escrito no seu botão. Exemplo: SIM.
Para adicionar mais botões, passe o mouse por cima do botão já criado e clique no ícone de "+".
3º passo: clique no ícone com o desenho de um quadro e um check, localizado do lado esquerdo do botão criado e preencha o formulário.
"Múltipla escolha?": quando ativada, essa opção permite que os usuários cliquem em vários botões para selecionar múltiplas respostas em vez de apenas uma. Neste caso, independente do que selecionar, poderá ser direcionado à apenas um fluxo.
Com a opção desativada, o usuário pode escolher apenas um botão. Assim, é possível vincular cada botão à um fluxo, e o caminho do usuário será definido de acordo com a opção que ele escolher.
Legenda do botão de envio: o que estará escrito no botão que o usuário deve clicar após selecionar múltiplas respostas. Exemplo: Enviar.
"É pesquisável?": esta opção permite que os botões sejam pesquisáveis, ou seja, o usuário filtrar e encontrar rapidamente a opção desejada entre os botões disponíveis.
Placeholder do input: será o texto de instrução que aparece dentro do campo de pesquisa antes do usuário começar a digitar. Serve para orientar sobre o que pode ser digitado. Exemplo: "Procure por uma opção".
Dados dinâmicos: permite que o conjunto de botões apresentados ao usuário seja gerado dinamicamente com base nas variáveis salvas. Para isso, selecione as variáveis na lista.
Salve a resposta em uma variável: permite que a escolha do usuário seja salva em uma variável específica. Isso facilita o uso da resposta em outras partes da conversa ou para processamento posterior. Digite o nome da variável no campo e depois clique em "Criar". Exemplo: Resposta usuário X.
4º passo: passando o mouse por cima de cada botão criado, aparecerá um botão com o ícone de engenagem.
Se quiser criar condições específicas para definir se um botão será exibido para determinados usuários, clique na engrenagem e ative a opção "Condição de exibição".
5º passo: clique no botão "Adicionar comparação" e preencha os campos.
Pesquise uma variável: insira uma variável que contém um dado já coletado pelo bot. Exemplo: Idade.
Selecione um operador: o operador define a lógica de comparação que será usada para avaliar a condição. Por exemplo, se você quer que o botão apareça apenas se a variável for maior que um determinado valor, você pode selecionar "Greater than" (maior que).
Digite um valor: insira o valor que será comparado com o valor da variável selecionada. Por exemplo, se a condição é exibir o botão apenas quando a variável "idade" é maior que 18, você colocará "18" neste campo.
Com esta configuração, este botão só será exibido se o valor da variável "idade" for maior que 18, permitindo que você controle dinamicamente o fluxo de conversa baseado em condições específicas.
5.Pagamento
O bloco de entrada "Pagamento" permite receber o pagamento. Você primeiro precisa adicionar seu Stripe.
Passo a passo
1º passo: clique em "Configure" dentro do bloco de pagamentos.
2º passo: clique no botão "Add Stripe account".
3º passo: um pop-up com alguns campos surgirá.
1. O nome da conta pode ser qualquer coisa que você desejar, não é algo que precisa vir do Stripe.
2. Insira chaves de teste, que serão usadas na visualização para fins de teste. Elas podem ser encontradas aqui: https://dashboard.stripe.com/test/apikeys
3. Insira as chaves ativas, que serão usadas no bot publicado. Elas podem ser encontradas aqui: https://dashboard.stripe.com/apikeys
🚨Se você quiser usar as chaves de teste no bot publicado, você só precisa preencher as chaves de teste no campo de chaves ativas.
4º passo: clique no botão "Connect", que ficará disponível assim que os campos do passo 3 forem preenchidos.
Depois de ter uma conta Stripe, você pode selecioná-la e configurar sua entrada para ativar Cartões, Apple Pay, Google Pay, Alipay, WeChat Pay etc.
Certifique-se de habilitar qualquer método de pagamento que você gostaria que aparecesse em seu painel do Stripe nestaURL: https://dashboard.stripe.com/settings/payment_methods.
6.Arquivo
Colete arquivos do seu usuário através do bloco de "Arquivo".
Nesse espaço é permitido HTML.
Tamanho máximo permitido: você só pode enviar arquivos com até 10 MB. Se precisar enviar algo maior, peça para a pessoa carregar o arquivo em um serviço como Google Drive ou Dropbox e compartilhar o link com você.
Visibilidade: escolha se deseja que os links dos arquivos sejam públicos ou privados. Se optar por mantê-los privados, só poderá acessá-los se estiver logado na sua conta Toolzz Bots.
❗Lembre-se de que se os arquivos estiverem privados, não poderá usar o link deles em outros blocos como anexo no bloco de enviar email ou outros. Esses blocos não poderão ler esses arquivos.
7.Número
Solicite um número ao usuário. É possível definir um número mínimo, máximo e um passo.
8.Website
Solicite uma URL ao usuário. O bloco de "Website" verificará se a URL está formatada corretamente.
A mensagem de nova tentativa será exibida sempre que a plataforma detectar que o email não está formatado corretamente.
Ele não verificará se o endereço de email é válido . Para fazer isso, você terá que acionar um bloco "Webhook/API" e chamar uma API de serviço de validação de e-mail.
9.Telefone
Com esse bloco é possível solicitar um número de telefone ao usuário e verificar se ele está formatado corretamente. Ele garante que o número seja armazenado em um formato consistente. Você pode escolher o código do país padrão ou deixá-lo como internacional.
10.Seleção de imagem
Ofereça ao usuário opções predefinidas ilustradas com uma imagem, opções de escolha única ou opções múltiplas. Para configuração avançada, verifique o passo a passo do bloco "4.Botão", funciona da mesma maneira.
🚨Atenção!
Essa opção não reflete no WhatsApp, apenas adapta.
11.Avaliação
Solicite uma avaliação, de 0 a 10, ao usuário. Esse bloco é personalizável, você pode definir um intervalo, números ou um ícone personalizado e rótulos inferiores.
Ícone personalizado
Para inserir um ícone personalizado, você precisará inserir conteúdo SVG. Deve começar **<svg>
**e terminar com </svg>
.
Pronto! Agora você já sabe como utilizar os blocos de entrada.