Passo 6 — Incorporando o tour em um site

Nesta fase, abordaremos as três questões mais comuns e importantes que surgem após a publicação de um tour.

1. Como incorporar rapidamente um tour virtual em qualquer site

O método mais simples e universal é  incorporação de iframe .

Funciona com quase todos os sites e não requer conhecimentos de programação.

Veremos exemplos usando plataformas CMS populares:  WordPress, Tilda e Bitrix .

Exemplo: WordPress (Gutenberg / Elementor)

1. Copie o código iframe do seu tour da página de publicação do Space Pano.
2. Em seu site, adicione um bloco HTML:
   • em  Gutenberg  — use o bloco  HTML personalizado  ;
   • em  Elementor  — use o widget  HTML  .
3. Cole o código copiado inteiramente no bloco HTML.
4. Salve a página.

Concluído — o tour está incorporado e funcionando.

A mesma abordagem se aplica a  Tilda, Bitrix e qualquer outro CMS que ofereça suporte à inserção de código HTML.

2. Como hospedar um tour em seu próprio site sem assinatura

Esta opção é adequada se você deseja um tour totalmente autônomo que funcione  sem uma assinatura ativa .

⚠️  Importante

Este método  não é adequado para Tilda e construtores de sites semelhantes  que não fornecem acesso a um sistema de arquivos.

Etapas:

1. Baixe o arquivo ZIP  do tour para o seu dispositivo.⚠️ Observação: o tour não será aberto localmente no seu computador.É necessário um ambiente de servidor (localhost) para visualização local.Se você não tem experiência em trabalhar com servidores locais, não recomendamos configurá-lo separadamente, pois está além do escopo do criador do tour.
2. Faça upload do arquivo para sua hospedagem/servidor:
   • por meio de um gerenciador de arquivos como  ISPmanager  ou  cPanel ;
   • ou conectando-se via  FTP .
3. Não carregue o tour no diretório raiz  se sua hospedagem já tiver um site ativo. Caso contrário, o tour substituirá os arquivos do sistema e danificará o site. Abordagem recomendada:
   • crie uma pasta, por exemplo:mysite.com/tour
   • carregue o arquivo nesta pasta;
   • extraia o arquivo.

Após isso o tour estará disponível no endereço correspondente, por exemplo: https://mysite.com/tour

3. Incorporação de um tour via iframe (opção avançada)

Se você hospedar o tour em seu próprio servidor ou precisar de uma incorporação personalizada, poderá usar um código iframe padrão substituindo o link pelo seu próprio.

Exemplo de iframe básico:

width=”100%” — largura do bloco;
height=”600″ — altura do bloco (pode ser ajustada para corresponder ao design do seu site).

a página rola normalmente até o lançamento do tour;
o iframe não captura eventos de rolagem, deslizamento ou roda do mouse;
• o tour é ativado somente após clicar no botão 
Reproduzir  .

• com tours hospedados no
Space Tour ;
• ou com tours hospedados em 
seu próprio servidor .

/* Wrapper: define a área onde o tour será exibido */ .espaço-pano { posição: relativa; largura: 100%; altura: 600px; /* Você pode alterar a altura, por exemplo. 500px ou 80vh */ estouro: oculto; } /* Faz com que o iframe preencha todo o wrapper */ .espaço-pano iframe { largura: 100%; altura: 100%; borda: 0; /* Ponto chave: Enquanto o tour não é iniciado, o iframe NÃO captura cliques/rolagem então a página rola normalmente */ eventos de ponteiro: nenhum; } /* Sobreposição (poster + botão Play) */ .espaço-pano__overlay { posição: absoluta; inserção: 0; exibição: flexível; alinhar itens: centro; justificar-conteúdo: centro; estouro: oculto; transição: opacidade 0,25s facilidade, visibilidade 0,25s facilidade; } /* Imagem do pôster */ .espaço-pano__overlay-img { posição: absoluta; inserção: 0; largura: 100%; altura: 100%; ajuste ao objeto: capa; } /* Botão Play no topo do pôster */ .espaço-pano__play { posição: relativa; índice z: 2; fundo: transparente; fronteira: nenhuma; preenchimento: 0; cursor: ponteiro; } /* Ocultar a sobreposição após iniciar */ .space-pano__overlay.is-hidden { opacidade: 0; visibilidade: oculta; eventos de ponteiro: nenhum; }

// Inicia o tour quando o usuário clica no botão Play: // 1) tornar o iframe clicável (habilitar eventos de ponteiro) // 2) remova a sobreposição do pôster document.addEventListener(‘clique’, função (evento) { const btn = event.target.closest(‘.space-pano__play’); se (!btn) retornar;const wrapper = btn.closest(‘.space-pano’); if (!wrapper) retornar; const iframe = wrapper.querySelector(‘iframe’); sobreposição const = wrapper.querySelector(‘.space-pano__overlay’); if (iframe) iframe.style.pointerEvents = ‘auto’; if (sobreposição) { overlay.classList.add(‘está oculto’); setTimeout(função(){ overlay.remove(); }, 300); } }); // Se o pôster estiver faltando ou não carregar, remova a imagem para que ela não bloqueie a UI document.addEventListener(‘DOMContentLoaded’, function() { document.querySelectorAll(‘.space-pano__overlay-img’).forEach(function (img) { const src = img.getAttribute(‘src’); se (!src){ img.remove(); retornar; } img.addEventListener(‘erro’, função() { img.remove(); }); }); });

/* Wrapper: define a área onde o tour será exibido */ .espaço-pano { posição: relativa; largura: 100%; altura: 600px; /* Você pode alterar a altura, por exemplo. 500px ou 80vh */ estouro: oculto; } /* Faz com que o iframe preencha todo o wrapper */ .espaço-pano iframe { largura: 100%; altura: 100%; borda: 0; /* Ponto chave: Enquanto o tour não é iniciado, o iframe NÃO captura cliques/rolagem então a página rola normalmente */ eventos de ponteiro: nenhum; } /* Sobreposição (poster + botão Play) */ .espaço-pano__overlay { posição: absoluta; inserção: 0; exibição: flexível; alinhar itens: centro; justificar-conteúdo: centro; estouro: oculto; transição: opacidade 0,25s facilidade, visibilidade 0,25s facilidade; } /* Imagem do pôster */ .espaço-pano__overlay-img { posição: absoluta; inserção: 0; largura: 100%; altura: 100%; ajuste ao objeto: capa; } /* Botão Play no topo do pôster */ .espaço-pano__play { posição: relativa; índice z: 2; fundo: transparente; fronteira: nenhuma; preenchimento: 0; cursor: ponteiro; } /* Ocultar a sobreposição após iniciar */ .space-pano__overlay.is-hidden { opacidade: 0; visibilidade: oculta; eventos de ponteiro: nenhum; }
• // Inicia o tour quando o usuário clica no botão Play: // 1) tornar o iframe clicável (habilitar eventos de ponteiro) // 2) remova a sobreposição do pôster document.addEventListener(‘clique’, função (evento) { const btn = event.target.closest(‘.space-pano__play’); se (!btn) retornar; const wrapper = btn.closest(‘.space-pano’); if (!wrapper) retornar; const iframe = wrapper.querySelector(‘iframe’); sobreposição const = wrapper.querySelector(‘.space-pano__overlay’); if (iframe) iframe.style.pointerEvents = ‘auto’;if (sobreposição) { overlay.classList.add(‘está oculto’); setTimeout(função(){ overlay.remove(); }, 300); } }); // Se o pôster estiver faltando ou não carregar, remova a imagem para que ela não bloqueie a UI document.addEventListener(‘DOMContentLoaded’, function() { document.querySelectorAll(‘.space-pano__overlay-img’).forEach(function (img) { const src = img.getAttribute(‘src’); se (!src){ img.remove(); retornar; } img.addEventListener(‘erro’, função() { img.remove(); }); }); });

usa incorporação de iframe em formatos básicos e avançados.
✅ 
• O guia está completo.
Agora você entende todo o fluxo de trabalho — desde o upload de panoramas até a publicação e uso de seu tour virtual.