# 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?

<table data-header-hidden><thead><tr><th width="198.1171875">Benefit</th><th>Description</th></tr></thead><tbody><tr><td><strong>Shorter URLs</strong></td><td>Especially important for SMS, QR codes, and email links.</td></tr><tr><td><strong>Secure by Design</strong></td><td>Makes it harder for end users to edit or tamper with values.</td></tr><tr><td><strong>Fully Unicode Safe</strong></td><td>Supports emojis, RTL, non-Latin characters.</td></tr></tbody></table>

### 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.

{% hint style="info" %}
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.\
&#x20;\
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.
{% endhint %}

### 🔧 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<br>

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

```javascript
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

```javascript
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 
});


```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.blings.io/developers/getting-started/how-to-connect-my-data-to-the-sdk/crm-data-integration/url-parameters-as-compact-token-based-approach.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.