Guia de Integração

Como Integrar Tours 360° no Seu Website

Guia completo para incorporar tours virtuais Tourio 360 em qualquer website, desde HTML simples até WordPress, Webflow e outros construtores populares.

Começar Integração Ver Exemplos

Responsivo

Adapta-se automaticamente a qualquer tamanho de ecrã

VR Ready

Suporte completo para Meta Quest e outros headsets VR

Seguro

Código limpo e seguro, sem compromissos de segurança

Configurável

Múltiplas opções de personalização e controlo

1. Integração HTML Básica

Para websites HTML estáticos ou qualquer página web

Código de Incorporação Simples

<!-- Incorporar Tour 360° -->
<iframe 
  src="https://www.tourio360.pt/t/[TOUR-SLUG]?embed=true"
  width="100%" 
  height="600"
  frameborder="0"
  allowfullscreen
  title="Tour Virtual 360°">
</iframe>

Versão Responsiva Avançada

<!-- HTML -->
<div class="tourio-360-container">
  <iframe 
    src="https://www.tourio360.pt/t/[TOUR-SLUG]?embed=true"
    frameborder="0"
    allowfullscreen
    title="Tour Virtual 360°">
  </iframe>
</div>

<!-- CSS -->
<style>
.tourio-360-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.tourio-360-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

Dica:

Substitua [TOUR-SLUG] pelo slug do seu tour. Encontre-o no URL do tour, ex: meu-tour-360

2. WordPress

Integração fácil em posts, páginas e widgets

Método 1: Editor de Blocos (Gutenberg)

Adicione um bloco "HTML Personalizado"
Cole o código iframe acima
Substitua [TOUR-SLUG] pelo slug do seu tour
Pré-visualize e publique

Método 2: Shortcode Personalizado

// Adicione ao functions.php do seu tema
function tourio_360_shortcode($atts) {
    $atts = shortcode_atts(array(
        'slug' => '',
        'height' => '600',
        'title' => 'Tour Virtual 360°',
        'scene' => '',
        'hideui' => 'false'
    ), $atts);
    
    $url = 'https://www.tourio360.pt/t/' . esc_attr($atts['slug']) . '?embed=true';
    
    if (!empty($atts['scene'])) {
        $url .= '&scene=' . esc_attr($atts['scene']);
    }
    
    if ($atts['hideui'] === 'true') {
        $url .= '&hideUI=true';
    }
    
    return '<div class="tourio-360-container">
        <iframe 
            src="' . $url . '"
            height="' . esc_attr($atts['height']) . '"
            frameborder="0"
            allowfullscreen
            title="' . esc_attr($atts['title']) . '">
        </iframe>
    </div>';
}
add_shortcode('tourio360', 'tourio_360_shortcode');

Exemplos de uso do shortcode:

[tourio360 slug="coliving-simpli-house"][tourio360 slug="coliving-simpli-house" scene="scene-1760555259209-16" hideui="true"]

3. Construtores de Websites

Integração em plataformas populares

Webflow

Arraste um elemento "Embed"
Cole o código iframe
Defina altura responsiva
Publique o site

Squarespace

Adicione um bloco "Code"
Insira o código iframe
Ajuste configurações de display
Salve as alterações

Wix

Adicione um elemento "HTML iframe"
Configure a URL do embed
Ajuste dimensões
Publique o site

Shopify

Edite template da página
Adicione código HTML/Liquid
Use iframe responsivo
Teste e publique

4. Opções Avançadas

Personalize a experiência do tour

Parâmetros de URL

<!-- Exemplos de personalização -->
<!-- URL base com embed -->
https://www.tourio360.pt/t/[TOUR-SLUG]?embed=true

<!-- Iniciar numa cena específica -->
https://www.tourio360.pt/t/[TOUR-SLUG]?embed=true&scene=scene-1760555259209-16

<!-- Ocultar controlos de UI -->
https://www.tourio360.pt/t/[TOUR-SLUG]?embed=true&hideUI=true

<!-- Combinação de parâmetros (exemplo real) -->
https://www.tourio360.pt/t/coliving-simpli-house?scene=scene-1760555250859-8&embed=true&hideUI=true

Configurações Disponíveis

embed=true

Obrigatório - ativa modo embed

scene=[scene-id]

Cena específica (ex: scene-1760555259209-16)

hideUI=true

Ocultar interface de utilizador

autoplay=true

Reprodução automática

5. Exemplo Prático - Next.js

Implementação real com mapeamento dinâmico de tours

Mapeamento de Tours por ID

// Exemplo real de mapeamento de tours para quartos específicos
const virtualTours: { [key: string]: string } = {
  // IDs reais da base de dados -> URLs dos tours
  "4DkqGQYvvRe4nwcISbrj": "https://www.tourio360.pt/t/coliving-simpli-house?scene=scene-1760555259209-16&embed=true&hideUI=true", // Suite Room
  "LKfziZdcBBfIMOmuS3xj": "https://www.tourio360.pt/t/coliving-simpli-house?scene=scene-1760555250859-8&embed=true&hideUI=true",  // Loft Room
  "7Phq1M8GlKSHEz3pUwY6": "https://www.tourio360.pt/t/coliving-simpli-house?scene=scene-1760555254950-12&embed=true&hideUI=true", // Orange Room
  "z5Iyte57bnh8an7eOj9a": "https://www.tourio360.pt/t/coliving-simpli-house?scene=scene-1760555253767-11&embed=true&hideUI=true", // Yellow Room
  "Eti4Yymb5wGdsYE5bJdP": "https://www.tourio360.pt/t/coliving-simpli-house?scene=scene-1760555252858-10&embed=true&hideUI=true", // Green Room
}

// Componente React para renderizar o tour
function RoomTour({ roomId }: { roomId: string }) {
  const tourUrl = virtualTours[roomId];
  
  if (!tourUrl) return null;
  
  return (
    <div className="tourio-360-container">
      <iframe 
        src={tourUrl}
        width="100%" 
        height="600"
        frameBorder="0"
        allowFullScreen
        title="Tour Virtual 360°"
      />
    </div>
  );
}

Iframe Simples Testado

<!-- Este código está testado e a funcionar -->
<iframe 
  src="http://localhost:3000/t/coliving-simpli-house?embed=true" 
  width="100%" 
  height="600" 
  frameborder="0" 
  allowfullscreen>
</iframe>

✅ Testado e Aprovado

Estes exemplos são baseados em implementações reais e testadas. Use embed=true como parâmetro obrigatório.

6. Melhores Práticas

Dicas para otimizar a experiência do utilizador

✅ Recomendado

Use proporção 16:9 para melhor visualização
Teste em diferentes dispositivos
Adicione loading placeholder
Use títulos descritivos nos iframes

❌ Evitar

×
Alturas fixas em pixels
×
Múltiplos tours na mesma página
×
Esconder controlos em dispositivos móveis
×
URLs diretas sem https

Precisa de Ajuda?

A nossa equipa está pronta para ajudar com a integração

Ver Tours de Exemplo