Platform SDK

Feed

The web SDK allows you to easily embed a Popjam feed in your web application.

Info Contents
Contact devsupport@superawesome.tv
License GNU Lesser General Public License v3
_images/popjam-feed.png

The process to do this is very simple:

Step 1. Create a container for the embedded feed in your web page

<body>
    <!-- (...) -->

    <!-- Create a container for the PopJam embed and assign an id -->
    <!-- The container can have any width. The feed will adapt to it -->
    <div id="popjam-feed-container" style="width: 1024px;"></div>

    <!-- (...) -->
</body>

Step 2. Include the feed sdk script and set the desired parameters as explained in the comments below

<body>
    <!-- (...) -->

    <!-- Create a container for the PopJam embed and assign an id -->
    <!-- The container can have any size. The feed will adapt to it -->
    <div id="popjam-feed-container" style="width: 1024px;"></div>

    <!-- (...) -->

    <!--
        Include the PopJam SDK and pass attributes via the data prefix
        List of attributes:
        - data-container - the id of the created container element above (REQUIRED)
        - data-feed-id - the id of the feed to get the posts from (REQUIRED)
        - data-orientation - "vertical" or "horizontal" to position the feed (OPTIONAL)
        - data-columns - number of columns (OPTIONAL)
        - data-rows - number of rows (OPTIONAL)
        - data-arrows-color - change color of the navigation arrows (OPTIONAL)
        - data-max-posts - set the maximum number of posts (OPTIONAL)
        - data-pj-logo - "white" or "black" to change color of the PopJam Logo (OPTIONAL)
        - data-auto-rotate-speed - auto rotation of the carousel in seconds (OPTIONAL)
        - data-ads-placement-id - enables advertising through an AwesomeAds placement id (OPTIONAL)
    -->

    <script
        src="https://sdk.popjam.com/v1/web/feed.min.js"
        data-feed-id="476bd9d0-dd47-4231-9d80-3f37f527efab"
        data-container="popjam-feed-container"
        data-columns=4
        data-arrows-color="#2771e8"
    ></script>
</body>

Note

  • The feed id depends on the feed to be shown and it will be provided by Popjam. In this example, the id corresponds to the Popjam channel feed

Let’s put it all together in an example website:

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>PopJam Integration Demo</title>
        <meta name="description" content="PopJam Integration Demo">
        <meta name="author" content="SuperAwesome">
    </head>

    <body>
        <div id="popjam-feed-container" style="width: 1024px;"></div>

        <script
            src="https://sdk.popjam.com/v1/web/feed.min.js"
            data-feed-id="476bd9d0-dd47-4231-9d80-3f37f527efab"
            data-container="popjam-feed-container"
            data-columns=4
            data-arrows-color="#2771e8"
        ></script>
    </body>
</html>