Cordova

This guide describes how to add and use StorySDK to Cordova app

SDK token

To get SDK token go to app settings page and copy SDK token:

Go to Settings, Setup section.

Setup

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.

<script src="https://cdn.jsdelivr.net/npm/@storysdk/core@latest/dist/bundle.umd.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@storysdk/core@latest/dist/bundle.css">

Add an HTML element to the page and place the SDK token in the data-storysdk-token attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
    <script src="https://cdn.jsdelivr.net/npm/@storysdk/core@latest/dist/bundle.umd.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@storysdk/core@latest/dist/bundle.css">
</head>
<body>

    <!-- Place your HTML element with SDK token here -->
    <div id="storysdk" data-storysdk-token="YOUR_SDK_TOKEN"></div>

    <!-- Other content on your page -->

</body>
</html>

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:

 <meta 
  http-equiv="Content-Security-Policy" 
  content="
    default-src 'self';
    script-src 'self' https://www.googletagmanager.com;
    connect-src 'self' https://www.google-analytics.com https://www.googletagmanager.com https://api.storysdk.com;
  ">

Enable Background Modes in Xcode (for iOS)

  1. Open Your Project in Xcode

    • Navigate to your app in Xcode and select your app target from the project navigator.

  2. Add Background Modes

    • Go to the Signing & Capabilities tab.

  3. 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

<preference name="AllowInlineMediaPlayback" value="true" />
<platform name="ios">
    <config-file parent="UIBackgroundModes" target="*-Info.plist">
        <array>
            <string>audio</string>
        </array>
    </config-file>
</platform>

⚡️ Please note that in order for stories to be displayed in the SDK, they need to be published.

Customisation

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:

<div
  id="storysdk"
  data-storysdk-token="YOUR_SDK_TOKEN"
  data-storysdk-group-image-width="150"
  data-storysdk-group-image-height="150"
  data-storysdk-group-title-size="18"
  data-storysdk-group-class-name="custom-group"
  data-storysdk-groups-class-name="custom-groups"
  data-storysdk-autoplay="true"
  data-storysdk-group-id="12345"
  data-storysdk-start-story-id="67890"
  data-storysdk-forbid-close="false"
  data-storysdk-is-show-mockup="true"
  data-storysdk-is-status-bar-active="true"
  data-storysdk-open-in-external-modal="false"
  data-storysdk-groups-outline-color="#e9e6e9"
  data-storysdk-active-group-outline-color="#fd19cc">
  <!-- Stories content goes here -->
</div>
PreviousiOS SDKNextCreate account

Last updated

Was this helpful?