# Getting Started with Blings.io Dynamic Video SDK

The Blings SDK allows you to embed, control, and personalize interactive MP5 videos directly within your web application or CRM flows.

This guide will help you:

* Embed an MP5 video
* Pass dynamic data (e.g. user name, product info)
* Handle interactivity and playback events

###

### Basic Installation

{% stepper %}
{% step %}

#### Install the SDK

Add this line to your web page:

```html
	<script src="https://assets.blings.io/scripts/msdk4.js" />
```

(don’t forget to add `<meta charset="UTF-8">` to your HEAD)
{% endstep %}

{% step %}

#### Embed a Video Container

Add an empty DOM element to the page, where the video will be created.

For example:

```html
<div id="blings-video-container"></div>
```

{% endstep %}

{% step %}

#### Create the video with dynamic data

call the ***create*** function, with a selector to the element, and your project-id (e.g. `sdk-demo` for the demo project)

```tsx
BlingsPlayer.create({
  project: {
    id: STRING // e.g "sdk-demo"
  },
  settings: {
    container: document.getElementById("blings-video-container"),
    cinematic: BOOLEAN, //for full screen “cinematic” styling
  }, 
  data: {...}
)
```

{% endstep %}
{% endstepper %}

That's the bare minimum for rendering the video on the client side!

You can fiddle with a full [online example here](/developers/getting-started/readme-1.md).

{% hint style="info" %}
[SDK settings](/developers/getting-started/sdk-types-documentation.md) - Full definition of the available SDK and player settings
{% endhint %}

***

### Code-Pen MVP

Here's a working version for the demo project, run pen and click on HTML and JS to play with the code:

{% embed url="<https://codepen.io/lmajowka/pen/ExRqbXx>" %}

### Dynamic data

Now, we can play with some dynamic data for this scene. For that, pass ***data*** object to the create function:

```javascript
BlingsPlayer.create({
// ...
  data: {...} 
})
```

{% embed url="<https://codepen.io/lmajowka/pen/VwBZJvw>" %}

The data must match the specific configuration of your project.

\
Each project has its own data schema, defined either in **Blings Studio** (right sidebar) or in the **Blings Platform** under **Settings → Dynamic Data**.

### Scenes

For each project, there might be multiple video scenes that can be connected to create one longer video.

```javascript
BlingsPlayer.create({
// ... project, settings, data
  scenes: [ "sceneA", "sceneB" ]  // array of scene or flows
})
```

For example, the DEMO-SDK project has four scenes that can create different videos on demand.

{% embed url="<https://codepen.io/lmajowka/pen/gOjYNJX>" %}

You can pass scenes directly to the SDK and implement any business logic to select the relevant scenes for each user.

Alternatively, you can use the **Blings Platform Flow Map** – a no-code solution that lets you define basic logic and create scene flows visually.

<figure><img src="/files/d2IXmqu0hUcbQRN1FnZC" alt=""><figcaption><p>Example: a flow map with a basic condition that adds the <strong>“gentle nudge”</strong> scene for users who haven’t purchased within the last 7 days.</p></figcaption></figure>

{% hint style="info" %}
For advanced use of scenes, including using scene flow maps, and passing data to each scene directly for reusability - check [Advanced Scenes Usage](/developers/getting-started/advanced-topics/advanced-scenes-usage.md)
{% endhint %}

### Other kinds of data

Note that the "***image\_scene***" in this demo, is interactive with a CTA button, and you can pass the redirect URL for this button. You can also pass a URL for an image that will replace the dog image, and the theme color for the video, from Blings' pink to whatever color you prefer.

Try playing with:

```jsx
text1
text2
picurl // url of an image
linkurl // href for the CTA button
maincolor // hex values
```

{% embed url="<https://codepen.io/lmajowka/pen/zYLOVgY>" %}

> note: *Dynamic parameters are defined per project, and a specific API will be provided separately for each project.*

Read detailed documentation on[How to connect my data to the video](/developers/getting-started/how-to-connect-my-data-to-the-sdk.md)

{% hint style="warning" %}
💡 Video is created on user's device, in real time. **Blings.io is never exposed to private user data** when creating the videos!
{% endhint %}

### **Analytics**

Video usage and user events are sent to our system, and can later be viewed within Blings’ dashboard.

Analytics are sent for:

* Video player interaction (play/pause/replay)
* Video playback (scenes watched, completion rate)
* Video goals (buttons pressed)

And can later be viewed inside the Blings platform (***Project -> analytics***).

Blings supports sending video events to your analytics platform (e.g. Mixpanel, google-analytics).\
Read this document about - [Custom Analytics](/developers/getting-started/advanced-topics/custom-analytics.md)

### **Still have questions?**

Feel free to contact us directly:

* <support@blings.io>


---

# 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/getting-started-with-blings.io-dynamic-video-sdk.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.