So fügst du ein Video-Widget zu Framer hinzu

Wie installierst du CompleteGreet in Framer?

Kopiere das Widget-Skript von CompleteGreet in den benutzerdefinierten Code deines Framer-Projekts und veröffentliche dann die Website. Das Skript lädt das schwebende Widget auf deinen Seiten.

1. Öffne in CompleteGreet die Widget-Einrichtung und kopiere das Installationsskript. Verwende das Skript für das Widget, das du eingerichtet hast, und keinen Einbettungscode für ein Video innerhalb einer Seite.

2. Öffne in Framer das Projekt und wähle Project Settings, dann Custom Code in der linken Seitenleiste. Klicke auf Add Script oder auf das Pluszeichen, wenn bereits Code-Einträge vorhanden sind. Gib dem Eintrag einen Namen, den du später wiedererkennst.

3. Wähle start of head als Position und All pages für die Seiten. Füge das vollständige Skript in das Code-Feld ein. Lass das Skript unverändert.

4. Speichere den Eintrag, kehre zum Seiteneditor zurück und klicke auf Publish. Änderungen in Project Settings erscheinen erst auf der Website, wenn die erneute Veröffentlichung abgeschlossen ist. Prüfe die veröffentlichte URL.

Du findest Custom Code in Project Settings, außerhalb des Canvas-Editors.

Verwende für die erste Prüfung die öffentliche URL. Die Vorschau im Editor unterscheidet sich von der veröffentlichten Website. Ein privates Browserfenster hilft, eine alte Seitenversion oder eine bestehende Anmeldung als Ursache auszuschließen.

Wenn du zum Beispiel eine Portfolio-Website veröffentlicht hast, öffne ihre Startseite und warte einige Sekunden auf das schwebende Widget. Füge dann die URL einer zweiten Seite in den Browser ein, um zu prüfen, ob All pages auch dort greift.

Prüfe dieselbe URL sowohl am Computer als auch bei einer schmalen Smartphone-Breite von etwa 390 Pixeln. Wenn das Widget am Computer erscheint, auf dem Smartphone aber nicht, prüfe zuerst, ob eine feste Navigationsleiste oder ein Cookie-Hinweis es verdeckt. Ändere erst danach das Installationsskript.

Wenn das Widget auf keiner Seite erscheint, gehe zurück zu Custom Code. Prüfe, ob der Eintrag gespeichert und aktiviert ist und weiterhin auf start of head steht. Korrigiere ihn, veröffentliche die Website erneut und lade die öffentliche Seite neu.

Was kannst du in Framer anpassen?

Auf einer Framer-Website steuerst du die Zielseiten, Widget-Aktionen, Formulareingaben und das Branding im Widget-Dienst statt im Framer-Seiteneditor. Framer steuert das umgebende Layout.

Stelle das Widget so ein, dass es auf bestimmten URLs erscheint. Prüfe die veröffentlichte Seite dann unter genau der Adresse, die du ausgewählt hast. Ein abschließender Schrägstrich kann bei einem schnellen Test zu Fehlern führen. Nutze deshalb die veröffentlichte URL und verlasse dich nicht allein auf die Vorschau im Editor.

Wähle die Aktion, die zur Seite passt: einen Link, eine Terminbuchung, einen Chat, einen Anruf, einen Link zur Produktseite oder ein Formular. Beschrifte die Hauptschaltfläche klar, damit Besucher vor dem Tippen wissen, was passiert.

Mit einem Formular können Besucher Angaben senden, ohne die Seite zu verlassen. Teste die Pflichtfelder und das Ziel der übermittelten Daten auf der veröffentlichten Website, nicht nur in den Einstellungen.

Beim Branding gibt es eine praktische Grenze: Die Seitenstile von Framer steuern ein eingebettetes Widget nicht automatisch. Mit dem BUILD-Tarif von CompleteGreet kannst du das Built With-Abzeichen entfernen. Prüfe das endgültige Aussehen in der Widget-Vorschau, bevor du veröffentlichst.

Was solltest du vor dem Start prüfen?

Teste die veröffentlichte Seite am Computer und auf einem Smartphone. Prüfe, ob die Videobubble weder Navigation noch Cookie-Hinweise oder fest platzierte Schaltflächen verdeckt. Eine Vorschau allein reicht nicht.

Öffne die Bubble am Computer und probiere alle Bedienelemente aus. Schließe sie und prüfe, ob du die Seite weiterhin normal scrollen kannst. Tippe auf dem Smartphone auf die Schließen-Schaltfläche und jede Schaltfläche im Video. Kleine Ziele, die mit einer Maus gut funktionieren, lassen sich mit dem Daumen manchmal schwer treffen.

Prüfe auch den schmalsten mobilen Breakpoint, also die Bildschirmbreite, bei der sich das Layout ändert. Dort können Elemente in Framer näher zusammenrücken.

Die Auswahl der Zielseiten braucht einen eigenen Test. Öffne die genaue URL, auf der die Bubble erscheinen soll. Prüfe danach die Startseite und eine benachbarte Seite, auf der sie verborgen bleiben soll.

CompleteGreet kann Bubbles auf bestimmten URLs anzeigen. Teste bei jeder Regel sowohl die Seiten, auf denen die Bubble erscheinen soll, als auch die Seiten, auf denen sie verborgen bleiben soll. Eine verborgene Bubble allein beweist noch nicht, dass die Einrichtung stimmt. Prüfe, ob die Regel zum veröffentlichten Seitenpfad passt, besonders bei verschachtelten Seiten wie einer Produktseite unter einem Kategoriepfad. Halte die Test-URLs in einer kurzen Liste fest, während du die Regel anpasst. So prüfst du jede Änderung anhand derselben Seiten.

Häufige Fragen

Welches Framer-Element nimmt ein Video-Widget-Skript auf?

Für ein schwebendes CompleteGreet-Widget fügst du das Installationsskript wie oben beschrieben unter Project Settings und dann Custom Code ein. Die Embed-Komponente von Framer ist für Inhalte innerhalb der Seite gedacht, darunter iframe-Einbettungen und Skripte, die solche Einbettungen erzeugen. Prüfe nach dem Einfügen des Skripts die veröffentlichte Website, um sicherzustellen, dass das Widget an den vorgesehenen Stellen lädt.

Was sollte ich prüfen, wenn eine Embed-Komponente in Framer leer bleibt?

Prüfe bei einer iframe-Einbettung, ob die URL oder das Skript in der Embed-Komponente eingetragen ist und die Quelle Einbettungen erlaubt. Manche Websites blockieren sie über HTTP-Header. Prüfe beim schwebenden CompleteGreet-Widget das Skript unter Project Settings und dann Custom Code. Stelle sicher, dass die URL-Regeln die Adresse der veröffentlichten Seite einschließen. Teste die veröffentlichte Seite, bevor du von einer fehlgeschlagenen Installation ausgehst.

Funktioniert die Video-Komponente von Framer wie eine schwebende Videobubble?

Nein. Die Video-Komponente von Framer zeigt Videos innerhalb des Seitenlayouts. Eine schwebende Begrüßung mit CompleteGreet verwendet dagegen ein eingebettetes Widget-Skript. Nutze die Video-Komponente von Framer für hochgeladene oder gehostete Videos mit Optionen wie automatischer Wiedergabe und Vorschaubild. Verwende Project Settings und dann Custom Code für die schwebende Begrüßung mit CompleteGreet.

Können Framer-CMS-Felder steuern, welches Video auf jeder Detailseite erscheint?

Ja. Füge für ein externes Video ein Klartextfeld namens Video URL hinzu oder für ein hochgeladenes Format wie MP4 ein File-Feld. Verbinde dieses Feld dann über eine Variable mit der Video-Komponente von Framer. Das Video kann sich mit jedem CMS-Eintrag ändern. Eine Begrüßung mit CompleteGreet ist eine separate Widget-Einbettung und kein Videofeld innerhalb des CMS-Seitenlayouts.