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

1

Install the SDK

Add this line to your web page:

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

(don’t forget to add <meta charset="UTF-8"> to your HEAD)

2

Embed a Video Container

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

For example:

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

3

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)

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

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

You can fiddle with a full online example here.

SDK settings - Full definition of the available SDK and player settings

---

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:

Dynamic data

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

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

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.

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.

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.

Example: a flow map with a basic condition that adds the “gentle nudge” scene for users who haven’t purchased within the last 7 days.

For advanced use of scenes, including using scene flow maps, and passing data to each scene directly for reusability - check Advanced Scenes Usage

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:

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

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

Read detailed documentation onHow to connect my data to the video

💡 Video is created on user's device, in real time. Blings.io is never exposed to private user data when creating the videos!

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

Still have questions?

Feel free to contact us directly:

• [e-mail]