# 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
``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.storysdk.com/cordova.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.