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
• params (optional) sind zusätzliche Parameter für den Shop, etwa ein fest hinterlegter Gutschein-Code: params: {coupon: 'SOMMER26'}
• forwardParams (optional) steuert, welche Parameter von Eurer eigenen Adresse an den Shop weitergereicht werden — siehe unten

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.

Gutschein-Codes und Direktlinks im iframe

Der Shop versteht ein paar Zusätze in der Adresse: ?coupon= für einen Gutschein-Code, ?oid= für ein einzelnes Produkt und ?cat= für eine Produktkategorie. Was die im Einzelnen tun, steht in Versteckter Link und Direktlinks. Im iframe gibt es dafür zwei Wege.

Fest in der Einbindung hinterlegt — wenn auf dieser Seite immer derselbe Code gelten soll:

<script>new FestiwareElement({
        element: 'shop',
        path: 'shop/s2025',
        params: {coupon: 'SOMMER26'}
});</script>

Aus der Adresse Eurer eigenen Seite — wenn eine Kampagne oder ein Newsletter auf Eure Seite verlinkt und den Code mitbringt. Ruft jemand https://eurewebseite.de/tickets?coupon=SOMMER26 auf, reicht das Skript den Code an den Shop im iframe weiter. Einstellen müsst Ihr dafür nichts.

Weitergereicht werden ausschließlich coupon, oid und cat. Alles andere aus Eurer Adresse, etwa utm_source, bleibt außen vor. Nutzt Eure Seite selbst einen Parameter mit einem dieser Namen für etwas anderes, schaltet Ihr die Weitergabe mit forwardParams: false ab oder gebt eine eigene Liste an, etwa forwardParams: ['coupon'].

Gilt mehreres gleichzeitig, gewinnt das Genauere: params vor dem Zusatz im path, und dieser vor der Adresse Eurer Seite.