Adicionar Formulário para coleta de Lead na Loja Virtual

O objetivo deste artigo é mostrar como transformar sua loja virtual em uma página para coleta de Leads. isso é possível pois sua loja virtual aceita código HTML na descrição detalhada dos produtos e assim podemos customizá-la para incluir um código especial que mostramos passo a passo como incluir. O resultado é que o cliente ao visitar usa loja, poderá fornecer algumas informações de contato antes de ir para o carrinho de compra e assim, caso o mesmo não conclua sua compra, você mesmo assim terá os dados de contato do interessado em nosso CRM na Loja Virtual para posterior contato e recuperação de carrinho.

Em sua página de contato é possível inserir textos formatados por HTML mas não é possível incluir scripts personalizados, porém na págin Como funciona de sua Loja Virtual é possível adicionar um formulário dentro de um produto. Este recurso está disponível para clientes com domínio próprio.

O formulário irá solicitar os dados do usuário e suas informações serão mostradas dentro do CRM presente em sua Loja Virtual.

Como adicionar o formulário para coleta de lead em minha loja?

1. Acesse com seu login administrador e clique sobre a opção Loja Virtual 3.0
2. Clique em Administrativo
3. Em seguida clique em Meus Produtos
4. Clique uma vez sobre o produto para selecioná-lo e clique em editar no canto superior direito, ou dê um duplo clique sobre a linha para entrar em modo de edição.
5. Para inserir o formulário no final da página, no campo Descrição, vá ate a última linha e adicione o código a seguir:
   

   <link href="/assets/css/formGeral.css" rel="stylesheet">
   <div id="formCadastro">
   <input id="nome" type="text" class="formFields" placeholder="Nome*" autocomplte="off">
   <input id="email" type="text" class="formFields" placeholder="E-mail*">
   <input id="celular" type="text" class="formFields" placeholder="Telefone ou celular*" autocomplete="off" onkeyup="mascaraTelCel(this)" maxlength="15">
   <select id="estado" class="formFields"></select>
   <select id="cidade" class="formFields"></select>
   <input id="mensagem" type="text" class="formFields" placeholder="Escreva sua mensagem" autocomplete="off" maxlength="255">
   <button id="btnEnviarLead">Enviar</button>
   <span id="lblMsg"></span>
   </div>
   <script src="/sys/js/crm.js"></script>
   <script type="text/javascript">
   $(function(){
   new dgCidadesEstados({
   cidade: document.getElementById('cidade'),
   estado: document.getElementById('estado')
   });
   idSolucao = '64741';
   idNegocio = '3'; // Trocar para seu idNegócio*

   callBack = 'redirect';  // Se quiser que após a coleta do curso direcione o usuário pro carrinho com o id de algum produto; pode também direcionar o usuário pra outra url qq da loja (tipo uma página personalizada que tenha um "Obrigado")
   });

   function redirect(idLead) {

   window.location.href = "/api/Comprar.aspx?id=ID-DO-PRODUTO-OU-PACOTE&idMetadata=" + idLead + "&txtNome=" + $('#nome').val() + "&txtEmail=" + $('#email').val() + "&txtTelefone=" + $('#celular').val() +"&txtEstado=" + $('#estado').val() + "&txtCidade=" + $('#cidade').val();

   }

   </script>

    

   Se desejar que o usuário tenha que fazer um check num campo antes de enviar seus dados, coloque o código abaixo antes do "Botão Enviar" (<button id="btnEnviarLead">Enviar</button>).

   Pode-se colocar quantos checks desejar, desde que mude o id do input conforme abaixo:

    

   <div class="form-check">
   <input type="checkbox" id="opcao1" name="opcao" class="form-check-input" data-alert="Termos de uso"><label class="form-check-label" for="opcao1">Estou de acordo com os <a href="link-do-termos-de-uso" target="_blank">Termos de uso</a></label>

   </div>

   <div class="form-check">
   <input type="checkbox" id="opcao2" name="opcao" class="form-check-input" data-alert="Maior que 18 anos"><label class="form-check-label" for="opcao2">Declaro ser maior que 18 anos</label>

   </div>

   
   
   *Importante: Troque o idNegocio para que o Lead seja enviado para seu CRM. Este número é fornecido por nossa equipe de suporte e será sempre o mesmo para todos os formulários que você inserir. Para solicitar esta informação em nosso suporte, é só enviar uma solicitação em nossa Central de Apoio.
   
   
6. Após fazer as alterações clique em Salvar
7. Agora basta publicar sua Loja Clicando em Opções e em seguida Publicar Loja 3.0 e pronto! Visite o produto e veja como ficou.

Como adicionar em sua página Como Funciona ou Contato?

1. Acesse com seu login administrador e clique sobre a opção Loja Virtual 3.0
2. Clique em Personalização
3. Agora clique em Como Funciona ou Contato, como desejar
4. Dê dois cliques sobre a opção que aparecerá
5. No campo texto (para Como Funciona) ou no campo Texto Contato (para Contato) vá ate a última linha e adicione o mesmo código do item 5 do passo a passo anterior, presente neste artigo.
6. Após fazer as alterações clique em Salvar
7. Agora basta publicar sua Loja Clicando em Opções e em seguida Publicar Loja 3.0 e pronto!
   Visite a opção escolhida na loja e veja como ficou.

E para onde vão as informações informadas pelo usuário (Leads)?

1. Acesse com seu login administrador e clique sobre a opção Loja Virtual 3.0
2. Clique em Administrativo
3. Em seguida clique em CRM
4. Após entrar em CRM irá mostrar todos os Leads que o usuário preencheu no formulário.
5. Você pode ver ou acrescentar informações neste Lead apenas clicando sobre ele e abaixo apresentará o Histórico.
6. Neste Histórico mostrará a mensagem digitada pelo usuário no formulário com o dia e hora.
7. Você pode incluir novos Históricos de relacionamento com este Lead. Para isso basta clicar no botão com um símbolo de '+' nesta tela de Históricos, adicionar um texto e salvar em seguida.
8. Também é possível alterar ou complementar informações deste Lead dando dublo clique no mesmo. Nesta opção também é possível adicionar uma situação, um percentual e também colocar uma Data de Alerta para ser utilizado como filtro posteriormente.