URL Parameters as Compact Token-Based Approach

Blings supports personalization through a compact token passed as a URL parameter. This method allows you to pass multiple dynamic fields (like uid, first_name, and loyalty_points) using a single short, obfuscated parameter.

This guide explains how the token works, why it’s recommended, and how to implement it on both your side and Blings’ side.

🚀 Why Use a Token Instead of Plain Parameters?

Shorter URLs	Especially important for SMS, QR codes, and email links.
Secure by Design	Makes it harder for end users to edit or tamper with values.
Fully Unicode Safe	Supports emojis, RTL, non-Latin characters.

How it works

Blings lets you personalize videos by passing a single token in the URL. That token contains all the dynamic values you want to inject (like name, tier, points, etc.). Instead of exposing each field as a query param, you pack everything into one compact string. On the landing page, the token is decoded and the values are merged into the video in real time, on the viewer’s device. You control how the data is encoded — from simple base64 to advanced compression or encryption — as long as both sides agree on the format.

You control how the data is encoded - as long as sender and page use the same spec. common picks: base64url of a delimited string (short), base64url json, optional compression (gzip/lz) for long values, optional aes/hmac for secrecy/integrity. If Blings hosts the page – just tell us your format and we’ll decode it. If you host – decode it your way before passing the data to the player.

🔧 Example: base64url token with semicolon format

Let’s say you want to personalize a video with the following fields:

• Loyalty points

• Membership tier (e.g. silver)

• Customer name\

Instead of sending them as plain query parameters:

?points=90&tier=silver&name=John

You can send a single compact token:

?OTA7c2lsdmVyO0pvaG4

This token is simply the string 90;silver;John encoded in a safe base64url format. Here’s the full working example:

🧠 How to encode on the sender side

function toBase64UrlSafe(str) {
  const utf8 = new TextEncoder().encode(str);
  let binary = '';
  utf8.forEach(b => binary += String.fromCharCode(b));
  return btoa(binary)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}

// create token from values
function pack(...parameters) {
  return toBase64UrlSafe(parameters.join(';'));
}

// usage:
const token = pack(90, 'silver', 'John'); // => OTA7c2lsdmVyO0pvaG4
const url = `https://your-landing.com/video?${token}`;

🧩 How to decode on the landing page

function fromBase64UrlSafe(b64url) {
  const b64 = b64url.replace(/-/g, '+').replace(/_/g, '/');
  const bin = atob(b64);
  const bytes = new Uint8Array(bin.length);
  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
  return new TextDecoder().decode(bytes);
}


// Get the token from the URL and remove the leading "?"
const urlParams = location.search.slice(1) 

// decode from base64 and split value by ";" 
const [points, tier, name] = fromBase64UrlSafe(urlParams).split(';');
const data = { points, tier, name } 
// => {points: 90, tier: 'silver', name: 'John'}

BlingsPlayer.create({
    // ...
    data 
});