Aprenda como criar seu próprio site tipo Salesforce no code, usando o editor visual web do Bubble.
Montar uma equipe de vendas de classe mundial pode levar anos de experiência e recursos para ser aperfeiçoada.
Criar software de classe mundial, no entanto, é algo que está continuamente se tornando mais simplificado com ferramentas poderosas como o Bubble.
Escrever código pode levar anos para aprender, criando uma grande barreira de entrada para os fabricantes que procuram criar um produto valioso. Com a ferramenta de desenvolvimento no code Bubble, estamos capacitando os fabricantes do amanhã, independentemente de sua experiência em engenharia. Nossos clientes estão usando o Bubble para criar sites, diretórios e até redes sociais.
Ao longo desta postagem, descobriremos o processo de usar o Bubble para ajudar a criar sua própria versão ‘white-label’ do Salesforce. Ao usar o Bubble para agilizar seu tempo de desenvolvimento, você pode voltar a montar sua equipe de vendas e perseguir suas metas de pipeline.
Este post cobrirá como criar os seguintes recursos principais do Salesforce:
- Criando um sistema personalizado de gerenciamento de relacionamento com o cliente (CRM) para monitorar os detalhes dos leads
- Um portal dedicado a adicionar novos leads
- Um portal para atualizar o status dos leads
As etapas para criar o um CRM tipo Salesforce no code incluem:
Índice
Fazer cadastro gratuito no Bubble
Caso ainda não tenha uma conta no Bubble.io, clique aqui para fazer seu cadastro gratuito.. Clique no link para começar, então podemos criar nosso site juntos.
Faça seu cadastro no Bubble
Ao iniciar seu projeto, você pode escolher começar criando um protótipo para o design do seu site ou criando os campos necessários em seu banco de dados.
Neste caso, começaremos usando a ferramenta de design visual do Bubble para moldar a interface de usuário do nosso site. Ao criar uma plataforma no code tipo Salesforce, algumas das páginas principais que desejará incluir são:
- Uma página de CRM para exibir os campos de dados relevantes de cada lead
- Uma página de envio para adicionar novos leads
- Uma página para atualizar os detalhes de leads existentes
Configurando seu banco de dados
Depois de mapear a exibição do seu aplicativo, você pode se concentrar na criação dos campos de dados necessários para alimentá-lo. Contaremos com esses campos para conectar os workflows por trás do seu software.
O banco de dados pré-construído do Bubble facilita a criação de diferentes tipos de dados com campos exclusivos. Ao usar o Salesforce como MVP, precisaremos criar os seguintes tipos de dados e campos:
Tipo de dados: Cliente
Campos:
- Nome da conta do cliente
- Contato do cliente
- Representante de vendas
- Tamanho do negócio
- Registro do webinar – Nota: Criaremos esse campo como um booleano (sim / não), onde o valor padrão é definido como ‘não’.
- Chamada de vendas – sim / não
- Status do negócio
Workflows para criar um CRM tipo Salesforce
Agora que você estruturou o design e o banco de dados para seu site, é hora de começar a juntar tudo – tornando-o funcional.
No Bubble, a principal maneira de fazer isso é com “workflows”. Cada workflow acontece quando ocorre um “evento” (por exemplo, um usuário clica em um botão) e, em seguida, executa uma série de “ações” em resposta (por exemplo, “inscreva o usuário”, “faça uma alteração no banco de dados”, etc. )
Criando um novo lead
Um dos principais recursos do Salesforce é a capacidade de adicionar novas oportunidades de vendas ao CRM da sua empresa.
Na página de submeter leads , você pode começar a criar esse processo usando uma combinação de inputs, incluindo: campos de texto livre, caixas de seleção ou campos de seleção múltipla.
Depois de adicionar os detalhes relevantes em cada input, você vai clicar no botão ‘enviar’ para criar uma nova entrada em seu banco de dados. Este clique de botão será a ação necessária para acionar seu workflow.
Usando o editor de workflow, você selecionará criar um novo item em seu banco de dados. Neste caso, estaremos criando um novo cliente / lead.
Você precisará então começar a enviar dados para os campos relevantes em seu banco de dados. Mapeie cada input que deseja criar em relação ao campo de dados correspondente.
Criar um grupo repetidor para exibir leads no CRM
Depois de começar a adicionar leads em seu banco de dados, você está pronto para exibir cada item em um feed em seu CRM voltado para o usuário. Isso pode ser obtido utilizando nosso elemento de grupo repetidor.
Grupos repetidores se integram ao seu banco de dados para exibir e atualizar uma lista de conteúdo dinâmico.
Ao usar um grupo repetidor, você precisará primeiro vincular o elemento a um tipo de dados em seu banco de dados. Nesse caso, você classificará o tipo como cliente / lead.
Você também precisará definir a fonte de dados como uma lista de todos os clientes submetidos em seu banco de dados. É possível segmentar ainda mais os leads por categorias diferentes, adicionando restrições extras à sua pesquisa.
Ao criar nosso CRM, vamos adicionar um título para cada campo que criamos. Para o bem do nosso MVP, separaremos cada campo simplesmente adicionando uma linha no meio. Também adicionaremos um botão de atualização no final de cada entrada.
Agora que está pronto para começar a estruturar o conteúdo dinâmico que será exibido nesta grade. Simplesmente mapeie a linha superior com o conteúdo relevante que você gostaria de mostrar e o grupo repetidor preencherá as colunas restantes com base em seus dados existentes.
Criar workflow para evento de navegação no CRM
Ao usar um grupo repetidor, também é possível criar eventos baseados em elementos dentro de cada coluna individual.
Este recurso se tornará útil ao criar recursos de navegação em sua plataforma. Se quiser atualizar o progresso de um lead, você pode selecionar o botão atualizar em sua linha única.
Este botão direcionará você para uma página dedicada onde poderemos atualizar os detalhes do lead existente.
Ao criar este workflow, use um evento de navegação para enviar um usuário a outra página. A partir daqui, selecione o tipo da página de destino como a página de atualizar lead.
Em seguida, você precisará enviar dados adicionais a esta página para que o editor do Bubble saiba qual cliente específico você gostaria de exibir em sua página de destino. Os dados que você precisa exibir são o cliente da célula atual.
Exibindo conteúdo dinâmico
Quando você é direcionado para a página de atualizar lead, você pode facilmente extrair esses dados de evento do seu workflow para exibir o conteúdo necessário.
Nesta página, queremos exibir os mesmos inputs que a página de envio de lead, mas será necessário preencher previamente os dados do cliente atual.
Ao criar esta página, você pode simplesmente duplicar a página de envio de lead existente criada anteriormente.
Antes de criarmos este workflow, você também precisará garantir que o tipo da página corresponda à propriedade de dados que está sendo enviada a partir da sua lógica de evento. Nesse caso, você precisará definir a página de atualizar cliente como uma propriedade cliente.
Para exibir dinamicamente os detalhes do cliente atual, precisaremos usar o campo de conteúdo inicial para extrair os dados existentes. Dentro deste campo, selecione para exibir a propriedade relevante do cliente da página atual.
Ao adicionar esses campos de conteúdo inicial, ele exibirá os dados dos clientes atuais, permitindo que você visualize os detalhes de seus leads.
Nota: Como os inputs de verificação ‘sim’ / ‘não’ são dois elementos separados, precisaremos usar o recurso de condições para preencher previamente apenas a caixa de seleção relevante.
Adicionando condições
As condições permitem que você modifique elementos com base em certos eventos, dados ou estados em seu aplicativo.
A condição que criaremos será baseada no status de registro no webinar do cliente da página atual. Se o status for sim, indicaremos que esta caixa deve ser marcada.
Em seguida, você precisará replicar essa experiência na caixa de seleção ‘não’, usando a mesma lógica, mas escrevendo para o cenário oposto.
Uma vez atualizados os inputs deste lead atual, precisaremos fazer alterações relevantes em sua entrada no banco de dados.
Isso seguirá a mesma lógica que usamos ao criar um novo cliente, só que desta vez, queremos fazer alterações em um item existente.
Mais uma vez, você mapeará os inputs relevantes para suas propriedades do banco de dados.
Recursos adicionais para criar um CRM no code
Agora que está familiarizado com a criação de campos de dados personalizados e a exibição de conteúdo dinâmico, podemos criar novas funcionalidades em nosso CRM tipo Salesforce.
Adicionalmente, você pode:
- Adicionar filtros ao grupo repetidor do CRM, permitindo que você filtre clientes pelo status do negócio
- Adicionar campos de dados extras ao banco de dados do cliente
- Adicionar contas de usuário à sua equipe de vendas. Anteriormente, abordamos como fazer isso em detalhes aqui.
Ficou com alguma dúvida? Quer saber mais sobre o Movimento Sem Codar? Veja também nosso Tutorial em vídeo!
[VIDEO] Tutorial – Crie um Aplicativo CRM como o Salesforce (sem programar)
ATENÇÃO: Este é um tutorial traduzido para Português a partir do original em Inglês. O Bubble possui dezenas de tutoriais ensinando a criar aplicativos de forma 100% visual, sem precisar programar.
Acesse aqui todos os tutoriais: https://bubble.io/how-to-build
Acesse aqui a versão original deste tutorial em inglês: https://bubble.io/blog/build-no-code-salesforce-clone/
