HTML Sandbox

    Overview

    NOTE:This asset is exclusive to Player for Tablets and Player for Kiosks It will not work in Player for Windows. Composer will of course permit you to insert and configure this asset but Composer's Play Mode must be set to "Use Player for Tablets/Kiosks" as shown below:

    ProjectMenu.png

    The HTML Sandbox asset enables you to embed HTML code in an experience, often for the purpose of exposing Web-based widgets. Simply enter HTML code in the HTML content property and an embedded Chromium-based browser will run it.

    Inserting the HTML Sandbox asset into your experience

    You can download this asset using the Get more accelerators button at the top of the Design Accelerators tab of Composer. In the image below you can see the HTML Sandbox bundle in the top left corner.

    DA_panel.jpg

    Once the asset has downloaded to your Design Accelerators list, you will find:

    HTMLsandbox.jpg

    Properties

    See our list of common properties for details about properties shared by all asset types.

    • HTML Content: enter your own HTML code. It can embed <script> and <style> tags

    Limitations

    You cannot reference files (e.g. css or js) located in your IntuiFace project. However, you can reference scripts or styles accessible on the web.

    E.g.: <script src="http://d3js.org/d3.v3.min.js"></script> will enable you to create graphic charts using the D3js library

    Samples

    Twitter

    To display a live Twitter feed using the HTML Sandbox asset, start by creating a new widget for the targeted Twitter account. Here is the procedure:

    • Log into your Twitter account and go into Settings -> Widget
      TwitterSettings.jpg
    • Create a new widget
      Twitter-CreateNew.jpg
    • Choose your settings then copy the given code into the HTML content property of the HTML Sandbox asset. Use the Empty HTML Sandbox option from the Design Accelerators panel.
      Twitter-Widget.jpg

    For more information about Twitter widget customization, please visit this Twitter documentation page

    Sample code

    This code:

    <a class="twitter-timeline" data-dnt="true" width="520" height="1200" 
      href="https://twitter.com/IntuiLab" data-widget-id="522673811213148160">
      Tweets by @IntuiLab
    </a>
    <script>
        ! function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0],
                p = /^http:/.test(d.location) ? 'http' : 'https';
            if (!d.getElementById(id)) {
                js = d.createElement(s);
                js.id = id;
                js.src = p + "://platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, "script", "twitter-wjs");
    </script>
    

    will create this widget:

    Youtube

    To display a YouTube video, select the Share button on the page of the YouTube video you wish to display then click on Embed. (Optionally tweak settings provided by YouTube to customize your widget.) Copy and paste the given code into the HTML content property of the HTML Sandbox asset. Use the Empty HTML Sandbox option from the Design Accelerators panel.

    Sample code

    This code:

    <iframe width="1120" height="630" src="http://www.youtube.com/embed/tv01WGsfR6Y" frameborder="0" allowfullscreen></iframe>

    will create this widget: