Embed Widgets

Add real-time LCBO store inventory to any website with a single line of HTML.

Overview

Add real-time LCBO store inventory to any website. The inventory widget shows which stores stock a product and how much is available, updated daily.

The widget works via a standard HTML <iframe> — no JavaScript framework required. It renders a clean, responsive table of store names, cities, and current stock quantities, with optional theming to match your site.

To embed a widget you need a free BoozeData account and an API key. Each widget includes a small “Powered by BoozeData” attribution link.

Quick Start

Get a widget on your page in four steps.

Create a free account

Create your free account →

Create an API key

Go to Dashboard → API Keysand generate a new key. Copy it somewhere safe — it's only shown once.

Create a widget

Go to Dashboard → Widgets and create a new widget. Add the domain(s) where you plan to embed it — the widget will only render on authorized domains.

Paste the embed code

Copy this snippet into your HTML where you want the widget to appear:

HTML

<iframe
  src="https://boozedata.ca/embed/inventory/48664?key=YOUR_API_KEY"
  width="100%"
  height="500"
  style="border: none; border-radius: 8px;"
  loading="lazy"
  title="LCBO Store Availability - Powered by BoozeData"
></iframe>

Embed Code

Here is the full annotated embed snippet. Each attribute is explained below.

HTML

<iframe
  src="https://boozedata.ca/embed/inventory/48664?key=YOUR_API_KEY"
  width="100%"
  height="500"
  style="border: none; border-radius: 8px;"
  loading="lazy"
  title="LCBO Store Availability - Powered by BoozeData"
></iframe>

/embed/inventory/48664

The URL path includes the product SKU. Replace 48664 with the SKU of any LCBO product. See Finding SKUs below for how to look these up.

key=YOUR_API_KEY

Your BoozeData API key, obtained from Dashboard → API Keys. Without a valid key the widget will display an authentication error.

width="100%"

Makes the widget fill its container width. You can also set a fixed pixel value like width="600".

height="500"

Fixed pixel height. Products stocked at many stores may need more height (600–700px) to avoid scrolling. Products stocked at fewer stores can use less (300–400px).

loading="lazy"

The browser only fetches the iframe when it enters the viewport. This improves page load performance — recommended for iframes below the fold.

Theming

Customize the widget's appearance using URL query parameters. All color values must be URL-encoded — replace # with %23.

Parameter	Description	Default	Example
primary	Buttons & links	#4f46e5	&primary=%234f46e5
bg	Background	#ffffff	&bg=%23f8fafc
text	Text color	#0f172a	&text=%231e293b
border	Borders	#e2e8f0	&border=%23cbd5e1
radius	Border radius (px)	8	&radius=12
mode	Color scheme	light	&mode=dark

HTML — Light theme (default)

<iframe
  src="https://boozedata.ca/embed/inventory/48664?key=YOUR_KEY"
  width="100%" height="500"
  style="border: none; border-radius: 8px;"
  loading="lazy"
  title="LCBO Store Availability - Powered by BoozeData"
></iframe>

HTML — Dark theme

<iframe
  src="https://boozedata.ca/embed/inventory/48664?key=YOUR_KEY&mode=dark&bg=%231e293b&text=%23f8fafc&border=%23334155"
  width="100%" height="500"
  style="border: none; border-radius: 8px;"
  loading="lazy"
  title="LCBO Store Availability - Powered by BoozeData"
></iframe>

Domain Allowlist

For security, widgets only render on domains you have registered in your widget configuration. Requests from unauthorized domains will show an error message instead of inventory data.

Exact domains — e.g. example.com matches only example.com.

Local development — add localhost to your allowlist while building and testing locally. Remove it before going to production if you want to restrict to your live domain only.

Manage your domain allowlist at Dashboard → Widgets.

Examples

Three real-world embed patterns for common use cases.

Bar or restaurant website

Show your customers which LCBO stores carry the spirits in your cocktail menu.

HTML

<iframe
  src="https://boozedata.ca/embed/inventory/218040?key=YOUR_KEY&primary=%23b45309"
  width="100%" height="500"
  style="border: none; border-radius: 8px;"
  loading="lazy"
  title="Find this spirit at the LCBO"
></iframe>

Blog or review site

Embed store availability alongside your product reviews.

HTML

<iframe
  src="https://boozedata.ca/embed/inventory/48664?key=YOUR_KEY&mode=dark&bg=%230f172a&text=%23e2e8f0"
  width="100%" height="450"
  style="border: none; border-radius: 12px;"
  loading="lazy"
  title="Where to buy - LCBO availability"
></iframe>

Delivery or e-commerce

Let customers check LCBO stock levels before placing delivery orders.

HTML

<iframe
  src="https://boozedata.ca/embed/inventory/48664?key=YOUR_KEY&primary=%2316a34a"
  width="100%" height="400"
  style="border: none;"
  loading="lazy"
  title="LCBO Inventory Check"
></iframe>

Finding Product SKUs

The widget URL requires a product SKU — a short numeric identifier. There are three ways to find one.

From BoozeData

Search for any product at boozedata.ca/products. The SKU is the number at the end of the product URL.

URL example

https://boozedata.ca/products/447540
                                  ^^^^^^
                                  SKU = 447540

From LCBO.com

The SKU also appears in the product URL on the LCBO website.

URL example

https://www.lcbo.com/en/product-name-447540
                                              ^^^^^^
                                              SKU = 447540

From the API

Use the BoozeData REST API to search for products and retrieve their SKUs programmatically.

curl

curl -H "Authorization: Bearer YOUR_KEY" \
  "https://boozedata.ca/api/v1/products?query=hendricks+gin&limit=3"

Each result in the response includes a sku field you can pass directly to the widget URL.

Sizing & Responsive

The widget is fluid horizontally — it fills whatever width the iframe is given. Height is fixed.

Set width="100%" for a widget that fills its container. Use a fixed value like width="600" to cap the width.

Recommended heights: 400–600px for most products. Widely stocked products (stocked at 50+ stores) may benefit from 600–700px to reduce internal scrolling.

To constrain the widget to a maximum width while keeping it responsive, wrap it in a container:

HTML

<div style="position: relative; width: 100%; max-width: 800px;">
  <iframe
    src="https://boozedata.ca/embed/inventory/48664?key=YOUR_KEY"
    width="100%" height="500"
    style="border: none; border-radius: 8px;"
    loading="lazy"
    title="LCBO Store Availability"
  ></iframe>
</div>

Troubleshooting

Widget not authorized

Your domain is not in the allowlist. Go to Dashboard → Widgets and add the domain where the widget is embedded. Changes take effect immediately.

Invalid API key

The API key may be revoked, expired, or mistyped. Check Dashboard → API Keys to verify the key is active. If it was revoked, generate a new one and update the embed URL.

Widget not loading

Your site's Content Security Policy (CSP) may be blocking the iframe. Add boozedata.ca to your frame-src directive:

HTTP header

Content-Security-Policy: frame-src https://boozedata.ca

Blank iframe

Open your browser's developer console and check for errors. The most common cause is a missing key parameter in the embed URL. Confirm the full src attribute includes ?key=YOUR_API_KEY.

Data looks stale

Inventory data is updated once daily from the LCBO. The widget caches responses for 30 minutes, so data may be up to 30 minutes behind the latest scrape. If you need to know the exact scrape time, check the API status endpoint.