# Webhooks Integrados - Criando leads através do Elementor Forms

## Entendendo o Form Fields

Ao editar um elemento de formulário, será exibido um mapeamento dos campos. Esses campos serão enviados para o webhook da Sprinthub, com os nomes das etiquetas (labels) utilizados como chaves (keys) no JSON. O webhook gerado pela configuração abaixo terá o seguinte formato:

`{`\
  `"Name": "Enki Sprinthub",`\
  `"Email": "enki@sprinthub",`\
  `"Message": "Olá, gostaria de saber mais sobre a plataforma"`\
`}`

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FE6JCRykUgEHmLKJW67R8%2FScreenshot_4.png?alt=media&#x26;token=ba6a6fcb-8da0-4e8a-865d-4a15c07dbb49" alt=""><figcaption><p><em>Campos do formulário.</em></p></figcaption></figure>

## Mapeando o Webhook dentro da Sprinthub

Um webhook passivo foi criado na Sprinthub para receber os dados enviados por esse formulário externo. O mapeamento do corpo da requisição deve corresponder exatamente ao formato mencionado anteriormente, com nomes idênticos. O método da requisição foi configurado como POST, utilizando o campo 'Email' como identificador do lead. Isso evita a duplicação de leads e permite identificar leads já existentes no sistema.

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FK8d28h1czdsphwWPDSMh%2FScreenshot_5.png?alt=media&#x26;token=5abcccdb-60e8-4e1f-be6c-2efdb21c1632" alt=""><figcaption><p><em>Mapeamento do Webhook.</em></p></figcaption></figure>

## Elementor Forms - Adicionando ação de Webhook

É necessário adicionar a ação 'Webhook' ao formulário na opção 'Actions After Submit'. Isso permitirá inserir o link do webhook configurado na Sprinthub.

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FvfXvgFb2aGXt8nlXYMbw%2FScreenshot_2.png?alt=media&#x26;token=d9699de5-65a6-47f4-a000-9b6d6090e53d" alt=""><figcaption><p><em>Adicionando ação de Webhook.</em></p></figcaption></figure>

## Adicionando o 'Webhook URL' com o *access\_token*.

No campo 'Webhook URL', insira o link do webhook gerado na Sprinthub, disponível no lado esquerdo da página. Em seguida, adicione o `access_token` como um parâmetro de consulta (query param) utilizando o caractere `&`. O link terá o seguinte formato:

```
https://sprinthub-api-master.sprinthub.app/api/hook/criando-leads?i=instancia_demo&access_token=_JYmznRqZj9UKbV5gtMRgPfNKW0_m7va_6MJ8ABzl4ecwguvvD
```

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2Fe5HOTkfP50qO4wLseuZ9%2Fimage.png?alt=media&#x26;token=1a96805d-9522-44c0-9fe4-8698e0b70ff7" alt=""><figcaption><p><em>URL dentro da Sprinthub.</em></p></figcaption></figure>

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2FH5qylH5kAZicDcRIcP1x%2FScreenshot_3.png?alt=media&#x26;token=74361187-015e-4d0f-97d2-8017d14c3124" alt=""><figcaption><p><em>Campo para inserir o URL no Elementor.</em></p></figcaption></figure>

## Configurando Criação Automática de Leads

Por fim, na seção 'Criação Automática de Leads', ative a opção 'Habilitar criação automática?'. Certifique-se de que os campos do lead estejam devidamente mapeados para corresponder aos dados recebidos pelo webhook. Após salvar e fechar, o webhook estará configurado para cadastrar leads diretamente da sua plataforma WordPress com Elementor.

<figure><img src="https://3534414179-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9FzUKkagBNy5uQ7AtGNa%2Fuploads%2F4Tgs1y8vyGfVlokHhkCZ%2Fimage.png?alt=media&#x26;token=a3f8e9b9-dafb-49b3-bb6a-55a299d67f33" alt=""><figcaption><p><em>Aba Criação Automática de Leads.</em></p></figcaption></figure>