Como integrar o Bulldesk?

Nesta seção você vai entender melhor como funcionam as integrações do Bulldesk e o que precisa ser feito para integrar seu site/app e aproveitar todas as funcionalidades da melhor forma.

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

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

Identifique seus visitantes

Uma das funcionalidades favoritas dos clientes do Bulldesk é o Lead Tracking.

Com ele você sabe de onde cada visitante veio e consegue visualizar todas as páginas que seu lead acessou em seu site.

É possível inclusive saber todas as páginas que seu visitante visualizou antes mesmo dele virar um lead.

Essas informações ficam disponíveis para criar segmentações e campanhas de marketing. Já pensou nas possiblidades? São realmente infinitas.

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

Adicione em 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>

TIP

Lembre de substituir o TOKEN pelo seu token.

WARNING

Para não perder nenhuma visita, o script identificador de leads deve ficar dentro da tag head.

Através do Lead Tracking, o Bulldesk identifica cada visitante que acessa seu site e atribui um ID único para ele, esse identificador único é chamado de client id.

O identificador de leads pode adicionar automaticamente o client id do lead que está visitando a sua página em seu formulário.

Para isso basta adicionar um campo do tipo hidden chamado bulldesk-client.

<input type="hidden" name="bulldesk-client" value="">

O campo será populado automaticamente e você poderá enviar o client id via API.

Integre seus formulários

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.

WARNING

Esse script deve ficar sempre depois do formulário que você quer integrar. De preferência deve ser o último código do seu site.

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

TIP

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

WARNING

Para conseguir integrar todos os formulários, o script de integração de formulários deve ficar sempre no final de sua página, antes do fechamento da tag body.

Identifique 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">

Mapear campos

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

Para mapear basta ver o atributo name do campo de seu formulário e verificar qual é o correspondente a ele nos campos padrões do Bulldesk.

Caso tenha algum campo que não seja padrão do Bulldesk, basta criar campos customizados.

Veja o exemplo em um formulário automaticamente gerado:

<form class="et_pb_contact_form" method="post">
  <p class="et_pb_contact_field" data-id="nome" data-type="input">
    <label for="et_pb_contact_nome_1" class="et_pb_contact_form_label">SEU NOME</label>
    <input type="text" name="et_pb_contact_nome_1" id="et_pb_contact_nome_1" class="input et_contact_error" value="" data-required_mark="required" data-field_type="input" data-original_id="nome" placeholder="SEU NOME COMPLETO">
  </p>

  <p class="et_pb_contact_field" data-id="email" data-type="email">
    <label for="et_pb_contact_email_1" class="et_pb_contact_form_label">SEU EMAIL</label>
    <input type="text" name="et_pb_contact_email_1" id="et_pb_contact_email_1" class="input et_contact_error" value="" data-required_mark="required" data-field_type="email" data-original_id="email" placeholder="SEU EMAIL">
  </p>

  <div class="et_contact_bottom_container">
    <button type="submit" class="et_pb_contact_submit et_pb_button">ENVIAR</button>
  </div>
</form>

Nesse caso o campo nome está com o atributo name="et_pb_contact_nome_1" e o campo email está com o name="et_pb_contact_email_1".

Para mapear esses campos com nomes diferentes para os campos padrões do Bulldesk, precisamos definir esse map 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',
    map: {
      'et_pb_contact_nome_1': 'name',
      'ep_pb_contact_email_1': 'email',
    }
  });
</script>

No código acima, mapeamos o campo et_pb_contact_nome_1 para name e pt_pb_contact_email_1 para email.

Vejamos outro exemplo do mapeamento em um formulário gerado pelo Contact Form 7 do Wordpress:

<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'
    }
  });
</script>

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

TIP

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

WARNING

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.

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.

Campo	Descrição	Obrigatório
email	E-mail do lead	Sim
name	Nome do lead	Não
company	Empresa do lead	Não
occupation	Profissão / cargo do lead	Não
phone	Telefone do lead	Não
website	Site do lead	Não
city	Cidade	Não
state	Estado	Não
country	País	Não

Campos customizados

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

Primeiro crie seus campos no Bulldesk em Configurações → Campos Customizados (opens new window).

O ID 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.

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>

Lista de Parâmetros da Integração

Parâmetro	Descrição	Tipo
token	Token de sua conta no Bulldesk.	string
identifier	Identificador do formulário/conversão. É utilizado nas campanhas de marketing.	string
map	Utilizado para mapear os campos do formulário para os campos padrão do Bulldesk	object
validate	Ativa ou não as mensagens de validação do HTML5.	bool
selector	Seletor do botão do formulário. Utilizado para integrar formulários específicos.	string
success	Callback que é executada quando a conversão é registrada com sucesso.	function
fail	Callback que é executada quando a conversão não pode ser registrada.	function

Ainda tem alguma dúvida? Entre em contato no e-mail suporte@bulldesk.com.br.

Boas Práticas Para E-mails →

# Como integrar o Bulldesk?

# Identifique seus visitantes

# Integre seus formulários

# Identifique formulários

# Mapear campos

# Campos padrões do Bulldesk

# Campos customizados

# Integrar formulários específicos

# Validação HTML5

# Ignorar formulários na página

# Callbacks

# Lista de Parâmetros da Integração

Como integrar o Bulldesk?

Identifique seus visitantes

Integre seus formulários

Identifique formulários

Mapear campos

Campos padrões do Bulldesk

Campos customizados

Integrar formulários específicos

Validação HTML5

Ignorar formulários na página

Callbacks

Lista de Parâmetros da Integração