Changelog-Widget Tutorial — Schritt fuer Schritt

Was du bauen wirst

In diesem Tutorial fuegst du ein leichtgewichtiges Changelog-Popup zu deiner Website hinzu. Das Deplyd-Widget wiegt nur 1,8 KB gzip, laedt asynchron und zeigt automatisch deine neuesten Changelog-Eintraege.

Schritt 1 — Script-Tag einfuegen

Platziere diesen Tag in deinem HTML. Das defer-Attribut stellt sicher, dass es das Rendering nicht blockiert:

<script
  src="https://deplyd.dev/widget.js"
  data-project="my-app"
  defer
></script>

Schritt 2 — Widget anpassen

Fuege Data-Attribute hinzu, um Aussehen und Verhalten zu steuern:

<script
  src="https://deplyd.dev/widget.js"
  data-project="my-app"
  data-position="bottom-right"
  data-theme="auto"
  data-accent="#0d9488"
  defer
></script>

Schritt 3 — Programmatisch oeffnen (optional)

Du kannst das Widget von jedem Button oder Link aus mit der JavaScript-API oeffnen:

<!-- Trigger the widget with a button -->
<button onclick="Deplyd.open()">
  What's new?
</button>

Konfigurationsoptionen

Attribut	Standard	Beschreibung
`data-project`	—	Dein Projekt-Slug (erforderlich)
`data-position`	bottom-right	Widget-Position: bottom-right, bottom-left, top-right, top-left
`data-theme`	auto	Farbschema: auto, light, dark
`data-accent`	#0d9488	Akzentfarbe fuer Highlights und Buttons
`data-locale`	en	Widget-Sprache: en, de

Performance

1,8 KB gzip — leichter als ein Favicon.
Laedt Inhalte lazy — holt Eintraege erst beim Oeffnen.
Keine Abhaengigkeiten — kein jQuery, kein React, kein Framework.
CDN-gecached fuer schnelle Auslieferung weltweit.