Notion ist zwar super für Projektmanagement, kleine Teams, Soloarbeit und so weiter – aber es gibt da eine ärgerliche Sache, die es standardmäßig nicht kann: Seiten direkt in die eigene Website einbetten. Klar, man könnte einfach einen iFrame oder so verwenden, aber Fehlanzeige. Notion unterstützt das nicht nativ, es sei denn, man wird etwas kreativ. Hier kommt Embed Notion ins Spiel – ein Drittanbieter-Tool, mit dem man Notion-Seiten in einbettbare Snippets umwandeln kann. Nicht super kompliziert, aber es sind ein paar zusätzliche Schritte nötig. Wenn du dein Notion-Setup auf einer persönlichen Website oder in deinem Portfolio präsentieren möchtest, hilft dir diese Anleitung dabei.
Nach der Einrichtung können Sie Notion-Seiten auf beliebigen Webseiten einbetten – beispielsweise auf Blogs, Lebensläufen oder Projekt-Dashboards – ohne komplexe Integrationen programmieren zu müssen. Die Grundidee ist, die teilbare URL von Notion zu kopieren, sie in einen iFrame umzuwandeln und anschließend in den HTML-Code Ihrer Webseite einzufügen. Theoretisch einfach, praktisch etwas umständlich, insbesondere da Notion die Einbettung bestimmter Inhalte stark einschränkt. Mit diesem Workaround ist es jedoch möglich. Erwarten Sie aber nicht, dass die Einbettung so reibungslos funktioniert wie bei nativen Einbettungen anderer Plattformen.
Bei manchen Konfigurationen war etwas Tüftelei nötig, um alles zum Laufen zu bringen, und das Styling ist nicht perfekt, aber für die meisten grundlegenden Zwecke ausreichend. Um es optisch ansprechender zu gestalten, sind eventuell einige CSS-Anpassungen nötig. So geht’s:
Wie man Notion-Seiten in eine Website einbettet
Damit Ihre Notion-Seite auf Ihrer Website gut aussieht, befolgen Sie diese Schritte:
Öffne und bereite deine Notion-Seite vor
- Gehe zu Notion und öffne die Seite, die du einbetten möchtest.
- Klicken Sie im Menü oben rechts auf die Option „Als Seite öffnen“. Falls diese Option nicht angezeigt wird, vergewissern Sie sich, dass Sie die vollständige Seitenansicht und nicht einen Unterabschnitt geöffnet haben.
- Klicken Sie anschließend oben rechts auf die Schaltfläche „ Teilen“.Dort finden Sie die Option „ Im Web teilen“. Aktivieren Sie diese.
- Sobald das aktiviert ist, kopieren Sie diesen teilbaren Link. Er sieht ungefähr so aus
https://www.notion.so/yourpageid:
Das ist der entscheidende Schritt. Es mag seltsam klingen, aber manche Nutzer stellen fest, dass der Teilen-Link nicht sofort funktioniert oder zu lang oder ungewöhnlich ist. In diesen Fällen einfach die Funktion deaktivieren und wieder aktivieren oder einen anderen Browser verwenden.
Nutzen Sie Embed Notion für den magischen Effekt.
- Öffne embednotion.com – das ist dein Freund hier.
- Ziehen Sie die aus Notion kopierte URL in das Feld. Klicken Sie auf „ Einbetten erstellen “.Manchmal dauert es ein paar Sekunden, bis der Code generiert wird.
- Sobald dies abgeschlossen ist, klicken Sie auf „Code kopieren“. Diese Kopie enthält einen iFrame-Codeausschnitt, den Sie in Ihre Seite einfügen können.
Hinweis: Möglicherweise erhalten Sie eine oder zwei Warnungen bezüglich Cross-Origin-Anfragen. In den meisten Fällen funktioniert dies jedoch einwandfrei. Sollten Sie Probleme mit Sicherheitseinstellungen oder Headern haben, müssen Sie eventuell die Content Security Policy (CSP) Ihrer Website anpassen. Bei den meisten einfachen Websites reicht es jedoch aus, den iFrame-Code einfach in Ihren HTML-Code einzufügen.
Fügen Sie den Einbettungscode in Ihre Website ein.
- Öffnen Sie den Code-Editor Ihrer Webseite.
- Fügen Sie den kopierten iFrame-Code an der Stelle ein, an der die Notion-Seite angezeigt werden soll.
- Sie können etwas CSS hinzufügen, um es zu gestalten – Breite, Höhe, Rahmen usw.festlegen. Zum Beispiel:
<iframe src="your-embed-url" style="width:100%; height:600px; border:none;"></iframe> - Speichern und aktualisieren Sie Ihre Seite. Voilà, Ihre Notion-Seite sollte nun auf Ihrer Website sichtbar sein.
Und dazu: Ja, technisch gesehen kann man eine Notion-Seite in einen iFrame einbetten, aber das wird nicht offiziell unterstützt. Es ist also eher eine Notlösung, funktioniert aber meistens. Beachten Sie jedoch, dass Notion iFrames manchmal blockiert oder deren Linkstruktur ändert. Es ist also nicht hundertprozentig sicher. Außerdem ist das Styling recht einfach, daher müssen Sie eventuell ein paar CSS-Anpassungen vornehmen, falls der Standard-iFrame komisch aussieht.
Noch etwas ist zu beachten: Veröffentlichen einer Notion-Website
Wenn Sie Ihre Notion-Seite ohne Einbettung zugänglich machen möchten, klicken Sie auf „Teilen“, wählen Sie „Im Web teilen“ aus, kopieren Sie die URL und geben Sie sie weiter. So können andere Ihre Seite direkt besuchen. Es ist keine Einbettung nötig, nur ein Link.