# Como fazer checkout pré-populado (preenchido) na Ticto usando Elementor?

## 🔗 Integração com Elementor — Checkout Pré-populado

Você utiliza formulários pré-populados para fazer captura de dados com seu lead? Veja como integrar os dados coletados diretamente no checkout da Ticto utilizando o Elementor.

***

### 🧭 Índice

* [Acessar e configurar o formulário](#acessar-e-configurar-o-formulario)
* [Acessar os campos do formulário](#acessar-os-campos-do-formulario)
* [Visualizar a URL gerada](#visualizar-a-url-gerada)
* [Identificar o ID de cada campo](#identificar-o-id-de-cada-campo)
* [Acessar os dados do campo dinâmico](#acessar-os-dados-do-campo-dinamico)
* [Montar a URL com os parâmetros](#montar-a-url-com-os-parametros)
* [Configurar o Redirect](#configurar-o-redirect)
* [Salvar e testar](#salvar-e-testar)

***

### 🖥️ Acessar e configurar o formulário

Acesse sua página WordPress com o Elementor. No menu, acesse a opção **Edit Form** para definir seu formulário e selecione os campos que deseja coletar — nome, e-mail, telefone, entre outros.

<div data-with-frame="true"><figure><img src="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2FZ12Bb2fXJs7vOD3VZ9wl%2Fimage.png?alt=media&#x26;token=d2beeec6-46f8-4b7f-a747-3bd29babcf07" alt=""><figcaption></figcaption></figure></div>

***

### 📋Acessar os campos do formulário

Com as preferências do formulário definidas, clique em **Form Fields** para acessar os demais campos e em seguida clique em **Redirect** para visualizar os dados gerados até este ponto.

<div data-with-frame="true"><figure><img src="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2FOEIn1Olr0oGV3kQUcvJZ%2Fimage.png?alt=media&#x26;token=a6ad35b7-dd76-406c-8d9f-4f0f6d48b362" alt=""><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2FH0xls0Qbr0RR2HNG2iZY%2Fimage.png?alt=media&#x26;token=96934b4b-940a-41a2-aa9c-a40e52b79fbc" alt=""><figcaption></figcaption></figure></div>

***

### 🔗 Visualizar a URL gerada

Copie o código do campo **Redirect** e cole no navegador para observar como cada campo aparece na URL — `name`, `email`, `phonenumber` etc.\
\
**Composição da url :** \
\ <mark style="color:blue;">**<https://checkout.ticto.app/>**</mark><mark style="color:$success;">**O9F4CAC63**</mark>**&#x20;**<mark style="color:blue;">**:**</mark> Link do checkout ticto associada ao produto.\ <mark style="color:orange;">**?name=**</mark><mark style="color:orange;">**\[field id="nome do campo"]:**</mark> Nome do campo do formulário no Elementor.\
\
Exemplo: <mark style="color:blue;">**<https://checkout.ticto.app/>**</mark><mark style="color:$success;">**O9F4CAC6A**</mark><mark style="color:orange;">**?name=**</mark><mark style="color:orange;">**\[field id="nome do campo"]**</mark><mark style="color:purple;">**&**</mark><mark style="color:$primary;">**email=**</mark><mark style="color:$primary;">**\[field id="email"]**</mark><mark style="color:purple;">**&**</mark><mark style="color:yellow;">**phonenumber**</mark><mark style="color:yellow;">**=**</mark><mark style="color:yellow;">**\[field id="nome do campo"]**</mark><br>

<div data-with-frame="true"><figure><img src="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2FrHcX0HRRCiwuuG42fCru%2Fimage.png?alt=media&#x26;token=85bcf679-947f-4f88-9804-ccd957ed2232" alt=""><figcaption></figcaption></figure></div>

***

### 🔑 Identificar o ID de cada campo

Clique em **Form Fields** e selecione o campo que deseja editar — por exemplo: **name / nome**.

<div data-with-frame="true"><figure><img src="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2F2U9uwThB6dHXAjm7HLpA%2Fimage.png?alt=media&#x26;token=677d03fe-ec62-4747-acb6-e9c46b4e75e8" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
**Padrão do Elementor para IDs de campo:**

```
[field id="nome do campo"]
```

Todos os campos que você for configurar para o checkout precisam seguir exatamente esse padrão.&#x20;
{% endhint %}

***

### ⚙️Acessar os dados do campo dinâmico

Com o campo selecionado, clique no botão **Advanced**. Uma aba será aberta com os dados do campo dinâmico.

Repita esse processo para cada campo que deseja configurar — e-mail, telefone etc.

<div data-with-frame="true"><figure><img src="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2FDTLivvhSiYFR3MIEMUuJ%2Fimage.png?alt=media&#x26;token=744e86be-fdef-4373-8449-925d90ac10c4" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
O mesmo ocorre clicando nos outros campos para edição, por exemplo: e-mail, telefone, etc.
{% endhint %}

***

### 🛠️ Montar a URL com os parâmetros

Copie os dados exibidos na aba **Advanced** e cole na URL no local correto, seguindo o padrão do Elementor.

<div data-with-frame="true"><figure><img src="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2F5hP5IIMjW784S1zool6m%2Fimage.png?alt=media&#x26;token=48904e30-2c3d-454e-aabe-88cbaac511f9" alt=""><figcaption></figcaption></figure></div>

***

### 📌Configurar o Redirect

Com a estrutura completa da URL montada e revisada, volte à aba **Redirect** e cole tudo no campo **Redirect To**.

<div data-with-frame="true"><figure><img src="https://3610983464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWIfc9hpnMPQKmkeC8kA%2Fuploads%2FxJGFb9QGcaq6GEZNAzHf%2Fimage.png?alt=media&#x26;token=479c90a2-63dc-42ac-8402-5ad353f39e65" alt=""><figcaption></figcaption></figure></div>

***

### ✅Salvar e testar

Salve as alterações (**Update**), acesse sua página de vendas e realize um teste para verificar se os dados estão sendo preenchidos automaticamente no checkout.

***

### 🗂️ Principais parâmetros do checkout Ticto

| Campo          | Parâmetro                  |
| -------------- | -------------------------- |
| **Nome**       | `name=nomedocomprador`     |
| **E-mail**     | `email=emaildocomprador`   |
| **CPF / CNPJ** | `doc=documentodocomprador` |
| **Telefone**   | `phonenumber=ddd+numero`   |
| **CEP**        | `zip=cepdocomprador`       |

{% hint style="info" %}
Para consultar a documentação completa de parâmetros da Ticto, acesse: 🔗 [webhook.ticto.dev](https://webhook.ticto.dev/)&#x20;
{% endhint %}

***

### 🎥 Quer ver mais detalhes?

Acesse o vídeo abaixo com mais dicas para otimizar o seu checkout utilizando o Elementor:

{% embed url="<https://www.youtube.com/watch?v=nT7ZnDe8Qwo>" %}