Sprache
picpins-Hotspot-Bilder lassen sich über Notions Embed-Block in deine Seiten einbetten — mit ein paar Einschränkungen, die du kennen solltest, bevor du loslegst.
Geeignet für interne Wikis, Onboarding-Dokumente und Public Pages.
Foto hochladen, Marker setzen, Tooltips füllen. Auto-Save übernimmt das Speichern.
Im picpins-Dashboard auf „Teilen" klicken und den öffentlichen Link kopieren — nicht den Embed-Code.
In der Notion-Seite den Link einfügen und „Embed erstellen" auswählen. Notion lädt picpins als iframe.
Notion ist ein Spezialfall: Die Plattform erlaubt zwar Embeds, aber nur über ihre eigene iframe-basierte Embed-Logik — kein direktes HTML-Einfügen wie bei WordPress oder Shopify. Stattdessen nutzt du den picpins-Share-Link, den Notion automatisch in einem iframe einbettet.
Notion erlaubt kein freies HTML mit Custom-Skripten. Stattdessen brauchst du den öffentlichen Share-Link deines picpins-Bildes. Im picpins-Dashboard auf das Bild klicken, dann „Teilen" oder „Share" — du bekommst eine URL der Form https://picpins.com/v/[token].
In der Notion-Seite an der gewünschten Stelle /embed tippen. Notion bietet dann „Embed erstellen" an. Im Pop-up den picpins-Share-Link einfügen, „Embed link" klicken.
Alternativ: Den Link einfach in eine leere Zeile der Notion-Seite einfügen — Notion erkennt URL-Patterns und schlägt automatisch „Embed erstellen" als Option an.
Wenn du die Notion-Seite öffentlich teilst (z. B. als Notion-Site oder über die „Share to web"-Funktion), funktioniert das Embed dort genauso. Sowohl interne Notion-Workspaces als auch öffentliche Seiten unterstützen das iframe-Embed.
Für Notion-Sites über Anbieter wie Super.so, Potion oder Notionlytics gilt dasselbe — der iframe wird übernommen.
Wenn dir das iframe-Embed zu eingeschränkt ist (z. B. für Notion-Free-Pläne ohne Public Pages), kannst du auch einen Screenshot deines picpins-Bildes in Notion einbetten und darunter einen Link zur interaktiven Version setzen. Funktioniert in jedem Notion-Kontext, aber natürlich ohne Hotspot-Funktion direkt in der Notion-Seite.
Bürofoto mit Hotspots auf Arbeitsplätze, Drucker, Küche, Notausgänge — Onboarding-Tour ohne langen Text.
Software-Screenshot, Marker auf jedes UI-Element mit Erklärung. Dokumentation, die Leute auch lesen.
Foto vom Hotelzimmer, vom Strand, von der Stadt — Hotspots mit persönlichen Tipps und Empfehlungen.
Screenshot des Endzustands eines Projekts, Hotspots auf Komponenten mit Verantwortlichen und Files.
Notion erlaubt aus Sicherheitsgründen kein freies HTML oder Custom-JavaScript in Seiten. Stattdessen werden externe Inhalte über iframes eingebettet — du gibst nur die URL an, Notion baut den Container drumherum.
Ja, im persönlichen Free-Plan funktioniert die Embed-Funktion unbegrenzt. Auch Public Pages („Share to web") sind im Free-Plan möglich.
Notion gibt dem iframe eine Standardhöhe, die oft zu klein ist. Klick auf das Embed, dann unten in der Mitte erscheint ein Drag-Handle — zieh es nach unten, bis das gesamte Bild plus Tooltip-Bereich sichtbar ist.
Ja, im iframe sind alle Klick-, Hover- und Tap-Interaktionen aktiv. Tooltips öffnen sich wie auf der eigentlichen picpins-Seite. Einzige Einschränkung: Tooltips, die über den iframe-Rand hinausragen wollen, werden vom iframe-Rand abgeschnitten.
Direkt in einem Datenbank-Field nicht — Notion-Felder erwarten Text, Zahlen, Selects. Workaround: Auf der Detail-Page eines Datenbank-Eintrags (jeder Eintrag öffnet sich als eigene Seite) das Embed manuell platzieren.
Ja. Jedes Embed ist ein eigener iframe, du kannst beliebig viele in einer Seite platzieren. Performance bleibt OK, weil Notion die iframes Lazy-Loading-mäßig nachlädt, sobald sie sichtbar werden.
iframes werden im PDF-Export von Notion nicht aufgelöst — du siehst nur einen leeren Platzhalter mit dem Link. Für Print-/PDF-Anwendungen lieber ein statisches Screenshot des picpins-Bildes in die Seite einbinden.
Ja, Embeds werden bei Super.so, Potion und ähnlichen Tools übernommen. Manchmal mit kleinen Layout-Anpassungen — die Tools rendern den iframe in ihrer Theme-Umgebung.
Über den Share-Link statt Embed-Code, mit angepasster iframe-Höhe. Für Wikis und Onboarding-Docs reicht es locker.