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 (5 Schritte):

  1. Shopify Admin öffnen — Online Store → Themes → Aktuelles Theme → Code bearbeiten
  2. header.liquid öffnen — Linke Dateiliste → Sections → header.liquid (manche Themes nutzen sections/header.liquid)
  3. Code suchen — Drücke Strg + F und suche nach routes.cart_url. Du siehst eine Zeile wie <a href="{{ routes.cart_url }}" ...>
  4. Code einfügen — Füge den Widget-Code direkt VOR dieser Zeile ein
  5. Speichern — Klick auf Speichern oben rechts. Der Button erscheint sofort im Shop

💡 Tipp: Teste den Button im Vorschau-Modus bevor du das Theme live schaltest.

Button erscheint nicht?

  • Seite mit Shift + F5 neu laden (umgeht Cache)
  • Prüfe ob das richtige Theme aktiv ist (nicht nur das gerade bearbeitete)
  • Stelle sicher dass der Code im <body>-Bereich steht, NICHT im <head>
  • Browser-Konsole öffnen (F12) und nach Fehlermeldungen suchen
  • Bei Fragen: Tenant-Support-E-Mail aus dem Branding-Tab

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​