Feed SDK

Web

The feed 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 - comma separated ids of feeds or feeditems to display (REQUIRED)
        - data-feed-type - "profile" or "combined" to specify type of feed, "feeditem" if displaying individual feeditems (OPTIONAL)
        - data-show-video - boolean to show or hide video posts (OPTIONAL)
        - data-show-rejam - boolean to show or hide rejam posts (OPTIONAL)
        - data-style - "carousel", "mpu" or "feed" to specify appearance of the embed (OPTIONAL)
        - 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-in-feed-ads-placement-id - enables advertising through an AwesomeAds placement id (OPTIONAL)
        - data-deeplink - boolean to enable or disable deeplink functionality (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>

Mobile

The feed SDK can easily be embedded in a webview by invoking the follow URL:

The query parameters (camelcased) match the parameters configured through the data-* attribute in the web integration.

Intercepting deeplink calls. For deeplinks to work, the call needs to be intercepted and redirected to a browser.

See here on how to do that.

Styles

The feed SDK supports 3 different visualisations through the data-style attribute: ‘carousel’, ‘feed’ and ‘mpu’

Carousel. The carousel style displays the feed posts in a rotatable carousel

_images/carousel.png

Feed. The feed style displays the feed posts in a scrollable feed similar to the one found in the PopJam Application

_images/feed.png

Mpu. The mpu style fits a carousel in a standard 300x250 MPU placement

_images/mpu.png

External Events

The feed SDK fires some external events as actions that you can subscribe to with an events listener

Avatar Click: Fired when a user avatar has been clicked

Subscribing:

document.body.addEventListener('avatarclick', (evt: CustomEvent) => handleEvent(), false);

Returns:

{
  user: userObject
}

Username Click: Fired when a username has been clicked

Subscribing:

document.body.addEventListener('usernameclick', (evt: CustomEvent) => handleEvent(), false);

Returns:

{
  user: userObject
}