Einsatz von PerformX-Widgets

Widgets können mit iFrames in die Website integriert werden, wie zum Beispiel
- Publikation Kursangebot mit komplettem Warenkorb-Prozess
- Publikation von Informationen aus PerformX wie z.B. Mitglieder oder Dozierende
- Präsentation “Aktuelle Kurse” für Besucherleitsystem (Digital Signage)
Sie sind als funktionale, interaktive Elemente ausgelegt
Website-Content für die Indexierung durch Suchmaschinen muss im CMS gepflegt werden
Die Widgets sind für den barrierefreien Einsatz vorbereitet

Standard-Widgets PerformX

Event-Publikation und -Anmeldung

Das Widget für Ereignispublikation und -Anmeldung ist eine effiziente Standardlösung für die Integration in Websites. Die inhaltlichen und funktionalen Details sind hier dokumentiert.

Die öffentliche Kursliste ist unter dem folgenden Link erreichbar (die Kunden-Domain muss durch die Domain-Adresse des Kunden ersetzt werden): [Kunden-Domain/public/Ereignis/PublicList]

Terminansicht für Digitale Signage

Das Termin-Widget kann zur Anzeige auf Info-Screens verwendet werden. Es stellt Terminplan mit Informationen zu Ereignis, Dozierenden und Räumen dar. Angezeigt werden aktuelle und zukünftige Termine des aktuellen Tages.

Kursnummer
Kurs
Bezeichnung des Termins
Beginnzeit
Endezeit
Referierende
Raumnummer

Einbindung in Webseiten

Konfiguration

Ein öffentliches Widget kann in einer externen Website über ein HTML iframe eingebunden werden.

<iframe src="https://{{grund_url}}/public/{{klasse}}/{{widget_name}}?kriterien={{Publikationskategorien}}</iframe>

Dabei können können die folgenden Parameter gesetzt werden:

{{grund_url}}: Die Grundurl auf der die Application läuft. z.B. “performx.kunde.ch”
{{klasse}}: Die betreffende Klasse (z.B. “Ereignis”, “Termin”)
{{widget_name}}: Der Name des Widgets. Aktuell gibt es das Event-List Widget (publiclist)
{{Publikationskategorie}}: Der interne Name der Publikationskategorie nach der gefiltert werden soll (nur Event-Publikation)

Beispiel-URL Ereignispublikation:

https://INSTANZ.azurewebsites.net/public/Ereignis/publiclist

Beispiel-URL Ressourcenübersicht:

https://INSTANZ.azurewebsites.net/public/Termin/publiclist

Für eine Darstellung im Desktop-Modus werden für Höhe und Breite mindestens 768 Pixel benötigt. Darunter wechselt die Darstellung in den Mobile-Modus.

Widget mit dynamischer Höhe einbinden

Falls in einem Widget nur wenige Einträge aufgelistet werden, führt das bei einfacher Einbindung dazu, dass viel Weissraum angezeigt wird. Daher empfiehlt es sich, folgendes Script beim Laden der Seite auszuführen:

<script>
	const iframe = document.getElementById('remote');
	window.addEventListener("message", (event) => {

		const minHeight = 375;
		const maxHeight = 2000;
		const drilldownHeight = 800;

		if (event.data && event.data.source === 'bloqs-list' && event.data.event === 'loaded') {
			const calculatedHeight = 250 + (event.data.content.visibleElements +1) * 33.5;
			if (calculatedHeight < minHeight) {
				iframe.height = minHeight
			} else if (calculatedHeight >= minHeight && calculatedHeight < maxHeight){
				iframe.height = calculatedHeight;
			} else {
				iframe.height = maxHeight;
			}
		}

		if (event.data && event.data.source === 'bloqs-detail' && event.data.event === 'loaded'){
			iframe.height = drilldownHeight;
		}
	});
</script>

Darstellung auf Bildschirmen mit grosser Auflösung

Bei der Darstellung auf Bildschirmen mit grosser Auflösung werden Widgets unter Umständen zu klein dargestellt.

In solchen Fällen kann das iframe in ein eigenes HTML-Dokument eingebunden und dort vergrössert werden. Anschliessend wird dieses HTML-Dokument angezeigt.

-xy-transform:scale bestimmt den Vergrösserungsfaktor (in Klammern; kann zur Verkleinerung auch unter 1.00 liegen) für die entsprechende Browser-Technologie
-xy-transform-origin zentriert den Inhalt für die entsprechende Browser-Technologie

Beispiel für Darstellung auf einem 4K-Monitor:

<html>
	<style>
		#wrap {
			height:770px,
			width: 100%;
			padding: 0;
			overflow: hidden;
		}
		
		#scaled-frame {
			width: 100%;
			height: 100%;
			border: 0px;
		}
		
		#scaled-frame {
			zoom: 2.00;
			-moz-transform: scale(2.00);
			-moz-transform-origin: 0 0;
			-o-transform: scale(2.00);
			-o-transform-origin: 0 0;
			-webkit-transform: scale(2.00);
			-webkit-transform-origin: 0 0;
		}
		
	</style>
	<div id="wrap">
		<iframe id="scaled-frame" src="https://instanz-plus-test.azurewebsites.net/public/Termin/PublicList" height=100% width=100%></iframe>
	</div>
</html>

Empfehlung für CMS-Integration

Grundlagen

Die Widgets zur Kurspublikation und -anmeldung sind funktionale Elemente, die dynamischen Inhalt interaktiv zur Verfügung stellen. Dieser Inhalt stammt direkt aus PerformX Cloud und wird nirgends zwischengespeichert
In den Widgets werden nebst der Präsentation von Informationen der komplette Anmeldeprozess inklusive Warenkorb, Preisberechnung, Online-Zahlung etc. abgewickelt
Die Widgets ersetzen nicht die marketingorientierte Produktpräsentation und sind nicht für die Anzeige von SEO-relevanten Inhalten ausgelegt. Sie ersetzen damit nicht den suchmaschinen-relevanten Content der Website

Optimale Integration

Idealerweise wird die Publikation der Angebotseckwerte inklusive Strukturierung und Bildmaterial im CMS abgebildet. Diese Informationen sind mehrheitlich statisch und ändern sich kaum (Hoheit Marketing)
Pro Angebot ergänzt werden diese Daten mit den entsprechenden Durchführungen aus PerformX. Hier geht es um die Fakten wie verfügbare Termine, freie Plätze, Kosten sowie den kompletten Anmeldeprozess (Hoheit Bildungsadministration)
Somit kann eine klare Trennung von den beiden Zuständigkeiten und Daten definiert werden, so dass keine Überschneidungen entstehen und somit auch nicht doppelt geführt werden müssen
Für Marketing-Aktivitäten wie E-Mail-Newsletter, LinkedIn-Posts oder Verlinkung mit QR-Codes kann auch direkt auf einzelne Kursdetails im Widget verlinkt werden

PerformaNET Confluence