Import Widget Docs

Introduction

This widget enables customers to smoothly transfer their BoothMotion products into your app. Crafted for easy integration, it provides multiple integration approaches based on your app's architecture.

Below you can find demos and example code for each of the import strategies in vanilla JS and React.

If you have any questions, please reach out to hello@boothmotion.com

Table of Contents

File Input Strategy

If you already allow your user to upload start screens or animated overlays, the file input strategy is the simplest way to integrate with BoothMotion. It takes a reference to a file input element, and once the user has selected a file, it will download the file and load it into the file input purely on in the browser as if the user has selected the file from their desktop.

Other than adding the import widget code and a small amount of configuration, there is no other work required on your part. The import widget will handle the rest.

File Return Strategy

The file return strategy is a more advanced strategy that allows you to have more control over the import process. It returns a native file object.

Signed URL Strategy

The signed URL strategy returns a URL lasting 7 days that can be used to download the asset.

Quick Overview

For React examples, click here

<fieldset>
    <legend>File Input Strategy</legend>
    <form method="POST" action="https://postman-echo.com/post" enctype="multipart/form-data">
        <input type="file" name="file" id="your-file-input" />
        <input type="submit" value="Upload" />
    </form>
</fieldset>

<div id="boothmotion-file-upload"></div>
<script src="https://www.boothmotion.com/partners/partners.js" async></script>

<script type="text/javascript">
window.addEventListener("load", () => {
    const BM = new window.BoothMotionSDK({
        // Container element for the button, not required if you are using the customButton option
        rootSelectorForButton: "#boothmotion-file-upload",

        // optional: customButton - provide a HTMLElement that we can attach a click handler to
        // e.g: customButton: document.querySelector("#my-custom-button"),

        // The import strategy to use
        // options: file-input, file-callback, signed-url
        importStrategy: "file-input",

        // only required if using the file-input strategy
        importStrategyOptions: {
            fileInput: document.querySelector("#your-file-input"),
        },

        // used for file-callback and signed-url strategies
        onReceiveFile: (fileOrUrl) => {
            console.log("file chosen via file input strategy", file);
        },

        // Filters for the products that are shown in the import widget
        productType: "start-screen", // optional, options: start-screen, animated-overlay, default is all
        // avoFileFormat: "transparent.mov", // optional, options: transparent.mov, transparent.hevc.mov, transparent.hevc.mp4
        resolutionId: 2, // optional
        // 1 - mirror start screens
        // 2 - ipad portrait start screens
        // 3 - ipad landscape start screens
        // 4 - surface pro portrait start screens
        // 5 - surface pro landscape start screens
        // 6 - generic tft start screens
        // 7 - hd landscape start screens
        // 8 - pillar booth start screens

        // 9 - portrait animated overlays
        // 10 - landscape animated overlays
        // 11 - square animated overlays
    }).init();
});
</script>