Web content (iFrame)

Quick reference:
Settings -> App store

Table of Contents

 

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.

  1. Go to the App store.
  2. Select Manage apps.
  3. Click Add new app.

    AddNewApp.png

  4. Search for the Web content tile.
  5. Click on Add.

    AddWebContent.png

  6. First, fill in the default app's configuration like:
    1. App name
    2. Color
    3. Icon
  7. 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.
  8. When you're done configuring the app, click Save.
  9. The tile is then ready to be added from the App store to Workspace, either to a new or existing group.

    web_content_edit.png
There are some applications that don’t allow using an iFrame because of security.

Back to top

 

Web content examples

Power apps

Example:

power_app.png

First, you need the App ID for the embed code to add your Power App to the Workspace.

  1. Go to the Power App you want to add.
  2. Click Details.
  3. Look for the App ID.
  4. 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:

  1. Go to Your Power Apps.
  2. Click on the app you want share.
  3. Click Share.

Back to top

 

Twitter

twitter_example__1_.png

First, you need to get the required code for embedding the Twitter live tile.

  1. Go to the following website: https://publish.twitter.com/.
  2. 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.

    mceclip0.png

  3. Scroll down. Copy the code.

    mceclip1.png

  4. Go back to Workspace. Add the Web content app. Paste the code you got from the previous step for under Embed code.

Back to top

 

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.

SpotifyExample.png

Go to the Spotify web player and find the playlist you want to show. You need the URL from that playlist.

mceclip1__1_.png

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.

Back to top

 

Pinterest

PinterestExample.png

  1. Go to https://developers.pinterest.com/tools/widget-builder.
  2. 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.
  3. For the size, we chose to display it as a square.

    pinterest_1__2_.png

  4. 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.

    pinterest_2__1_.png

  5. 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.

Back to top

 

Instagram

insta_example__1_.png

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.

  1. Click on a post you like. 
  2. Click on the 3 dots at the top right side.
  3. Click Embed.
  4. Click Copy Embed Code. For a visual presentation on how to do this, click here
  5. Go back to Workspace. Add the Web content app. Paste the code you got from the previous step under Embed code

Back to top

 

Facebook

facebook0__1_.png

  1. You can create an embedded iFrame plugin at the following page:
    https://developers.facebook.com/docs/plugins/page-plugin/
  2. Fill in the Facebook URL (mandatory).
  3. You may also fill in the width and height, etc. This is optional.

    facebook_1__1_.png

  4. Click Get code and select iFrame.

    mceclip1__2_.png

  5. Copy the iFrame code.
  6. Go back to Workspace. Add the Web content app. Paste the code you got from the previous step under Embed code

Back to top

 

    •  

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>

Back to top

 

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>

Back to top

 

Troubleshooting

If you are having trouble getting an iFrame to work, you can use an iFrame tester to test the code for any issues.

W3Schools  iFrame tester