← Examples

IIFE — Script tag inclusion

The simplest way to get started: drop two <script> and one <link> tags into your HTML. No build step, no bundler, no modules. The library ships as taga11y.iife.js and exposes a global Taga11y namespace.

The IIFE bundle includes the full library (no tree-shaking). For production sites that use a build step, prefer the ESM or CJS bundles. The IIFE format is provided for simple <script>-tag inclusion, CDN usage, or legacy pages.

View code 
<!-- 1. Include the stylesheet -->
<link rel="stylesheet" href="../dist/taga11y.css" />

<!-- 2. Include the IIFE bundle -->
<script src="../dist/taga11y.iife.js"></script>

<!-- 3. Instantiate using the global Taga11y namespace -->
<script>
  var widget = new Taga11y.Taga11y(document.getElementById('tags'), {
    suggestions: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'],
    maxTags: 5,
  });
</script>
View CDN usage 
<!-- CDN (unpkg) -->
<link rel="stylesheet" href="https://unpkg.com/taga11y/dist/taga11y.css" />
<script src="https://unpkg.com/taga11y/dist/taga11y.iife.js"></script>

<script>
  var widget = new Taga11y.Taga11y(document.getElementById('tags'), {
    suggestions: ['Apple', 'Banana', 'Cherry'],
  });
</script>

<!-- CDN (jsDelivr) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/taga11y/dist/taga11y.css" />
<script src="https://cdn.jsdelivr.net/npm/taga11y/dist/taga11y.iife.js"></script>