> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nemu.com.br/llms.txt
> Use this file to discover all available pages before exploring further.
# Framer
> Como conectar a Framer ao Dashboard da Nemu
## Script de passagem de UTMs
### Quando usar
Caso você tenha uma página de vendas dedicada, é necessário instalar o script de passagem de UTMs na página de checkout da Framer.
### Por que é importante
O script de passagem de UTMs desempenha um papel crucial ao transferir as informações das UTMs de uma página para outra dentro do seu funil de vendas, garantindo que esses dados sejam rastreados até o momento do checkout.
```js Script de passagem de UTMs theme={null}
```
### Como instalar
1. Acesse as configurações da sua página na Framer
2. Na seção **Custom Code**, adicione o [script de passagem de UTMs](#script-de-passagem-de-utms) e o [Pixel da Nemu](/pages/onboarding/configurando-pixel) (gerado no
[passo 4 do onboarding](/pages/onboarding/configurando-pixel#4-clique-no-bot%C3%A3o-para-copiar-o-script-gerado))
3. Clique em **Save** para salvar as alterações.
Se a sua página conter formulários antes de ir para o checkout, é necessário instalar o script de passagem de UTMs no formulário para que as UTMs sejam capturadas.
## Código de passagem de UTMs no formulário da Framer
1. Na menu lateral, em **Code** clique no botão **+** e escolha **New Code File**
2. No campo **Name**, digite **NemuHotmartForm**, escolha a opção **Override** e clique em **Create**
3. Cole o código abaixo no arquivo criado:
Substitua a URL do checkout pela URL do checkout da sua oferta e os campos do formulário pelos campos do seu formulário.
Para verificar os nomes dos campos do formulário, acesse o popup do seu projeto e clique em cima do campo que deseja verificar o nome.
```jsx theme={null}
import { Override } from "framer"
export function NemuHotmartForm(): Override {
return {
onClick: async () => {
const waitForForm = () =>
new Promise((resolve) => {
const start = Date.now()
const interval = setInterval(() => {
const form = document.querySelector("form")
if (form) {
clearInterval(interval)
resolve(form)
} else if (Date.now() - start > 2000) {
clearInterval(interval)
resolve(null)
}
}, 50)
})
const form = await waitForForm()
if (!form) return
const params =
window.trackingNemu?.nemuUtms ||
new URLSearchParams(window.location.search)
const fields = [
"src",
"sck",
"utm_source",
"utm_medium",
"utm_campaign",
"utm_content",
"utm_term",
"nemu_source",
"nemu_medium",
"nemu_campaign",
"nemu_content",
"nemu_adset",
"nemu_term",
// Adicionar os campos do formulário
"name",
"email",
"phone",
]
fields.forEach((field) => {
let input = form.querySelector(
`input[name='${field}']`
)
if (!input) {
input = document.createElement("input")
input.type = "hidden"
input.name = field
form.appendChild(input)
}
const val = params.get(field)
if (val) input.value = val
})
const getValue = (name: string) =>
form.querySelector(`input[name='${name}']`)
?.value || ""
// Substituir pela URL do checkout da sua oferta
const checkoutURL = "https://pay.hotmart.com/999999999?off=999999999&checkoutMode=10"
const url = `${checkoutURL}&name=${encodeURIComponent(getValue("name"))}&email=${encodeURIComponent(getValue("email"))}&phoneac=${encodeURIComponent(getValue("phoneac"))}&src=${encodeURIComponent(getValue("src"))}&sck=${encodeURIComponent(getValue("sck"))}&utm_source=${encodeURIComponent(getValue("utm_source"))}&utm_medium=${encodeURIComponent(getValue("utm_medium"))}&utm_campaign=${encodeURIComponent(getValue("utm_campaign"))}&utm_content=${encodeURIComponent(getValue("utm_content"))}&utm_term=${encodeURIComponent(getValue("utm_term"))}`
window.location.href = url
},
}
}
```
4. No botão do seu formulário, selecione o componente em **CodeOverride** e escolha **NemuHotmartForm**
5. Clique em **Publish** e depois **Update** para visualizar as alterações.
