Skip to main content

Widget : License Portal Button on Your Website

[widget] [admin] [branding]

A single code snippet on your website (Shopify, WordPress, custom HTML) shows a button that leads directly to the license portal. You make all customizations (text, color, style, size) in the Admin: the shop code stays the same and picks up changes automatically.

Who it's for​

Admins (providers) who have an online shop or a website and want to offer their customers a direct entry into the license portal.

The widget is included in some plans. If it is not part of your plan, the Widget settings tab is simply not shown.

Step by step​

1. In the Admin: set the configuration​

Settings → Widget:

  • Button text (e.g. "License Portal", "Secure 3D files")
  • Button color (color picker + hex input)
  • Button text color (for filled mode)
  • Button style: filled (solid) or outlined (outline)
  • Button size: small / medium / large (responsive : larger on desktop than on mobile)

The live preview shows immediately how the button looks. Click Save, and the change takes effect immediately on all embedded widgets.

2. Copy the embed code​

Under Your embed code:

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

Click Copy code.

3. Insert it into your shop​

Shopify (5 steps):

  1. Open the Shopify admin : Online Store → Themes → current theme → Edit code
  2. Open header.liquid : left file list → Sections → header.liquid (some themes use sections/header.liquid)
  3. Search for the code : press Ctrl + F and search for routes.cart_url. You will see a line like <a href="{{ routes.cart_url }}" ...>
  4. Insert the code : paste the widget code directly BEFORE this line
  5. Save : click Save at the top right. The button appears in the shop immediately

💡 Tip: test the button in preview mode before you make the theme live.

Button not appearing?

  • Reload the page with Shift + F5 (bypasses the cache)
  • Check whether the correct theme is active (not just the one you are editing)
  • Make sure the code is in the <body> area, NOT in the <head>
  • Open the browser console (F12) and look for error messages
  • For questions: the provider support email from the Branding tab

WordPress / WooCommerce:

  • Appearance → Theme Editor
  • Open header.php
  • Insert before </header> → Update File

Other systems:

  • Insert the script tag into the header area of your website, ideally before the closing </header> or </body> tag

4. Done​

The button appears in the header immediately. You make appearance changes only in the licensio Admin, with no need to edit the shop code again.

How it works technically​

The widget script loads your provider's branding configuration via a public API (/api/portal/branding) when the page is opened. It reads:

  • 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 as a fallback

The widget injects a container div with an anchor element and a <style> tag with a media query (@media (min-width: 750px)) for responsive padding and font size. All style properties are set with !important to reliably override theme CSS.

Frequently asked questions​

Do I have to copy the code again after changes? No. Text, color, style, size are loaded live from the API by the widget. Saving in the Admin is enough.

What happens if the licensio API is temporarily unreachable? The widget renders with default colors (#FF6600 / white) so the button stays visible.

How do I embed the widget with my own domain? Running the portal under your own domain is still in preparation. Once it is available, you will point the src URL and the data-custom-domain attribute at your domain. Until then, embed the widget from your <your-tenant>.licensio.io subdomain.

Does the widget take effect multiple times if I insert the code twice? No. A duplicate protection (window.__licensioWidgetLoaded) prevents multiple rendering.

Can I redirect to a link other than /join on click? Optionally via the data-href attribute: <script ... data-href="https://shop.example.com/lizenz">.

My theme overrides the button colors. The widget sets all styles with !important. That should be enough. If not: contact support, then we analyze the theme CSS.

Related​