Drawing Tool SDK

Web

The drawing tool SDK allows you to easily embed a PopJam drawing tool in your web application.

Info Contents
Contact popjam-support@superawesome.com
License GNU Lesser General Public License v3
_images/drawing.png

The process to do this is very simple:

Step 1. Create a container for the embedded tool in your web page and provide a width and height

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

    <!-- Create a container for the PopJam drawing tool and assign an id -->
    <div id="popjam-tool-container" style="height:600px; width: 400px;"></div>

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

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

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

    <!-- Create a container for the PopJam drawing tool and assign an id -->
    <div id="popjam-tool-container" style="height:600px; width: 400px;"></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-item-id - an id of a feed item to use as canvas image. Submitting a drawing is posted as a reply (OPTIONAL)
        - data-canvas-image - image url to use as a canvas (OPTIONAL)
        - data-background-image - image url to serve as a background for the tool (OPTIONAL)
        - data-background-color - background colour for the tool (OPTIONAL)
        - data-deeplink - boolean to enable or disable deeplink functionality (OPTIONAL)
    -->

    <script
        src="https://sdk.popjam.com/v1/web/draw/widget.min.js"
        data-container="popjam-tool-container"
        data-feed-item-id="ac574850-491d-11e7-9955-79ea3bd6ab65"
        data-background-color="#ed2700"
    ></script>
</body>

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-tool-container" style="height:600px; width: 400px;"></div>

        <script
            src="https://sdk.popjam.com/v1/web/draw/widget.min.js"
            data-container="popjam-tool-container"
            data-feed-item-id="ac574850-491d-11e7-9955-79ea3bd6ab65"
            data-background-color="#ed2700"
        ></script>
    </body>
</html>

Mobile

The drawing tool 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.