Einbindung von Shop / Mitwirkendenportal über iframe

Mit der iframe-Einbindung könnt Ihr den festiware-Shop oder das Mitwirkendenportal einfach in 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

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.
• inlineCss (optional) sind Anpassungen innerhalb des Shops. Du kannst alle Elemente innerhalb des iFrames auf diese Weise optisch anpassen
• cssFile (optional) wie inlineCss - nur könnt ihr hier eine URL zu einer CSS-Datei angeben, die alle Anpassungen beinhaltet. z.B. https://eurewebseite.de/assets/shop.css