Migrating to SDK 2.0
Dashboardstoryly.io

Migrating to SDK 2.0

Migrating to Storyly SDK 2.0 offers several improvements and new features that enhance the functionality and performance of your app's Story experience.

This guide will help you seamlessly migrate your existing implementation to Storyly SDK 2.0.

πŸ“˜

Start from here

Make sure to update the SDK version in your project's configuration files and dependencies (Android/iOS).

🚧

Backup your project

Before proceeding with the migration, ensure that you have a backup of your current project and the associated Storyly SDK version. This will allow you to revert back to the previous state in case any issues arise during the migration process.

The major change with the 2.0 version is the Config structure.

Now, while initializing the StorylyView, extra settings should be done with Config parameter. The aim is to gather all of the listed methods under the Config parameter.

Config parameter includes all of the features and functionalities listed below:

All the methods listed above should be set under Config parameter.

🚧

Review & check updated methods

  • Review any code that directly interacts with the methods listed above.
  • Pay attention to deprecated methods or classes and replace them with updated equivalents.

❗️

Deprecated methods / classes

  • UI Customizations options via Storyboard & XML have been removed. Please check this section for a detailed example.
  • externalData structure for Personalized Stories have been removed. For Personalized Stories, please check here.

UI Customizations

Storyly SDK 2.0 introduces changes to the UI customization properties.
Now, UI Customizations are separated under 3 main headings:

  • StorylyBarStyling: The UI settings related to Storyly Bar itself, such as paddings and orientation of the bar (horizontal/vertical) are now listed under this property.
  • StorylyStoryGroupStyling: All of the UI customizations related to the Story Group like size, shape, colors, and animations can be modified.
  • StorylyStoryStyling: You can adjust properties of components while viewing Story such as Story title, progress bar, and icon.
self.storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()                
                 .setBarStyling(
                     styling: StorylyBarStyling.Builder()
                         .setHorizontalPaddingBetweenItems(padding: 15)
                         .build()
                 )
                 .setStoryGroupStyling(
                     styling: StorylyStoryGroupStyling.Builder()
                         .setSize(size: .Custom)
                         .setIconHeight(height: 110)
                         .setIconWidth(width: 160)
                         .setIconCornerRadius(radius: 12)
                         .build()
                  )
                  .setStoryStyling(
                      styling: StorylyStoryStyling.Builder()
                          .setInteractiveFont(font: UIFont(name: "Your_font", size: 40)!)
                          .build()
                  )
                  .build()                            
        )

storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()                
                 .setBarStyling(
                     styling: StorylyBarStyling.Builder()
                         .setHorizontalPaddingBetweenItems(padding: 15)
                         .build()
                 )
                 .setStoryGroupStyling(
                     styling: StorylyStoryGroupStyling.Builder()
                         .setSize(size: .Custom)
                         .setIconHeight(height: 110)
                         .setIconWidth(width: 160)
                         .setIconCornerRadius(radius: 12)
                         .build()
                  )
                  .setStoryStyling(
                      styling: StorylyStoryStyling.Builder()
                          .setInteractiveFont(Typeface.MONOSPACE)
                          .build()
                  )
                  .build()                            
        )

Targeting with Custom Parameter & Labels

🚧

Updated classes

  • StorylySegmentation is now under Config parameter and it is renamed as setLabels.
  • Custom Parameter under StorylyInit class is moved under Config parameter.
  • With setLabels, you can pass a set of strings to target specific segments with different Story Groups.
  • To pass Custom Parameter, you should use thesetCustomParameterunder Config parameter.
self.storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()
                .setCustomParameter(parameter: String?)
                .setLabels(labels: Set<String>?)
                .build()
        )

storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()
                .setCustomParameter(parameter: String?)
                .setLabels(labels: Set<String>?)
                .build()
        )

πŸ“˜

Tip

If you'd like to change labels on the runtime, without needing to re-initialize, you can update labels as shown below.

self.storylyView.storylyInit.config.labels = labels

storylyView.storylyInit.config.labels = labels

Personalization with Custom Parameter & User Properties

🚧

Updated class

  • setUserData is now under Config parameter.
  • With setUserData, you can set the data to fill the User Property fields and show the rendered Stories.
  • To pass Custom Parameter, you should use thesetCustomParameterunder Config parameter.
self.storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()
                .setCustomParameter(parameter: String?)
                .setUserData(data: [String : String])
                .build()
        )

storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()
                .setCustomParameter(parameter: String?)
                .setUserData(data: Map<String, String>)
                .build()
        )

πŸ“˜

Tip

If you'd like to change userData on the runtime, without needing to re-initialize, you can update data as shown below.

self.storylyView.storylyInit.config.userData = userData

storylyView.storylyInit.config.userData = userData

Layout Direction

🚧

Updated class

  • setLayoutDirection is now under Config parameter.
  • Storyly Bar can either be LTR (Left to right) or RTL (Right to left). If your UI is bidirectional and it changes depending on the device or app language you can use this attribute.
self.storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()
                .setLayoutDirection(direction: .LTR | .RTL)
                .build()
        )

storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()
                .setLayoutDirection(StorylyLayoutDirection.LTR | .RTL)
                .build()
        )

Brand Domain Usage

🚧

Updated class

  • setShareUrl is now under Config parameter.
  • If you've set up your own domain for deeplink sharing, please check out here.
self.storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()
                .setShareUrl(url: String)
                .build()
        )

storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()
                .setShareUrl(url: String)
                .build()
        )

Shoppable Stories with Product Catalog

🚧

Updated class

  • StorylyProductConfig is set under Config parameter.
  • If you're using Shoppable Stories, all of the functions related to this feature have been moved under Config parameter.
self.storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()
                .setProductConfig(
                    config: StorylyProductConfig.Builder()
                        .setFallbackAvailability(isEnabled: true)
                        .build()
                )
                .build()
        )

storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()
                .setProductConfig(
                    config: StorylyProductConfig.Builder()
                        .setFallbackAvailability(true)
                        .build()
                )
                .build()
        )

Storyly Payload for Moments

  • In case Moments SDK is also integrated into your application, setStorylyPayload is also moved under Config parameter.
self.storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()
                .setStorylyPayload(payload: String?)
                .build()
        )

storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()
                .setStorylyPayload(payload: String?)
                .build()
        )

πŸ“˜

Tip

If you'd like to change storylyPayload on the runtime, without needing to re-initialize, you can update it as shown below.

self.storylyView.storylyInit.config.storylyPayload = storylyPayload

storylyView.storylyInit.config.storylyPayload = storylyPayload

Test Mode

  • If you're using Test Mode, setTestMode is also moved under Config parameter.
self.storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()
                .setTestMode(isTest: Bool)
                .build()
        )

storylyView.storylyInit = StorylyInit(
            storylyId: storylyToken,
            config: StorylyConfig.Builder()
                .setTestMode(Bool)
                .build()
        )

Once you have updated the SDK version and integration code, it's crucial to test your app's functionality thoroughly. Please test all the Storyly features and ensure they are working as expected.

If you face any difficulties or problems, please reach out to us.