Peacock

Theme

Peacock in Webflow einbauen ​

Webflow erlaubt Custom-Code im Site-Settings und in einzelnen Page-Settings — genau die richtige Stelle für den Embed-Script (Mode A). Du brauchst kein Code-Export aus Webflow, kein Hosting-Wechsel, keine Build-Pipeline. Ein Script-Tag, ein Embed-Element, fertig.

Voraussetzung ​

  • Ein Webflow-Plan, der Custom Code erlaubt: Site Plan Basic (Custom Code im Site-Header/Footer), CMS oder Business (zusätzlich Embed-Elemente pro Page).
  • Ein Peacock-Space-Slug, dessen Stories du in Webflow zeigen willst. Für den schnellen Test geht marketing-demo mit der Story /marketing-demo — die ist öffentlich lesbar.

Schritt 1 — Embed-Script Site-weit einbauen ​

Webflow-Dashboard → Site Settings → Custom Code → Footer Code:

html
<script
  src="https://peacock-cms.webhoch.com/embed.js"
  data-peacock-api="https://peacock-cms.webhoch.com"
  data-peacock-space="dein-space-slug"
  defer
></script>

Ein einziges Mal Site-weit. Speichern → Publish. Webflow rendert den Tag jetzt am Ende jeder Page kurz vor </body>.

Warum Footer, nicht Header

Der Embed-Script ist defer markiert und greift nur Container, die schon im DOM sind. Footer-Position garantiert, dass der Hauptinhalt schon geparst ist, ohne die First-Paint-Zeit zu blockieren.

Schritt 2 — Story-Container pro Page ​

Auf jeder Page, wo Peacock-Content erscheinen soll, fügst du in Webflow ein Embed-Element ein (Add Elements → Components → Embed). Inhalt:

html
<div data-peacock-story="/about"></div>

/about ist der full_path deiner Story in Peacock — die admin-UI zeigt ihn dir in der Story-Detail-Seite oben.

Beim Publish füllt der Embed-Script den Container mit dem CMS- Content. Loading-Skeleton, Error-Handling und XSS-Schutz sind eingebaut — siehe Embed-Modus-Doku.

Schritt 3 — Mehrere Stories auf einer Page ​

Pro Page kannst du beliebig viele Embed-Elemente einsetzen — der Script scant alle [data-peacock-story]-Elemente:

html
<!-- Hero (oben) -->
<div data-peacock-story="/hero"></div>

<!-- Sidebar (rechts) -->
<aside data-peacock-story="/sidebar-promo"></aside>

<!-- Footer-CTA (unten) -->
<footer data-peacock-story="/cta-banner"></footer>

Schritt 4 — Pro-Funktionen ​

Webflow-Embeds dürfen data-*-Attribute tragen — also stehen dir alle Pro-Features des Embed-Scripts zur Verfügung:

html
<!-- Englische Version -->
<div data-peacock-story="/welcome" data-peacock-lang="en-GB"></div>

<!-- Audience-Segment forcieren -->
<div data-peacock-story="/hero" data-peacock-segment="mobile"></div>

Was Webflow tut ​

Webflow ist eine Static-Site-Plattform mit CDN. Wenn du eine Page publishst, baut Webflow ein HTML-File und legt es auf ihre CDN. Der Embed-Script läuft danach im Browser des Visitors.

Cache-Verhalten beachten

Änderst du eine Story in Peacock, ist der neue Content sofort über die Peacock-CDN verfügbar (oder so schnell wie deine Workflow-Stage publish-fähig ist). Webflow muss nicht neu gepublisht werden — das HTML-Wrapper-File bleibt gleich, nur der JS-fetched Content wechselt.

Aber: ändest du den Embed-Element (z. B. einen anderen data-peacock-story-Pfad), musst du in Webflow nochmal publishen.

Heading-Hierarchie ​

Webflow setzt automatisch <h1> für jeden Section-Header. Peacock-Hero-Blöcke emittieren ebenfalls <h1> — das ergibt zwei H1s pro Seite, was Screen-Reader und SEO-Tools markieren. Lösung: data-peacock-heading-offset="1" auf dem Script-Tag oder per Container:

html
<script
  src="https://peacock-cms.webhoch.com/embed.js"
  data-peacock-api="https://peacock-cms.webhoch.com"
  data-peacock-space="dein-space-slug"
  data-peacock-heading-offset="1"
  defer
></script>

Verschiebt jede embed-emittierte Heading um eine Stufe nach unten — H1 wird H2, H2 wird H3, usw. Siehe Integration-Guide für Details + per-Container-Override.

SEO-Tradeoff ​

SEO-kritisch?

Webflow + Embed-Script = Client-Side-Rendering. Crawler ohne JavaScript-Evaluation sehen den leeren Container, nicht den CMS-Content.

Google, Bing und die meisten modernen Crawler indexieren JS-gerenderten Content — aber langsamer und mit gelegentlichen Aussetzern. Für SEO-kritische Hauptseiten (Startseite, Produkt-Landingpages mit Conversion-Ziel) empfehlen wir stattdessen einen Static-Site-Generator (Astro/Next/Nuxt) und Peacock via SDK — der HTML-Output enthält den Content schon beim ersten Request.

Webflow + Embed bleibt optimal für: Blog-Posts mit ständig wechselndem Content, interne Tools, Microsites, Marketing-Stories die Webflow-native nicht abbilden kann.

Häufige Stolpersteine ​

„Mein Container bleibt leer / zeigt nur das Skeleton."

  • Browser-DevTools → Network-Tab: Wird /v1/cdn/<space>/stories/<path> gerade abgerufen? Status 200? Wenn 404: Story existiert nicht oder ist nicht publisht.
  • Browser-Konsole: [peacock-embed]-Logs prüfen — der Script loggt Fehler mit diesem Prefix.
  • data-peacock-space und data-peacock-api im Site-Settings- Footer-Code richtig gesetzt?

„Webflow zeigt einen <script>-Tag im rendered HTML als Text."

Du hast den Tag wahrscheinlich in einem Rich-Text-Block eingefügt statt im Embed-Element oder im Custom-Code. Webflow escapet HTML in Rich-Text-Blöcken. Verschiebe den Script-Tag in Site-Settings → Custom Code → Footer.

„Nach einem Webflow-Designer-Publish ist das Embed kaputt."

Webflow überschreibt manchmal Custom-Code-Snippets nach Designer- Aktionen. Prüfe Site Settings → Custom Code, ob dein Script noch dort steht.

Live-Demo zum Vergleichen ​

Die Marketing-Seite von Peacock embedded ihren eigenen Demo-Story mit genau dem Setup, das hier beschrieben ist — scroll zu peacock-cms.webhoch.com/#install und schau die "Diese Box ist live"-Sektion an. Das ist 1:1 der Snippet, den du in Webflow pasten kannst:

html
<script
  src="https://peacock-cms.webhoch.com/embed.js"
  data-peacock-api="https://peacock-cms.webhoch.com"
  data-peacock-space="marketing-demo"
  defer
></script>

<div data-peacock-story="/marketing-demo"></div>

Weiterlesen ​