Custom / HTML Integration

Universal HTML Integration

Works on any website — plain HTML, PHP, React, Vue, Angular, or any custom platform. Just add two lines of code.

1 Add the Widget Script

Add before </body>:

<script src="https://cdn.gunupdate.com/widget/gunupdate-widget.js"
        data-store="YOUR_API_KEY"
        defer></script>

2 Add the Widget Container

Place where you want the widget to appear:

<div id="gunupdate-widget"
     data-store="YOUR_API_KEY"
     data-product-id="YOUR_PRODUCT_ID"
     data-product-name="Product Name"
     data-product-sku="SKU-123"
     data-mode="compatibility"
     data-theme="light">
</div>

JavaScript API

Initialize programmatically for SPAs and dynamic pages:

// Initialize widget on demand
GunUpdate.init({
    store: 'YOUR_API_KEY',
    container: '#my-widget',
    mode: 'builder',
    theme: 'dark',
    product: {
        id: '12345',
        name: 'Magpul MOE Grip',
        sku: 'MAG415-BLK'
    },
    onResult: function(result) {
        console.log('Compatible:', result.compatible);
        console.log('Gun:', result.gun_model);
    }
});

// Destroy and cleanup
GunUpdate.destroy();

Events

document.addEventListener('gunupdate:result', function(e) {
    console.log(e.detail.gun);         // detected gun model
    console.log(e.detail.compatible);  // boolean
    console.log(e.detail.products);    // matching products array
});

document.addEventListener('gunupdate:scan', function(e) {
    console.log('Scan started', e.detail.scanId);
});

Widget Modes

compatibility

"Does this fit my gun?" — customer uploads photo or selects model, gets yes/no answer + compatible products from your store.

builder

Interactive gun builder — clickable hotspot zones on a gun silhouette. Customers explore accessory categories visually.

configurator

Full experience — build + compatibility check + smart recommendations. Best for stores with 50+ gun accessories.

Data Attributes Reference

Attribute	Required	Description
data-store	Yes	Your API key
data-product-id	Yes	Product ID on your platform
data-product-name	No	Product name for better matching
data-product-sku	No	SKU for precise matching
data-mode	No	compatibility \| builder \| configurator
data-theme	No	light \| dark \| auto
data-platform	No	Platform identifier for analytics
data-lang	No	Language code (default: en)