Einbindung von Shop & Formulare über iframe

Mit der iframe-Einbindung könnt Ihr den festiware-Shop oder die öffentliche Formulare einfach auf Eurer Webseite einbinden. Es sind nur wenige Zeilen Code erforderlich. Und das Beste: Das Design könnt Ihr frei über CSS anpassen. Außerdem passt sich das iframe dynamisch an die Größe der gerade aufgerufenen Seite bei festiware an.

Nehmen wir beispielsweise an, Euer Shop ist unter der URL https://eureinstanz.festiware.app/shop zu erreichen. Wollt ihr ihn auf eurer Webseite einbinden, müsst ihr folgende Zeilen innerhalb Eurer Webseite einfügen:

<div id="shop" class="container-small"></div>

<script src="https://eureinstanz.festiware.app/embed.js" type="application/javascript"></script>
<script>new FestiwareElement({
        element: 'shop',
        path: 'shop',
        inlineCss: '#header4, .intro, h1 {display: none}'
});</script>

Zur Erklärung:

Das DIV-Element wird in diesem Beispiel euren Shop auf eurer Webseite beinhalten. Ihr könnt es mit Klassen so gestalten, dass es sich in eure Webseite einfügt.

Als nächstes wird das Javascript geladen. Hier könnt ihr auch auf eurer Seite die englische Version der festival-Seite einbinden. Hierzu schreibt ihr einfach vor embed.js      noch en/      -> also z.B. https://eureinstanz.festiware.app/en/embed.js      

Im Anschluss mit euren Einstellung initialisiert:

• element (Pflichtangabe) ist die ID eures DIV-Elemments
• path (Pflichtangabe) ist der URL-Pfad zu eurer Seite auf festiware.app - in unserem Beispiel zum Shop. Bitte beachtet, dass Ihr noch das jeweilige Projektkürzel anfügen müsst, z.B. 'shop/s2025'
• inlineCss (optional) sind Anpassungen innerhalb des Shops. Du kannst alle Elemente innerhalb des iFrames auf diese Weise optisch anpassen
• cssFile (optional) wie inlineCss. Zusätzlich könnt ihr hier eine URL zu einer CSS-Datei angeben, die alle Anpassungen beinhaltet. z.B. https://eurewebseite.de/assets/shop.css

Weitere einbindbare Seiten

Das Prinzip funktioniert nicht nur für den Shop – auch die öffentliche Formulare lassen sich auf dieselbe Weise einbinden. Ihr müsst lediglich den path      entsprechend anpassen, z. B.:

• path: 'register/euer-formular'      für ein öffentliches Formular

CSS-Anpassungen über inlineCss      und cssFile      funktionieren dabei für alle drei Varianten gleich.