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 (Anbieter), die einen Online-Shop oder eine Webseite haben und ihren Kunden einen direkten Einstieg ins Lizenz-Portal anbieten wollen.

Das Widget ist in bestimmten Plänen enthalten. Ist es nicht Teil deines Plans, wird der Widget-Einstellungs-Tab schlicht nicht angezeigt.

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: Anbieter-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 Anbieter ü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? Das Portal unter einer eigenen Domain zu betreiben, ist noch in Vorbereitung. Sobald es verfügbar ist, zeigst du die src-URL und das data-custom-domain-Attribut auf deine Domain. Bis dahin bindest du das Widget von deiner <dein-tenant>.licensio.io-Subdomain ein.

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​