PicPins auf deiner Webseite

Der Embed-Code

Egal welche Plattform: PicPins braucht zwei Zeilen Code, die zusammen funktionieren. Den findest du in deinem Dashboard unter „Embed" oder im Editor oben rechts hinter dem Teilen-Symbol.

<div class="picpins-embed" data-token="DEIN-32-ZEICHEN-TOKEN"></div>
<script src="https://picpins.com/embed.js" async></script>

Die erste Zeile ist der Container, in den dein Bild geladen wird. Die zweite Zeile lädt unser Script, das die Marker rendert. Beide gehören zusammen, in der Reihenfolge.

Wichtige Regeln

• Beide Zeilen müssen auf der Seite landen. Nur der Container ohne Script zeigt nichts an.
• Das Script reicht einmal pro Seite. Wenn du mehrere Bilder einbetten willst, kopierst du nur den Container mehrfach mit unterschiedlichen Tokens.
• HTTPS ist Pflicht. Auf einer HTTP-Seite blockieren moderne Browser unser Script.
• Reine Iframe-Lösungen funktionieren auch, sind aber suboptimal. PicPins passt sich nicht an iframe-Höhen an. Mehr dazu unten beim Wix-Kapitel.

Token finden

Im PicPins-Dashboard klickst du auf dein Projekt, dann auf „Embed-Code anzeigen". Der Token ist die 32-stellige Zeichenkette nach data-token=. Sie ist projektgebunden, also pro Bild eine eigene.

WordPress

Bei WordPress hast du zwei Wege, je nachdem ob du den modernen Block-Editor (Gutenberg) oder den klassischen Editor nutzt. Eine ausführliche Detail-Anleitung mit FAQ findest du auf der Seite picpins für WordPress.

Mit dem Block-Editor (Gutenberg, Standard seit WordPress 5.0)

1. Öffne den Beitrag oder die Seite, auf der das Bild erscheinen soll.
2. Klicke an der Stelle, wo das Bild rein soll, auf das +-Symbol für einen neuen Block.
3. Such nach „Custom HTML" (oder „Eigenes HTML" auf Deutsch). Block einfügen.
4. Füge beide Zeilen Embed-Code in das Eingabefeld.
5. Klick auf „Vorschau" innerhalb des Blocks, um das Ergebnis zu sehen, dann oben rechts auf „Aktualisieren" oder „Veröffentlichen".

Mit dem klassischen Editor

1. Im Beitrag oder auf der Seite oben rechts auf den Reiter „Text" umschalten (statt „Visuell").
2. An der gewünschten Stelle die zwei Zeilen Embed-Code einfügen.
3. Speichern.

Mit Widgets (Sidebar oder Footer)

Unter Design → Widgets ein „Custom HTML"-Widget in die gewünschte Widget-Area ziehen, Code einfügen, speichern.

Wenn du Elementor, Divi oder einen anderen Builder nutzt

• Elementor: Widget „HTML" suchen, in den Bereich ziehen, Code einfügen.
• Divi: Modul „Code" hinzufügen, Code in das Inhaltsfeld.
• Beaver Builder: Modul „HTML" einfügen, Code rein.
• WPBakery (vormals Visual Composer): Element „Raw HTML" oder „Raw JS".

Stolperfallen

• Cache-Plugins. WP Rocket, W3 Total Cache und Co. minifizieren oder optimieren manchmal das Embed-Script und brechen es. Hilft: das Script vom Optimieren ausschließen, oder den Cache-Buster ?v=2 ans Script hängen.
• Theme-Filter. Manche Themes filtern script-Tags aus dem Custom-HTML-Block raus. Wenn nichts angezeigt wird, prüfe in der Browser-Quelltext-Ansicht, ob das Script überhaupt im HTML steht. Falls nicht: Plugin Insert Headers and Footers nutzen und das Script dort einbinden, der Container bleibt im Beitrag.
• Sicherheits-Plugins. Wordfence oder iThemes Security blockieren manchmal externe Scripts. In den Einstellungen unsere Domain freigeben.

Wix

Mehr Details, FAQ und Anwendungsbeispiele auf der Detail-Seite picpins für Wix.

Im klassischen Wix-Editor

1. Editor öffnen, links auf „Hinzufügen +".
2. Im Menü „Embed-Code" auswählen.
3. Auf „Embed HTML" klicken. Ein graues Element wird auf der Seite platziert.
4. Element anklicken, dann auf „Code eingeben".
5. Im Popup auf „Code" umschalten und beide Zeilen Embed-Code einfügen.
6. Auf „Anwenden" klicken.
7. Größe des iframe-Elements anpassen: am Element ziehen, bis dein Bild gut sichtbar ist. Nicht zu klein einstellen, sonst Scrollbars.
8. Oben rechts „Veröffentlichen".

In Wix Studio

Gleicher Weg, das Menü heißt nur leicht anders: „+ Hinzufügen" → „Embed-Code" → „Code einbetten".

Stolperfallen

• iframe-Höhe zu klein. Wenn dein Bild größer ist als das iframe-Element, gibt es Scrollbars. Element auf der Seite einfach größer ziehen.
• Tooltip wird abgeschnitten. Im PicPins-Editor unter Tooltip-Stil die Position auf „über dem Marker" setzen, dann bleibt der Tooltip im sichtbaren Bereich.
• Mobile-Ansicht. Wix hat eine separate Mobile-Bearbeitung. Dort musst du das Element nochmal explizit auf eine sinnvolle Größe ziehen, sonst ist es auf dem Smartphone winzig.
• Wix-Pläne ohne Custom Code. Auf den absoluten Einsteiger-Plänen ist Custom HTML deaktiviert. In den allermeisten Premium-Plänen geht es.

Jimdo

Mehr Hintergrund und Anwendungsbeispiele: picpins für Jimdo.

Jimdo Creator (klassische Variante)

1. Im Editor an der Stelle, an der das Bild erscheinen soll, auf „Element hinzufügen +" klicken.
2. Im Menü „Widget/HTML" auswählen (manchmal auch unter „Mehr Elemente" zu finden).
3. In das Eingabefeld beide Zeilen Embed-Code einfügen.
4. Auf „Speichern" klicken.
5. Die Seite oben über „Veröffentlichen" live schalten.

Jimdo Dolphin (KI-Baukasten)

In Dolphin gibt es Custom-HTML-Bausteine erst seit den späteren Updates und nicht in jedem Plan. Wenn der Block nicht da ist, hilft nur ein Plan-Upgrade oder Wechsel zu Jimdo Creator.

1. Im Editor neben dem Inhaltsbereich auf „Element hinzufügen".
2. Im Menü nach „Eigener Code" oder „Embed" suchen.
3. Code einfügen, speichern, veröffentlichen.

Stolperfallen

• Login-Vorschau. Solange du eingeloggt bist, zeigt Jimdo den Custom-Code manchmal nicht an. Logge dich aus oder öffne die Seite im Inkognito-Tab, um zu prüfen, ob es für Besucher klappt.
• Mobile-Ansicht. Custom-HTML-Blöcke werden auf Mobile manchmal in voller Breite gerendert. Falls das nicht passt, im PicPins-Editor das Bild bereits auf eine sinnvolle Standard-Breite einstellen.
• Free-Plan. In den kostenlosen Jimdo-Plänen sind Custom-HTML-Elemente eingeschränkt. Im Zweifel ein Bezahl-Paket.

Squarespace

Mehr Tipps und Anwendungsbeispiele: picpins für Squarespace.

Mit dem Code-Block

1. Seite oder Beitrag im Editor öffnen.
2. An der gewünschten Stelle auf „Block hinzufügen +" klicken.
3. Im Menü nach „Code" suchen (falls nicht direkt sichtbar, unter „Mehr").
4. Im Block-Editor das Sprach-Dropdown auf „HTML" stellen (Default).
5. Beide Zeilen Embed-Code einfügen.
6. Auf „Anwenden", dann oben rechts „Speichern".

Stolperfallen

• Eingeloggte Vorschau zeigt nichts. Squarespace blockiert eingebetteten Code im Editor-Modus aus Sicherheitsgründen. Das Bild erscheint erst auf der Live-Seite. Oder: oben in der Editor-Toolbar auf „In Safe-Mode-Vorschau anzeigen".
• 400-KB-Limit pro Code-Block. PicPins-Embed ist nur ein paar hundert Byte, also kein Problem. Nur falls du dazu noch viel anderen Code reinpackst.
• Mobile. Code-Block-Inhalt skaliert nicht automatisch auf Mobile. PicPins-Bild im Editor schon auf eine vernünftige Standard-Breite einstellen.

IONOS Homepage-Baukasten (MyWebsite)

IONOS hat mehrere Baukasten-Generationen. Die aktuelle heißt MyWebsite Now. Daneben gibt es noch MyWebsite Creator (älter) und das ganz alte MyWebsite. Bei allen gilt: das HTML-Modul ist erst ab den mittleren Paketen verfügbar, in den günstigsten Einsteigertarifen ist es deaktiviert.

MyWebsite Now

1. Im Editor links im Menü auf „Inhalt" klicken.
2. Mauszeiger über den gewünschten Bereich, dann oben links auf „Elemente".
3. Auf das + klicken und im Menü „HTML-Modul" auswählen.
4. Auf den Platzhalter klicken, in der erscheinenden Toolbar auf „Code".
5. Embed-Code in das Feld „Code" einfügen.
6. Wichtig DSGVO-relevant: weiter unten unter „Datenschutz-Einwilligung" entscheiden, ob das Embed nur nach Cookie-Banner-Zustimmung läuft.
7. Auf „Fertig", dann oben auf „Veröffentlichen".

MyWebsite Creator

1. Im Editor in der Seitenleiste auf „Widgets" klicken.
2. Das Widget „HTML" per Drag & Drop an die gewünschte Stelle ziehen.
3. Rechtsklick auf das Widget, im Menü „Inhalt bearbeiten" wählen.
4. Code in das Eingabefeld, speichern, veröffentlichen.

Stolperfallen

• Paket ohne HTML-Element. Bei den günstigsten IONOS-Paketen ist das HTML-Modul deaktiviert. Lösung: Paket-Upgrade. Manchmal aktiviert der IONOS-Support die Funktion auf Anfrage auch ohne Upgrade.
• Datenschutz-Consent. Wenn du den Consent-Modus auf „Einwilligung erforderlich" stellst, lädt PicPins erst nach Zustimmung. Das ist DSGVO-sauber, kostet aber den Erstbesuch (Banner muss erst angeklickt werden).
• Höhe des Moduls. Bei manchen Templates skaliert das HTML-Modul nicht mit dem Inhalt. Im Zweifel das Modul manuell auf eine ausreichende Höhe ziehen.

Strato Homepage-Baukasten

Mit dem Embed-Widget

1. Im Kundenbereich von Strato einloggen, Baukasten starten.
2. Die Seite öffnen, auf der das Bild erscheinen soll.
3. Im oberen Menü auf „Inhaltselemente" klicken.
4. In der Liste das Embed-Widget suchen, erkennbar am </>-Symbol.
5. Per Drag & Drop an die gewünschte Stelle ziehen.
6. Im Platzhalter oben rechts auf das Zahnrad-Symbol klicken.
7. Bei „Art der Einbindung": Embed-Code auswählen.
8. In das Feld „Embed-Code" beide Zeilen einfügen.
9. Mit „OK" speichern, dann oben rechts „Veröffentlichen".

Im Expertenmodus

Wenn du den Strato-Expertenmodus aktiviert hast, kannst du auch ein HTML-Element direkt einfügen. Der Weg dorthin variiert je nach Template, aber im Expertenmodus findest du den Menüpunkt typischerweise unter „HTML-Element einfügen".

Stolperfallen

• Vorschau im Editor leer. Strato führt Custom-Code im Editor nicht direkt aus. Auf „Vorschau" oben in der Navigation klicken, um zu prüfen, ob es funktioniert. Erst danach „Veröffentlichen".
• Größe des Embed-Bereichs. Standardmäßig nimmt das Embed-Widget eine fixe Höhe an. Falls dein Bild abgeschnitten wird, im Zahnrad-Menü die CSS-Einstellung von „globales CSS" auf etwas Eigenes umstellen, oder das Bild im PicPins-Editor auf eine kleinere Standard-Höhe einstellen.
• Restriktive Validierung. Strato ist bekannt dafür, manche Codes als „ungültig" abzulehnen. Falls das passiert: Code prüfen, dass keine Zeilenumbrüche am Falsche Stellen sitzen, beide Zeilen direkt aus dem PicPins-Dashboard kopieren.

Shopify

Shopify ist ein Online-Shop-System. PicPins passt da besonders gut rein, weil sich Produkte direkt in Lifestyle- oder Detailbildern markieren lassen. Es gibt zwei Wege, je nachdem ob du den Theme-Editor nutzt oder direkt im Theme-Code arbeitest. Mehr Hintergrund auf der Detail-Seite picpins für Shopify und im Blog-Beitrag Klickbare Produktbilder in Shopify.

Variante 1: Über den Theme-Editor (empfohlen)

1. Im Shopify-Adminbereich auf „Online Store" → „Themes".
2. Beim aktiven Theme auf „Customize" klicken.
3. Die Seite oder den Bereich auswählen, in dem das Bild erscheinen soll.
4. Auf „Add section" klicken.
5. Im Section-Menü nach „Custom Liquid" suchen und hinzufügen (manche Themes nennen es „Custom HTML" oder „Custom code").
6. In das Code-Feld beide Zeilen Embed-Code einfügen.
7. Auf „Save" klicken.

Variante 2: Direkt im Theme-Code

1. Bei „Themes" auf „Actions" → „Edit code".
2. Im Code-Editor je nach Ziel die richtige Datei wählen:
   • theme.liquid für jede Seite (selten gewünscht)
   • product.liquid oder main-product.liquid für jede Produktseite
   • Eine spezifische Section-Datei für eine bestimmte Section
3. Embed-Code an der gewünschten Stelle einfügen, speichern.

Stolperfallen

• „Custom Liquid" fehlt im Theme. Ältere oder stark angepasste Themes haben den Block manchmal nicht. Lösung: Theme aktualisieren, oder Variante 2 nutzen, oder eine Drittanbieter-App wie EComposer/Shogun verwenden.
• Produktbeschreibung-Editor. Wenn du das Embed direkt in eine Produktbeschreibung packen willst: im Beschreibungseditor oben rechts auf das </>-Symbol klicken (HTML-Modus), dann den Code reinfügen. Funktioniert, aber Shopify filtert manchmal Script-Tags raus.
• Theme-Updates. Wenn du direkt im Theme-Code editierst, gehen deine Änderungen bei einem Theme-Update verloren. Lieber Variante 1 nutzen oder das Theme erst duplizieren.
• Performance. Bei vielen PicPins-Embeds auf einer Sammelseite (z.B. Kollektion) lädt jeder einzeln. Bei 20+ Bildern wird das spürbar langsam. Tipp: pro Seite nicht zu viele Embeds, oder Lazy-Loading aktivieren.

Shopware

Shopware ist ein deutsches E-Commerce-System, das vor allem im DACH-Raum verbreitet ist. Die wichtige Information vorweg: bei Shopware gibt es zwei Hauptversionen, Shopware 5 (Legacy) und Shopware 6 (aktuell). Die UIs sind unterschiedlich.

Shopware 6

1. Im Adminbereich auf „Inhalte" → „Erlebniswelten" (Shopping Experiences).
2. Die gewünschte Erlebniswelt öffnen oder eine neue erstellen.
3. Im Block-Auswahlmenü links nach „HTML" suchen.
4. Den HTML-Block per Drag & Drop an die gewünschte Stelle ziehen.
5. Auf den Block klicken, im rechten Panel das Code-Feld öffnen, beide Zeilen Embed-Code einfügen.
6. Speichern und veröffentlichen.

Shopware 5

1. Im Adminbereich auf „Inhalte" → „Einkaufswelten".
2. Einkaufswelt öffnen, Element „HTML-Element" per Drag & Drop einfügen.
3. Im Eingabefeld Embed-Code einfügen, speichern.

In Produktbeschreibungen

Im Produkteditor unter „Beschreibung" auf das Quellcode-Symbol (häufig </>) klicken, um in den HTML-Modus zu wechseln. Embed-Code an gewünschter Stelle einfügen.

Stolperfallen

• Caching. Shopware cached aggressiv. Nach dem Einfügen den Theme- und Shop-Cache leeren, sonst sieht man die Änderung erst Stunden später. Im Adminbereich unter „Einstellungen" → „Caches & Indexes".
• Template-Filter. Manche Shopware-Themes filtern Scripts aus HTML-Blöcken. Falls dein Embed nicht erscheint: Browser-Quelltext prüfen, ob das Script tatsächlich im HTML steht.
• DSGVO/Cookie-Banner. Wenn dein Shop einen Cookie-Banner mit Skript-Blocking nutzt, lädt PicPins erst nach Zustimmung. Im Banner-Tool die PicPins-Domain freigeben, falls du das Embed unbedingt vor Zustimmung laden willst.

Webflow

Webflow ist ein visueller Webdesign-Builder, der echtes HTML/CSS exportiert. PicPins integriert sich sauber, weil Webflow Custom Code 1:1 ausgibt. Vertiefung: picpins für Webflow und Blog: Native Interactions vs. Embed.

Mit dem Embed-Element

1. Im Designer das gewünschte Projekt öffnen, auf die richtige Seite navigieren.
2. Im Element-Menü links (das + oben) nach „Embed" suchen.
3. Embed-Element per Drag & Drop an die gewünschte Stelle ziehen.
4. Im Popup-Editor beide Zeilen Embed-Code einfügen.
5. Auf „Save & Close" klicken.
6. Oben rechts „Publish", sonst sieht man die Änderung nur im Designer.

Stolperfallen

• Plan-Limit. Webflow erlaubt Embed-Elemente erst ab dem Basic-Site-Plan. Im Free-Plan ist Custom Code deaktiviert.
• Embed-Element zeigt im Designer nichts. Webflow rendert Custom-Code-Elemente im Designer nicht live, sondern erst auf der veröffentlichten Seite. Auf „Preview" klicken oder direkt veröffentlichen.
• SSR-Probleme. Bei Webflow CMS-Items mit dynamischen Embeds gibt es manchmal Timing-Issues. Falls PicPins nicht lädt: das Script in den „Project Settings → Custom Code → Footer Code" packen, der Container bleibt im Embed-Element.

Joomla

Joomla ist eines der älteren Content-Management-Systeme. PicPins funktioniert über das Custom-HTML-Modul oder direkt in einem Beitrag. Mehr Detail-Tipps auf der Seite picpins für Joomla.

In einem Beitrag

1. Im Adminbereich auf „Inhalte" → „Beiträge" → den gewünschten Beitrag öffnen.
2. Im Editor unten oder oben (je nach Editor-Plugin) auf „Quellcode anzeigen" oder „HTML" klicken.
3. Embed-Code an gewünschter Stelle einfügen.
4. Speichern.

Als Modul (für Sidebar oder Footer)

1. Im Adminbereich auf „Erweiterungen" → „Module".
2. Auf „Neu", dann den Modultyp „Custom" (oder „HTML angepasst") wählen.
3. Im Editor in den Quellcode-Modus wechseln, Embed-Code einfügen.
4. Im Tab „Modulzuweisung" festlegen, auf welchen Seiten das Modul erscheinen soll.
5. Speichern.

Stolperfallen

• Editor-Filter. Joomla filtert per Default Script-Tags aus Beiträgen. Du musst entweder den Filter in den globalen Konfigurationen anpassen („System" → „Konfiguration" → „Textfilter") und für deine Benutzergruppe „No Filtering" setzen, oder den TinyMCE-Editor im Quellcode-Modus benutzen.
• Cache. Joomla hat aggressives Cache-Verhalten. Unter „System" → „Wartung" → „Cache leeren" nach jeder Änderung.
• Template-Spezifika. Einige kommerzielle Joomla-Templates packen alles in einen iframe oder filtern Scripts. In dem Fall hilft nur, das Embed in die Template-Datei selbst einzufügen oder ein anderes Template zu nutzen.

TYPO3

TYPO3 ist ein Enterprise-CMS, häufig in Behörden, Universitäten und großen Unternehmen im Einsatz. Etwas komplexer als WordPress, aber sehr mächtig. Vertiefung auf der Seite picpins für TYPO3.

Mit dem Plain-HTML-Inhaltselement

1. Im Backend die gewünschte Seite öffnen.
2. Im Modul „Seite" auf „Neuen Inhalt erstellen" klicken.
3. Im Wizard auf den Reiter „Spezielle Elemente".
4. „Reines HTML" auswählen.
5. Im Eingabefeld „HTML" beide Zeilen Embed-Code einfügen.
6. Speichern und Frontend-Vorschau prüfen.

Im Rich-Text-Editor (für andere Inhaltselemente)

1. In einem Text-Inhaltselement im RTE-Editor auf das Quellcode-Symbol klicken (Symbol mit spitzen Klammern </>).
2. Embed-Code einfügen, speichern.

Stolperfallen

• HTML-Sanitizer. TYPO3 hat per Default einen strikten HTML-Sanitizer im Rich-Text-Editor, der Script-Tags entfernt. Lösung: Plain-HTML-Inhaltselement nutzen (siehe oben), das wird nicht gefiltert.
• Caching. TYPO3 cached gnadenlos. Nach jeder Änderung im Backend oben in der Toolbar auf den Blitz klicken („Cache leeren") oder per CLI: typo3 cache:flush.
• TypoScript-Konfigurationen. Manche Setups blockieren externe Scripts via Content Security Policy. In dem Fall die TS-Konfiguration anpassen oder den Site-Administrator fragen.
• Berechtigungen. Redakteure haben oft keine Rechte für Plain-HTML-Inhalte. Falls die Option im Wizard fehlt: Admin um Rechte bitten.

Drupal

Drupal ist ein flexibles CMS, oft bei größeren Webprojekten. PicPins geht entweder in einen Inhaltsblock oder direkt in eine Node.

In einem Beitrag oder einer Seite

1. Im Editor des Beitrags den richtigen Textformat-Filter wählen: „Vollständiges HTML" (oder „Full HTML"). Das ist wichtig, sonst wird das Script gefiltert.
2. Auf den Reiter „Quellcode" oder das Symbol für Quellcode-Ansicht klicken.
3. Embed-Code einfügen.
4. Speichern und veröffentlichen.

Als wiederverwendbarer Block

1. Im Adminbereich auf „Struktur" → „Block-Layout" → „Custom-Block-Bibliothek".
2. Auf „Custom-Block hinzufügen".
3. Block-Typ „Einfacher Block" oder ähnlich.
4. Textformat auf „Vollständiges HTML" stellen.
5. Quellcode-Modus aktivieren, Embed-Code einfügen.
6. Speichern und Block in einer Region platzieren.

Stolperfallen

• Falsches Textformat. Wenn du „Restricted HTML" oder „Basic HTML" verwendest, werden Scripts entfernt. Immer auf „Full HTML" umschalten. Das setzt allerdings entsprechende Berechtigungen voraus.
• Berechtigungen. Standard-Editor-Rollen haben oft kein „Full HTML"-Recht. Admin muss das einmalig freigeben unter „Konfiguration" → „Inhaltserstellung" → „Textformate und Editoren".
• Cache. Drupal cached aggressiv. Unter „Konfiguration" → „Entwicklung" → „Performance" → „Alle Caches leeren".
• CSP-Konfigurationen. Wenn ein Sicherheits-Modul wie „Security Kit" eine Content Security Policy setzt, muss picpins.com als erlaubte Quelle eingetragen werden.

Contao

Contao ist ein deutsches CMS, im DACH-Raum bei Agenturen beliebt. Hat ein eigenes HTML-Inhaltselement.

Mit dem HTML-Inhaltselement

1. Im Backend auf „Artikel" → den gewünschten Artikel öffnen.
2. Auf „Neues Inhaltselement" an der gewünschten Position.
3. Im Auswahlmenü „HTML" wählen.
4. Im Feld „HTML-Code" beide Zeilen einfügen.
5. Speichern und veröffentlichen.

Stolperfallen

• Berechtigungen. Das HTML-Inhaltselement ist standardmäßig nur für Admins freigegeben. Redakteur-Rollen müssen die Berechtigung explizit erhalten.
• HTML5-Output. Contao prüft per Default kein HTML5-konformes Output. Falls du etwas falsch einfügst, wird es trotzdem gerendert, was zu Layoutproblemen führen kann. Embed-Code unverändert aus dem PicPins-Dashboard kopieren.
• Cache. Im Backend oben rechts auf „System" → „Cache" → „Cache leeren".

Statische HTML-Seite

Eine reine HTML-Seite ohne CMS — etwa selbst geschrieben, generiert von Static-Site-Generatoren wie Hugo, Jekyll, Astro oder Eleventy, oder von Tools wie Mobirise.

So geht's

1. Die HTML-Datei in deinem Code-Editor öffnen.
2. An der Stelle, an der das Bild erscheinen soll, beide Zeilen Embed-Code einfügen — irgendwo zwischen <body> und </body>.
3. Speichern und Datei auf den Webspace hochladen (FTP, SFTP, Git-Push, je nach Setup).

Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine Seite</title>
</head>
<body>
  <h1>Willkommen</h1>

  <!-- PicPins hier -->
  <div class="picpins-embed" data-token="dein-token"></div>
  <script src="https://picpins.com/embed.js" async></script>

</body>
</html>

Bei Static-Site-Generatoren

Wenn du Hugo, Jekyll oder Astro nutzt, sitzt das Embed im Markdown-Inhalt einer Page (wenn der Generator HTML in Markdown erlaubt) oder im Layout/Template. Mehr Hintergrund: picpins auf eigener HTML-Seite und Blog: Imagemap, SVG-Hotspots oder Embed. Pro Generator gibt's leichte Unterschiede:

• Hugo: ein Shortcode {{< embed-picpins token="..." >}} kann angelegt werden, der die zwei Zeilen rendert.
• Jekyll: einfach in Markdown mit aktiviertem HTML, oder ein Liquid-Include.
• Astro: als <Fragment set:html={...}/> oder direkt im .astro-Layout.

Stolperfallen

• HTTPS notwendig. Bei reinen HTML-Seiten oft vergessen. Lokales file://-Aufrufen funktioniert NICHT — du brauchst einen Webserver mit HTTPS für den Test.
• Pfad-Probleme. Bei Static-Site-Buildern manchmal Probleme mit Sub-Path-Hosting (z.B. example.com/blog/). PicPins-URL ist absolut (https://...), das ist robust und sollte unabhängig vom Sub-Path funktionieren.

Andere Systeme

Wenn dein System hier nicht aufgeführt ist, gilt die Faustregel: Hat es einen HTML-, Code- oder Embed-Block, geht PicPins. Wenn nicht, gibt's keinen sauberen Weg.

Funktioniert in den meisten Fällen

• WooCommerce — basiert auf WordPress, also gleicher Weg wie WordPress (Custom HTML Block oder Produktbeschreibung).
• PrestaShop — Modul „Custom HTML" oder im Produkteditor in den Quellcode-Modus.
• Magento / Adobe Commerce — Page Builder hat ein „HTML Code"-Element. Alternativ in einem CMS-Block.
• BigCommerce — im Page Builder ein „HTML"-Widget einfügen.
• Wordpress.com (gehostet) — Custom HTML Block, ABER nur ab Business-Plan. Im kostenlosen oder Personal-Plan ist Custom Code deaktiviert. Detail-Anleitung: picpins für WordPress.
• Substack — ein „Embed"-Block mit HTML (in höheren Plänen). Im Newsletter-Mailing wird das Script aber NICHT mitgeschickt, nur auf der Substack-Webseite gerendert.
• Ghost — HTML-Card in der Editor-Toolbar. Funktioniert in den höheren Plänen.
• Framer — Embed-Component im Designer, läuft auf der publishten Seite.
• Mobirise / Webnode — HTML-Block einfügen, je nach Version manchmal nur in höheren Tarifen.

Funktioniert nicht (oder nur eingeschränkt)

• Notion / Coda — beide erlauben kein Custom-Script. Du kannst zwar einen PicPins-Share-Link einfügen (per „Embed"-Block mit URL), aber nicht das aktive Embed.
• Google Sites (neue Version) — der Embed-Block lädt das Script in einem stark restriktiven iframe-Sandbox. PicPins funktioniert technisch, ist aber höhenmäßig limitiert.
• Mailchimp / Brevo Newsletter — E-Mail-Clients (Outlook, Gmail) führen kein JavaScript aus. PicPins funktioniert in einem Newsletter NICHT direkt. Workaround: ein Screenshot des Bildes in den Newsletter, der zum PicPins-Share-Link verlinkt.
• LinkedIn / X-Posts — keine Custom-Embeds in Social-Media-Posts möglich. Workaround: Share-Link teilen.
• Facebook Notes / Instagram Captions — kein Embed-Support. Share-Link nutzen.

Bei Unsicherheit: Quick-Test

Wenn du nicht sicher bist, ob dein System PicPins unterstützt, mach einen 2-Minuten-Test:

1. Such im Editor deines Systems nach einem Block namens „HTML", „Code", „Embed", „Custom Code" oder ähnlich.
2. Falls vorhanden: ein einfaches Test-Snippet einfügen, etwa <script>document.body.innerHTML += '<p>Test</p>'</script>.
3. Wenn beim Veröffentlichen das Wort „Test" erscheint, geht auch PicPins. Wenn nicht, wird Custom-Script gefiltert und PicPins funktioniert nicht.

Wenn nichts klappt

1. Quelltext der Seite prüfen

Rechtsklick auf die fertige Seite, „Seitenquelltext anzeigen". Mit Strg+F nach picpins-embed suchen. Wenn beide Zeilen drinstehen, ist der Embed durchgegangen. Wenn nicht, hat das CMS sie rausgefiltert.

2. Browser-Konsole öffnen

F12 oder Strg+Shift+I. Reiter „Konsole". Wenn du da rote Fehlermeldungen siehst, die embed.js oder picpins.com erwähnen, ist das Script blockiert. Häufige Ursachen:

• Content-Security-Policy (CSP) der Host-Seite blockiert externe Scripts
• Ad-Blocker oder Datenschutz-Plugin im Browser
• Cookie-Banner verhindert Laden vor Zustimmung

3. Cache-Buster setzen

Wenn das Embed mal funktioniert hat und nach einem Update kaputt ist, hängt der Browser oder das CMS am gecachten Script. Hilft: an die Script-URL einen Versions-Parameter hängen:

<script src="https://picpins.com/embed.js?v=2" async></script>

Bei jedem Update den Wert hochzählen.

4. Token nochmal prüfen

Der Token ist 32 Zeichen lang. Wenn beim Kopieren ein Zeichen verloren ging oder Whitespace drin ist, lädt das Bild nicht. Im PicPins-Dashboard nochmal mit dem Kopieren-Button kopieren.

5. Projekt veröffentlicht?

Im PicPins-Dashboard beim Projekt prüfen, ob der Status auf „veröffentlicht" steht. Unveröffentlichte Projekte werden über den Embed nicht ausgeliefert.

Wenn nach all dem nichts hilft: Kontaktformular, dann schauen wir gemeinsam drüber.