Introduction
IT partners can develop tiles themselves, but by loading information in a tile through an iFrame, you can easily create a completely personalized Workspace with exactly the information you find important yourself without any programming.
To make workspace more visually appealing, or to draw more attention to important information, you can extend the web content tile over two columns for tile groups (choosing a larger tile size).
Web content is not provided by Workspace 365. Web content could contain code with privacy or security risks and may be blocked. This is why not all applications can be opened in Workspace 365 via an iFrame. If you want to know more about security, Intranet and web content tiles, click here.
Requirements
To display the iFrame's content, a few requirements must be met:
The Content Security Policy (CSP) of the site you're embedding must allow its content being embedded
Web content may not work as expected in Incognito mode
Your browser must allow cross-site cookies
Add the Web content app
Only administrators can create the Web content tile.
Go to the App store.
Select Manage apps.
Click Add new app.
Search for the Web content tile.
Click on Add.
First, fill in the default app's configuration like:
App name
Color
Icon
Second, locate the iFrame code and the URL from the web content you want to embed, and fill this in. To get the optimal visual results out of your web content tile adjust both the width and height to 100%. You could also adjust the size of the tile to your preference.
When you're done configuring the app, click Save.
The tile is then ready to be added from the App store to Workspace, either to a new or existing group.
There are some applications that don’t allow using an iFrame because of security.
Custom tile sizes
As of Workspace 365 v4.15, a workspace admin can set a web content tile to a custom size when choosing the tile size:
Choosing this option will open the Custom size window where the desired width and height can be selected from the dropdowns:
As long as the custom size is active on the tile, it will be shown in the list of tile sizes when editing the tile, and it will be highlighted as "Custom".
Web content examples
Power apps
Example:
First, you need the App ID for the embed code to add your Power App to the Workspace.
Go to the Power App you want to add.
Click Details.
Look for the App ID.
Go back to Workspace. Add the Web content app.
Sample embed code:
<iframe width="100%" height="100%" src="https://apps.powerapps.com/play/YOUR APP ID?source=iframe"></iframe>
Adding users
If you want other users to use the Power Apps you implemented, you need to share them with the users within the Power Apps builder:
Go to Your Power Apps.
Click on the app you want share.
Click Share.
First, you need to get the required code for embedding the Twitter live tile.
Go to the following website: https://publish.twitter.com/.
You have a couple of options to embed. For this example, we will embed a Twitter profile. You will be asked to provide the URL of the content you want to embed.
Scroll down. Copy the code.
Go back to Workspace. Add the Web content app. Paste the code you got from the previous step for under Embed code.
Spotify
You can create a Spotify live tile which can show a playlist, a track or a profile. In this example, we will show you how to create a playlist live tile.
Go to the Spotify web player and find the playlist you want to show. You need the URL from that playlist.
Sample embed code:
<iframe src='https://embed.spotify.com/?uri=spotify:playlist:37i9dQZF1DX4UtSsGT1Sbe' frameborder='0' allowtransparency='true'></iframe>
You can alter this code. If you want it to display a track, all you need to do is change this part from the code:
playlist:37i9dQZF1DX4UtSsGT1Sbe
Change "playlist" to "track" and "37i9dQZF1DX4UtSsGT1Sbe" to the digits and numbers series that the browser will show for that specific track.
You can select a couple of options you want to show on your page. In this example, we will choose to add a profile. You need the URL from the profile you want to show. To obtain this, go to the profile you want and copy the URL from your browser. After this, you can add it in the requested field.
For the size, we chose to display it as a square.
Scroll down the page until you see a section with the code, it's below the preview section. Copy both pieces of code and store it.
Go back to Workspace. Add the Web content app. Paste the code you got from the previous step under Embed code. Make sure you place both pieces of code directly after each other.
To create an Instagram live tile, you need to embed the post you like from Instagram on Workspace 365.
Right now, this can only be done with a post.
Click on a post you like.
Click on the 3 dots at the top right side.
Click Embed.
Click Copy Embed Code. For a visual presentation on how to do this, click here.
Go back to Workspace. Add the Web content app. Paste the code you got from the previous step under Embed code.
You can create an embedded iFrame plugin at the following page:
https://developers.facebook.com/docs/plugins/page-plugin/Fill in the Facebook URL (mandatory).
You may also fill in the width and height, etc. This is optional.
Click Get code and select iFrame.
Copy the iFrame code.
Go back to Workspace. Add the Web content app. Paste the code you got from the previous step under Embed code.
Google Calendar
Sample URL:
https://calendar.google.com/calendar/embedsrc=anthonycarter%40gmail.com&ctz=Europe%2FAmsterdam
Sample embed code:
<iframe src="https://calendar.google.com/calendar/embed?src=anthonycarter%40gmail.com&ctz=Europe%2FAmsterdam" style="border: 0" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
Google Maps
Sample URL:
https://www.google.nl/maps/
Sample embed code:
<div class="mapouter"><div class="gmap_canvas"><iframe width="100%" height="100%" id="gmap_canvas" src="https://maps.google.com/maps?q=newdayatwork&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></div><style>.mapouter{text-align:right;height:100%;width:100%;}.gmap_canvas {overflow:hidden;background:none!important;height:100%;width:100%;}</style></div>
Troubleshooting
If you are having trouble getting an iFrame to work, you can use an iFrame tester to test the code for any issues.