AIUL Widget Integration Examples

The AIUL Widget makes it easy to display AI Usage & Licensing badges on your website. Simply include the widget script and add HTML elements with data attributes.

Installation

1. Include the widget script in your HTML:
<!-- Recommended: Use jsDelivr CDN for faster loading -->
<script src="https://cdn.jsdelivr.net/gh/dmd-program/aiul@main/assets/js/aiul-widget.js"></script>

<!-- Alternative: Direct from GitHub Pages -->
<script src="https://dmd-program.github.io/aiul/assets/js/aiul-widget.js"></script>

Basic Usage

Display a single license:
<div class="aiul-badge" data-license="NA"></div>
Display a license with modifier:
<div class="aiul-badge" data-license="CD" data-modifier="3D"></div>
Custom height:
<div class="aiul-badge" data-license="IU" data-modifier="WR" data-height="70px"></div>

All License Types

Available licenses:

License + Modifier Combinations

Code modifiers:
Image modifiers:
Writing modifiers:

JavaScript API

Manually initialize badges after dynamic content loads:
// Add badges dynamically
document.body.innerHTML += '<div class="aiul-badge" data-license="NA"></div>';

// Re-initialize widget
window.AIULWidget.initialize();

Available Modifiers