Auf dieser Dokumentationsseite wird erklärt, wie Sie eine Website zu einem Projekt hinzufügen und unsere Plugin-Funktionen nutzen können, um mithilfe von JavaScript-Funktionen eine Kommunikation zwischen der eingebetteten Website und dem Projekt herzustellen. Damit können Sie Ihre eigenen „benutzerdefinierten Felder“ in Plural erstellen.
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 (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.
Ä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 die Art und Weise, wie die Website angezeigt wird
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:
Vorbild:
Vollbild mit Avatar:
Halbe Größe:
Viertelformat:
Quadratische Größe:
Fügen Sie die Kommunikation zwischen Avatarproject und Ihrer Website hinzu
Zugang zum Quellcode oder die Fähigkeit, eine Website zu programmieren, sind erforderlich. Ebenso wie Grundkenntnisse in Javascript.
Kommunikation von der eingebetteten Website zu Plural
Vorbereitung: JS-Exportdatei und erforderliche Funktionen erstellen
Derzeit unterstützt Plural die folgenden 3 Nachrichten, die Sie von Ihrer eingebetteten Website aus senden können:
- Sprache: Ermöglicht es Ihnen, Sprache aufzurufen, die vom Avatar mithilfe von Google Text to Speech (tts) ausgegeben wird.
- Set Variable: Ermöglicht das Senden eines Schlüssel-Wert-Paars, das als Attribut in Plural behandelt wird.
- Schließen: Ermöglicht das Senden eines Befehls, der die Website schließt und den Projektablauf fortsetzt.
Um dies zu nutzen, müssen Sie den folgenden Code in eine Javascript-Exportdatei in Ihrem Projektordner einfügen:
function sendMessage(message)
window.parent.postMessage(message, '*');
}
function createMessage(type, payload) {
return {
action: type,
payload,
};
}
function send(type, payload) {
sendMessage(
createMessage(type, payload),
);
}
export default {
send,
};
Importieren Sie dies (mit dem richtigen Pfad) in die JS-Datei, die Sie für die Kommunikation mit dem Plural verwenden möchten:
import messaging from '../messaging.mjs';
Starten Sie die Avatar-Rede, die dann im Avatar-Projekt (Rede) ausgegeben wird.
Verwenden Sie die Senden-Funktion mit dem Typ „sagen“ und geben Sie als Äußerung an, was der Avatar sagen soll. Die Äußerung ist das, was Plural Online (über Google TTS) in seinem aktuellen Sprachmodell ausgibt.
messaging.send('say', {
utterance: 'Thank you for your order! We will deliver your flowers to ' + this.formData.address + ' in 2 days!'
});
Daten senden und als Attribut im Plural verwenden (Variable setzen)
Der folgende JS-Code ruft die Sendefunktion auf, verwendet die Set-Variable als Typ und überträgt Daten im JSON-Format:
const formData = {
firstName: this.formData.firstName,
lastName: this.formData.lastName,
email: this.formData.email,
orderedBouquet: this.formData.orderedBouquet,
address: this.formData.address,
};
messaging.send('set_variable', formData);
In Plural zu Attributen wechseln:
Schreiben Sie $.KeyFromJSONPath, z. B. $.firstName, in das Eingabefeld „Enter JSON key path“, um auf das Schlüssel-Wert-Paar aus den von Ihnen übermittelten Daten zuzugreifen, und geben Sie einen Attributnamen ein, unter dem Sie es im Plural verwenden möchten, z. B. firstName:
Senden Sie den Befehl zum Schließen (close)
Verwenden Sie die Funktion „Senden“ mit dem Typ „Schließen“, um einen Schließbefehl zu senden:se the function send with type 'close' to send a close command:
messaging.send('close')
Sie haben die Möglichkeit, { stopSpeech: true } als Nutzlast hinzuzufügen, damit der Avatar aufhört zu sprechen, wenn der Befehl zum Schließen ausgeführt wird.
messaging.send('close', { stopSpeech: true })
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 Zeichenfolge eingeben oder #ATTRI/attributeName verwenden, wobei attributeName 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.