Make it easy to set your HTML5 app thumbnail

Showpad allows you to use custom HTML5 apps within the platform. You can read more about that in this Help Center article.

To make the HTML5 app show up in a clear way for Showpad users, you can use a designated thumbnail.
To achieve this, you can use the following trick to check if you're in "file processing mode" where Showpad creates the thumbnails or not.

The ShowpadLib is always loaded when you're in the Web app or any of our other apps.
If you add the following check in the header of your HTML page, you're good to go:

document.addEventListener("DOMContentLoaded", function() {
    processingTest = setInterval(function() {
        /* if the ShowpadLib is not defined, we're in processing mode :-) */
        if (window.ShowpadLib != undefined) {
            /* ... */
            clearInterval(processingTest);
        }
    }, 300);
});

Here's a full code example:

<html>
    <head>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                thumbnail = document.getElementById("thumbnail");
                app = document.getElementById("app");

                processingTest = setInterval(function() {
                    /* if the ShowpadLib is not defined, we're in processing mode :-) */
                    if (window.ShowpadLib != undefined) {
                        thumbnail.style.display = 'none';
                        app.style.display = 'block';
                        app.style.width = '100%';
                        app.style.height = '100%';
                        /* trigger whatever you need to do to start the app */
                        clearInterval(processingTest);
                    }
                }, 300);
          });
        </script>
    </head>
    <body>
        <img id="thumbnail" src="./img/thumbnail.png" style="display:block;" />
        <div id="app" style="display: none;"></div>
    </body>
</html>

Make it easy to set your HTML5 app thumbnail

Comments

Didn't find what you were looking for?

Get the latest apps and email integrations