Embedding the Compliance Widget on Your Site

The HempData compliance widget displays a color-coded badge on your website showing whether a hemp product is legal in the visitor's state. Available on Professional and Enterprise tiers.

What the Widget Does

1. Detects the visitor's state (via IP geolocation or a state you specify)
2. Checks the legal status of your product in that state
3. Displays a color-coded badge: green (legal), yellow (restricted), red (prohibited)
4. Shows an age verification modal if required
5. Lists any restrictions the customer should know about

Quick Start

Add two lines to your HTML — a container div and the script tag:

<div id="hempdata-widget"></div>

<script
  src="https://cdn.hempdataapi.com/widget/v1/hempdata-widget.js"
  data-api-key="pk_live_your_public_key"
  data-substance="delta-9-thc"
  data-product-type="edibles"
  data-auto-detect-state="true"
></script>

That is it. The widget handles everything: geolocation, the API call, rendering the badge, and the age gate.

Step-by-Step Setup

1. Get Your Public API Key

Your public key (starts with pk_) is different from your server key. Find it in the dashboard under Settings > API Keys > Widget Key. This key is safe to expose in client-side code — it only has access to the widget check endpoint.

2. Choose Your Product Parameters

Identify the substance and product_type for the product page:

<!-- CBD topical -->
<script ... data-substance="cbd" data-product-type="topicals"></script>

<!-- Delta-9 THC gummies -->
<script ... data-substance="delta-9-thc" data-product-type="edibles"></script>

<!-- Delta-8 THC vape -->
<script ... data-substance="delta-8-thc" data-product-type="concentrates"></script>

3. Choose State Detection Method

Option A: Auto-detect (recommended for most sites)

<script ... data-auto-detect-state="true"></script>

Option B: Explicit state (for state-specific pages or server-side rendering)

<script ... data-state="CO"></script>

4. Place the Widget

Put the container div where you want the badge to appear — typically on product pages near the "Add to Cart" button:

<div class="product-page">
  <h1>Delta-9 THC Gummies — 10mg</h1>
  <p class="price">$29.99</p>

  <!-- Compliance badge appears here -->
  <div id="hempdata-widget"></div>

  <button class="add-to-cart">Add to Cart</button>
</div>

Age Gate Configuration

If the regulation requires age verification (common for THC products), the widget automatically shows a modal.

Default Age Gate

The default modal asks "Are you [age] or older?" with Yes/No buttons. The confirmation is stored in localStorage for 24 hours.

Custom Age Gate

<script
  src="https://cdn.hempdataapi.com/widget/v1/hempdata-widget.js"
  data-api-key="pk_live_your_public_key"
  data-substance="delta-9-thc"
  data-product-type="edibles"
  data-auto-detect-state="true"
  data-age-gate-title="Age Verification"
  data-age-gate-message="This product is only available to customers {age} and older in your state."
  data-age-gate-confirm="Yes, I am {age}+"
  data-age-gate-deny="No, I am under {age}"
  data-age-gate-denied-url="/sorry-age-restricted"
></script>

Styling the Widget

Match Your Brand Colors

Override CSS custom properties on the container:

#hempdata-widget {
  --hd-green-bg: #10b981;
  --hd-green-text: #ffffff;
  --hd-yellow-bg: #f59e0b;
  --hd-yellow-text: #1a1a1a;
  --hd-red-bg: #ef4444;
  --hd-red-text: #ffffff;
  --hd-badge-border-radius: 4px;
  --hd-badge-font-family: 'Inter', sans-serif;
}

Hide Optional Elements

#hempdata-widget {
  /* Hide confidence score */
  --hd-confidence-show: none;

  /* Hide "last verified" timestamp */
  --hd-verified-show: none;

  /* Hide "Powered by HempData" footer (Enterprise only) */
  --hd-footer-show: none;
}

Full-Width Badge

#hempdata-widget {
  --hd-badge-max-width: 100%;
}

See the Widget API reference for the complete list of CSS custom properties.

Listening to Widget Events

Use DOM events to integrate the widget with your application logic:

const widget = document.getElementById('hempdata-widget');

// When the compliance check completes
widget.addEventListener('hempdata:loaded', (e) => {
  const { legal_status, badge_color, state } = e.detail;
  console.log(`Product is ${legal_status} in ${state}`);

  // Disable "Add to Cart" if prohibited
  if (legal_status === 'prohibited') {
    document.querySelector('.add-to-cart').disabled = true;
    document.querySelector('.add-to-cart').textContent = 'Not Available in Your State';
  }
});

// When user confirms age
widget.addEventListener('hempdata:age-confirmed', () => {
  console.log('Age confirmed — show full product page');
});

// When user denies age requirement
widget.addEventListener('hempdata:age-denied', () => {
  console.log('User under age — redirecting');
});

// On error (network failure, invalid key, etc.)
widget.addEventListener('hempdata:error', (e) => {
  console.error('Widget error:', e.detail.message);
  // Optionally hide the widget container and fail open/closed based on your policy
});

Multiple Products on One Page

If you have a product listing page, use unique container IDs:

<div class="product-card">
  <h3>CBD Oil Tincture</h3>
  <div id="widget-cbd-tincture"></div>
</div>

<div class="product-card">
  <h3>Delta-9 Gummies</h3>
  <div id="widget-d9-edibles"></div>
</div>

<script
  src="https://cdn.hempdataapi.com/widget/v1/hempdata-widget.js"
  data-api-key="pk_live_your_public_key"
  data-container="widget-cbd-tincture"
  data-substance="cbd"
  data-product-type="tinctures"
  data-auto-detect-state="true"
></script>

<script
  src="https://cdn.hempdataapi.com/widget/v1/hempdata-widget.js"
  data-api-key="pk_live_your_public_key"
  data-container="widget-d9-edibles"
  data-substance="delta-9-thc"
  data-product-type="edibles"
  data-auto-detect-state="true"
></script>

Server-Side Rendering

If you prefer to check compliance server-side and render your own UI, use the widget check endpoint directly:

// Next.js getServerSideProps example
export async function getServerSideProps(context) {
  const state = context.query.state || 'CO'; // from URL or geo-IP

  const res = await fetch('https://api.hempdataapi.com/v1/widget/check', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.HEMPDATA_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      substance: 'delta-9-thc',
      product_type: 'edibles',
      state,
    }),
  });

  const data = await res.json();

  return {
    props: {
      compliance: data.data,
    },
  };
}

Troubleshooting