Ein Script-Tag. Fertig ist der Blog.
Kein Build-Tool, kein Node.js, kein Backend. Binden Sie Publino-Inhalte mit einem
<script>-Tag in jede HTML-Seite, Webflow, Shopify oder Ihr CMS ein.
<!-- Einmal im <head> oder vor </body> einbinden -->
<script src="https://cdn.publino.de/embed.js" async></script>Gut zu wissen: embed.js rendert im Browser. Für die schnellste Auslieferung und das beste SEO (server-gerendertes HTML, eigenes Meta & JSON-LD pro Seite) empfehlen wir das JavaScript-SDK oder das PHP-SDK. embed.js ist ideal, wenn es schnell gehen muss und kein Backend zur Verfügung steht.
Das Script laden
Eine Zeile genügt. Das Script registriert die Publino Web Components <publino-article> und <publino-article-list>.
Den Publishable Key (pub_pub_…) erzeugen Sie im Dashboard.
Anders als der Secret Key ist der Publishable Key browser-sicher: Er liefert nur veröffentlichte Inhalte und lässt sich auf erlaubte Domains beschränken. Das fertige Snippet finden Sie auch im Dashboard unter Sites → Embed.
<!-- Einmal im <head> oder vor </body> einbinden -->
<script src="https://cdn.publino.de/embed.js" async></script>Eine Artikel-Liste einbetten
<publino-article-list> lädt und rendert Artikel automatisch. Pflicht-Attribute: site, pk und api; locale und link-pattern sind optional.
<!-- Eine Liste der neuesten Artikel — ganz ohne Backend.
link-pattern macht jeden Eintrag zu einem Link (Platzhalter {slug} und {id}). -->
<publino-article-list
site="mein-blog"
locale="de"
pk="pub_pub_xxxxxxxxxxxx"
api="https://api.publino.de"
link-pattern="/blog/{slug}-{id}">
</publino-article-list>Einen ganzen Artikel anzeigen
<publino-article> rendert einen kompletten Beitrag (Titel + formatiertes HTML). Das Attribut article-id ist die Public-ID des Artikels. Per kleinem Script lesen Sie die ID aus der URL.
<!-- Ein einzelner Artikel, über seine Public-ID -->
<publino-article
site="mein-blog"
article-id="ab12cd34"
locale="de"
pk="pub_pub_xxxxxxxxxxxx"
api="https://api.publino.de">
</publino-article><!-- Artikel automatisch aus der URL laden, z. B. /blog?id=ab12cd34 -->
<div id="content"></div>
<script src="https://cdn.publino.de/embed.js" async></script>
<script>
const id = new URLSearchParams(location.search).get("id");
const attrs = 'site="mein-blog" locale="de" pk="pub_pub_xxxxxxxxxxxx" api="https://api.publino.de"';
document.getElementById("content").innerHTML = id
? `<publino-article article-id="${id}" ${attrs}></publino-article>`
: `<publino-article-list link-pattern="/blog?id={id}" ${attrs}></publino-article-list>`;
</script>Listeneinträge verlinken
Mit link-pattern wird jeder Eintrag zu einem Link. Die Platzhalter {slug} und {id} werden pro Artikel ersetzt.
<!-- Ohne link-pattern werden Einträge als <div> gerendert (nicht klickbar).
Mit link-pattern entsteht ein <a href> pro Artikel: -->
<publino-article-list
site="mein-blog" locale="de" pk="pub_pub_xxxxxxxxxxxx"
api="https://api.publino.de"
link-pattern="https://www.meine-seite.de/blog/{slug}-{id}">
</publino-article-list>
<!-- Erzeugtes Markup je Eintrag:
<a class="publino-article-list__item" href="…/blog/mein-titel-ab12cd34">
<span class="publino-article-list__item-title">Mein Titel</span>
<span class="publino-article-list__item-excerpt">Auszug …</span>
</a>
-->An Ihre Marke anpassen
embed.js rendert ins normale DOM (kein Shadow DOM) und vergibt feste CSS-Klassen. Sie stylen sie wie eigenes Markup — mit Ihrem bestehenden Stylesheet.
<!-- embed.js vergibt feste CSS-Klassen — Sie stylen sie wie eigenes Markup. -->
<style>
/* Liste */
.publino-article-list { display: grid; gap: 24px; }
.publino-article-list__item {
display: block; padding: 20px; text-decoration: none; color: inherit;
border: 1px solid #EDE5F5; border-radius: 14px; transition: box-shadow .15s;
}
.publino-article-list__item:hover { box-shadow: 0 8px 28px rgba(45,14,63,.12); }
.publino-article-list__item-title { display: block; font-weight: 700; font-size: 18px; }
.publino-article-list__item-excerpt { display: block; margin-top: 6px; color: #6B7280; }
/* Einzelartikel */
.publino-article__title { font-size: 32px; font-weight: 800; letter-spacing: -.5px; }
.publino-article__body { line-height: 1.8; color: #374151; }
/* Zustände */
.publino-loading::after { content: "Lädt …"; color: #9CA3AF; }
.publino-error { color: #b91c1c; }
</style>Browser-sicher per Design
embed.js nutzt ausschließlich den pub_pub_…-Key (Attribut pk). Er gibt nur veröffentlichte Inhalte frei — Entwürfe bleiben unsichtbar.
Beschränken Sie den Key im Dashboard (Sites → Embed) auf Ihre Domains. Anfragen von fremden Origins werden abgelehnt.
Antworten werden mit ETag und Cache-Headern ausgeliefert — schnell und schonend für Ihr Kontingent.
Eine vollständige Seite
Kopieren, site & pk eintragen, hochladen — fertig ist der Blog.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mein Blog</title>
<script src="https://cdn.publino.de/embed.js" async></script>
<style>
.publino-article-list { display: grid; gap: 20px; max-width: 720px; margin: 0 auto; }
.publino-article-list__item {
display: block; padding: 18px; text-decoration: none; color: inherit;
border: 1px solid #e5e7eb; border-radius: 12px;
}
.publino-article-list__item-title { font-weight: 700; font-size: 18px; }
.publino-article-list__item-excerpt { color: #6b7280; }
</style>
</head>
<body>
<header><h1>Mein Blog</h1></header>
<main>
<publino-article-list
site="mein-blog"
locale="de"
pk="pub_pub_xxxxxxxxxxxx"
api="https://api.publino.de"
link-pattern="/blog?id={id}">
</publino-article-list>
</main>
</body>
</html>Mehr SEO & Performance?
Für server-gerenderte Seiten mit eigenem Meta & JSON-LD nutzen Sie eines der SDKs.