Sprache
Wenn du eine selbstgebaute Seite hast — statisches HTML, Static Site Generator (Hugo, Jekyll, Eleventy, Astro), oder ein eigenes Backend — funktioniert picpins direkt. Zwei Zeilen Code, keine Plattform-Beschränkungen.
Volle Kontrolle: CSS, CSP, Multi-Embed, Performance — alles in deinen Händen.
Foto hochladen, Marker setzen, Tooltips füllen. Fertig.
Im picpins-Dashboard die zwei Zeilen HTML kopieren.
Direkt in den <body>-Bereich an die gewünschte Stelle. Speichern, deployen.
Das ist der einfachste Fall: Du hast Volltextzugriff auf deinen HTML-Code. Embed-Code an die gewünschte Stelle, Datei speichern, Server deployen. Keine Filter, keine Editor-Workarounds.
Öffne die HTML-Datei (z. B. index.html) in deinem Editor. An der Stelle, wo das interaktive Bild erscheinen soll, den Embed-Code einfügen — typischerweise im <body>-Bereich, in einem Container deiner Wahl.
Das <script>-Tag mit async kann an derselben Stelle stehen oder klassisch ans Ende des <body> gezogen werden — beide funktionieren.
Bei Markdown-basierten SSGs einfach den Embed-Code in das Markdown-File einfügen — die meisten Renderer erlauben rohen HTML+JS in Markdown.
Bei Astro: Direkt im .astro-File als JSX-ähnliches Markup. Bei Eleventy: In Liquid- oder Nunjucks-Templates. Bei Hugo: In partials oder direkt im Markdown-Content.
Wenn du auf vielen Seiten Embeds nutzt: Skript einmal im <head> oder am Ende des <body> deines globalen Layouts (_layouts/default.html, BaseLayout.astro etc.) einbinden. Auf den einzelnen Seiten reicht dann nur noch der <div class="picpins-embed">-Container.
Wenn dein Webserver eine CSP-Header sendet (z. B. via nginx, Cloudflare oder Helmet bei Node.js): Stelle sicher, dass script-src die Domain picpins.com erlaubt, und img-src ebenfalls (für die Bilddarstellung).
Beispiel CSP-Direktive:
script-src 'self' https://picpins.com;
img-src 'self' https://picpins.com data:;
connect-src 'self' https://picpins.com;API- oder Tool-Screenshot mit Markern auf jeden Endpunkt oder Button. Dokumentation, die wirklich gelesen wird.
Project-Hero, Marker mit Tools, Stack, Live-Link. Statisch generiert, schnell wie der Wind.
Code-Screenshot mit Hotspots auf Lines mit Erklärung, Performance-Hinweisen, alternativen Ansätzen.
In deiner SaaS-App: Help-Center mit Screenshots, Hotspots auf UI-Elemente mit Inline-Erklärung.
script-src und img-src für picpins.com erweitern.file:// testen, sondern lokalen Server (z.B. npx serve) nutzen.Nein. Jeder beliebige Webserver (Apache, Nginx, IIS, Caddy, Static Hosting bei Netlify/Vercel/Cloudflare Pages) funktioniert. picpins-Embed ist client-seitiges JavaScript, der Server muss nur die HTML-Datei ausliefern.
Ja, mit allen gängigen: Hugo, Jekyll, Eleventy, Gatsby, Next.js (Static), Astro, Nuxt (Static), Hexo, Pelican. Embed-Code ins Template oder Markdown einfügen, Build laufen lassen, deployen.
Funktioniert auch dort. Im Component-Code den <div class="picpins-embed">-Container rendern. Das Skript-Tag entweder global im index.html oder per useEffect-Hook bei React (oder Lifecycle-Hook bei Vue) dynamisch laden, sobald die Component gemountet wird.
Wenn deine Seite eine CSP setzt, musst du picpins.com in script-src und img-src erlauben. Sonst blockiert der Browser das Skript und die Bilddarstellung. Ohne CSP-Header keine zusätzliche Konfiguration nötig.
Skript wird einmal geladen (sofern du es nicht versehentlich mehrfach einbindest), danach werden alle .picpins-embed-Container automatisch initialisiert. Performance-Impact pro zusätzlichem Bild ist marginal, weil nur Tooltip-Daten und Bild-URL per Lazy-Loading nachgeladen werden.
Lokal mit file://-Protokoll funktioniert es nicht — der Browser blockiert JavaScript-Cross-Origin-Requests. Lokale Server-Tools wie npx serve, Python http.server oder Webpack Dev Server starten und über localhost aufrufen.
Dann lädt das Skript nicht und der Embed-Container bleibt leer. picpins ist auf hoher Verfügbarkeit ausgelegt, aber für maximale Resilienz kannst du als Fallback ein statisches Bild mit gleichem Aspect Ratio im Container hinterlegen — wird angezeigt, wenn das Embed-Skript nicht lädt.
Der initiale HTML-Output enthält den leeren Container und das Skript-Tag — das ist unproblematisch. Das Embed-Skript läuft erst client-seitig nach Hydration. Für SEO heißt das: Die Tooltip-Inhalte sind nicht im SSR-Output, aber Container und Skript-Reference sind crawl-bar.
Zwei Zeilen Code, keine Plugin-Politik, keine Editor-Filter. So sollten Embeds eigentlich immer sein.