O Syncro usa um SDK JavaScript pra embedar formulários direto no DOM do seu site, sem iframe. Vantagem: form fica com a fonte e tamanho do site (não fica "estranho" como iframe), responde a media queries do CSS do host, e zero "chrome" do Syncro (nada de logo nosso, rodapé "Powered by", etc).
Esse artigo cobre os 3 modos de embed: link hospedado, inline e popup.
Pré-requisitos
- Formulário criado e ativo. Veja Criar formulário.
- Campos cadastrados no builder.
- Acesso pra editar HTML do seu site (qualquer plataforma: WordPress, Wix, Webflow, custom HTML).
Acessar Distribuição
- Vá em
/formularios/{form}/editar. - Sidebar → aba Distribuição.
- Página mostra 3 blocos de embed.
Modo 1 — Link hospedado
Quando usar
- Compartilhar link em redes sociais (Instagram bio, WhatsApp, e-mail).
- QR code em material impresso.
- Página standalone que não vai dentro de outro site.
Como copiar
- Aba Distribuição.
- Bloco Link público mostra:
https://app.syncro.chat/f/cadastro-newsletter-aB3xK9pQ2m
- Botão Copiar copia pra clipboard.
Funcionamento
Esse link abre uma página standalone hospedada pelo Syncro (/f/{slug}):
- Renderização completa do form (clássico/conversacional/multistep — todos funcionam).
- Mostra com o layout escolhido (esquerda/centro/direita).
- Background image se você habilitou.
- Logo se você habilitou.
- Mensagem de confirmação ou redirect ao enviar.
Limitações
- ❌ Roda em domínio Syncro —
app.syncro.chat. Se você quer domínio próprio (ex:formularios.minhamarca.com), precisa usar embed inline/popup no seu site. - ❌ User vê URL Syncro na barra do browser.
Modo 2 — Embed inline
Quando usar
- Form dentro do conteúdo do site (lado do "Sobre nós", em landing page, etc).
- Form que fica visível desde o load, sem trigger.
- Substituir form caseiro do site por algo que vira lead direto no CRM.
Como copiar
- Aba Distribuição → bloco Embed no site (inline):
<script src="https://app.syncro.chat/api/form/cadastro-newsletter-aB3xK9pQ2m.js"
data-mode="inline"
async></script>
- Botão Copiar.
Como instalar no site
Cole o <script> exatamente onde você quer o form aparecer no HTML.
Em sites HTML / Webflow / custom:
<section>
<h2>Cadastre-se</h2>
<p>Receba nossas atualizações.</p>
<!-- Cole aqui -->
<script src="https://app.syncro.chat/api/form/cadastro-newsletter-aB3xK9pQ2m.js"
data-mode="inline"
async></script>
</section>
WordPress:
- Via bloco HTML personalizado (Gutenberg) → cole o script.
- Via plugin Insert Headers and Footers → não funciona (precisa estar no body, não no head).
- Via tema → adicione o
<script>direto no template.phpda página.
Wix:
- Modo Editor X → componente HTML embed → cole o script.
Funcionamento técnico
- Browser carrega o
<script>async. - SDK faz
fetch('/api/form/{slug}/config.json')pra pegar config sanitizada (cores, campos, validação, URL de submit). - SDK injeta CSS scoped no
<head>com seletor#syncro-form-{ID}(não vaza pro resto do site). - SDK renderiza form nativo (HTML puro) onde o
<script>está. - User preenche e envia → POST direto pra API Syncro → lead criado.
Vantagens vs iframe
| Aspecto | SDK nativo (Syncro) | Iframe (concorrentes) |
|---|---|---|
| Fonte | Herda do site | Quebrada (não herda) |
| Largura | Responsiva (% do site) | Fixa (pixels) |
| Ajuste mobile | Automático | Precisa mexer manualmente |
| SEO | Conta no site | Conteúdo "invisível" pro crawler |
| Console / debug | Erros aparecem normais | Cross-origin oculto |
Limitações
⚠️ Atenção: SDK suporta só
type=classic. Conversacional e multistep só via link hospedado.
- ❌ Sites com CSP estrito (Content Security Policy) podem bloquear o script. Adicione
app.syncro.chatna whitelist.
Modo 3 — Popup widget
Veja Popup com trigger e exit-intent pra detalhes completos.
Resumo: cole 1 <script> em qualquer página → aparece como popup (modal central, canto inferior direito ou esquerdo). Triggers: imediatamente, após X segundos, após scroll de Y%, ou exit-intent.
<script src="https://app.syncro.chat/api/form/contato-aB3xK9pQ2m.js"
data-mode="popup"
data-trigger="time"
data-delay="5"
async></script>
Atributos data-* (config inline)
Você customiza o comportamento via atributos no <script>:
| Atributo | Valores | Default | Descrição |
|---|---|---|---|
data-mode |
inline / popup |
inline |
Modo de renderização |
data-trigger |
immediate / time / scroll / exit |
immediate |
(popup) Quando aparecer |
data-delay |
número (segundos) | 5 |
(trigger=time) Delay |
data-scroll |
número (% da página) | 50 |
(trigger=scroll) Scroll mínimo |
data-show-once |
true / false |
true |
(popup) Lembrar via localStorage |
data-position |
center / bottom-right / bottom-left |
center |
(popup) Posição na tela |
Ver data-* específicos em Popup com trigger e exit-intent.
CSS scoped (não vaza)
Quando o SDK carrega, ele injeta <style id="syncro-form-styles-{ID}"> no head com seletor:
#syncro-form-{ID} { /* só afeta o form do Syncro */ }
#syncro-form-{ID} input {... }
#syncro-form-{ID} button {... }
Resultado: estilos do site não afetam o form nativo (vice-versa).
💡 Dica: se quiser sobrescrever cores do form via CSS do seu site, use
!importantnos seletores#syncro-form-{ID}(use com moderação).
Tracking de visualizações
Cada vez que o SDK carrega no site, ele envia POST /api/form/{slug}/track-view com mode=inline ou mode=popup. Sistema incrementa:
views_count— total geral.views_count_inline— só inline.views_count_popup— só popup.views_count_hosted— só link.
Anti-double-count: SDK usa sessionStorage (syncro_form_viewed_{ID}_{mode}) — 1 view por sessão por modo.
Veja Ver envios pra ver KPIs de conversão.
Captura automática de UTM
Se a página onde o <script> está tem UTM params na URL (ex: ?utm_source=instagram&utm_campaign=blackfriday), o SDK captura automaticamente e passa pro lead criado:
utm_source→lead.utm_sourceutm_medium→lead.utm_mediumutm_campaign→lead.utm_campaignutm_term→lead.utm_termutm_content→lead.utm_contentfbclid→lead.fbclidgclid→lead.gclid
Não precisa configurar nada — funciona automaticamente.
CORS
Todas rotas /api/form/* retornam:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Accept, X-Requested-With
Funciona em qualquer domínio — não precisa whitelist no painel Syncro.
Sanitização do config.json
A rota /api/form/{slug}/config.json retorna só dados públicos:
| Exposto | Não exposto (segurança) |
|---|---|
| Cores (brand, bg, button…) | mappings (campo → lead) |
| Campos + labels | notify_emails (e-mails internos) |
| Lógica condicional | assigned_user_id |
| Confirmation type/value | pipeline_id / stage_id |
| Phone config | sequence_id / list_id |
| URL de submit | logo_url do CRM |
| Labels do botão (Enviar) | qualquer campo interno |
Ou seja: alguém que inspecione o JSON do seu site não descobre seu funil interno, e-mails, automações.
Rate limit
- POST
/api/form/{slug}/submit: 30 envios/min por IP. Mais que isso → 429. - POST
/api/form/{slug}/track-view: 120 views/min por IP.
Bots de spam massivo são bloqueados automaticamente.
Honeypot
Cada <form> renderizado pelo SDK tem campo invisível _website_url. Se chegar preenchido no servidor → bloqueia silenciosamente como spam.
User humano normal não vê o campo (off-screen via CSS), mas bot automático preenche.
Erros comuns
"Form não aparece no meu site"
- Verifique console do browser (F12). Se erro CSP → ajustar política do site.
- Confira se o
<script>está no body (não só no<head>). - Confira se o slug está correto na URL do script.
- Confira se o form está ativo (toggle em Avançado).
"Form aparece mas com fonte estranha"
CSS do site herdado não bate. Pra forçar fonte do form, vá em Cores e selecione fonte específica.
"Submit retorna erro 429"
Rate limit hit. Espere 1 minuto. Se persistir, contate suporte.
"Submit retorna erro 422 'Spam detected'"
Honeypot pegou. Se você é humano, é bug — algo estranho com browser/extensão. Tente em outro browser.
"UTMs não aparecem nos leads"
- Confira se a URL da página tem
?utm_source=...etc. - UTMs são capturadas só na página do form, não em páginas anteriores. Se user veio com UTMs e navegou pra outra página antes do form, UTMs perdidas.
Próximos passos
- Pra adicionar popup com trigger, veja Popup com trigger e exit-intent.
- Pra customizar visual, veja Personalizar cores e logo.
- Pra ver envios e KPIs, veja Ver envios.