Was bedeutet das?
In diesem Artikel wird erklärt, wie Sie Ihren Palisis-Webshop mithilfe eines iFrames zu Ihrer eigenen Website hinzufügen können. Dadurch können Besucher Ihre Touren oder Aktivitäten ansehen, ein Datum auswählen, buchen und direkt über eine Seite Ihrer Website bezahlen, während Palisis den Buchungsprozess im Hintergrund verwaltet.
Verwenden Sie diesen Leitfaden, um die empfohlene Einrichtung zu verstehen, zu erfahren, was Sie Ihren Webdesigner oder Ihre Agentur mit der Implementierung beauftragen sollten, und welche Webshop-Einstellungen zu einem reibungsloseren Buchungserlebnis für Ihre Kunden beitragen können.
Allgemeine Kenntnisse
Palisis-Webshop
Lesen Sie hier die Hinweise zur Einrichtung: Erste Schritte mit dem neuen Webshop
Der Palisis-Webshop ist ein einfach zu integrierender Onlineshop, mit dem Veranstalter von Touren und Aktivitäten Erlebnisse direkt über ihre eigene Website verkaufen können.
Bei korrekter Einbettung können Kunden Angebote durchsuchen, Termine auswählen, den Buchungsvorgang abschließen und bezahlen, ohne den Eindruck zu haben, die Markenumgebung des Veranstalters verlassen zu haben.
iFrame
Stellen Sie sich einen iFrame oder Inline Frame als ein Fenster innerhalb einer Website vor, das Inhalte einer anderen Website anzeigt.
Statt den Kunden von der Website des Tourveranstalters auf eine separate Buchungsseite weiterzuleiten, ermöglicht ein iFrame, dass der Palisis-Webshop direkt innerhalb der bestehenden Seite des Veranstalters angezeigt wird.
Kunden entscheiden sich in der Regel aus drei Hauptgründen für diese Einrichtung:
- Einheitliches Markenbild: Der Buchungsprozess bleibt visuell mit der Website und Domain des Veranstalters verbunden.
- Weniger Reibung: Weniger Weiterleitungen können den Kaufprozess schneller und vertrauenswürdiger wirken lassen und dadurch die Conversion unterstützen.
- Einfache Integration: Die Website des Veranstalters kann den Webshop anzeigen, während Palisis die Buchungslogik weiterhin im Hintergrund übernimmt.
Best Practices
Die Einbettung des Webshops in einen iFrame funktioniert in der Regel am besten, wenn der Webshop speziell für diesen Kontext konfiguriert ist. Die folgenden Empfehlungen tragen dazu bei, ein übersichtlicheres und nahtloseres Erlebnis für Kunden zu schaffen.
Um die Webshop-Einstellungen anzupassen, öffnen Sie die Webshop-Konfiguration und wählen Sie den Tab Erweitert. Aktivieren oder deaktivieren Sie dort Parameter wie Layout, Farbe und Verhalten des Buchungsprozesses, damit der eingebettete Webshop besser zur Marke und zum Webdesign des Kunden passt.
Empfohlene Einstellungen:
-
Logo ausblenden: Blenden Sie das Palisis-Logo aus, wenn der Webshop bereits in die Markenseite des Veranstalters eingebettet ist. Dadurch wird eine doppelte Markenkennzeichnung vermieden und ein stärkeres White-Label-Erlebnis geschaffen.
-
Direktbuchungs-URL verwenden: Verlinken Sie den iFrame nach Möglichkeit mit dem relevantesten Angebot oder Einstiegspunkt für die Buchung. Dadurch wird unnötige Navigation reduziert und Kunden gelangen schneller zum Kauf.
Um die Direktbuchungs-URL zu erhalten, gehen Sie zum Tab Angebote, öffnen Sie das Angebot über das Symbol für externe Links auf einer neuen Seite und kopieren Sie die URL. Der direkte Angebotslink sieht beispielsweise so aus:
https://example.palisis.com/?offer-direct=r-7177. -
Kontaktinformationen ausblenden: Entfernen Sie Kontaktdaten aus der Webshop-Oberfläche, wenn der Veranstalter diese bereits auf einer eigenen Seite mit Impressum oder Kontakt bereitstellt. Dadurch bleibt der Checkout-Bereich übersichtlicher und doppelte Informationen werden vermieden. Referenz: So blenden Sie die Kontaktdaten im neuen Webshop aus
Dies sind empfohlene Standardeinstellungen für einen eingebetteten Webshop. Je nach Markenstil des Veranstalters, Website-Layout und bevorzugtem Buchungsablauf können auch andere Parameter angepasst werden.
Integration des iFrame Resizers
Die Palisis-Desktop-Engine verwendet ein Drittanbieter-Tool namens iFrame Resizer, damit ältere eingebettete Webshop-Implementierungen ihre Höhe innerhalb der Host-Seite automatisch anpassen können. Rufen Sie das iFrame-Resizer-Skript für den iFrame-Container, der den neuen Webshop hostet, nicht auf und sprechen Sie diesen nicht an.
Die Palisis-Desktop-Engine verwendet ein Drittanbieter-Tool namens iFrame Resizer, damit der eingebettete Webshop seine Höhe innerhalb der Host-Seite automatisch anpassen kann.
Das Tool ist auf GitHub verfügbar: https://github.com/davidjbradshaw/iframe-resizer. Im Rahmen der Einrichtung der Desktop-Engine verknüpft und stellt Palisis die JavaScript-Datei iframeResizer.contentWindow.min.js mit jeder Instanz der Desktop-Engine bereit. Dies ist die einzige Voraussetzung seitens Palisis für die Verwendung dieses Tools mit der Host-Seite, also der Seite des Kunden, die den iFrame einbettet.
Wenn der Veranstalter sowohl den alten Webshop als auch den neuen Webshop auf derselben Website einbettet, darf der Webdesigner den iFrame Resizer nicht global auf alle iFrames anwenden. Binden Sie ihn nur an den spezifischen iFrame des alten Webshops, indem Sie eine eindeutige iFrame-id oder eine eigene CSS-Klasse verwenden, die nicht mit dem iFrame des neuen Webshops übereinstimmt.
Wichtig bei gemischten Einrichtungen mit altem und neuem Webshop: Verwenden Sie keinen allgemeinen Selektor wie iframe, .iframe oder eine gemeinsame Container-Klasse. Der Selektor muss ausschließlich auf den iFrame des alten Webshops verweisen. Der iFrame des neuen Webshops muss vom Selektor und von jeder Initialisierung des iFrame Resizers ausgeschlossen werden.
Beispielcode:
<!-- Alter Webshop-iFrame: nur diesen anpassen -->
<iframe id="oldWebshopIframe" src="https://old-shop-example.palisis.com/" style="width:100%; border:none"></iframe>
<!-- Neuer Webshop-iFrame: nicht mit iFrame Resizer ansprechen -->
<iframe id="newWebshopIframe" src="https://new-shop-example.palisis.com/" style="width:100%; border:none"></iframe>
<script>
iFrameResize(
{ checkOrigin: false, heightCalculationMethod: 'taggedElement' },
'#oldWebshopIframe'
);
</script>
Gut zu wissen
Palisis stellt die Buchungs-Engine bereit, aber wir erstellen oder warten die Website des Kunden nicht. Kunden sollten mit ihrem eigenen Webdesigner oder ihrer eigenen Webagentur zusammenarbeiten, um den iFrame korrekt zu platzieren, das Design der umgebenden Seite anzupassen und das Ergebnis auf verschiedenen Geräten zu testen.
Teilen Sie die folgenden Artikel mit dem Kunden oder dessen Webdesigner, damit diese die technischen Anforderungen für die Einrichtung des iFrames nachlesen können:
Für maximale Sicherheit und eine schnellere Einrichtung sollten Sie ein eigenes Unterbenutzerkonto für den Designer erstellen, anstatt ein bestehendes Benutzerkonto zu teilen. Dadurch erhält der Designer den für die Integration erforderlichen Zugriff, während der Kunde die Kontrolle über Berechtigungen und Shop-Einstellungen behält. Anleitung zur Benutzerverwaltung: So konfigurieren Sie neue Benutzer (Benutzerverwaltung)
Der Designer sollte nur Zugriff auf den Bereich Vertriebskanal > Webshop haben, sofern keine zusätzlichen Berechtigungen unbedingt erforderlich sind.
FAQs
Wofür sollte der Webdesigner des Kunden verantwortlich sein? ▼
Der Designer ist dafür verantwortlich, den iFrame zur Website des Kunden hinzuzufügen, das Layout der umgebenden Seite anzupassen, die Darstellung auf verschiedenen Bildschirmgrößen zu prüfen und webspezifische Stile anzuwenden. Palisis stellt den Webshop und die technische Dokumentation bereit, jedoch keine individuelle Website-Entwicklung.
Warum sollte eine Direktbuchungs-URL verwendet werden? ▼
Eine Direktbuchungs-URL kann Kunden näher zum relevanten Angebot oder Buchungsablauf führen und dadurch unnötige Klicks und Weiterleitungen reduzieren. Dies ist besonders hilfreich, wenn der iFrame auf einer eigenen Produkt- oder Erlebnisseite platziert wird.