[TUTORIAL] Como criar um software que envia ORÇAMENTOS direto por WHATSAPP no Bubble
Se você procura ideias para começar uma startup do zero, ou se está pensando em aprender a programar para criar um app que melhore a comunicação e a produtividade na empresa em que trabalha, está aqui uma excelente ideia:
Uma ferramenta para envio de orçamentos por WhatsApp, feita sem precisar aprender a programar!
Criei esse software utilizando o Bubble (uma plataforma para criar softwares sem utilizar código), para uma empresa que trabalhava com vendas de bens de alto valor, e agregava muito a experiência do cliente poder montar um orçamento na hora, já com as personalizações, preços, todas as possibilidades de financiamento, e então a grande tacada – para receber o orçamento, o cliente precisa informar o WhatsApp dele.
E assim a equipe de vendas começou a aumentar sua base de leads em uma velocidade astronômica toda vez que participava de um evento.
Se você quer desenvolver um aplicativo para equipes de vendas de carros, imóveis, barcos, seja como um app de vendas por si só, ou como parte de um CRM, veja como fazer este aplicativo utilizando somente ferramentas gratuitas:
1. Banco de Dados
O primeiro passo, até mesmo para que a gente consiga desenhar o layout, é criar os campos do banco de dados que vamos precisar.
Na aba “Data” do Bubble, digite Carro em New type, e clique em Create (criar). Pronto! Você criou um novo tipo de dado para inserir os carros. Agora insira os campos:
Dentro do tipo de dados “Carro” agora, precisamos criar somente 3 campos (basta clicar em Create a new field):
- Desconto (campo tipo number/número), que é o desconto que pode ser concedido no carro;
- Modelo (campo tipo text/texto), que é o nome do modelo do carro à venda;
- Preco (campo tipo number/número), que é o valor de venda normal do carro.
Pronto, agora que temos o tipo de dados CARRO, com os 3 campos DESCONTO, MODELO e PREÇO, já podemos começar a desenhar o nosso aplicativo.
2. Design / Layout
Primeiro, a tela principal do aplicativo precisa conter esses 12 elementos:
- Cabeçalho – Insira o cabeçalho que desejar, é meramente ilustrativo. Neste caso, reproduzi as cores do WhatsApp Web para ficar um layout bonito. Você pode adaptar as cores usando o branding do WhatsApp.
- Botão ➕ Incluir Novo Carro – Abre o Popup para inserir carros no banco de dados.
- Dropdown Modelo do Carro – Este Dropdown mostra os carros já cadastrados. Type of choices será “Carro”; Choices source será Do a search for… Carros; Option caption será Current option’s Modelo.
- Input Valor Entrada – Currency, com Initial content igual ao Preço do carro dividido por 10 (aprox. 10% de entrada).
- Input Valor Normal – Currency, com o Initial Content igual ao Dropdown Modelo do Carro’s Value’s Preco.
- Input Valor da Entrada – Currency, com Initial Content igual ao “Input Valor Entrada’s value”.
- Input Saldo – Currency, com Initial Content: “Input Valor Normal’s value – Input Valor Entrada’s value”.
- Input Saldo12 – Currency, com Initial Content: “Input Saldo’s value / 12”.
- Input Saldo24 – Currency, com Initial Content: “Input Saldo’s value / 24”.
- Input Saldo36 – Currency, com Initial Content: “Input Saldo’s value / 36”.
- Input AVista – Currency, com Initial Content: “Input Valor Normal’s value – Dropdown Modelo do Carro’s value’s Desconto”.
- Botão 📩 Enviar por WhatsApp – Abre o Popup para enviar a mensagem por WhatsApp.
Pronto! Layout da página principal criado! Vamos agora criar os 2 Popups que precisamos, um deles pra adicionar carros no banco de dados (ou seja, como se fosse o estoque da loja), e o outro Popup para enviarmos por Whatsapp.
POPUP ADICIONAR CARRO NO BANCO DE DADOS
- a. Input Carro – Input tipo texto. Onde o usuário irá digitar o modelo do carro.
- b. Input Preco – Input tipo Currency, em R$. Onde o usuário irá digitar o valor normal / preço cheio do carro.
- c. Input Desconto – Input tipo Currency, em R$. Onde o usuário irá digitar o valor do desconto máximo que pode ser concedido para pagamento à vista.
- d. Botão Incluir Carro – É o botão que irá criar um novo CARRO no banco de dados. Explicaremos no 3° passo (Ações e Lógica).
POPUP ENVIAR ORÇAMENTO POR WHATSAPP
- i. Input Nome Cliente – Input tipo texto.
- ii. Input Telefone – Input tipo texto.
- iii. Link Abrir WhatsApp – Esta é a principal ação. Ela pega todos os dados inseridos e envia para o cliente:
- Apesar de ter cara de botão, este elemento é um LINK.
- Redireciona para o endereço wa.me/55… com o texto já formatado.
- O telefone é limpo com Find & Replace para remover caracteres especiais.
- Formato de texto é URL encoded para ser interpretado pelo WhatsApp.
- iv. Multiline Input TextoZap – Texto a ser enviado ao cliente. O texto pode usar formatações (negrito, itálico) e placeholders dinâmicos. Abaixo, um exemplo de conteúdo com placeholders.
3. Ações / Lógica
Na aba de ações, temos somente 3 ações:
- Botão Enviar Whatsapp is clicked – Ao clicar, abre o Popup Enviar por WhatsApp.
- Botão Incluir Carros is clicked – Abre o Popup AdicionarCarro.
- Botão Incluir Carro no Banco de Dados is clicked (Dentro do Popup AdicionarCarro) – Ao confirmar:
- Criar um novo item no banco de dados Carros, com o Modelo igual ao Input Carro’s value, o Preco igual ao Input Preco’s value, e o Desconto igual ao Input Desconto’s value.
- Resetar os inputs relevantes.
- Esconder o Popup AdicionarCarro.
E… PRONTO!
Temos o aplicativo pronto, com o banco de dados preparado, o layout organizado e as ações construídas. Agora é só clicar em PREVIEW para ver como ficou e se está funcionando!
Ficou com dúvidas? Tem sugestões? Errei em alguma coisa? Fale comigo pelo email renato@semcodar.com.br ou deixe aqui nos comentários e prometo responder!