Incorporar um tour virtual no site: guia passo a passo

Veja como incorporar um tour virtual no site da sua imobiliária: copie o código do tour, cole-o num bloco HTML na página do imóvel, ajuste o tamanho e teste no smartphone antes de publicar. O mesmo serve para uma só foto 360. Abaixo encontra os passos para WordPress e Wix, um código pronto a copiar e uma lista do que confirmar no smartphone.

O que precisa antes de começar

Se ainda não trabalha com tours, o guia do tour virtual 360 explica o que é e como os compradores o usam. Para o incorporar, tenha à mão:

• O código de incorporação, não só o link. O link abre o tour numa página própria. O código é uma linha que começa por <iframe e mostra o tour dentro da sua página.
• Um tour que qualquer pessoa possa abrir. Ponha-o Público. No Pro pode desligar Mostrar no Google e noutros motores de pesquisa, para que só o veja quem tiver o link. Um tour privado mostra um aviso de "privado" dentro da moldura, e não as divisões.
• Permissão para editar a página. No WordPress precisa de uma conta que possa juntar código (já lá vamos). Se o site é gerido por outra pessoa, envie-lhe o código por email.
• Uma só foto 360 funciona da mesma forma. Faça dela um tour com uma divisão e incorpore esse tour. Para ver a foto antes, abra-a no visualizador 360 gratuito.

Passo 1: copiar o código

A maioria das aplicações de tours guarda o código num botão chamado Partilhar, Incorporar ou Publicar. Procure "incorporar", "embed", "iframe" ou "código" e copie a linha inteira, de <iframe até </iframe>.

No Vistura, abra o tour, carregue em Partilhar e vá a "Incorporar num site". Carregue em "Copiar código", e a indicação diz o resto: "Cole este código na página do imóvel no seu site." Está disponível em todos os planos, e o código já ocupa a largura da página e leva o nome do tour como título.

Passo 2: colar o código no site

Todas as plataformas têm um bloco para código. O que interessa é saber o que o impede de aparecer.

WordPress

1. Abra a página do imóvel e junte um bloco HTML personalizado (Custom HTML): pelo botão de inserir blocos, ou escrevendo /html num parágrafo novo (documentação do WordPress, em inglês).
2. Cole o código no bloco.
3. Guarde ou atualize a página.

Se a sua conta não tem a permissão unfiltered_html, por exemplo uma conta de Colaborador, o WordPress retira o <iframe> do bloco quando a página é guardada (documentação do WordPress). Na edição tudo parece bem, e depois a página não mostra nada. Peça a um Administrador que cole o código ou que mude o seu perfil.

No WordPress.com, o bloco é o mesmo mas o plano decide: só os sites com um plano que aceita plugins e com as funcionalidades de alojamento ativadas podem usar iframe, e antes disso aplicam-se os limites dos sites gratuitos (suporte do WordPress.com, em inglês).

Wix

1. No editor, vá a Elementos > Incorporar código > Incorporações populares > HTML incorporado (os nomes são os da ajuda do Wix, em português do Brasil: Central de Ajuda do Wix).
2. Cole o código no campo e aplique.
3. Ajuste o tamanho do elemento no editor.

"Apenas códigos HTTPS e URLs são exibidos", avisa o Wix. O elemento HTML do Wix é ele próprio um iframe, por isso o conteúdo não se adapta sozinho: ponha a largura e a altura do iframe a 100% no código e ajuste o tamanho no elemento (Wix, em inglês). Veja também a vista de telemóvel no editor do Wix.

Squarespace

Use um bloco Code e cole o código; para um iframe, o site precisa do plano Core, Plus ou Advanced, e o código pode não aparecer enquanto tem a sessão iniciada (ajuda do Squarespace, em inglês).

Um site que veio com o software da agência

Muitas agências e consultores têm o site incluído no programa de gestão de imóveis. O caminho costuma ser este:

1. Abra o imóvel na área de gestão (o backoffice).
2. Procure um campo ou bloco chamado HTML, Código, Incorporar, Embed ou Widget, muitas vezes junto às fotos ou aos vídeos.
3. Cole o código completo, guarde e abra a página pública do imóvel para confirmar.

Se não encontrar nenhum campo assim, pergunte ao apoio do fornecedor onde se coloca um iframe na página do imóvel. Diga que é um código <iframe em HTTPS: assim percebem logo do que se trata.

Passo 3: ajustar a moldura a qualquer ecrã

O código de um tour é curto. Eis o que faz cada parte, para saber qual mudar:

Junte loading="lazy" quando o tour fica abaixo das fotos. O navegador só o carrega quando o visitante se aproxima dele ao percorrer a página (MDN). Segundo o guia do Google para a web, funciona em todos os navegadores principais, poupa dados, acelera o resto da página e gasta menos memória (web.dev, em inglês).

Uma altura fixa fica bem no portátil e alta ou achatada de mais no telemóvel. Para manter a mesma forma em qualquer ecrã, dê à moldura uma proporção em vez de uma altura:

<iframe src="https://ENDERECO-DO-SEU-TOUR" title="T2 em Lisboa, tour 360"
  width="100%" loading="lazy" allow="fullscreen"
  style="border:0; aspect-ratio:4/3; max-height:80vh"></iframe>

Troque o endereço pelo do seu tour, escreva o seu title e apague o atributo height: o aspect-ratio só funciona se uma das duas medidas ficar automática. Esta propriedade funciona em todos os navegadores desde setembro de 2021 (MDN), mas confirme o resultado num telemóvel a sério, porque os temas e as plataformas juntam os seus próprios estilos.

Dois conselhos da prática. Uma forma 4/3, ou mais alta, fica melhor no telemóvel do que uma faixa larga 16/9. E max-height:80vh deixa a moldura mais baixa do que o ecrã, para haver sempre página à volta por onde deslizar.

Onde pôr o tour na página do imóvel

1. Perto do topo, a seguir às fotos. O comprador vê primeiro as fotos; o tour vem a seguir, antes da descrição longa.
2. Deixe os dados do imóvel na própria página. O preço, o texto e as características ficam na sua página, não só dentro do tour, que vive noutro endereço.
3. Ponha um link simples por baixo da moldura. Escreva "Abrir o tour 360 em ecrã inteiro" e ligue-o ao endereço do próprio tour. No telemóvel, um link para a página do tour deixa o comprador vê-lo em ecrã inteiro.
4. Um tour por página. Várias molduras pesadas na mesma página tornam-na lenta.

Passo 4: testar no telemóvel antes de publicar

Abra a página publicada no seu telemóvel e percorra esta lista:

• Deslize para lá do tour com um polegar. Se cada gesto roda a divisão em vez de descer a página, baixe a moldura.
• Arraste dentro da moldura. A divisão deve rodar.
• Toque no link por baixo. O tour deve abrir na sua própria página.
• Veja a página sem sessão iniciada, ou numa janela privada. O Squarespace, por exemplo, pode esconder o código a quem está a editar (ajuda do Squarespace).
• Abra-a com dados móveis, e não só com o Wi-Fi da agência.
• Se a moldura estiver vazia, veja o costume: HTTPS (Wix), o plano (WordPress.com, Squarespace), as permissões da conta (WordPress) ou um tour privado.

Site, portais e email são três trabalhos diferentes

• O seu site recebe o código de incorporação.
• Os portais (idealista, Imovirtual, Casa Sapo, Supercasa) têm cada um as suas regras para tours virtuais. Antes de prometer o tour no anúncio, confirme nas instruções do portal que tours aceita e onde se põe o link. O "Link para portais" do Vistura dá um link para cada portal, com a opção "Sem os meus contactos nem logótipo", e conta as visitas de cada portal à parte (a vista Por portal é do Pro). Para placas e montras, veja o QR code na placa do imóvel.
• Email e mensagens. Envie uma imagem do tour com um link para ele, e não o código.

Saber se as pessoas usam o tour no seu site

Um tour do Vistura incorporado mantém o cartão do agente, o WhatsApp e o formulário dentro da moldura, e os contactos chegam a Leads em todos os planos. As visitas que vêm do seu site contam à parte, como "O seu site (incorporado)", desde o primeiro dia. No Pro vê essa divisão por origem, ao lado das divisões vistas, do tempo e dos dispositivos, e o tour leva o logótipo e as cores da sua agência, sem o selo do Vistura. No Pro, depois de ativar a rotação automática, a foto roda sozinha quando o visitante pára e passa à divisão seguinte, o que é ideal para uma página aberta num ecrã da montra. O preço de fundador é de US$24 por mês, ou US$19 por mês com pagamento anual, para subscrições iniciadas até 31 de dezembro de 2026 (ver planos). Pode experimentar no Grátis, com 3 tours online ao mesmo tempo e a marca Vistura.

Se o tour não aparecer

Conclusão

Incorporar um tour são quatro passos: copiar o código, colá-lo num bloco HTML ou de código, ajustar a moldura ao telemóvel e testá-la com o polegar antes de publicar. A maioria dos problemas vem do plano da plataforma ou das permissões da conta, e não do código.

Perguntas frequentes

Posso incorporar um tour virtual num site Wix gratuito?

A ajuda do Wix sobre o HTML incorporado não indica nenhum plano, só exige código HTTPS. Noutras plataformas depende do plano, porque o WordPress.com só mostra iframes num plano com plugins e funcionalidades de alojamento ativadas, e o Squarespace só nos planos Core, Plus ou Advanced.

O tour atrasa o carregamento da página do imóvel?

Muito menos se juntar loading="lazy" ao código. O navegador só carrega o tour quando o visitante se aproxima dele, e as fotos e o texto de cima abrem primeiro.

Posso pôr o código no idealista ou no Imovirtual?

Cada portal tem as suas regras para tours virtuais. Onde o anúncio tem um campo de visita virtual, é aí que vai o link do tour; confirme na ajuda do portal para anunciantes que tours mostra.

Preciso de um código novo quando mudo o tour?

Não, se o código apontar para o próprio tour e não para uma cópia. No Vistura o código usa o identificador do tour, por isso as alterações aparecem logo no site e o código continua a funcionar.