1. Intégrer une visite virtuelle avec un iframe

Les visites virtuelles peuvent être intégrées dans des sites web de la même manière que les vidéos YouTube, à l’aide d’un <iframe>.

Remplacez YOUR-PROJECT-URL par le lien de votre visite virtuelle :

<iframe
  src="YOUR-PROJECT-URL"
  style="width:100%; height:500px; border:0;"
  allowfullscreen
  allow="vr"
></iframe>

Remarques

Passez en mode éditeur HTML avant de coller le code dans votre créateur de site ou votre CMS.
Vous pouvez ajuster la hauteur de l’iframe en fonction de la mise en page de votre site.
Nous recommandons d’utiliser directement le code iframe standard plutôt que des plugins tiers, car certains plugins peuvent désactiver des fonctionnalités comme le mode plein écran.

2. Ouvrir une visite via un lien hypertexte

Cette approche est particulièrement utile pour les mises en page mobiles ou les sites disposant d’un espace limité..

Lien texte

<a href="YOUR-PROJECT-URL" target="_blank">
  Open Virtual Tour
</a>

Lien image

<a href="YOUR-PROJECT-URL" target="_blank">
  <img src="YOUR-IMAGE-URL" alt="Open Virtual Tour"/>
</a>

Remarques

Supprimez target="_blank" si vous souhaitez que la visite s’ouvre dans le même onglet du navigateur.
Cette approche est particulièrement utile pour les mises en page mobiles ou les sites disposant d’un espace limité.

3. Activer le mode plein écran

Pour permettre aux visiteurs d’ouvrir la visite virtuelle en mode plein écran, ajoutez l’attribut allowfullscreen à l’iframe.

Exemple

<iframe
  src="https://tour.giraffe360.com/YOUR-PROJECT-URL"
  style="width:100%; height:500px; border:0;"
  allowfullscreen
  allow="vr"
></iframe>

Si la configuration est correcte, le bouton plein écran apparaîtra dans le lecteur de la visite virtuelle.

4. Désactiver le suivi Analytics

Vous pouvez désactiver le suivi Analytics et les cookies en ajoutant ?nocookie à l’URL de la visite.

Analytics activé par défaut

https://tour.giraffe360.com/westfieldshouse/

Analytics désactivé

https://tour.giraffe360.com/westfieldshouse/?nocookie

Cette option est utile pour les environnements sensibles à la confidentialité et pour les exigences strictes en matière de conformité aux cookies.

5. Advanced iframe integrations

Pour les intégrations avancées, les visites intégrées dans un iframe prennent en charge la communication avec le site hôte via postMessage.

Cela permet à votre plateforme de :

Réagir aux clics sur les hotspots
Afficher une interface personnalisée pour les hotspots
Créer des liens profonds vers des hotspots spécifiques
Désactiver le popup de hotspot Giraffe360 par défaut

5.1. Écouter les clics sur les hotspots d’information

Lorsqu’un visiteur clique sur un hotspot d’information dans une visite intégrée via iframe, le lecteur envoie un événement postMessage à la page parente.

Quand les événements sont émis

Uniquement lorsque la visite est intégrée dans un iframe. Les visites ouvertes directement dans le navigateur n’émettent pas ces messages.
À chaque clic sur un hotspot d’information.
Que le popup de hotspot par défaut soit activé ou désactivé.

Format du message

{
  type: 'g360:info-hotspot-click',
  hotspotId: string,
  sceneKey: string,
  content: {
    text: string,
    images: string[]
  }
}

Remarques

text contient le contenu du hotspot sous forme de texte brut.
images contient des URL d’images CDN signées qui peuvent être utilisées directement dans <img src>.
Si le format du contenu du hotspot n’est pas pris en charge, text sera vide et images sera un tableau vide.

Exemple de listener

<iframe
  id="tour"
  src="https://tour.giraffe360.com/?token=..."
></iframe>

<script>
window.addEventListener('message', (event) => {
  const tourFrame = document.getElementById('tour');

  // Always validate the message source
  if (event.source !== tourFrame.contentWindow) return;

  // Validate message type
  if (event.data?.type !== 'g360:info-hotspot-click') return;

  const { hotspotId, sceneKey, content } = event.data;

  // Your custom UI logic
  showInfoPanel({
    hotspotId,
    sceneKey,
    text: content.text,
    images: content.images
  });
});
</script>

Note de sécurité

L’origine cible de postMessage est '*'. Vous devez donc toujours valider :

event.source
event.data.type

avant de faire confiance aux messages entrants.

5.2. Désactiver le popup de hotspot par défaut

Par défaut, lorsqu’un utilisateur clique sur un hotspot d’information, le popup Giraffe360 s’ouvre dans la visite.

Vous pouvez désactiver ce comportement si vous souhaitez utiliser votre propre interface, comme une barre latérale, une fenêtre modale ou un panneau, pour afficher le contenu des hotspots.

Comment désactiver le popup

Allez dans : Tableau de bord → Visite virtuelle → Modifier la visite → Paramètres

Désactivez : "Afficher la fenêtre d’information des points interactifs"

Comportement lorsque le popup est désactivé

Les clics sur les hotspots continuent de fonctionner.
Les événements g360:info-hotspot-click continuent d’être émis.
Seul le popup par défaut est masqué.
Les hotspots de navigation et les autres types de hotspots ne sont pas affectés.

Modèle recommandé

Utilisez le listener postMessage g360:info-hotspot-click avec le paramètre de popup désactivé pour afficher votre propre barre latérale, fenêtre modale ou panneau sur le site hôte.

5.3. Créer un lien profond vers un hotspot avec des Reference IDs

Les hotspots d’information peuvent recevoir une Reference ID personnalisée facultative.

Cela permet à votre plateforme d’ouvrir la visite en se concentrant sur un hotspot spécifique.

Activer les Reference IDs

Allez dans : Tableau de bord → Visite virtuelle → Modifier la visite → Paramètres

Activez : "Activer les identifiants de référence des points interactifs"

Ce paramètre est désactivé par défaut.

Un champ Reference ID apparaîtra alors pour les hotspots d’information dans l’éditeur.

Comportement des Reference IDs

Les Reference IDs sont uniques au sein d’une visite.
La correspondance ne tient pas compte de la casse.
Les espaces au début et à la fin sont ignorés.

Exemple de lien profond

https://tour.giraffe360.com/?token=...&rid=KITCHEN-FAUCET-12

Comportement

Lorsque la visite se charge :

Le lecteur recherche une Reference ID de hotspot correspondante.
Si une correspondance est trouvée, la caméra s’ouvre centrée sur ce hotspot.
Le popup du hotspot ne s’ouvre pas automatiquement.

Si aucune Reference ID correspondante n’est trouvée :

Le lecteur utilise le paramètre ?v=, s’il est présent.
Sinon, la scène de départ par défaut de la visite est utilisée.

Interaction avec `?v=`

La fonctionnalité Share Tour continue de générer uniquement des URL ?v=. Le paramètre ?rid= est destiné aux liens profonds gérés côté client.

Si ?rid= et ?v= sont tous les deux présents :

?rid= est prioritaire lorsqu’un hotspot correspondant existe.
Si aucun hotspot correspondant n’est trouvé, la visite utilise ?v= comme solution de repli.

5.4. Exemple : générer un lien profond vers un hotspot

const tourUrl = new URL(baseTourUrl);

tourUrl.searchParams.set(
  'rid',
  product.giraffeReferenceId
);

window.open(tourUrl.toString(), 'tour');

6. Référence rapide

Fonctionnalité	Description
iframe embed	Intégrer des visites directement dans des pages web
?nocookie	Désactiver Analytics et les cookies
g360:info-hotspot-click	Écouter les clics sur les hotspots via `postMessage`
Hide hotspot popup	Afficher une interface personnalisée en dehors de la visite
?rid=	Créer un lien direct vers un hotspot
Reference IDs	Associer des hotspots à des éléments de votre propre plateforme

7. Limitations et remarques

postMessage events are only available in iframe-embedded tours.
The ?rid= parameter positions the camera but does not automatically open hotspot content.
Reference IDs are unique per tour, not globally.
Image URLs included in hotspot payloads are signed CDN URLs and may expire over time.
Always validate event.source before trusting incoming postMessage data.

Intégration de la visite virtuelle

1. Intégrer une visite virtuelle avec un iframe

Remarques

2. Ouvrir une visite via un lien hypertexte

Lien texte

Lien image

Remarques

3. Activer le mode plein écran

Exemple

4. Désactiver le suivi Analytics

Analytics activé par défaut

Analytics désactivé

5. Advanced iframe integrations

5.1. Écouter les clics sur les hotspots d’information

Quand les événements sont émis

Format du message

Remarques

Exemple de listener

Note de sécurité

5.2. Désactiver le popup de hotspot par défaut

Comment désactiver le popup

Comportement lorsque le popup est désactivé

5.3. Créer un lien profond vers un hotspot avec des Reference IDs

Activer les Reference IDs

Comportement des Reference IDs

Exemple de lien profond

Comportement

Interaction avec ?v=

5.4. Exemple : générer un lien profond vers un hotspot

6. Référence rapide

7. Limitations et remarques

Interaction avec `?v=`