Test data connection with a dummy video

Why Test with a Dummy Video?

To ensure seamless data integration, it's crucial to test with a dummy MP5 video. This allows developers and testers to confirm that data connections between the video, HTML page, and personalized data are correctly established.

How to Test

Use the dummy video to validate data integration across various platforms—whether it's a webpage, CRM campaign, or mobile interface. Once your video design is finalized, simply swap out the dummy video with the final version in the SDK.

Parameters and Testing

The dummy video accepts a variety of parameters—texts, numbers, media, etc. For testing, use only the parameters essential to your use case. For instance, to test an automated email sent from Hubspot upon a product purchase, you can use the following parameters

data = {
  TEXT: {
    parameter_text_1: "contact.first_name",
    parameter_text_2: "delivery set to " + "delivery.time",
  },
  IMAGES: {
    parameter_image_1: "delivery.product.image_main",
  },
  LINKS: {
    parameter_url_1: "delivery.verify_deeplink",
  },
};

A successful test will display a dummy video featuring the user's name, delivery details, etc. Note that variable names will be updated to match those in the final video once it’s ready.

Online Demo Video

---

Implementation Details:

Project id: 4ffd4332-17a7-4a79-b93c-b2b2af1f8ef7

Supported Parameters

The video accepts the following parameters:

Variable name	Type	Example usage
parameter_text_1	text	first name, dynamic copy, personal offering, formatted price…
parameter_text_2	text	“
parameter_text_3	text	“
parameter_number	number	loyalty points, age, price…
parameter_image_l	image URL	product image, avatar…
parameter_image_2	image URL	“
parameter_url_1	URL	CTA link, landing page…
parameter_url_2	URL	“
parameter_audio_l	audio URL (mp3)	dynamic voice-over, win\lose sound effect…
Parameter_video_2	video URL (mp4)	video clip, speaking avatar, dynamic footage, influencer reccomendations…

With this data structure:

interface variables_for_dummy_video {
    TEXT: {
        parameter_text_1
        parameter_text_2
        parameter_text_3
				parameter_number
    },
    IMAGES: {
        parameter_image_1
        parameter_image_2
    },
    LINKS: {
        parameter_url_1
        parameter_url_2
    },
    MEDIA: {
        parameter_audio_1
				parameter_video_1
    }
};

demo code

var settings = {
  // Blings video will replace an HTML element on screen
  container: document.getElementById("YOUR-HTML-ELEMENT"),
  // This option creates a full-screen video over black background
  cinematic: true,
};

// This is the data that will be used in the video.
// You can gather the data from any resource or API in real time
// and replace the values listed below.
// This data is never exposed to Blings.io!
var data = {
  TEXT: {
    parameter_text_1: "Text1x",
    parameter_text_2: "Text2x",
    parameter_text_3: "Text3x",
    parameter_number: 40,
  },
  IMAGES: {
    parameter_image_1: "https://d1t5lnx6iwscgl.cloudfront.net/projects/4ffd4332-17a7-4a79-b93c-b2b2af1f8ef7/assets/image/1696264168740_White_Blings_Logo_Horizontal.svg",
    parameter_image_2: "https://d1t5lnx6iwscgl.cloudfront.net/projects/4ffd4332-17a7-4a79-b93c-b2b2af1f8ef7/assets/image/1696242760858_White_Blings_Logo_Vertical-01.png",
  },
  LINKS: {
    parameter_url_1: "www.blings.io",
    parameter_url_2: "www.google.com",
  },
  MEDIA: {
    parameter_audio_1:
      "https://file-examples.com/storage/fe1e98be1065198f8a74ddc/2017/11/file_example_MP3_700KB.mp3",
    parameter_video_1:
      "https://d1t5lnx6iwscgl.cloudfront.net/projects/4ffd4332-17a7-4a79-b93c-b2b2af1f8ef7/assets/video/1696260756993_ForBiggerBlazes.mp4",
  },
};

// Define the scenes from which the video will be created
var scenes = [
  "Scene 1",
  //  "Scene 2",
  //  "Scene 3",
  //  "Scene 4",
  //  "Scene 5"
];

// Finally create the video
BlingsPlayer.create({
  project: { id: "4ffd4332-17a7-4a79-b93c-b2b2af1f8ef7" },
  data,
  settings,
  scenes,
});