Fremde Dienste einbinden: Link, iFrame oder Skript

Ein fremder Code läuft auf eurer Website mit, als wäre er ein Teil davon. Deshalb lohnt ein kurzer Blick, bevor er eingebaut wird:

• Datenschutz: Die meisten Dienste laden Inhalte von fremden Servern und setzen eigene Cookies. Sie dürfen erst laden, wenn Besucher im Cookie Banner zugestimmt haben, und gehören in eure Datenschutzerklärung.
• Sicherheit: Ein Skript kann alles auf der Seite lesen und verändern. Deshalb speichert die Rolle Canvayo Admin Skripte.
• Tempo und Barrierefreiheit: Jeder fremde Dienst bringt eigene Dateien mit. Ob er mit Tastatur und Screenreader bedienbar ist, liegt beim Anbieter.

Deshalb gilt: so einfach wie möglich einbinden. Oft reicht ein Link.

• Link oder Button: Der Dienst öffnet seine eigene Seite, zum Beispiel ein Ticketshop oder eine Online-Terminbuchung. Das ist der einfachste und sicherste Weg: kein Cookie, nichts, was kaputtgehen kann. Einen Button setzt ihr im Texteditor über „Call-to-Action-Button Shortcode“ oder im Button-Feld eines Blocks.
• iFrame: Der Dienst erscheint in einem Fenster auf eurer Seite, zum Beispiel ein Buchungskalender, eine Karte, ein Blätterkatalog oder eine Umfrage. Erkennbar daran, dass der Code des Anbieters mit <iframe beginnt.
• Skript: Der Dienst bringt Programmcode mit, erkennbar an <script, zum Beispiel ein Chatbot, ein Bewertungs-Badge oder ein Buchungswidget. Hier entscheiden Rolle und Cookie Banner, ob er funktioniert.

Für einige Dienste gibt es eigene Wege, die ihr statt fremdem Code nutzt: Videos über den Video-Block, Instagram über die Instagram-Verbindung und Google-Bewertungen.

1. Öffnet die Seite und den Textblock, in dem der Dienst erscheinen soll.
2. Klickt über dem Texteditor auf „Iframe“. Es öffnet sich das Fenster „Embed Iframe“, es ist englisch beschriftet.
3. Tragt unter „IFRAME URL“ die Adresse ein, die der Anbieter euch gibt. Steht im Code des Anbieters <iframe src="https://…", nehmt nur die Adresse zwischen den Anführungszeichen hinter src=.
4. Wählt unter „ASPECT RATIO“ das Seitenverhältnis, zum Beispiel 16by9 für ein Video oder 4by3 für einen Kalender.
5. Wählt unter „BLOCK IFRAME UNTIL THIS COOKIE IS ACCEPTED“ den Cookie des Dienstes, zum Beispiel youtube. Dieser Blocker sorgt dafür, dass der Dienst erst lädt, wenn Besucher ihm im Cookie Banner zugestimmt haben.
6. Klickt auf „Insert this Iframe“ und speichert die Seite. Im Text steht jetzt eine Zeile, die mit [iframe beginnt. Sie bleibt beim Speichern erhalten, egal mit welcher Rolle ihr arbeitet.

Den Blocker könnt ihr nur wählen, wenn der Dienst im Cookie Banner angelegt ist. In der Liste stehen die Cookies der Dienste, die dort angelegt sind; für YouTube, Vimeo und Google Maps gibt es fertige Dienste. Für alles andere legt eine Person mit der Rolle Canvayo Admin einen eigenen Dienst an, siehe „Skript einbinden“ unten. Wie der Cookie Banner funktioniert, steht in Cookie Banner: Opt-in und Blocker. Mehr zu den Einstellungen des Shortcodes steht in Shortcode.

Nicht jede Seite lässt sich einbetten. Bleibt das Fenster leer, obwohl ihr zugestimmt habt, erlaubt der Anbieter keine Einbettung. Dann nehmt einen Link.

Fügt keinen fertigen Einbettungscode von YouTube ein. Er lädt das Video direkt von YouTube, samt Werbe-Cookies, noch bevor jemand zugestimmt hat. Nehmt stattdessen den Video-Block oder den Iframe-Shortcode mit dem Link zum Video und wählt als Blocker „YouTube“ oder „Vimeo“. Die Website bindet YouTube-Videos dann im erweiterten Datenschutzmodus ein, und das Video lädt erst nach Zustimmung.

Hochformate wie YouTube Shorts passen nicht in den Video-Block, der zeigt Videos immer im Querformat. Nehmt dafür den Iframe-Shortcode mit der Adresse in der Form https://www.youtube-nocookie.com/embed/VIDEO-ID (die Video-ID ist der Teil nach /shorts/ im Link) und tragt unter „STYLE (INLINE CSS)“ eine feste Höhe ein, zum Beispiel width:100%!important;height:640px!important;. Fragt uns gern, wenn es nicht auf Anhieb passt.

Ein Skript gehört an eine von zwei Stellen:

• Auf jeder Seite, zum Beispiel ein Chatbot oder ein Tracking-Code: als eigener Dienst im Cookie Banner. Unter „CANVAYO“ → „Cookie-Opt-in“, Reiter „Dienste“, wählt ihr bei „Voreingestellte Dienste“ zusätzlich „Eigenes Skript“. Dann tragt ihr Name, Beschreibung und Anbieter des Dienstes ein, den Namen seines Cookies und unter „Snippet“ den Code. So lädt das Skript erst nach Zustimmung, und Besucher sehen im Cookie Banner, wofür es steht. Den dort vergebenen Cookie-Namen könnt ihr danach auch als Blocker für einen iFrame wählen.
• An einer Stelle einer Seite, zum Beispiel ein Buchungswidget: im Textblock dieser Seite, eingefügt im Reiter „Text“ des Editors.

Dabei gilt:

• Skripte speichert die Rolle Canvayo Admin. Speichert jemand mit der Rolle Canvayo User die Seite, nimmt das System den Code beim Speichern heraus. Das passiert auch, wenn diese Person an einer ganz anderen Stelle der Seite nur einen Tippfehler korrigiert, denn gespeichert wird immer die ganze Seite.
• Immer im Reiter „Text“ speichern. Wer eine Seite mit Code im Reiter „Visuell“ öffnet und speichert, riskiert, dass der Editor den Code verändert oder entfernt.
• Jede Sprache einzeln. Hat eure Website mehrere Sprachen, baut den Dienst auf jeder Sprachseite ein. Löscht jemand den Code auf einer Sprachseite, fehlt er nur dort.

Den Cookie Banner pflegt die Rolle Canvayo Admin. Wer Seiten mit Code pflegt, sollte deshalb ebenfalls Canvayo Admin sein, oder diese Seiten werden nur von Canvayo Admins gespeichert. Für eigene, umfangreichere Module gibt es den HTML-Block: Dort hinterlegt das CANVAYO-Team den Code, und er bleibt beim Speichern der Seite unverändert, wer auch immer speichert. Den Block richten wir auf Anfrage für euch ein.

Jeder Dienst, den ihr selbst einbindet, gehört in eure Datenschutzerklärung. Welche Funktionen von CANVAYO selbst dort stehen müssen, zeigt die Liste in Hinweise zu Rechtstexten. Wie ihr eure Datenschutzerklärung ergänzt, steht in Impressum und Datenschutzerklärung selbst pflegen.

• Ihr habt ein Skript, aber niemand mit der Rolle Canvayo Admin kann es einbauen.
• Der Dienst soll Daten mit eurer Website austauschen, zum Beispiel Termine, Produkte oder Buchungen über eine Schnittstelle.
• Ein Chatbot oder Widget soll auf jeder Seite erscheinen und muss zum Design passen.
• Ihr seid unsicher, ob ein Code vertrauenswürdig ist.

• Code nach dem Speichern verschwunden? Die Seite wurde von jemandem mit der Rolle Canvayo User oder im Reiter „Visuell“ gespeichert. Code neu einfügen lassen, im Reiter „Text“ speichern.
• Nur ein grauer Kasten oder ein Hinweis zur Zustimmung? Der Blocker wartet auf eure Zustimmung im Cookie Banner. Stimmt zu und ladet die Seite neu.
• Kein Blocker auswählbar? Der Dienst ist im Cookie Banner noch nicht angelegt.
• Fenster bleibt leer, auch nach Zustimmung? Der Anbieter erlaubt keine Einbettung. Nehmt einen Link.
• Fehlt nur auf einer Sprachseite? Dort ist der Code nicht eingebaut oder wurde entfernt.
• Sieht am Handy abgeschnitten aus? Seitenverhältnis oder Höhe im Iframe-Shortcode prüfen.

Kommt ihr nicht weiter, schreibt uns, auf welcher Seite der Dienst erscheinen soll, und schickt den Code oder Link des Anbieters mit.