Zum Hauptinhalt springen

Widget — Lizenz-Portal-Button auf deiner Webseite

[widget] [admin] [branding]

Ein einziger Code-Schnipsel auf deiner Webseite (Shopify, WordPress, Custom-HTML) zeigt einen Button, der direkt zum Lizenz-Portal führt. Alle Anpassungen (Text, Farbe, Stil, Größe) machst du im Admin — der Shop-Code bleibt gleich und übernimmt Änderungen automatisch.

Für wen​

Admins (Creator/Tenants), die einen Online-Shop oder eine Webseite haben und ihren Kunden einen direkten Einstieg ins Lizenz-Portal anbieten wollen.

Schritt für Schritt​

1. Im Admin: Konfiguration einstellen​

Einstellungen → Widget:

  • Button-Text (z.B. "Lizenz Portal", "3D-Dateien sichern")
  • Button-Farbe (Color-Picker + Hex-Input)
  • Button-Text-Farbe (für gefüllten Modus)
  • Button-Stil: Gefüllt (solid) oder Umrahmt (outline)
  • Button-Größe: Klein / Mittel / Groß (responsive — auf Desktop größer als auf Mobile)

Live-Vorschau zeigt sofort wie der Button aussieht. Speichern klicken — die Änderung wirkt sofort auf alle eingebetteten Widgets.

2. Embed-Code kopieren​

Unter Dein Embed-Code:

<script
  src="https://<dein-tenant>.licensio.io/widget.js"
  data-tenant="<dein-tenant>">
</script>

Klick auf Code kopieren.

3. In deinem Shop einfügen​

Shopify:

  • Online Store → Themes → Edit Code
  • Datei sections/header.liquid öffnen
  • Vor dem Warenkorb-Icon einfügen → Save

WordPress / WooCommerce:

  • Appearance → Theme Editor
  • header.php öffnen
  • Vor </header> einfügen → Update File

Andere Systeme:

  • Den Script-Tag in den Header-Bereich deiner Webseite einfügen, idealerweise vor dem schließenden </header> oder </body> Tag

4. Fertig​

Der Button erscheint sofort im Header. Aussehen-Änderungen machst du nur noch im licensio-Admin — kein erneutes Bearbeiten des Shop-Codes nötig.

Wie es technisch läuft​

Das Widget-Script lädt beim Aufruf der Seite die Branding-Konfiguration deines Tenants über eine öffentliche API (/api/portal/branding). Es liest:

  • widget_button_text, widget_button_color, widget_button_text_color
  • widget_button_style (solid/outline)
  • widget_button_size (small/medium/large)
  • primary_color, button_text_color, button_style als Fallback

Das Widget injiziert einen Container-Div mit Anchor-Element und einen <style>-Tag mit Media-Query (@media (min-width: 750px)) für responsive Padding und Font-Size. Alle Style-Properties werden mit !important gesetzt, um Theme-CSS zuverlässig zu überschreiben.

Häufige Fragen​

Muss ich den Code nach Änderungen neu kopieren? Nein. Text, Farbe, Stil, Größe lädt das Widget live aus der API. Speichern im Admin reicht.

Was passiert, wenn die licensio-API mal nicht erreichbar ist? Das Widget rendert mit Default-Farben (#FF6600 / weiß) damit der Button sichtbar bleibt.

Wie binde ich das Widget mit eigener Domain ein? Wenn du eine Custom Domain eingerichtet hast, ändere die src-URL und das data-custom-domain-Attribut entsprechend.

Wirkt das Widget mehrfach wenn ich den Code zweimal einfüge? Nein. Eine Duplicate-Protection (window.__licensioWidgetLoaded) verhindert mehrfaches Rendern.

Kann ich beim Klick auf einen anderen Link weiterleiten als /join? Optional via data-href-Attribut: <script ... data-href="https://shop.example.com/lizenz">.

Mein Theme überschreibt die Button-Farben. Das Widget setzt alle Styles mit !important. Sollte das ausreichen. Wenn nicht: melde dich beim Support, dann analysieren wir das Theme-CSS.

Verwandt​