Personalization: Working with Users

User Properties as External Data

You can use Personalized Stories for birthdays, personal offers by his or her name of a specific user, rewards and so on.

Instead of creating a whole personalized group with Storyly templates, you can try and create single personalized story, a personalized story group cover image or even personalized title on your groups.

📘

Before you begin

You need to have the working Storyly integration as described in Initial Web SDK Setup.

Add User Properties

To be able to have user properties on your story groups or stories, please go to Storyly Dashboard to add your properties.

🚧

Warning

Be sure to define unique property names in order to not to have problems while filling the user property fields in the application.

10921092

How to Use User Properties

Once you've added your user properties in the previous section, you can create a group from scratch. It is so simple to have personalized group cover image and title. Just select User Properties instead of Static and from the dropdown choose your related user property.

10901090 10901090

In studio, you can add texts and medias on your stories. If you select edit on a text and media, you'll be given two options Static & User Properties. To be able to create a personalized texts and medias, you have to select User Properties and choose whichever property you would like to use.

10881088

Setting User Property Data

You must set the data by using the following methods so that Storyly Web SDK can fill the user property fields and show the rendered stories to your users. You may set the data while initializing the Storyly Web SDK:

storylyWeb.init({
  ...
  userPropertyData: userPropertyData // it must be Object
});

or you can use the following function/method to set the data:

  storylyWeb.setUserPropertiesData(userPropertyData) // it must be Object
const userPropertyData = {
    "{user_name}": "user_name_url",
    "{media_2}": "media_url_2",
    "{media_1}": "media_url_1",
    "{product_name}": "product_name_url"
    "{price}": "price_url",
    "{description}": "description_url"
    "{cta_button}": "Buy Now",
    "{cta_url}": "cta_url_info"
},

🚧

Warning

If you miss a field in an index of your user properties data, respective story group to that index will be ignored.

User Attributes as External Data

You can use Personalized Stories for birthdays, personal offers by his or her name of a specific user, rewards and so on.

This guide shows how to create templates and fill the templates from the Web SDK.

📘

Before you begin

You need to have the working Storyly integration as described in Initial Web SDK Setup.

This guide shows creation of 2 different Stories with different templates.

Create Templates

In the Storyly Dashboard, while creating story groups, you will see an option called Create Personalized Stories. Here you can either select an existing template or create a new one in Template Studio.

🚧

Warning

Be sure to define unique field names for each story groups in order to not to have problems while filling the templates in the application.

Assume that your first template is a Birthday Story Template and consists of the following user-defined keys;

  • image layer to show image of birthday with {media_2} field,
  • text layer to show user names with {user_name} field,
28742874

Assume that your second template is an Abandonment Cart Template and consists of the following user-defined keys;

  • image layer to show image of product with {media_1} field,
  • text layer to show name of product with {product_name} field,
  • text layer to show price of product with {price} field,
  • text layer to show description of product with {description} field,
  • button layer to handle user action with {cta_button} field,
  • button layer to handle user action with {cta_url} field
28762876

📘

Tip

After saving your template, you can set a number in Maximum number of stories to specify how many stories will be displayed in Story Group. The number of stories varies depending on the data you send.

External Data Structure

According to the templates' needs, the Web application sets a custom data in a map format so that Storyly Web SDK can fill the fields in the templates above and show the rendered stories to the user. You may set your external data while initializing the Storyly Web SDK:

storylyWeb.init({
  ...
  externalData: externalData // it must be Array,
});

or you can use the following function/method to set the external data:

  storylyWeb.setExternalData(externalData) // it must be Array.

You need to make sure that the templates' placeholders must match the structure in the external data attributes.

const externalData = [{
    "{user_name}": "user_name_url",
    "{media_2}": "media_url_2",
    "{media_1}": "media_url_1",
    "{product_name}": "product_name_url"
    "{price}": "price_url",
    "{description}": "description_url"
    "{cta_button}": "Buy Now",
    "{cta_url}": "cta_url_info"
},
{
    "{media_1}": "media_url_1",
    "{product_name}": "product_name_url"
    "{price}": "price_url",
    "{description}": "description_url"
    "{cta_button}": "Buy Now",
    "{cta_url}": "cta_url_info"
}];

Each index of the external data represents the index of stories in each story groups.
For instance, first index of the list fills first stories of each story groups. Second index of the list fills second stories of each story groups and so on.

In our use case:

The field names of Birthday Story Template are listed in the first index thus Storyly SDK will fill the template and the Birthday Story will be displayed in the first story of the story group if {media_2} and {user_name} data are provided by external data.

The field names of Abandonment Cart Template are listed in both indexes thus Storyly Web SDK will fill the template and the Abandonment Cart Story will be displayed in the first and second stories of the story group if {media_1}, {product_name}, {price}, {description}, {cta_button}, and {cta_url} data are provided by external data.

🚧

Warning

If you miss a field in an index of your external data, respective story to that index will be ignored.

User IDs as Custom Parameter

In Storyly, you can use your audience to create automated personalized stories.

🚧

Warning

We do not recommend using Device ID as a user identifier. Frequent changes to Device ID may cause loss of personalized story data.

Add an Audience and Create Templates

First go to Audience under settings and add your CSV file.

28622862

You can give your Audience a name and after you can set the user identifier from your audience data. Once those are completed, click on `Create and your audience will be set.

Once you upload your CSV file, click on Create Personalized Stories and continue with Create Using Audience.

28642864

Choose which of the Audience data you'll be creating your automated personalized stories.

10241024

Select your desired template or create a new one in Template Studio.

10361036

Your data will be shown on this selected story template. Please match your data with the placeholders.

10381038

Passing Custom Parameter to Storyly Web SDK

This section shows you how to pass a custom parameter to Storyly Web SDK.

Storyly Web SDK allows you to send a string parameter in the initialization process. In init method, the customParameter field is used for passing Custom Parameter to Storyly Web SDK to match the user info that you upload in previous section.

  storylyWeb.init({    
    ...
    customParameter: "Your Custom Parameter Here"
  });