Peacock

Theme

Peacock in Squarespace einbauen ​

Squarespace erlaubt Code Injection (Header + Footer Site-weit) und Code Blocks in einzelnen Page-Sections. Beide tragen den Peacock-Embed-Script. Code Blocks brauchen ein Business- oder Commerce-Plan — Personal-Pläne sehen die Code-Block-Option im Editor nicht.

Voraussetzung ​

  • Squarespace Business oder Commerce Plan (Code Blocks + Code Injection beide freigeschaltet).
  • Peacock-Space-Slug. Test-Setup: marketing-demo / /marketing-demo.

Schritt 1 — Embed-Script Site-weit einbauen ​

Squarespace-Dashboard → Settings → Advanced → Code Injection → Footer:

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>

Save klicken. Squarespace rendert den Tag jetzt am Ende jeder Page kurz vor </body>.

Schritt 2 — Story-Container pro Page ​

Im Page-Editor: Add Section → blank → Add Block → Code ("Code Block"). Im Code-Block:

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

Apply → Save. Beim Publish füllt der Embed-Script den Container.

Code-Block ≠ Markdown-Block

Squarespace hat auch einen Markdown- und einen HTML in Text- Block. Beide escapen HTML in unterschiedlichen Stufen. Nimm immer den dedizierten Code Block — der ist explizit für rohen HTML/JS- Code gedacht.

Schritt 3 — Multi-Story-Pages ​

Mehrere Code-Blocks pro Page sind erlaubt, jeder mit eigenem data-peacock-story:

html
<!-- Block 1 -->
<div data-peacock-story="/hero"></div>

<!-- Block 2 (in eigener Section) -->
<div data-peacock-story="/cta"></div>

Schritt 4 — AJAX-Navigation: Re-Hydration nötig ​

Squarespace 7.x verwendet AJAX-Page-Transitions — beim Wechsel zwischen Pages tauscht es nur den <main>-Bereich aus, ohne ein vollständiges Page-Reload. Der Embed-Script läuft einmal beim ersten Pageload und scannt das DOM. Nach einer AJAX-Navigation sind neue Story-Container im DOM, aber der Script hat sie noch nicht hydriert.

Lösung: ein Hook im Site-Wide-Footer-Code, der bei jedem Page-Wechsel window.peacockEmbed.hydrate() aufruft:

html
<!-- IM Footer-Code-Injection, NACH dem Embed-Script-Tag -->
<script>
  // Squarespace dispatched 'mercury:load' nach jedem AJAX-Wechsel.
  // Wir hängen uns dran und re-scannen das DOM für neue Container.
  document.addEventListener('mercury:load', function () {
    if (window.peacockEmbed && typeof window.peacockEmbed.hydrate === 'function') {
      window.peacockEmbed.hydrate();
    }
  });
</script>

Wenn Squarespace mercury:load nicht feuert (älter als 7.1), fallback auf einen MutationObserver:

html
<script>
  if (typeof MutationObserver !== 'undefined') {
    var obs = new MutationObserver(function () {
      if (window.peacockEmbed) window.peacockEmbed.hydrate();
    });
    obs.observe(document.body, { childList: true, subtree: true });
  }
</script>

Schritt 5 — Pro-Funktionen ​

Squarespace ändert data-*-Attribute in Code-Blocks nicht — alle Pro-Features bleiben verfügbar:

html
<div data-peacock-story="/welcome" data-peacock-lang="en-GB"></div>
<div data-peacock-story="/hero" data-peacock-segment="newsletter"></div>

Squarespace-spezifische Stolpersteine ​

„Im Editor sehe ich nur einen leeren Block."

Code-Blocks rendern im Editor-Vorschaumodus nicht — nur im Live- Site-Modus (Preview-Window oder publishter Live-Site). Klick auf Preview in der Editor-Toolbar.

„Squarespace zeigt mir eine 'Code disabled' Warnung."

Du bist auf einem Personal-Plan. Code-Blocks und Code-Injection sind beide auf Business+ beschränkt. Upgrade nötig.

„Mein Embed-Script wird in Squarespace-Cache gebackt."

Squarespace cached Footer-Code aggressiv. Nach einem Update auf das Script (z. B. anderer Space-Slug) musst du den Browser-Cache hard-refresh (Cmd+Shift+R / Ctrl+Shift+R) plus eventuell Squarespace-Server-Cache leeren (Settings → Advanced → Refresh CDN).

Heading-Hierarchie ​

Squarespace-Sections setzen automatisch <h1> für den Titel. Peacock-Hero-Blöcke emittieren ebenfalls <h1> — kollidiert. Fix per data-peacock-heading-offset="1":

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>

Mehr: Integration-Guide.

SEO-Tradeoff ​

SEO-kritisch?

Squarespace + Embed-Script = Client-Side-Rendering. Squarespace liefert das Page-HTML mit leerem Container, der Browser füllt ihn per JS.

Squarespace selbst hat einen ordentlichen SEO-Workflow (Meta-Tags, sitemap.xml, OG-Images automatisch). Für Indexierbarkeit des CMS-Contents gilt aber: Crawler mit JS-Eval indexieren ihn verspätet und unzuverlässig.

Für SEO-kritische Sub-Seiten ist die bessere Wahl ein Astro/Next-Setup mit SSR — Squarespace bleibt für News-Banner, Marketing-Inserts und Blog- Anhänge optimal.

Weiterlesen ​