iFrame und Web Komponenten

iFrame-Einbettung

Wenn im Reseller-Portal entsprechend aktiviert, kann der Sitzungsraum als iFrame in Ihre Web- oder Electron-Anwendung eingebettet werden.

Es gibt keine spezielle iFrame-URL, Sie können die Standard-URL des Sitzungsraumes verwenden, um den Raum in Ihre Website einzubetten. Um den Raum und sein Verhalten weiter zu konfigurieren, können Sie zusätzliche URL-Parameter hinzufügen. Eine vollständige Liste der verfügbaren URL-Parameter finden Sie in der Dokumentation URL-Parameter.

<iframe src="https://<Meeting Room URL><?Optional Query Parameters>"
  allow="microphone;camera;encrypted-media;fullscreen;autoplay;display-capture;layout-animations;">
</iframe>

Wichtig: Stellen Sie sicher, dass Sie die notwendigen iFrame-Berechtigungen (allow) wie im obigen Beispiel definiert konfigurieren.

Web-Komponenten

Überblick

Webkomponenten sind benutzerdefinierte HTML-Tags, die Sie in jede beliebige Website einbinden können und damit Web-Meeting-Komponenten direkt in Ihrem Code einbetten, ohne einen iFrame zu verwenden.

Die Webkomponenten verfügen über eine Javascript-API, mit welcher Sie den Sitzungsraum kontrollieren (Details finden Sie in der Dokumentation Javascript APIs).

Verwendung

Webkomponenten bestehen aus zwei Teilen: einem HTML-Element und einem Javascript. Sie verwenden das HTML-Element auf die gleiche Weise wie andere HTML-Elemente: Positionieren Sie das Element irgendwo in Ihrer Website und konfigurieren Sie es durch Attribute. Das Javascript muss nach dem HTML-Element eingebettet werden.

HTML

Die Veeting Webkomponenten haben Konfigurationsoptionen, die als HTML-Attribute definiert werden können. Im folgenden Beispiel der Webkomponente Coffee Table werden vier Attribute definiert:

AttributenameBeschreibung
api-hostDie URL Ihrer Web-Meeting Instanz, z. B. https://rooms.veeting.com
participant-nameDer Name des Teilnehmers. Er wird den anderen Teilnehmern im Sitzungsraum angezeigt. Sie können Anonym verwenden, wenn Sie den Namen nicht kennen.
meeting-idDie Sitzungs-ID, mit der sich die Komponente verbinden soll, z. B. "0000-0000-0000-0000"
css-urlOptional: eine URL zu einer externen CSS-Datei. Dies ermöglicht es Ihnen, Stile zu überschreiben und die Komponente zu gestalten
<coffee-table api-host="https://<Web Meeting Domain Name>"
  participant-name="Joe Doe"
  meeting-id="3973-0113-4384-0768"
  css-url="https://<URL to an external CSS file, optional>"></coffee-table>

Auf der Dokumentationsseite der Komponente Coffee Table finden Sie eine vollständige Liste der verfügbaren Konfigurationsattribute.

Javascript

Sie müssen zwei Javascript-Dateien einbetten, damit die Komponente funktioniert. Die erste Datei ist der offizielle WebRTC-Adapter. Dieser Adapter sorgt dafür, dass WebRTC in allen unterstützten Browsern funktioniert. Das zweite Javascript ist die eigentliche Webkomponente, die dem HTML-Element Leben einhaucht. Sie sollten die Webkomponente Javascript aus Ihrer Web-Meeting-Instanz einbetten, zum Beispiel https://rooms.veeting.com.

<!-- embedd the WebRTC adapter for browser compatibility -->
<script type="text/javascript"
  src="https://webrtc.github.io/adapter/adapter-latest.js">
</script>

<!-- embedd the web component code -->
<script type="text/javascript"
  src="https://<Web Meeting Domain Name>/component/coffee-table/elements.js">  
</script>

Sind Sie nicht sicher, wie Sie Ihr Projekt am Besten umsetzen sollen?

Sprechen Sie mit unserem Team über Ihre Pläne.