Embed Tile

Sometimes, you may want to bring outside assets into your microapp. Tiled allows you to embed websites, forms, other microapps, publicly shared PDF's, and most other assets that have iframe capabilities.

Quick Links
How to Embed a PDF
How to Embed microapps in microapps
How to Embed Google Docs

Offline Activity

Embed Tiles are not supported for offline microapp activity. 

How to add an Embed Tile

To use the Embed Tile, just drag the Embed Tile ( Screen_Shot_2020-08-07_at_12.06.30_PM.png  ) from the Tile panel to the desired location on the page, where you can resize it to your specifications or needs.

Screen_Shot_2020-08-07_at_12.05.11_PM.png

Then, drop the link to the resource you want to embed.  

CORS Policy

All embeds URLs are subject to the CORS policy of the domain you are embedding. Not all websites will load within Tiled since some URLs block cross domain requests. We recommend whitelisting the Tiled domain.

Delete an Embed Tile

To delete an Embed Tile, ensure that the tile is selected and press the DELETE key.

How to embed a PDF

Sometimes you may want to link to a PDF from within your microapp. Using the Hotspot Tile it is possible to externally link to a PDF however, there are some cases where displaying the PDF in the microapp is best. The following example uses Google Drive, although the instructions for embedding a PDF with other file storage services will be similar.

  1. First, from Google Drive, open the PDF and then select Open in a New Window. from the More Actions dropdown list.
    Screen_Shot_2022-09-26_at_10.27.52.png
  2. From the new tab, select Embed item from the More Actions dropdown list.
    Screen_Shot_2022-09-27_at_16.25.13.png
  3. The Embed item window opens with a URL from in a <div> container.
    Screen_Shot_2022-09-27_at_16.25.02.png
  4. Copy only the https:// link in the HTML code snippet. (https://drive.google.com/file/d/exampleId/preview)
    <iframe src="https://drive.google.com/file/d/exampleId/preview" width="640" height="480" allow="autoplay"></iframe>
  5. Move to the Tiled builder, and add an embed tile to your Microapp Cnavas.
  6. Paste the copied url in the embed Tile.

How to embed a microapp in another microapp

Tiled allows you to embed a published microapp within another microapp through the Embed Tile.  This provides flexibility in the design and content of microapps, as well as keeping microapps to a manageable size. Viewers are able to have access to a wider range of microapps without having to navigate away from the microapp they were originally shared.  

Embedded microapps function just like the microapp it is embedded in and captures viewer engagement and analytics.

1. Generate a Public Link.

First you must create a Standard Public link for the source microapp you want to embed, which you can create on the Public tab of the Share window for the microapp. Alternatively, you can generate a direct share link for a specific individual.  

2. Paste Public Link in the Embed Tile

Paste the newly generated share link into the embed tile.

Comments

0 comments

Please sign in to leave a comment.