Como Usar HTML, Inline HTML, Iframe e Scripts Personalizados no Builderall Builder

Visão Geral #

O Builderall Builder permite expandir significativamente as possibilidades de personalização através de três recursos principais:

  • Iframe
  • Inline HTML
  • Scripts Personalizados

Embora todos trabalhem com código, cada um possui uma finalidade específica.

Entender quando utilizar cada recurso evita erros, melhora a performance da página e permite criar experiências muito mais avançadas.

Ao final deste guia você saberá:

✅ Quando usar Iframe

✅ Quando usar Inline HTML

✅ Quando usar Scripts Personalizados

✅ Como incorporar conteúdos externos

✅ Como criar elementos personalizados

✅ Como utilizar CSS

✅ Como utilizar JavaScript

✅ Como criar calculadoras

✅ Como incorporar sistemas externos

✅ Como integrar ferramentas de terceiros

✅ Como solucionar os erros mais comuns

Antes de Começar #

Regra Simples #

Se você lembrar apenas desta tabela, já saberá qual recurso utilizar na maioria dos casos.

ObjetivoRecurso
Exibir conteúdo externoIframe
Criar conteúdo personalizadoInline HTML
Executar código na página inteiraScripts Personalizados
Aplicar estilos personalizadosCSS
Criar interações e automaçõesJavaScript

O que é um Iframe? #

Iframe significa:

Inline Frame

Ou simplesmente:

Quadro incorporado

Ele funciona como uma janela dentro da sua página.

Essa janela pode exibir conteúdos hospedados em outro local.

Exemplos de uso do Iframe #

Vídeos #

  • YouTube
  • Vimeo
  • Wistia

Mapas #

  • Google Maps

Formulários #

  • Google Forms
  • Typeform
  • Jotform

Agendas #

  • Calendly
  • Google Calendar

Documentos #

  • PDFs
  • Google Docs
  • Google Slides

Sistemas externos #

  • Dashboards
  • CRMs
  • Ferramentas SaaS

Como adicionar um Iframe #

  • Abra sua página no Builderall Builder
  • Clique em Adicionar
  • Acesse Elementos
  • Arraste o elemento Iframe para a página

Configurações do Iframe #

Largura Completa #

Faz o elemento ocupar toda a largura disponível.

Ideal para:

  • mapas
  • vídeos
  • dashboards
  • calendários

Incorporar URL #

Utilize quando você possui apenas um link.

Exemplo:

https://calendly.com/meuusuario

O Builder carregará esse conteúdo dentro do Iframe.

HTML Embutido #

Permite inserir diretamente o código HTML fornecido por uma ferramenta externa.

Exemplo:

<iframe
src="https://www.youtube.com/embed/VIDEO_ID">
</iframe>

Incorporar Documento #

Utilizado para:

  • PDFs
  • Google Docs
  • Apresentações
  • Arquivos compartilhados

Tamanho #

Permite ajustar:

  • largura
  • altura

Caso o conteúdo esteja cortado, aumente a altura.

Altura mínima #

Impede que o conteúdo fique pequeno ou grande demais em dispositivos móveis.

Borda #

Permite definir:

  • espessura
  • cor
  • estilo

Raio #

Permite arredondar os cantos.

Exemplo:

0px

Sem arredondamento.

15px

Cantos arredondados.

Animações #

Permite aplicar efeitos visuais ao elemento.

Exemplos:

  • fade
  • slide
  • bounce
  • pulse

Exemplo Prático: Incorporando um vídeo do YouTube #

No YouTube:

Compartilhar
↓
Incorporar

Copie o código fornecido.

Cole em:

Iframe
↓
HTML Embutido

Resultado:

Vídeo reproduzível diretamente na página.

Exemplo Prático: Incorporando um Google Maps #

Google Maps:

Compartilhar
↓
Incorporar Mapa

Copie o código.

Cole no Iframe.

Resultado:

Mapa totalmente interativo dentro da página.

O que é Inline HTML? #

O Inline HTML permite criar conteúdo diretamente dentro da página.

Diferente do Iframe, ele não carrega algo externo.

O conteúdo passa a fazer parte da própria página.

Quando utilizar Inline HTML? #

Utilize quando quiser criar:

  • cards
  • tabelas
  • botões personalizados
  • caixas informativas
  • calculadoras
  • simuladores
  • widgets
  • barras de progresso
  • componentes personalizados

Exemplo Simples #

<h2>Bem-vindo</h2>

<p>Este conteúdo foi criado com Inline HTML.</p>

Exemplo: Botão Personalizado #

<a href="https://seudominio.com"
style="
background:#3141D3;
color:white;
padding:15px 25px;
border-radius:10px;
text-decoration:none;">
Comprar Agora
</a>

Exemplo: Caixa de Destaque #

<div style="
background:#FFF4CC;
padding:20px;
border-left:5px solid orange;
">

⚠️ Oferta válida até hoje.

</div>

Exemplo: Tabela #

<table border="1">

<tr>
<th>Plano</th>
<th>Preço</th>
</tr>

<tr>
<td>Essentials</td>
<td>R$116</td>
</tr>

<tr>
<td>Advanced</td>
<td>R$240</td>
</tr>

</table>

Utilizando CSS #

Você pode aplicar estilos personalizados diretamente no Inline HTML.

Exemplo:

<style>

.minha-caixa{

background:#3141D3;
color:white;
padding:20px;
border-radius:12px;

}

</style>

<div class="minha-caixa">

Olá Mundo

</div>

Exemplo Premium: Animação Pulse #

Este exemplo cria um bloco centralizado com animação contínua.

(Utilize o código validado da versão premium que desenvolvemos.)

Resultado:

  • responsivo
  • centralizado
  • visual moderno
  • compatível com desktop e mobile

Criando Calculadoras #

O Inline HTML permite criar calculadoras totalmente funcionais.

Calculadora Matemática #

Permite:

  • somar
  • subtrair
  • multiplicar
  • dividir

Recursos:

  • validação
  • mensagens de erro
  • design responsivo
  • resultado formatado

(Utilize o código premium da Calculadora Inteligente.)

Calculadora de Juros Compostos #

Ideal para:

  • vendas
  • finanças
  • investimentos
  • simuladores

Recursos:

  • cálculo automático
  • exibição do montante
  • exibição dos juros
  • visual premium

(Utilize o código premium do Simulador de Juros Compostos.)

Calculadora de Datas #

Ideal para:

  • contratos
  • vencimentos
  • prazos
  • projetos

Permite:

  • selecionar uma data
  • adicionar dias
  • obter automaticamente a nova data

(Utilize o código premium da Calculadora de Datas.)

O que são Scripts Personalizados? #

Scripts Personalizados executam código na página inteira.

Eles ficam em:

Configurações da Página
↓
Scripts

Quando utilizar Scripts Personalizados? #

Utilize para:

  • Google Analytics
  • Google Tag Manager
  • Meta Pixel
  • Hotjar
  • Clarity
  • Tawk.to
  • JivoChat
  • Crisp
  • Intercom
  • APIs externas
  • automações

Exemplo: Meta Pixel #

<script>

fbq('track','Lead');

</script>

Local correto:

Configurações da Página
↓
Scripts

Exemplo: Google Analytics #

<script async
src="https://www.googletagmanager.com/...">
</script>

Local correto:

Configurações da Página
↓
Scripts

Exemplo: Chatbot #

Ferramentas como:

  • Tawk.to
  • Jivo
  • Crisp
  • Intercom

normalmente fornecem um script.

Esses scripts devem ser adicionados nos Scripts Personalizados.

O verdadeiro poder: Iframe + Inline HTML + Scripts #

Quando utilizados em conjunto, é possível criar:

Nível Básico #

  • vídeos
  • mapas
  • PDFs
  • formulários

Nível Intermediário #

  • calendários
  • dashboards
  • tabelas
  • widgets

Nível Avançado #

  • calculadoras
  • simuladores
  • quizzes
  • dashboards interativos
  • aplicações HTML
  • integrações API
  • sistemas SaaS
  • experiências personalizadas

Limitações Importantes #

Nem todos os sites permitem incorporação.

Alguns serviços bloqueiam Iframes por segurança.

Quando isso acontecer:

✅ O Builder está funcionando corretamente

❌ O bloqueio está sendo realizado pelo serviço externo

Troubleshooting #

O conteúdo não aparece #

Verifique:

  • se a URL está correta
  • se o conteúdo é público
  • se o site permite Iframe
  • se você clicou em Aplicar

O conteúdo está cortado #

Aumente:

Altura

ou

Altura mínima

O vídeo não carrega #

Utilize sempre o código de incorporação oficial fornecido pela plataforma.

O mapa não aparece #

Utilize:

Compartilhar
↓
Incorporar mapa

Não utilize apenas o link da localização.

O HTML não funciona #

Verifique:

  • tags abertas e fechadas corretamente
  • HTML Embutido ativado
  • código copiado integralmente

O JavaScript não executa #

Verifique se o código foi inserido corretamente.

Alguns scripts externos exigem Scripts Personalizados em vez de Inline HTML.

O chatbot não aparece #

Chatbots normalmente devem ser configurados em:

Configurações da Página
↓
Scripts

FAQ #

Posso usar HTML? #

Sim.

Posso usar CSS? #

Sim.

Posso usar JavaScript? #

Sim.

Posso usar APIs? #

Sim.

Posso criar calculadoras? #

Sim.

Posso criar simuladores? #

Sim.

Posso incorporar páginas externas? #

Sim.

Posso incorporar sistemas SaaS? #

Sim, desde que permitam incorporação.

Posso usar Google Maps? #

Sim.

Posso usar YouTube? #

Sim.

Posso usar Vimeo? #

Sim.

Posso usar Calendly? #

Sim.

Posso usar Google Forms? #

Sim.

Posso usar PDFs? #

Sim.

Posso usar Meta Pixel? #

Sim.

Posso usar Google Analytics? #

Sim.

Posso usar Google Tag Manager? #

Sim.

Posso usar Power BI? #

Sim.

Posso usar Looker Studio? #

Sim.

Posso criar widgets próprios? #

Sim.

Ainda precisa de ajuda? #

Se você seguiu os passos deste guia e continua enfrentando dificuldades, entre em contato com o Suporte Técnico através do chat.

Ao abrir o atendimento, informe:

  • URL da página
  • código utilizado
  • serviço que está tentando incorporar
  • resultado esperado
  • capturas de tela do comportamento observado

Essas informações ajudam nossa equipe a identificar a causa do problema com mais rapidez e precisão.

Índice Geral:
Facebook Twitter Instagram

Builderall Copyright 2020 // All Rights Reserved