Personalized video

1

hi there!
i'm Federico from italy.

i need help to create a PERSONALIZED VIDEO with Hype

I have to create a template with text that changes based on a form or a CSV database.

Can u help me how to do it?

Thanks

2

Can you post the template

3

While there's not specific built-in features, leveraging Hype's API and JavaScript can allow for data-driven content via CSV files. There are examples on the forums; perhaps some of those can help... you're welcome to post more specific information on what you are trying to accomplish.

As far as a video - Hype can export via the File > Export as Movie > Video… menu item. You'd need to adjust customizability ahead of time for these static exports; otherwise depending on your needs and where this is going to go, it may be better to export as HTML5.

4

Let me explain you More in details

First of all, i have to create a form on the website to collect data like NAME, LAST NAME etc from new prospects that visit the website

The video template that I need to create with Tumult Hype, must have the ability to take this infos and change it in the video template

Here is an example

I will create a video with text like:
‘’Good morning Jonathan! Welcome on our website!
Because you insert that you are tall 185cm and your body weight is 80kg, here is the workout that we think is right for you‘’

The data in strong text is the data that tumult hype get from the form to change the text in real time

I hope it’s clear now

5

Here you go… using Hype Data Magic. It even can be exported as a video. It doesn't contain the form, though. The data is set in the Head HTML.

HypeDataMagic-Example-Personalized-Data.hype.zip (47,1 KB)

2 Likes
6

To give more context, HypeDataMagic is a script that uses attributes in HTML tags to fill in data. This can be either those via the Additional HTML Attributes section of Hype's Identity Inspector or, as the case with @MaxZieb's example, ones found in the Inner HTML of text elements. By viewing the Inner HTML, you can get a better view of this:

Good morning <span data-magic-key="name" magic-rebuild-time="150909">name</span>! Welcome on our website!

Converts to:

Good morning Max Ziebell! Welcome on our website!

As if you look in the Head HTML section, you can see how the data is defined for the name key and other fields:

	<script>
	
	/* Example: setting default data with various data types */
	HypeDataMagic.setData({
		name: 'Max Ziebell',
		weight: 185,
		height: 80,
	});
	
	</script>

To get data into such a format, you would need to fetch your data first. This is typically done with an XMLHTTPRequest - basically making an extra network call to the data on your server.

You mentioned using CSV; if you use this format you'll need to convert it into JavaScript objects that can be fed into the HypeDataMagic setData calls. Otherwise if you have the option it may be easier to store in a JSON representation that can be natively read by JavaScript without bringing in a CSV parsing library (or writing your own).

As far as a "video" - it sounds like since this is for a website HTML5 would be the right solution since this can all be done dynamically. If it were a video format, you would need to render video frames each time. This is outside the scope of something that would typically be done client-side, but simple HTML replacements like with HypeDataMagic would work well.

I hope that helps point you in the right direction!

3 Likes
7

Thanks Guys.

I will meet with one of my friend, he is a web developer, to help me for set this up.

I will let you know if we meet any issues

1 Like
8

for my project i need to insert a form first, and i can do it with a HTML widget.

second, I have to save the answers of the form like global variables to use them with other functions
''print'' them in a specific text in a specific time off the video that i will create with Hype

I have a video example to send you, if you give me your email

9

Sure - feel free to send me a DM on the forums or email support at tumult dot com.