ENTRE EM CONTATO
artigo de ajuda_

Como integrar um formulário do Contact Form 7 com Bitrix24?

Neste passo-a-passo, vamos ver como configurar uma integração para que dados preenchidos em um formulário do Contact Form 7 em seu site WordPress sejam enviados automaticamente para o Bitrix24, um popular CRM.

Para isso, vamos usar o plugin CF7 to Webhook do brasileiro Mário Valney. A vantagem desse plugin é que ele nos dá mais controle sobre exatamente como nós vamos enviar os dados para o webhook. Além de poder enviar para diversos webhooks (ou sistemas) diferentes.

Documentação útil

Então vamos ao passo a passo:

Etapa 1) Obter o webhook no Bitrix24

1. Acesse o Bitrix24

2. No menu lateral, vá em “Aplicativos” > “Recursos para desenvolvedores”

3. Clique em “Importe e exporte dados” e depois “Importe clientes”

4. Preencha da seguinte forma:

  • Nome: Integração com formulários de sites
  • Método: crm.lead.add
  • Atribuir permissões: CRM (crm)
  • Copie o conteúdo do campo “URL”, usaremos essa informação a seguir.
  • Clique em SALVAR

Etapa 2) Configurar o CF7 to Webhook

1. Instale e ative os plugins Contact Form 7 e CF7 to Webhook em seu site.

2. Crie um formulário de contato com o Contact Form 7 normalmente. Você vai notar que aparecerá uma nova aba nas configurações do formulário chamada “Webhook”.

3. Configure essa aba da seguinte forma (itens não mencionados ficam em branco):

  • Webhook
    • Integrar (Enviar para o Webhook): Ative esta opção para que o conteúdo do formulário seja enviado para o RD Station
    • URL do Webhook: Você deve inserir o URL copiado na etapa 1 com /crm.lead.add.json adicionado no final. Deve ficar parecido com isso: https://[empresa].bitrix24.com.br/rest/[id-usuario]/[senha]/crm.lead.add.json.
  • Configurações
    • Enviar E-mail (Enviar o e-mail do CF7 normalmente): Desative se você quiser que o CF7 não envie mais o e-mail, apenas o webhook. Recomendo deixar essa opção ativada.
  • Configurações avançadas:
    • Cabeçalhos: você deve adicionar o seguinte conteúdo:
      • accept: application/json
        content-type: application/json
  • Clique em Salvar

Etapa 3) Configurar o corpo da requisição

Para que o CF7 to Webhook envie o conteúdo do jeito que o CRM espera receber, além das configurações básicas acima, vamos precisar editar mais um campo na aba “Webhook”: Configurações Avançadas > Corpo.

Você pode adicionar um corpo personalizado parecido com esse:

{
  "fields": {
    "TITLE": "Lead do site - [your-name]", // Título do lead
    "NAME": "[your-name]", // Nome do lead
    "PHONE": [
      {
        "VALUE": "[telefone]" // Telefone do lead
      }
    ],
    "EMAIL": [
      {
        "VALUE": "[your-email]" // E-mail do lead
      }
    ],
    "SOURCE_ID": "Web", // Origem do lead, não alterar
    "SOURCE_DESCRIPTION": "[_post_url]", // Descrição da origem do lead
    "ADDRESS": "[endereco], [numero], [bairro]",  // Endereço do lead
    "ADDRESS_CITY": "[cidade]", // Cidade do lead
    "ADDRESS_PROVINCE": "[estado]", // Estado do lead
    "ADDRESS_COUNTRY": "[pais]", // País do lead
    "ADDRESS_POSTAL_CODE": "[cep]", // CEP do lead
    "BIRTHDATE": "[aniversario]",  // Aniversário do lead
    "UTM_CAMPAIGN": "[utm_campaign]",
    "UTM_CONTENT": "[utm_content]",
    "UTM_MEDIUM": "[utm_medium]",
    "UTM_SOURCE": "[utm_source]",
    "UTM_TERM": "[utm_term]",
    "UF_CRM_123": "Campo personalizado"  // Campo personalizado
  }
}

Para entender o código acima, cada item está marcado entre aspas e, depois dos dois pontos, vem o conteúdo do item, nessa lógica:

"item": "conteúdo do item",

Você pode alterar o conteúdo de cada item com os shortcodes do CF7, como [your-name] e [your-email].

Além disso, você também pode usar tags especiais nativas do CF7 para metadados do formulário como nome da página ou horário. Nesse caso, você deve incluir as tags também no campo “Special Mail Tags” da aba “Webhook”.

Se quiser saber mais sobre os itens que podem ser incluídos na requisição, aqui tem um detalhamento dos parâmetros aceitos pelo CRM.

Além disso, é possível adicionar campos personalizados (UF_CRM_XXX). Para saber mais sobre campos personalizados e como identificar os campos já criados, você pode usar este tutorial. Dica: o código do campo está no URL quando você edita o campo.

Observe que, dentro do Bitrix24, os dados de contatos são chamados de Leads.

Quando terminar, clique em Salvar.

Campos personalizados com opções pré-definidas

No caso de campos personalizados (UF_CRM_XXX) com opções pré-definidas, como menus suspensos, por exemplo, você precisa enviar para o CRM o ID da opção e não seu valor.

Por exemplo, se o campo personalizado UF_CRM_123 for referente ao “Signo” do lead, ao invés de enviar "UF_CRM_123": "Touro", você deve enviar o ID da opção “Touro” no sistema, fica algo assim: "UF_CRM_123": "987".

Se o campo também permitir múltipla-escolha (isMultiple: true), ou seja, se ele aceitar mais de uma opção para o mesmo campo, você deve enviar as opções entre colchetes, assim: "UF_CRM_123": [357] ou "UF_CRM_123": [357, 468].

Para descobrir o ID do campo, você pode fazer o seguinte. No seu navegador, você pode acessar o URL copiado na etapa 1 com /crm.lead.fields adicionado no final. Deve ficar parecido com isso: https://[empresa].bitrix24.com.br/rest/[id-usuario]/[senha]/crm.lead.fields. Vai abrir uma página com vários dados brutos em JSON. Usando o CTRL + F, tente localizar o id do campo (UF_CRM_XXX). A informação deve estar assim:

{
   "UF_CRM_123": {
      "type": "enumeration",
      "isRequired": false,
      "isReadOnly": false,
      "isImmutable": false,
      "isMultiple": true,
      "isDynamic": true,
      "items": [
         { "ID": "12301", "VALUE": "Opção 1" },
         { "ID": "12302", "VALUE": "Opção 2" },
         { "ID": "12303", "VALUE": "Opção 3" }
      ]
   }
}

Aqui você pode checar mais informações sobre os dados obtidos dessa forma.

Etapa bônus: rastrear os parâmetros de campanha da página

O Google utiliza parâmetros de URL chamados UTMs que ajudam a adicionar algumas informações sobre a origem de um lead e rastrear a eficácia de campanhas de marketing. Clique aqui se quiser saber mais.

Para coletar esses dados no formulário, você deve instalar e ativar o plugin Contact Form 7 – Dynamic Text Extension e depois é só adicionar os seguintes campos ocultos ao seu formulário:

[hidden utm_id default:get]
[hidden utm_source default:get]
[hidden utm_medium default:get]
[hidden utm_campaign default:get]
[hidden utm_term default:get]
[hidden utm_content default:get]

Além disso, não se esqueça de incluir os campos no corpo da requisição (veja etapa 3).

Teste

Se quiser testar o funcionamento do JSON enviado pelo webhook, você pode usar esta ferramenta.

Ainda tem dúvidas?

Entre em contato para eu poder te ajudar!

WhatsAppE-mail