Incorporar em sites
Coloque seu projeto 3D interativo dentro de qualquer site que aceite iframes.
O que é incorporar?
Incorporar coloca seu projeto do i3Dify dentro de outro site. Os visitantes usam o projeto sem sair da página.
- Seu projeto aparece dentro do layout da página
- Os visitantes podem arrastar, dar zoom e clicar, como na página do próprio projeto
- Sem nova aba nem pop-up
- Funciona em qualquer site que aceite iframes
Como pegar o código de incorporação
- Abra seu projeto no editor
- Vá até a aba Compartilhar
- Deixe a visibilidade como Não listado ou Público e salve o projeto
- Abra a seção Código de incorporação
- Clique em Copiar código de incorporação
- Cole o código no seu site
Entendendo o código
O código copiado é assim:
<iframe src="https://i3dify.com/view/your-project-id" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
src: O endereço do seu projeto
width: A largura da incorporação, em pixels ou porcentagem
height: A altura, em pixels
frameborder: Remove a borda padrão do iframe
allowfullscreen: Permite que os visitantes abram em tela cheia
Ajustando o tamanho
Mude o tamanho para caber no seu site:
Largura total
Com width="100%" a incorporação ocupa todo o contêiner:
<iframe src="..." width="100%" height="600" frameborder="0" allowfullscreen></iframe>
Tamanho fixo
Use valores em pixels para um tamanho exato:
<iframe src="..." width="800" height="600" frameborder="0" allowfullscreen></iframe>
Manter uma proporção
Para manter uma proporção como 16:9 em qualquer largura, coloque o iframe dentro de um contêiner:
<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe
src="..."
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
allowfullscreen
></iframe>
</div>Guias por plataforma
WordPress
- Edite sua página ou post
- Adicione um bloco HTML personalizado
- Cole o código de incorporação
- Visualize e publique
Wix
- Abra o editor
- Clique em Adicionar (+), depois Incorporar, depois Incorporações personalizadas, depois Incorporar um widget
- Cole o código de incorporação
- Ajuste o tamanho se precisar
Squarespace
- Edite sua página
- Adicione um bloco de código
- Cole o código de incorporação
- Salve e visualize
Shopify
- Vá em Loja virtual, depois Páginas
- Edite sua página e mude para a visualização HTML
- Cole o código de incorporação
- Salve
Webflow
- Adicione um elemento Embed
- Cole o código de incorporação
- Ajuste o tamanho nas configurações do elemento
- Publique
Notion
- Digite /embed na sua página
- Cole o link do projeto, não o código completo do iframe
- Ajuste o tamanho do bloco se precisar
Incorporar uma peça do Studio
Uma peça do Studio compartilhada como Não listada ou Pública é incorporada do mesmo jeito: copie o link dela, que começa com /studio/, e use como src do iframe.
Resolução de problemas
A incorporação não carrega
- Confira se a visibilidade está como Não listado ou Público e se você salvou o projeto
- Confira se o endereço do projeto está certo
- Verifique se o seu site permite iframes de outros sites
Tamanho errado
- Mude os valores de largura e altura no código
- Use CSS para dimensionar o contêiner
- Teste o contêiner que mantém a proporção
A plataforma bloqueia iframes
- Algumas plataformas limitam incorporações externas
- Consulte a documentação da sua plataforma
- Compartilhe o link em vez de incorporar
A marca do i3Dify no plano Grátis
No plano Grátis, um projeto incorporado mostra a marca "Feito com i3Dify" e uma barra fina na parte de baixo. Pro e Business removem as duas.
No celular
Uma incorporação pode ficar diferente numa tela pequena. Teste em alguns tamanhos antes de publicar.