# Cordova ## 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 **``** section of your HTML page to include the necessary script and styles. ```html ``` 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 and Google servers for analytics tracking. For example, add the following code to the **``** section: ```html ``` 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 ```xml audio ``` ⚡️ 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: ```html
```