How to Create an Instant App

An Instant App (aka Widget) is an HTML5 application capable of running within an advertising format (either display or video). Here below a step by step guide on how to create instant apps independently on the platform:

STEP 1: Click on the Instant Apps tab on the left side menu to access the page where all instant apps are listed.

Instant Apps are then composed of two main elements: A template and a structure. In order to create an instant app that is correctly functioning you’ll need to create both.

WHAT IS AN INSTANT APP’S TEMPLATE?

A template is nothing else than what tells the instant app how it looks and how it works. Templates support a mix of HTML5, CSS, and Javascript in order to give it the exact orders and look and feel and to make sure user interactions are registered on the database as user events. Events and user behavior in general is used not only for analytics purposes but also to personalize content and future exposures of the user.

WHAT IS AN INSTANT APP’S STRUCTURE?

A structure is an XML schema allowing the user to define certain instant app’s parameters through a user interface panel. That panel is located within Connected-Stories Studio when users create widgets or apps in order to input parameters such as unique ids, key values, animations, images, and more.

STEP 2: Create the template.

Click on the template option at the top of the menu and then click on add template to add a new template. You can either launch the editor and write your code or copy and paste some from a local file. Here below an example of template of the Interactive Elements, one of the most often used instant apps:

<!-- @version: production-5.0.29 -->
    <!-- @docs: https://hypertvx.atlassian.net/wiki/spaces/HYP/pages/423034884/Interactive+Element+FE5 -->
    
    <!-- Roboto-Regular Font -->
    <link href="/fe5/static/assets/fonts/Roboto-Regular.ttf">
    <!-- Roboto-Bold Font -->
    <link href="/fe5/static/assets/fonts/Roboto-Bold.ttf">
    <!-- Library css animate -->
    <!-- <link rel="stylesheet" href="/fe5/static/assets/animate-css/animate.css"> -->
    
    <style>
        
    /* Library css animate */
    /* @import url('/fe5/static/assets/animate-css/animate.css'); */
    
    /* fix only for masthead 990 responsive for suriglia and mediadev */
    .htv-main-container.masthead-990 .interactive-element.$unique-id.getData() {
        position: absolute;
        width: 100%;
        height: auto;
        top: 50%;
        transform: translateY(-50%);
    }
    
    
    .interactive-element.$unique-id.getData() {
        font-family: 'Roboto', sans-serif;
        text-align: center;
        width: 100%;
        height: 100%;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        font-family: 'Roboto', sans-serif;
        margin: 0;
        padding: 0;
        position: relative;
    }
    
    @media screen and (max-width:768px){
        .interactive-element.$unique-id.getData() .button-effect {
            padding: 15px;
        }
    }
    
    .interactive-element.adding-hover {
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out; 
    }
        
    .interactive-element.adding-hover:hover {
        -ms-transform: scale(1.1,1.1);
        -webkit-transform: scale(1.1,1.1);
        transform: scale(1.1,1.1);
        cursor: pointer;
    }
    
    .interactive-element.$unique-id.getData() .text-cta{
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        font-weight: normal;
        padding: 15px;
        text-shadow: 0px 0px 5px black;
        margin: 0;
        color: white;   
    }
    
    @media screen and (max-width:768px){
        .interactive-element.$unique-id.getData() .text-cta{
            font-size: 10px;
            padding: 10px;
        }
    }
    
    .interactive-element.$unique-id.getData() .text-cta:focus{outline: none}
    .interactive-element.$unique-id.getData() .button-effect:focus{outline: none}
    
    .interactive-element.$unique-id.getData() #title {
        color: #ffffff;
        text-shadow: 0px 0px 2px black;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
        font-size: 14px;
        text-align: center;
        padding: 15px 30px;
        position: relative;
        margin:0;
    }
    
    @media screen and (max-width:650px){
        .interactive-element.$unique-id.getData() #title {
            font-size: 10px;
            padding: 10px 25px 10px 10px;
            text-align: left;
        }
    }

   /* close button */

   .interactive-element.$unique-id.getData() .close-button {
        display: none;
        cursor: pointer;
        background-color: rgba(0,0,0,.5);
        border: none;
        border-radius: 50%;
        fill: white;
        cursor: pointer;
        line-height: 0;
        outline: none;
        padding: 8px;
        position: absolute;
        right: 8px;
        top: 8px;
        will-change: transform;
        z-index: 4;
    }


    
    @media screen and (max-width:650px){
        .interactive-element.$unique-id.getData() .close-button {
            right: 5px;
            top: 5px;
    }
}
    

    .interactive-element.$unique-id.getData() .close-button:hover {
        background-color: #a5a5a5;
        -webkit-transition: .3s;
        transition: .3s;
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }

    @media screen and (max-width:650px){
        .interactive-element.$unique-id.getData() .close-button svg {
            width: 10px;
            height: 10px;
        }
    }
    

/* end close button */


    .interactive-element.$unique-id.getData() #clickable_element{
        position: relative;
        cursor: pointer;
    }
    
    .interactive-element.$unique-id.getData() .social {
        position: absolute;
        z-index: 1;
        top: 5px;
        left: 5px;
        line-height: initial;
    }
    
    @media screen and (max-width:768px){
        .interactive-element.$unique-id.getData() .social {
            top: 2px;
            left: 2px;
        }
    }
    
    .interactive-element i.fa.fa-facebook-square, 
    .interactive-element i.fa.fa-twitter-square  {
        color: #fff;
    }
    
    .interactive-element .social .facebook, 
    .interactive-element .social .twitter {
        font-size: 15px;
        cursor: pointer;
        padding: 0;
        -webkit-transition: opacity 0.3s linear;
        -moz-transition: opacity 0.3s linear;
        -o-transition: opacity 0.3s linear;
        transition: opacity 0.3s linear;
        text-decoration: none;
        opacity: 0.7;
    }
    
    @media screen and (max-width:768px){
        .interactive-element .social .facebook, 
        .interactive-element .social .twitter {
            font-size: 9px;
        }
    }
    
    .interactive-element .social .twitter{color: #00aced;}
    .interactive-element .social .facebook{color: #3b5998;}
        
    .interactive-element .social .twitter:hover{
        opacity: 1;
        color: #00aced;
    }
    .interactive-element .social .facebook:hover {
        opacity: 1;
        color: #3b5998;
        
    }
    
    /* .interactive-element.$unique-id.getData() .button-container {
        padding: 0;
        margin: 0 auto;
        height: auto;
        width: 100%;
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        bottom: 10%;
    } */
    
    .image img {
        padding: 0;
        cursor: pointer;
        margin: 0;
    }
    
    
    
    /* .interactive-element.$unique-id.getData() .button-cta {
        color: $button-textcolor.getData();
        background-color: $button-bgcolor.getData();
        border: none;
        position: relative;
        cursor: pointer;
        padding: 10px 20px;
        font-size: 16px;
    }
    
    .interactive-element.$unique-id.getData() .button-cta:hover {
        color: $button-textcolor.getData();
        background-color: $button-bgcolor.getData();
        cursor: pointer;
    }
    
    .interactive-element.$unique-id.getData() .button-cta:focus {
        outline: none;
    }
    
    
    @media screen and (max-width:768px){
        .interactive-element.$unique-id.getData() .button-cta {
            font-size: 10px;
            padding: 5px 5px;
        }
    } */
    
    /* nastro azzuro logo in loop */
    .interactive-element.logok.animated.pulse {
        animation: pulse 1.5s infinite;
        -webkit-animation: pulse 1.5s infinite;
        -moz-animation: pulse 1.5s infinite;
        -ms-animation: pulse 1.5s infinite;
    }
    
    /* viralize icone social */
        .interactive-element.instagram #title {display: none}
        .interactive-element.facebook #title {display: none}
        .interactive-element.video #title {display: none}
        .interactive-element.twitter #title {display: none}
    
    /* fix */
    .animated {
        -webkit-animation-fill-mode: inherit !important;
        animation-fill-mode: inherit !important;
    }
    </style>
    
    <div class="interactive-element $unique-id.getData() animated $animations.getData() $card.getData()">
        <button class="close-button" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
                <g fill="$close_button_color.getData()" fill-rule="evenodd"><path d="M17.738.768l1.061 1.06L1.829 18.8l-1.061-1.06z"></path>
                    <path d="M18.799 17.738l-1.06 1.061L.767 1.829 1.828.767z"></path>
                </g>
            </svg>
        </button>
        #if(!$title.getData().equals(""))
        <h2 id="title">$title.getData()
    
        </h2>
        #end
            <div id="clickable_element" class="image">
                #if(!$image.getData().equals(""))
                <img class="int-elem-image" src="$image.getData()" alt="">
                #end
                <div class="social">
                    <a id="$unique-id.getData()_fb" class="facebook" target="_blank">
                        <span class="fa-stack fa-lg" aria-hidden="true">
                            <i class="fa fa-square fa-stack-2x"></i>
                            <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                        </span>
                    </a>
                    <a id="$unique-id.getData()_tt" class="twitter" target="_blank">
                            <span class="fa-stack fa-lg" aria-hidden="true">
                            <i class="fa fa-square fa-stack-2x"></i>
                            <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                        </span>
                    </a>
                </div>
                <!-- <div class="button-container">
                        #if(!$call-to-action.getData().equals(""))
                        <h1 class="text-cta">$call-to-action.getData()
                        </h1>
                        #end
                        #if(!$button-label.getData().equals(""))
                        <button id="cta-button" class="button-cta">$button-label.getData()
                        </button>
                        #end
                </div> -->
            </div>
    </div>
    
    <script>
    
        (function interactiveElement(){
            var interactiveElementSelector = '.interactive-element.$unique-id.getData()',
                userAgent = navigator.userAgent || navigator.vendor || window.opera,
                closeButton = jQuery( interactiveElementSelector ).find('.close-button'),
                eventOnHover = ( '$event-on-hover.getData()' == 'true' ), defaultKeyValue = 'click_element',
                hoverIsPoss = true;

            
            /************************************************************
             * Manages the key value
             ************************************************************/
            var keyValue = '$key-value.getData()';
            if(keyValue!== undefined && keyValue && keyValue !== ""){
                console.log("key-value=>"+ keyValue);
                defaultKeyValue = '$key-value.getData()';
            }
    
            /* [button] */
            jQuery( interactiveElementSelector ).find('#cta-button').on('click', function(event) {
                event.stopPropagation();
                if (HyperTV.WebContentAPI.useCanvas && HyperTV.WebContentAPI.useCanvas()){
                        HyperTV.VideoPlayer.pause(true,"blure");
                        console.log("pause on blur canvas");
                }
                HyperTV.WebContentAPI.openClickTag('$button-link.getData()', defaultKeyValue, '$unique-id.getData()');
            });
    
            jQuery( interactiveElementSelector ).find('#cta-button').on('touchend', function(event) {
                event.stopPropagation();
            });
    
            /* [event] [image-link] */
            // iOS detection from: http://stackoverflow.com/a/9039885/177710
            if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
         
            /************************************************************
             * On Mraid interstitial, since the unit is launched inside
             * an app, touchend event is not supported.
             ************************************************************/
                var template = document.getElementsByTagName("app-root")[0].getAttribute("template");
                if(template === "MraidInterstitial"){
                    attachOnClickListener('click');
                }else{
                    // attachOnClickListener('touchstart');
                    // attachOnClickListener('touchmove');
                    // attachOnClickListener('click touchend');
                    attachOnClickListener('click');
    
                    if(eventOnHover) {
                        attachOnClickListener('mouseenter');
                    }
                }
    
            } else {
                attachOnClickListener('click');
                if(eventOnHover) {
                    attachOnClickListener('mouseenter');
                }
            }
    
            function attachOnClickListener(eventType) {
                var isClick = false;
                jQuery( interactiveElementSelector ).find('#clickable_element').on(eventType, function(event){
                    event.stopPropagation();
                    // if(eventType === "touchstart"){
                    //     isClick = true;
                    // }else if(eventType === "touchmove"){
                    //     isClick = false;
                    // }
                    // if(event.type == "click"){
                    //     isClick = true;
                    // }
    
                    var clickTagIndex = '$image-link.getData()',
                        eventOnHover = (eventType === 'mouseenter'),
                        eventData = '$event.getData()';                    //TODO: check this value when we don't save the ad export, which happens in eubeta
                    if (clickTagIndex && clickTagIndex !== 'none') {
                        /**
                        * method signature: openClickTag(index, keyValue, wcdUniqueId?, pauseOnClick?)
                        *
                        * @param index clickthrough index
                        * @param keyValue if present it register that key for permanent context (used from journey designer)
                        * @param wcdUniqueId (OPTIONAL) allow to identify in the analytics logs identity of clicked wcd
                        * @param pauseOnClick (OPTIONAL) when true blocks the video
                        */
                       if(!eventOnHover) {
                           /***********************************************************
                            * On Safari Mobile greater than 12, when we lose the focus of the page, 
                            * the video should be paused on Vpaid tags, otherwise the
                            * vpaid unit time will finish, without sending any analytics
                            * data. 
                            * If you want to enable the pause, uncomment this part
                            ************************************************************/
                            // if (HyperTV.WebContentAPI.useCanvas && HyperTV.WebContentAPI.useCanvas()){
                            //     if(HyperTV.VideoPlayer) {
                            //         HyperTV.VideoPlayer.pause(true,"blure");
                            //     }
                            // }
                           HyperTV.WebContentAPI.openClickTag(clickTagIndex, defaultKeyValue, '$unique-id.getData()', '$pause-on-event.getData()');
                       }
                    } else if(eventData && eventData !== 'none'){
                        /**
                        * method signature: 
                        * public executeEvent(evt, pauseOnClick?, keyValue?, wcdUniqueId?, action?)
                        * 
                        * method executeEventOnHover invoke executeEvent but not more than 1 time/minute
                        * so logic has kept separated
                        *
                        * @param evt should be a string of the format <timecode-eventId>
                        * @param pauseOnClick (OPTIONAL) when true blocks the video
                        * @param keyValue (OPTIONAL) key value that can be used for journey designer
                        * @param wcdUniqueId (OPTIONAL) used to track wcd as interaction source
                        * @param action (OPTIONAL) used to track kind of action tracked (hover/click)
                        */  
                        if(eventOnHover) {
                            if(hoverIsPoss && hoverIsPoss == true){
                                hoverIsPoss = false;
                                HyperTV.WebContentAPI.executeEventOnHover('$event.getData()', '$pause-on-event.getData()', defaultKeyValue, '$unique-id.getData()');
                                setTimeout(function(){
                                    hoverIsPoss = true;
                                },15000);
                            }
                        } else {
                            HyperTV.WebContentAPI.executeEvent('$event.getData()', '$pause-on-event.getData()', defaultKeyValue, '$unique-id.getData()');
                        }
                    }else{
                        HyperTV.WebContentAPI.trackAnalyticsEvent('WCD_static', '$unique-id.getData()');
                        // if key value has been set refresh stuffs
                        if(defaultKeyValue && HyperTV.WebContentAPI.setKeyValueAndRefreshEvents) {
                            HyperTV.WebContentAPI.setKeyValueAndRefreshEvents(defaultKeyValue);
                        }
                    }                
                });
                if(eventType !== "mouseenter"){
                    closeButton.on(eventType, closeImage);
                }
            }    
    
            /* [link-social]  */
            #if($link-social.getData().equals(""))
                jQuery("#$unique-id.getData()_fb").css('display', 'none');
                jQuery("#$unique-id.getData()_tt").css('display', 'none');
            #else
                jQuery("#$unique-id.getData()_fb").on('click', openFacebook);
                jQuery("#$unique-id.getData()_tt").on('click', openTwitter);  
            #end  
    
            function openFacebook(event){
                event.stopPropagation();
                window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent('$link-social.getData()'));
                HyperTV.WebContentAPI.trackAnalyticsEvent('WCD_click', '$unique-id.getData()'+'_fb');
            }  
            function openTwitter(event){
                event.stopPropagation();
                window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent('$link-social.getData()'));
                HyperTV.WebContentAPI.trackAnalyticsEvent('WCD_click', '$unique-id.getData()'+'_tt');
            } 
    
            /* [layer_order] */
            #if(!$layer_order.getData().equals(""))
                jQuery( interactiveElementSelector ).closest('.web_content_wrapper').parent().css('z-index', '$layer_order.getData()');
            #end 
    
            /* [pause-on-show] */
            #if ($pause-on-show.getData() == true)
                HyperTV.VideoPlayer.pause(true, '$unique-id.getData()');
            #end
    
            /* [hover_zoomin] */
            #if($hover_zoomin.getData() == true)
                jQuery( interactiveElementSelector ).addClass('adding-hover');
            #end
            
            /* [close_button] */
            function closeImage(){
                jQuery( interactiveElementSelector ).closest('.web_content_wrapper').parent().attr('hidden', true);
                HyperTV.VideoPlayer.play(true, '$unique-id.getData()');
                HyperTV.WebContentAPI.trackAnalyticsEvent('WCD_close', '$unique-id.getData()');
    
                return true;
            }
            #if($close_button.getData() == true)
                jQuery( interactiveElementSelector ).find('.close-button').css('display', 'block');
            #end
            /* [opacity] */
            #if ($opacity.getData() == true)
                jQuery( interactiveElementSelector ).css('opacity','.2');
                jQuery( interactiveElementSelector ).css('cursor','pointer');
                
                jQuery( interactiveElementSelector ).mouseenter(function() {
                    jQuery(this).css('opacity','1');
                }).mouseleave(function() {
                    jQuery(this).css('opacity','.2');
                });
            #end
            /* [card] */
            #if ($card.getData() == true)
                #if (!$title.getData().equals(""))
                    closeButton.css('color','black');
                    closeButton.css('text-shadow','0 0 1px rgba(0,0,0,1)');
                #end 
                jQuery( interactiveElementSelector ).css('background-color','white');
                jQuery( interactiveElementSelector ).css('border-radius','5px');
                jQuery( interactiveElementSelector ).css('padding','2.5%');
                jQuery( interactiveElementSelector ).css('width','95%');
                jQuery( interactiveElementSelector ).css('height','auto');
                jQuery( interactiveElementSelector ).css('box-sizing','content-box');
                jQuery( interactiveElementSelector ).find('#title').css('text-shadow','none');
                jQuery( interactiveElementSelector ).find('#title').css('color','black');
            #end
            /* [overlay-mode] */
            #if ($overlay-mode.getData() == true)
                jQuery( interactiveElementSelector).find('.int-elem-image').css('height','100%');
                jQuery( interactiveElementSelector).find('.image').css('height','100%');
            #end
        })();    
    </script>

STEP 3: Create the structure.

In order to add a new structure, just click on the structure button at the top of the menu. Then hit on add structure to add a new structure. Again, a structure will give the chance to users to edit and modify your template easily through a UI interface.

Here below an example of a structure. This is the same XML schema that is associated with the Interactive Element template above:

<root>
  <dynamic-element name='unique-id' default='' type='text' repeatable='false'></dynamic-element>
  <dynamic-element name='title' default='' type='text' repeatable='false'></dynamic-element>
  <dynamic-element name='image' default='' type='image_gallery' repeatable='false'></dynamic-element>
  <dynamic-element name='image-link' default='' type='htv_click_tag' repeatable='false'></dynamic-element>
  <dynamic-element name='key-value' default='' type='text' repeatable='false'></dynamic-element>
  <dynamic-element name='event' default='' type='htv_event' repeatable='false'></dynamic-element>
  <dynamic-element name='event-on-hover' default='false' type='boolean' repeatable='false'></dynamic-element>
  <dynamic-element name='pause-on-show' default='false' type='boolean' repeatable='false'></dynamic-element>
  <dynamic-element name='pause-on-event' default='false' type='boolean' repeatable='false'></dynamic-element>
  <dynamic-element name='card' default='false' type='boolean' repeatable='false'></dynamic-element>
  <dynamic-element name='overlay-mode' default='false' type='boolean' repeatable='false'></dynamic-element>
  <dynamic-element name='close_button' default='false' type='boolean' repeatable='false'></dynamic-element>
  <dynamic-element name='close_button_color' default='' type='text' repeatable='false'></dynamic-element>
  <dynamic-element name='link-social' default='' type='text' repeatable='false'></dynamic-element>
  <dynamic-element name='hover_zoomin' default='false' type='boolean' repeatable='false'></dynamic-element>
  <dynamic-element name='opacity' default='false' type='boolean' repeatable='false'></dynamic-element>
  <dynamic-element name='layer_order' default='true' type='list' repeatable='false'>
    <dynamic-element name='1' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='2' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='3' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='4' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='5' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='6' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='7' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='8' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='9' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='10' default='' type='not-used-because-lfr-bug' repeatable='false'></dynamic-element>
  </dynamic-element>
  <dynamic-element name='animations' default='true' type='list' repeatable='false'>
    <dynamic-element name='none' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='bounce' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='flash' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='pulse' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='rubberBand' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='shake' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='swing' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='tada' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='wobble' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='jello' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='bounceIn' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='bounceInDown' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='bounceInLeft' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='bounceInRight' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='bounceInUp' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='bounceOut' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='bounceOutDown' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='bounceOutLeft' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='bounceOutRight' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='bounceOutUp' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeIn' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeInDown' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeInDownBig' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeInLeft' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeInLeftBig' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeInRight' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeInRightBig' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeInUp' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeInUpBig' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeOut' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeOutDown' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeOutDownBig' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeOutLeft' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeOutLeftBig' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeOutRight' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeOutRightBig' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeOutUp' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='fadeOutUpBig' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='flip' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='flipInX' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='flipInY' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='flipOutX' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='flipOutY' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='lightSpeedIn' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='lightSpeedOut' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='rotateIn' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='rotateInDownLeft' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='rotateInDownRight' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='rotateInUpLeft' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='rotateInUpRight' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='rotateOut' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='rotateOutDownLeft' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='rotateOutDownRight' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='rotateOutUpLeft' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='rotateOutUpRight' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='slideInUp' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='slideInDown' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='slideInLeft' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='slideInRight' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='slideOutUp' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='slideOutDown' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='slideOutLeft' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='slideOutRight' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='zoomIn' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='zoomInDown' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='zoomInLeft' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='zoomInRight' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='zoomInUp' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='zoomOut' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='zoomOutDown' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='zoomOutLeft' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='zoomOutRight' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='zoomOutUp' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='hinge' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='jackInTheBox' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='rollOut' default='' type='not-used-because-lfr-bug' repeatable='false'>  </dynamic-element>
    <dynamic-element name='rollIn' default='' type='not-used-because-lfr-bug' repeatable='false'></dynamic-element>
  </dynamic-element>
</root>

STEP 4: Link the structure to the template.

Now that you have linked your new structure to your new template you’ll see your newly created instant app within the instant apps list. To put your instant app to work all is left to do is to create a new ad forma and then select your new instant app as the widget to use. Here the guide that will give you directions on that: Archived: Widgetsarchived