Integrating Brightcove Gallery with Cleeng: Hosted Widgets Setup Guide – Help Center

Overview

This guide describes how to integrate Cleeng Hosted Widgets with Brightcove Gallery to enable a seamless Direct-to-Consumer (D2C) subscription flow.

The objective is to provide viewers with a unified experience for browsing content, registering, purchasing subscriptions, and accessing their accounts — while ensuring that only Cleeng subscribers can view premium content in Brightcove Gallery.

Introduction

When combining Brightcove Gallery and Cleeng Hosted Widgets, the goal is to simplify the subscription experience for broadcasters.

Cleeng provides ready-to-use Hosted Widgets for checkout, authentication, and account management, which can be embedded into any website or landing page.

Once integrated, the user flow looks like this:

The user lands on your subscription offers page.
The user registers or logs in via Cleeng Hosted Widgets.
The user completes checkout and payment.

Cleeng redirects the user back to your Brightcove Gallery experience, where access is restricted to active subscribers.

1. Prerequisites

Before starting, make sure you have:

Access to the Brightcove Studio account with the Gallery product enabled. If you don’t have Brightcove Gallery enabled yet, please contact your Brightcove account representative or reach out directly to the support team using this link.
A Cleeng Publisher account.
Cleeng PublisherID and OfferIDs (Subscription or Pass offers).
Basic web-hosting access for your Offer and Checkout pages.

2. Configure Brightcove Gallery

Log in to Brightcove Studio → open the Gallery module.
Create or select your Gallery Experience. (Brightcove Documentation)
Add your videos to the Brightcove Gallery experience.
Publish your Brightcove Gallery Experience.

Note: You can find a complete guide on how to publish a Gallery portal in the Brightcove documentation.

3. Create the Subscription Offers Page

You’ll need a landing page with your Offer Cards for users to select and purchase subscriptions before accessing the Brightcove Gallery page.

You can create an Offer Cards page using:

A vibe-code tool such as Lovable or Base44, or

You can use Cleeng’s CodePen Offer Cards sample.

4. Cleeng Hosted Widgets Setup

Once the Offer Cards page is created:

Create a new folder for your project in your preferred code editor, such as Visual Studio Code or Cursor.
Save the Offer-Cards landing page in that folder.
Create new HTML files for each Cleeng widget:
- Authentication Widget (Login/Register)
- Checkout Widget
- Customer MyAccount Widget
Include Cleeng’s Hosted Widget script on each HTML page in the <head> section:

<head>
<script type="module" src="https://widgets.prod.cleeng.com/cleeng.js"></script> 
</head>

5. Add the widget code to your HTML pages in the <body> section. Checkout example:

<body>
<div
  data-cleeng-widget="checkout"
  data-cleeng-publisher-id="123"
  data-cleeng-offer-id="S123_US">
</div>
</body>

Link each Offer Card to the correct Checkout Page

Your checkout must pass the selected OfferID to the Hosted Widget so the right offer is purchased:

Option A (simplest): one HTML file per offer

Create one checkout file per offer (e.g., checkout-monthly.html, checkout-annual.html, checkout-seasonal.html) and hardcode the data-cleeng-offer-id in each.

Example (checkout-annual.html):

<div
  data-cleeng-widget="checkout"
  data-cleeng-publisher-id="123"
  data-cleeng-offer-id="S123_ANNUAL_US">
</div>

From the Offer Cards page, link each card to its corresponding file. Example:

<a href="/checkout-monthly.html">Buy Monthly</a>
<a href="/checkout-annual.html">Buy Annual</a>
<a href="/checkout-seasonal.html">Buy Seasonal</a>

Option B (fewer files): one checkout page with dynamic OfferID

Keep a single checkout.html and pass the OfferID via query string (e.g., ?offerId=S123_US). In your page script, read the parameter and set the widget’s attribute before it initializes.

Link from Offer Cards:

<a href="/checkout.html?offerId=S123_MONTHLY_US">Buy Monthly</a>
<a href="/checkout.html?offerId=S123_ANNUAL_US">Buy Annual</a>
<a href="/checkout.html?offerId=S123_SEASONAL_US">Buy Seasonal</a>

checkout.html (dynamic OfferID handling):

Logic:

When the page loads, the script executes before the Cleeng widget starts.
The offerId from the URL is injected into the data-cleeng-offer-id attribute.
Cleeng’s hosted widget reads that value and loads the checkout for the correct offer.

<script type="module">
  // Step 1: Read ?offerId=... from the URL
  const params = new URLSearchParams(window.location.search);
  const offerId = params.get('offerId'); // e.g., "S123_MONTHLY_US"
  // Step 2: Find the widget container
  const widget = document.querySelector('[data-cleeng-widget="checkout"]');
  // Step 3: Set the offerId dynamically before Cleeng initializes
  if (offerId && widget) {
    widget.setAttribute('data-cleeng-offer-id', offerId);
  }
  // Cleeng Hosted Widgets automatically initialize once the attribute is set
</script>
<div
  data-cleeng-widget="checkout"
  data-cleeng-publisher-id="123"
  data-cleeng-offer-id="">
</div>

5. Configure Redirect After Successful Payment

Go to the Cleeng Dashboard →
Admin & Tools → Hosted Customer Flows → Checkout tab.
Under the “Redirect URL after successful payment” section, add the URL of your Brightcove Gallery site.

Example:

https://site-23011413.bcvp0rtal.com

When a user successfully completes checkout, they’ll automatically be redirected back to your Gallery page.

6. Implement Access Control (Entitlement Check)

Depending on your implementation, you will need to configure an entitlement check to ensure that only users with an active subscription can access your Brightcove Gallery content.

You can refer to the Cleeng documentation here for detailed guidance:

Unlocking Content with Entitlements

A recommended simple approach is to use a redirect check:

When a user lands on the Gallery page, trigger a Cleeng API call (backend 3.1 GET Entitlement API or via MediaStore API GET Entitlement) to verify if the current user (via JWT) is entitled.

If not entitled → redirect the user again to your offers page.
If entitled → allow access and video playback.

This ensures that only authenticated Cleeng subscribers can access and view the Gallery content.

7. Testing the End-to-End Flow

Open your app or site and navigate to your offers page.
Register or log in through the Cleeng authentication widget.
Complete the checkout using a test offer.
Confirm that:
- The redirect URL points correctly to your Gallery site.
- Non-subscribers are blocked from Gallery playback.
- Subscribers can access content immediately after purchase.

Summary

By embedding Cleeng Hosted Widgets and connecting them with Brightcove Gallery, you can launch a fully self-serve D2C subscription experience with minimal development effort.

This setup leverages Cleeng’s hosted checkout and entitlement APIs, ensuring that only valid subscribers can access Brightcove Gallery content immediately after purchase.