Intégrer un Space avec un <iframe>

Introduction

Même s’il vous est toujours possible de partager un lien vers un Matterport Space, voire de personnaliser le lien, une solution plus avantageuse consiste à intégrer directement un Space à votre site Web.

Ainsi, votre Matterport Space apparaîtra au milieu de votre page Web, exactement comme une vidéo YouTube. Par exemple :

 

Instructions de base

1) Attribuer à votre Space le statut « Public ». En savior plus.

2) Identifier la page Web à laquelle vous souhaitez intégrer un Matterport Space.

3) Ajouter le code suivant au code source HTML de cette page Web. Des instructions plus précises sont fonction de votre site Web (voir les sections suivantes).

<iframe width="700" height="400" src="https://my.matterport.com/show/?m=xxxxxxxxxxx?lang=fr" allowfullscreen></iframe>

4) Remplacer par l’URL de votre Space. À la place du lien  https://my.matterport.com/show/?m=xxxxxxxxxxx qui apparaît ci-dessus, utiliser l’URL de votre propre Matterport Space. Vous pouvez également ajouter les paramètres de l’URL ici.

Toujours ajouter « allowfullscreen » au code iframe lors de l’intégration. Cela est important pour vos visiteurs sur mobile, puisqu’ils ont besoin d’accéder au plein écran pour passer en mode VR. En savoir plus sur l’accès au mode VR par les utilisateurs.

 

Utilisation d’un CMS tiers

Si vous utilisez un CMS (système de gestion des contenus) tiers, à l’instar de Wordpress, Drupal, Wix, Zendesk, Medium, etc., pour gérer votre site Web, alors il est nécessaire d’ouvrir le code source HTML de cette page.

En voici les étapes générales :

  1. Se connecter à votre espace administrateur
  2. Trouver la publication/page/l’article à modifier
  3. Trouver une icône semblable à celle-ci </> pour ouvrir le code source.

L’exemple suivant tient pour le centre d’aide de Zendesk.

zendesk-open-source-code.png

Vous aurez besoin de connaissances en matière de HTML pour explorer le code et trouver où coller exactement le code <iframe>.

Certains CMS (à l’instar de Zendesk) vous obligent à « autoriser un HTML dangereux » afin de permettre à un iframe de fonctionner. N’ayez aucune crainte, Matterport Space n’a rien de dangereux :)

 

Wordpress.com ou Wordpress CMS

Wordpress.com n’autorise pas les iframes par défaut, donc le moyen le plus facile d’intégrer une visualisation 3D Showcase consiste à inclure l’URL my.matterport.com dans la publication, sous l’onglet Visuel, et Wordpress le convertira en vidéo intégrée. Par exemple :

HTMLExample.png

Les sites Web qui utilisent Wordpress comme CMS autorisent les iframes. Vous pouvez donc coller le code iframe directement sur la publication. Pour plus de personnalisation, vous pouvez également essayer les modules complémentaires suivants :

 

Wix

Commencer par éditer la page sur laquelle vous souhaitez procéder à l’intégration. Cliquer sur Ajouter > Plus > Intégrer un site.

Un encadré gris apparaîtra. Déplacer l’encadré gris jusqu’à l’emplacement de la page souhaité pour l’intégration.

Cliquer sur « Entrer l’adresse du site Web » au-dessus de l’encadré gris. Coller l’URL de votre Matterport Space. Vous devriez voir 3D Showcase apparaître dans l’encadré.

Wix_Example.png

 

Blog Medium

Dans l’interface administrateur de Medium, trouver tout d’abord la publication ou le brouillon auquel vous souhaitez intégrer le Matterport Space.

  1. Cliquer sur + pour ajouter une nouvelle section. 
  2. Cliquer sur <> pour préciser que vous souhaitez ajouter un élément à intégrer
  3. Coller l’URL de votre Matterport Space.

MediumEmbed123.png

  

Placester

Dans l’interface administrateur de Placester, ouvrir au préalable la page à laquelle vous souhaitez intégrer le Matterport Space.

open-html-code-on-placester.png

  1. Ouvrir l’icône HTML <>
  2. Coller le code d’intégration <iframe>.
  3. Cliquer une fois de plus sur l’icône HTML <> pour retourner à l’éditeur visuel.

Vous verrez alors votre iframe intégré dans l’interface éditeur. Sauvegarder vos modifications et l’élément intégré passera en mode actif.

Visiter Support Placester pour d’amples renseignements.

 

Accès direct au code source HTML

Si vous ne disposez pas d’un CMS vous permettant d’apporter des modifications, contactez le webmaster de votre site pour demander de l’aide.

Si vous êtes le webmaster (ou si vous disposez d’un accès direct pour modifier le code HTML), vous pouvez tout juste ajouter le code <iframe> directement au code source HTML.

Vous avez d’autres questions ? Envoyer une demande