Einen Space mit einem <iframe> einbinden

Einführung

Sie können zwar immer einen Link zu einem Matterport Space teilen und sogar den Link anpassen. Eine noch bessere Option ist es jedoch, einen Space direkt in Ihre Website einzubinden.

Auf diese Weise wird Ihr Matterport Space mitten auf Ihrer Webseite angezeigt, genau wie ein YouTube-Video. Zum Beispiel:

 

Grundlegende Anleitung

1) Stellen Sie Ihren Space auf „öffentlich“. Weitere Informationen.

2) Bestimmen Sie die Webseite, der Sie den Matterport Space hinzufügen möchten.

3) Fügen Sie den folgenden Code in den HTML-Quellcode dieser Webseite ein. Eine genaue Anleitung ist von Ihrer Website abhängig (siehe folgende Abschnitte).

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

4) Ersetzen Sie es durch die URL zu Ihrem Space. Anstelle von https://my.matterport.com/show/?m=xxxxxxxxxxx wie oben gezeigt, verwenden Sie die URL zu Ihrem eigenen Matterport Space. Sie können hier auch URL-Parameter hinzufügen.

Fügen Sie dem iframe-Code beim Einbinden immer „allowfullscreen“ hinzu. Dies ist wichtig für Ihre Zielgruppe, die auf Mobilgeräten unterwegs ist, da sie auf den Vollbildmodus wechseln muss, um den VR-Modus zu sehen. Erfahren Sie mehr darüber, wie Benutzer VR nutzen.

 

Der Einsatz von Drittanbieter-CMS

Wenn Sie ein Drittanbieter-CMS (Content-Management-System) wie Wordpress, Drupal, Wix, Zendesk, Medium etc. zur Verwaltung Ihrer Website verwenden, dann müssen Sie den HTML-Quellcode für diese Seite öffnen. 

Die allgemeinen Schritte sind:

  1. Loggen Sie sich in das CMS-Backend ein
  2. Suchen Sie den Post/die Seite/den Artikel zur Bearbeitung.
  3. Suchen Sie nach einem Symbol, das aussieht wie </>, um den Quellcode zu öffnen.

Das folgende Beispiel ist für das Zendesk-Hilfecenter.

zendesk-open-source-code.png

Sie benötigen einige HTML-Kenntnisse, um sich im Code zurechtzufinden und zu bestimmen, wo genau der <iframe>-Code eingefügt werden soll.

Bei einigen CMS (z. B. Zendesk) müssen Sie „nicht sicheres HTML zulassen“, damit ein iframe ausgeführt werden kann. Keine Sorge, ein Matterport Space ist ungefährlich :)

 

Wordpress.com oder Wordpress CMS

Wordpress.com lässt standardmäßig keine iframes zu, daher besteht die einfachste Möglichkeit, 3D Showcase einzubinden, darin, die URL my.matterport.com in den Post der Registerkarte „Visual“ einzufügen. Wordpress verwandelt dies in eine Einbindung. Zum Beispiel:

HTMLExample.png

Websites, die das Wordpress-CMS verwenden, erlauben iframes, sodass Sie den iframe-Code direkt in den Post einfügen können. Für weitere Anpassungen können Sie auch die folgenden Plugins ausprobieren:

 

Wix

Beginnen Sie mit der Bearbeitung der Seite, in die etwas eingebunden werden soll. Klicken Sie auf „Hinzufügen > Mehr > Eine Website einbinden“.

Es erscheint ein graues Feld. Verschieben Sie das graue Feld auf die Position auf der Seite, auf der die Einbindung erscheinen soll.

Klicken Sie auf „Webseiten-Adresse“ über dem grauen Feld. Fügen Sie die URL zu Ihrem Matterport Space ein. Sie sollten nun sehen können, dass 3D Showcase im Feld angezeigt wird.

Wix_Example.png

 

Medium Blog-Post

Suchen Sie im Medium-Backend zuerst den Post oder Entwurf, in den Sie den Matterport Space einbinden möchten.

  1. Klicken Sie auf +, um einen neuen Abschnitt zu erstellen.
  2. Klicken Sie auf <>, um anzugeben, dass Sie eine Einbindung hinzufügen möchten.
  3. Fügen Sie die URL Ihres Matterport Space ein.

MediumEmbed123.png

  

Placester

Öffnen Sie im Placester-CMS-Backend zuerst die Seite, in die Sie den Matterport Space einbinden möchten.

open-html-code-on-placester.png

  1. Öffnen Sie das <> HTML-Symbol
  2. Fügen Sie den <iframe>-Einbindungscode ein.
  3. Klicken Sie das <> HTML-Symbol erneut an, um zum visuellen Editor zurückzukehren.

Sie sehen nun Ihren iframe in der Editor-Ansicht eingebunden. Speichern Sie die Änderungen und die Einbindung wird live angezeigt.

Besuchen Sie den Placester Support für weitere Details.

 

Direkter Zugriff auf den HTML-Quellcode

Wenn Sie kein CMS haben, auf dem Sie Änderungen vornehmen können, wenden Sie sich an den Webmaster Ihrer Website und bitten Sie um Hilfe.

Wenn Sie der Webmaster sind (oder wenn Sie den HTML-Code direkt bearbeiten können), können Sie den <iframe>-Code einfach direkt zum HTML-Quellcode hinzufügen.

Have more questions? Submit a request