Como integrar o Bulldesk com meu site?

Para utilizar as integrações do Bulldesk, é necessário o token de acesso à API. Clique aqui para visualizar seu token no Bulldesk.

Neste mesmo link você encontra todos os códigos de integrações que iremos explicar aqui.

Identificador de Leads

Este script é responsável por identificar origens, campanhas e anúncios dos seus leads. Através dele é possível mensurar de onde veio cada visitante.

Adicione no fim de todas as páginas do seu site dentro da tag head e tenha um melhor controle de quais origens trazem mais resultados para sua empresa.

<script>
  window.BulldeskSettings = {
    token: 'TOKEN'
  };

  !function(a,b,c){if('object'!=typeof c){var d=function(){d.c(arguments)};d.q=[],d.c=function(a){d.q.push(a)},a.Bulldesk=d;var e=b.createElement('script');e.type='text/javascript',e.async=!0,e.id='bulldesk-analytics',e.src='https://static.bulldesk.com.br/analytics.js';var f=b.getElementsByTagName('script')[0];f.parentNode.insertBefore(e,f)}}(window,document,window.Bulldesk);
</script>

Obs: Lembre de substituir o TOKEN pelo seu token.

Formulários já existentes

Caso já possua formulários em sua página, basta utilizar o script a seguir. Ele irá integrar todos os formulários que existem em seu site que tenham um botão do tipo submit. Adicione em todas as páginas do seu site que existirem formulários, antes do fechamento da tag body.

<script src="https://static.bulldesk.com.br/forms.js"></script>
<script>
  new BulldeskFormIntegration({
    token: 'TOKEN',
    identifier: 'Identificador da Conversão'
  });
</script>

Obs: Lembre de substituir o TOKEN pelo seu token e definir o identificador da conversão.

Identificar formulários

Se tiver mais de um formulário na página, remova a opção identifier do código e adicione um campo escondido em cada formulário com um identificador único:

<input type="hidden" name="identifier" value="Identificador do Formulário">

Campos padrões do Bulldesk

Estes são os campos padrões do Bulldesk. Caso queira enviar algo que não está nesta lista, basta criar campos customizados.

  • email (string, required) - E-mail do lead
  • name (string, optional) - Nome do lead
  • company (string, optional) - Empresa do lead
  • occupation (string, optional) - Profissão / cargo do lead
  • phone (string, optional) - Telefone do lead
  • website (string, optional) - Site do lead
  • city (string, optional) - Cidade
  • state (string, optional) - Estado
  • country (string, optional) - País

Campos customizados

Você pode enviar qualquer campo que quiser para o Bulldesk.

Primeiro crie seus campos no Bulldesk em https://app.bulldesk.com.br/settings#/custom-fields.

O identificador do campo customizado é o mesmo nome que você deve usar no atributo name dos campos do seu formulário.

Basta colocar o mesmo nome que o campo será enviado normalmente para o Bulldesk.

Mapear campos

Caso seu formulário seja gerado automaticamente ou por algum outro motivo não consiga alterar o atributo name, você pode mapear os campos dentro da integração.

Por exemplo, no contact form 7 do WordPress o código ficaria assim:

<script src="https://static.bulldesk.com.br/forms.js"></script>
<script>
  new BulldeskFormIntegration({
    token: 'TOKEN',
    identifier: 'Formulário de Contato',
    map: {
      'your-name': 'name',
      'your-email': 'email',
      'your-company': 'company',
      'your-message': 'message'
    }
  });
</script>

Nesse exemplo mapeamos o campo your-name para name, your-email para email, your-company para company e your-message para message.

Obs: Lembre de substituir o TOKEN pelo seu token e definir o identificador da conversão.

Obs 2: Essa opção não serve para mandar dados adicionais na integração. Caso queira enviar dados adicionais que não aparecem no formulário, basta criar um campo com o type hidden.

Caso tenha alguma dúvida, entre em contato no e-mail suporte@bulldesk.com.br.

Integrar formulários específicos

Caso queira integrar um formulário específico ou o tipo de botão do seu formulário não seja submit, defina o seletor do botão do formulário na integração.

Exemplo:

<form method="post" action="...">
    ...
    <button id="btn-submit">Enviar</button>
</form>

<script src="https://static.bulldesk.com.br/forms.js"></script>
<script>
  new BulldeskFormIntegration({
    token: 'TOKEN',
    identifier: 'Formulário de Contato',
    selector: '#btn-submit'
  });
</script>

Validação HTML5

Para validar e exibir mensagens de erro de validação do HTML5, adicione a opção validate na integração:

<script src="https://static.bulldesk.com.br/forms.js"></script>
<script>
  new BulldeskFormIntegration({
    token: 'TOKEN',
    identifier: 'Formulário de Contato',
    validate: true
  });
</script>

Ignorar formulários na página

Caso tenha um formulário na página que não deva ir para o Bulldesk, basta adicionar o attributo data-bulldesk-skip como true na tag do form.

Exemplo:

<form method="post" action="..." data-bulldesk-skip="true">
    ...
</form>

Callbacks

É possível definir 2 callbacks, um de sucesso e outro de falha. Basta definir no código da integração:

<script src="https://static.bulldesk.com.br/forms.js"></script>
<script>
  new BulldeskFormIntegration({
    token: 'TOKEN',
    identifier: 'Formulário de Contato',
    success: function (response, form, inputs) {
        console.log(response);
        console.log(form);
        console.log(inputs);
    },
    fail: function (response) {
        console.log(response);
    }
  });
</script>