Tiled Microapp Builder Overview

Follow

This article defines and briefly describes the many components and panels in the Tiled Microapp Builder, as well as provides links to additional articles that describe how to best use them.

Microapp_Callouts_2.jpg

Library button

Pressing the Library button (located in the top left corner in the above screenshot) returns you to the Tiled Library page.  For more information about the Tiled Library page, see Navigating the Tiled Library.  

Note:  Tiled automatically saves your work, however, you must Publish the microapp in order for the changes that have been made in Builder to be applied to the microapp when it is shared. 

Microapp pages panel

The Microapp pages panel (highlighted in red) lists all of the pages you have created for your microapp in their designated order. Each page includes a snapshot of the microapp page and the name of the page. 

  • To add a new microapp page, click the Plus_Icon.jpg button, and a new microapp page is added to the end of the list of microapps. Each page is automatically named Page X, where X is the page number. 
  • To rename the microapp page, click the microapp name to highlight it, and enter the new name of the page.
  • To move a microapp page, click the microapp snapshot and drag it to the desired location in the Microapp page panel. 
  • To duplicate a microapp page, click the Pages_Menu_icon.jpg  button and select Duplicate. The duplicated page is added to the end of the list of microapps. 
  • To convert a microapp page into an overlay page, click the Pages_Menu_icon.jpg button and select Make into an overlay. The page is now moved to the Overlay panel. 
  • To delete a microapp page, click the Pages_Menu_icon.jpg button and select Delete
Overlay panel

The Overlay panel (located in the bottom left-hand corner of the builder) lists all of the overlays you have created for your microapp in their designated order. Each page includes a snapshot of the overlay and the name of the overlay. 

  • To add a new overlay page, click the Plus_Icon.jpg button, and a new overlay page is added to the end of the list of microapps. Each page is automatically named Page X, where X is the page number. 
  • To rename the overlay page, click the name to highlight it, and enter the new name of the page.
  • To move an overlay page, click the overlay snapshot and drag it to the desired location in the overlay panel. 
  • To duplicate an overlay page, click the Pages_Menu_icon.jpg button and select Duplicate. The duplicated overlay is added to the end of the list in the overlay panels. 
  • To convert an overlay page into a microapp page, click the Pages_Menu_icon.jpg button and select Make into a normal page. The page is now moved to the Microapp page panel. 
  • To delete an overlay page, click the Pages_Menu_icon.jpg button and select Delete
Microapp size button

When you initially create your microapp, the design dimensions for the microapp pages are specified, based on the intended device used to view the microapp (Mobile, Tablet or Desktop). Clicking the Microapp Size button (located in the top left-hand side of the builder) opens the New Size window. 

New_Size_dialog.jpg

From here you can create an additional microapp size. Select the desired size and click the Create Size button. 

Note: The new microapp size does not copy any existing microapp pages that you have created. 

Microapp name

The Microapp name (located in the top center of the builder) is listed at the top of every microapp page. You can change the name by clicking the Settings button.

Settings button

Click the Settings Gear_icon.jpg button (highlighted in mustard yellow) to open the Microapp Settings window for your microapp.

Microapp_Settings_-_General.jpg

From this window you can do the following:

  • Change the general look and feel of your microapp.
  • Update the security options for your microapp. 
  • Enable dynamic personalization options for your microapp.
  • Share your microapp with other users.

For more information, see Changing your Microapp Settings (coming soon)

Completion slider

Click the Completion slide bar (located in the top right-hand side of the builder) to the right to specify the current microapp page as a completion event, where Tiled records that a user successfully completed viewing that specific page.

To select, move the slide bar to the right so that it becomes green. A green check mark is displayed below the thumbnail for the page in the Microapp page panel.  

To deselect, move the slide bar to the left so that it becomes white. The green check mark is removed for the page in the Microapp page panel. 

For more information, see Specifying a Completion Event (coming soon).

Microapp page

The microapp page area (in the center of the builder) is where tiles are placed to add assets, hotspots, and other elements to your page. You can select placed elements and move, edit or delete them as needed.  

State panel

States are smaller sub-pages that are grouped with the source page of your microapp. Users can engage with elements (such as hotspots or quizzes) on your microapp to access different states without accessing a different microapp page.

All of the states for a microapp page are listed in the State panel (highlighted in yellow) beneath the Microapp page. 

For more information, see Adding States to your Microapp Pages.
Preview button

Clicking the Preview button (in the top right-hand corner of the builder) displays the microapp page as it will be viewed and interacted with by your viewers once the microapp is published.

Tiles panel

The Tiles panel (highlighted in violet) displays all of the tiles that you can use with your microapp page. 

Tile Description
Hotspot Tile Allows you to define an area on your microapp page that can link to other microapp pages, websites, files, phone numbers, or email addresses. For more information, see Creating a Hotspot.
Image Tile Allows you to place a graphic or photo asset on your microapp page. For more information, see Adding Images to your Microapp Pages.
Gallery Allows you to create a gallery of images in your microapp that your viewers will be able to browse through without changing to a different microapp page. For more information, see Creating a Gallery in your Microapp.
Video Allows you to place a video asset on your microapp page. For more information, see Creating a Video Tile for your Microapp.
 Scroll Allows you to create content that stretches beyond the bounds of a microapp page, where your viewers engage with the tile dynamically by moving it horizontally or vertically. For more information, see Creating and Designing a Scroll Canvas.
 Text Allows you to manually create text on your microapp page. For more information, see Adding Text to your Microapp Page.
Embed Allows you to embed an existing microapp, or other resource in an Embed Tile on your microapp page. For more information, see Embedding Microapps.(coming soon)
Google Forms/ Google Sheets Allows you to embed existing Google Forms and Google Sheets into pages of your microapp. For more information, see Embedding Google Form and Sheets in your Microapp.
Quiz Allows you to create a multi-question quiz within your microapp that you can use to confirm participation or test your viewers. For more information, see Creating a Quiz for your Microapp.(coming soon)
Script Allows you to use an HTML script directly onto a microapp page. For more information, see Embedding Scripts into your Microapp.
Page Role

The Page Role list (on the right-hand side of the builder in the center) allows you to change the role of your microapp page. Tiled has defined three roles for microapp pages:

  • Normal
  • State 
  • Overlay
You can click the drop-down list and select the desired new role for your page. 
Background panel
The Background panel (highlighted in green) allows you to easily designate an image or video asset as the background of the microapp page. Drag the desired asset from the Asset panel to the Background panel to set it as your background. For more information, see Creating a Background for your Microapp.
Assets panel
The Assets panel (located in the bottom right-hand side of the builder) lists all of the assets that you have imported to the microapp. These assets can be used on any page, state, or overlay for any version (i.e., size) of your microapp. For more information, see Adding Assets to your Microapp.
Publish button
Click the Publish button (located in the right-hand corner of the builder) to open the Publish to Groups window which allows you to publish the microapp. 
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.