Cordova
This guide describes how to add and use StorySDK to Cordova app
Last updated
Was this helpful?
This guide describes how to add and use StorySDK to Cordova app
Last updated
Was this helpful?
To get SDK token go to app settings page and copy SDK token:
Go to Settings, Setup section.
Choose Custom solution and copy the code. Add the following code to the <head> section of your HTML page to include the necessary script and styles.
Add an HTML element to the page and place the SDK token in the data-storysdk-token attribute.
Make sure that the Content-Security-Policy allows requests to https://api.storysdk.com and Google servers for analytics tracking. For example, add the following code to the <head> section:
Enable Background Modes in Xcode (for iOS)
Open Your Project in Xcode
Navigate to your app in Xcode and select your app target from the project navigator.
Add Background Modes
Go to the Signing & Capabilities tab.
Configure Background Modes
Click the "+ Capability" button and select "Background Modes".
Check the "Audio, AirPlay, and Picture in Picture" option
Run the application build and test the stories in the simulator.
⚡️ For the interface elements to work correctly, you need to add the following parameters to the config.xml file in the Cordova project
⚡️ Please note that in order for stories to be displayed in the SDK, they need to be published.
By specifying the following data attributes in the HTML tag, you can control the appearance, behavior, and functionality of the SDK directly from HTML without additional JavaScript configuration.
data-storysdk-group-image-width
Specifies the width of the group image in pixels, controlling how large the group’s main image will appear.
data-storysdk-group-image-height
Sets the height of the group image, allowing you to control the image’s vertical display size.
data-storysdk-group-title-size
Adjusts the font size of the group title, so you can set the desired emphasis for the group title text.
data-storysdk-group-class-name
Allows a custom CSS class to be applied to the individual group elements. Use this to apply unique styling to each group.
data-storysdk-groups-class-name
Adds a custom CSS class to the container for multiple groups. This is useful for controlling overall styling for the collection of groups.
data-storysdk-autoplay
Enables autoplay for stories if set to "true". The stories will play automatically without requiring user interaction.
data-storysdk-group-id
Identifies a specific group ID to load within the SDK, allowing targeted display of group content when autoplay is enabled.
data-storysdk-start-story-id
Sets the initial story to display when the SDK opens, letting you direct users to a specific story.
data-storysdk-forbid-close
Prevents users from closing the SDK interface if set to "true". Useful for mandatory viewing scenarios.
data-storysdk-is-show-mockup
Displays the story content within a device mockup if set to "true", providing a preview within a simulated device frame.
data-storysdk-is-status-bar-active
Activates a status bar at the top of the story if set to "true", helping indicate story progress.
data-storysdk-open-in-external-modal
Opens stories within an external modal if set to "true". This is useful if you want to display content in a standalone modal overlay.
data-storysdk-groups-outline-color
Specifies a custom outline color for groups. This is useful for visually highlighting or differentiating specific groups within the interface.
data-storysdk-active-group-outline-color
Specifies a custom outline color for the active group or for the group when hovered over. This helps emphasize the currently selected or focused group in the interface.
Example of usage:
