Website anzeigen
Mit dem Element „Website anzeigen“ können Sie eine Website in Ihr Projekt einbinden. Roboter wie Temi & Pepper können die Website anzeigen. Der Avatar kommuniziert auch mit der Website.
Achtung: Mit Version 1.14 haben wir das Element „Website anzeigen“ und das Element „Benutzerdefiniertes Plugin“ getrennt. Wenn Ihre Websites Attribute und Parameter enthalten, stellen Sie bitte sicher, dass Sie diese Elemente in ein „Benutzerdefiniertes Plugin“ umwandeln.
Fügen Sie Ihre Website zu Ihrem Projekt hinzu
Fügen Sie das Website-Element „Show Website“ per Drag-and-Drop hinzu, indem Sie die Ausgabe des vorherigen Elements ziehen. Wählen Sie „Show Webite“ aus dem Menü aus, das angezeigt wird, wenn Sie die Ausgabe ablegen.
In der Seitenleiste sehen Sie ein Eingabefeld, in das Sie die URL (den Link zu Ihrer Website) Ihrer Website eingeben können. Ihre Website muss über HTTPS kommunizieren. HTTP wird nicht unterstützt. Ihr Browser zeigt an, ob Ihre Website verschlüsselt (über HTTPS) kommuniziert:


Aktivieren Sie den Schalter und wählen Sie eine Zeit aus, zu der die Website automatisch geschlossen werden soll:
Der Benutzer hat immer die Möglichkeit, die Website über eine kleine Schaltfläche mit einem X in der oberen rechten Ecke zu schließen.

Überprüfen Sie, ob die Website eingebettet werden kann
Es gibt Websites, die das Einbetten untersagen. In diesem Fall können wir die Website nicht anzeigen. Sie können testen, ob Ihre Website die Anzeige zulässt, indem Sie auf die Schaltfläche „URL-Link testen“ klicken.


Tipps zum Einbetten eines YouTube-Videos
Um YouTube-Videos einzubetten, können Sie nicht den Link des Videos verwenden, aber Sie können den Einbettungslink verwenden.
Navigieren Sie zu dem YouTube-Video, das Sie einbetten möchten, und klicken Sie auf die Schaltfläche „Teilen“ darunter.
.png)
Klicken Sie auf „Teilen“ und dann auf „Einbetten“
.png)
und kopieren Sie den Link aus dem angezeigten Code:
.png)
YouTube-Video mit automatischer Wiedergabe abspielen
Die automatische Wiedergabe funktioniert, wenn Sie „autoplay=1&mute=1&enablejsapi=1“ zur URL hinzufügen.
Hier ein Beispiel:
https://www.youtube.com/embed/h6I5UOsQNEI?autoplay=1&mute=1&enablejsapi=1
Um den richtigen Link für das iFrame zu erhalten, führen Sie die oben genannten Schritte aus (klicken Sie auf „Teilen“ in YouTube, dann auf „Einbetten“ und kopieren Sie den Link).

Ändern Sie den Link zur Website dynamisch
Geben Sie anstelle der URL Ihrer Website #ATTRI/myWebsite in das Eingabefeld ein. Sie können die Variable myWebsite dann zur Laufzeit mit dem Element
„Set Userattribute & Variables“ ändern.

Ändern Sie den Stil, in dem die Website angezeigt wird (nur Avatar)
Wenn Sie das Element „Website anzeigen“ zu einem Avatar-Rahmen hinzufügen und darauf klicken, um die Seitenleiste anzuzeigen, sehen Sie die drei Optionen: Einstellungen, Attribute und Parameter.

In den Einstellungen finden Sie ein Dropdown-Menü, in dem Sie auswählen können, wie die Website angezeigt werden soll:

Unten zeigen wir Ihnen, wie der Stil aussehen wird:
Vollbild:

Vollbild mit Avatar:

Halbe Größe:

Viertelformat:

Quadratische Größe:

Fügen Sie eine Kommunikation zwischen Avatarproject und Ihrer Website hinzu (nur Avatar)
Es wird empfohlen, Zugang zum Quellcode zu haben oder eine Website programmieren zu können. Außerdem sind Grundkenntnisse in Javascript erforderlich.
Kommunikation von Plural zur eingebetteten Website
In Plural zu „Params“ wechseln:
Hier haben Sie die Möglichkeit, Parameter hinzuzufügen. Diese werden an die URL der eingebetteten Website angehängt. Sie können einfach eine Zeichenkette eingeben oder #ATTRI/Attributname verwenden, wobei Attributname zuvor in Ihrem Projekt festgelegt werden muss.
Hier ist ein vollständiges Beispiel:

Im JS-Skriptcode der eingebetteten Website können Sie die Parameter durchlaufen und verwenden:
const uri = window.location.href.split('?');
if (uri.length === 2) {
const params = uri[1].split('&');
return params.map((p)=> p.split('='))
.filter((p)=> p.length ===2)
.filter(([key])=> key ==='name')
.shift()[1];
}
console.log(getURLParameters());
Die Funktion
getURLParameters()
gibt ein Objekt mit den Schlüsseln und Werten der URL-Parameter zurück.