Widget Installation

Embeddable vignette components. Drop a <div> with the right data- attributes and the widget renders itself — form, pricing, checkout and the issued PDF are all handled for you. No backend required.

Integration

Copy the snippet below into any HTML page to load the vinieta.md widget. It fetches the latest versioned assets automatically.

HTML

<!-- vinieta.md Widget -->
<script>
(function () {
  var BASE = 'https://iasig-widget.web.app';

  // CLS prevention: reserve min-height before widget loads
  var HEIGHTS = {
    'vignette:md': 573, 'vignette:ro': 245, 'vignette:eu': 620
  };
  document.querySelectorAll('[data-iasig-widget="order"]').forEach(function (el) {
    var p = el.getAttribute('data-product');
    if (p && HEIGHTS[p]) el.style.minHeight = HEIGHTS[p] + 'px';
  });

  fetch(BASE + '/manifest.json')
    .then(function (r) { return r.json(); })
    .then(function (m) {
      // Load CSS
      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = BASE + '/' + m.files.css;
      document.head.appendChild(link);

      // Load JS
      var script = document.createElement('script');
      script.src = BASE + '/' + m.files.js;
      document.head.appendChild(script);
    })
    .catch(function (e) {
      console.error('iAsig widget failed to load:', e);
    });
})();
</script>

<!-- Place widgets anywhere on the page -->
<div data-iasig-widget="order"
     data-product="vignette:md"
     data-source-app="vinieta.md"
     data-lang="ro"
     data-bs-theme="light"></div>

Set data-source-app="vinieta.md"

This attribute routes payments to the right merchant account. It defaults to iasig.md, so every widget on a vinieta.md property must set it explicitly or payments will be routed to the wrong account.

How it works

1. The snippet reads manifest.json from the widget host and injects the current CSS and JS bundles, so you always get the latest version without changing your page.
2. Before those load, it reserves min-height on each order widget to prevent layout shift (CLS).
3. Every <div data-iasig-widget="..."> on the page is then hydrated in place.

The script is safe to include once per page; place as many widget <div>s as you need. All of them are picked up.

Loading widgets added after page load

If you inject widget markup dynamically (a SPA route change, a modal, a CMS preview), tell the widget to rescan the DOM:

window.dispatchEvent(new Event('iasig:scan'));

Next steps

• Attributes — every data- attribute and its accepted values.
• Order Forms — the three vignette order widgets.
• View Order — render an existing order by ID.