Storyly Documentation

# Integrations with Other Platforms

This guide shows you how to do integrations between Storyly and other platforms.

# Personalization Platforms

This section shows how you can use data from other platforms to inject into Storyly templates.

# External Data Structure

In the Storyly dashboard, while creating story groups, you will see an option called Create Personalized Stories. This option includes different templates to fill from Storyly SDK. According to the template's needs, the application sets a custom data in a map format so that Storyly SDK can fill the fields in the template and show the rendered stories to the user. The following function/method can be used to set the external data:

this.storylyViewController.setExternalData(List<Map> externalData);

externalData parameter is the list of mapping data for each story with user-defined key-value pairing. While creating your templates you will be able to define field names for the interactive layers of your template. You will use these user-defined fields in the application to fill the templates. You can create multiple personalized story groups with these templates.

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.

# Example Usage

Assume you have 2 story groups with different templates. First story group has a button and an image with maximum number of stories is set to 4. The field names are set to first_button_url and first_image_url respectively by dashboard user. Second story group also has a button and a text layer with maximum number of stories set to 2. The field names of the second story group are set to second_button_url and second_text respectively again by dashboard user. In your application, you can set the external data as given in the following example:

final externalData = [
  {
    "first_button_url": "https://www.google.com",
    "first_image_url": "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png",
    "second_button_url": "https://www.amazon.com",
    "second_text": "Buy This"
  },
  {
    "first_button_url": "https://www.yahoo.com",
    "first_image_url": "https://s.yimg.com/cv/apiv2/default/20210428/Juneteenth_non_retina_205x58.png",
    "second_button_url": "https://www.gmail.com",
    "second_text": "Email Here"
  },
  {
    "first_button_url": "https://youtube.com",
    "first_image_url": "https://youtube.com/img/explore/destinations/icons/gaming_color_64.png"
  }
]

this.storylyViewController.setExternalData(externalData);

In this example, each index of the external data represents the index of stories in each story groups. For instance, first index of the list fills first story of both story groups. Second index of the list fills second story of both story groups and so on. For the first story group, maximum number of stories is set to 4, but in the list related fields are given for 3 stories. Therefore, 3 stories will shown to the user for the first story group.

# Example Usage with Segmentify

Assume that Storyly Dashboard template consist of the following user-defined keys;

  • image layer to show image of product with "image" field,
  • text layer to show description of product with "description" field,
  • text layer to show price of product with "price" field and
  • button layer to handle user action with "action_url" field.

Assuming you have already product list from Segmentify:

final externalData = segmentifyProducts
    .map(
        (productRecommendationModel) => {
            'action_url': productRecommendationModel.url,
            'image': productRecommendationModel.image,
            'description': productRecommendationModel.name,
            'price': productRecommendationModel.priceText,
        },
    )
    .toList();

this.storylyViewController.setExternalData(externalData);

WARNING

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

TIP

You can use data platforms other than Segmentify if your data is suitable with these templates.

# Sending Events to Analytics/Data Platforms

This section shows you how to send the Storyly events to specific data platforms. You can use the following function to redirect the Storyly events to your data platform:

StorylyView(
    ...
    storylyEvent: (StorylyViewEventCallback event) {
        print("storylyEvent")
    },
)