Introductie
IT-partners kunnen zelf tegels ontwikkelen door informatie te laden via een iFrame. Op deze manier kun je gemakkelijk een volledig gepersonaliseerde Workspace creëren met precies de informatie die jij belangrijk vindt, zonder enige programmering.
Om Workspace visueel aantrekkelijker te maken, of om meer aandacht te vestigen op belangrijke informatie, kun je de web content tegel uitbreiden over twee kolommen voor tegelgroepen (door een groter tegelformaat te kiezen).
Web content wordt niet geleverd door Workspace 365. Web content kan code bevatten met privacy- of beveiligingsrisico's en kan worden geblokkeerd. Daarom kunnen niet alle applicaties worden geopend in Workspace 365 via een iFrame. Als je meer wilt weten over beveiliging, intranet en web content tegels, klik dan hier.
Vereisten
Om de inhoud van een iFrame weer te geven, moeten aan een aantal vereisten worden voldaan:
De Content Security Policy (CSP) van de website die je insluit, moet toestaan dat de inhoud wordt ingesloten.
Web content werkt mogelijk niet zoals verwacht in de incognitomodus.
Je browser moet cross-site cookies toestaan.
Voeg de Web content app toe
Alleen beheerders kunnen de Web content tegel maken.
Ga naar de App Store.
Selecteer Beheer apps.
Klik op Nieuwe app toevoegen.
Zoek naar de Web content tegel.
Klik op Toevoegen.
Eerst, vul de standaardconfiguratie van de app in:
App naam
Kleur
Pictogram
Ten tweede, zoek de iFrame-code en de URL van de webinhoud die je wilt insluiten, en vul deze in. Om de optimale visuele resultaten uit je web content tegel te halen, pas zowel de breedte als de hoogte aan naar 100%. Je kunt ook de grootte van de tegel aanpassen aan je voorkeur.
Wanneer je klaar bent met het configureren van de app, klik op Opslaan.
De tegel is dan klaar om toegevoegd te worden vanuit de App Store naar Workspace, ofwel naar een nieuwe of bestaande groep.
Er zijn enkele applicaties die het gebruik van een iFrame niet toestaan vanwege beveiligingsredenen.
Aangepaste tegelgrootte
Sinds Workspace 365 v4.15 kunnen workspace beheerders voor een web content tegel een aangepaste tegelgrootte instellen:
Deze optie opent het venster Custom size waarin de gewenste afmetingen geselecteerd kunnen worden uit de dropdowns:
Zolang de aangepaste tegelgrootte actief is op de tegel, wordt deze in de lijst met tegelgroottes getoond en gehighlight als "Aangepast".
Web content voorbeelden
Power apps
Voorbeeld:
Eerst heb je de App ID nodig voor de insluitcode om je Power App aan Workspace toe te voegen.
Ga naar de Power App die je wilt toevoegen.
Klik op Details.
Zoek naar de App ID.
Ga terug naar Workspace. Voeg de Web content toe.
Voorbeeld embed code:
<iframe width="100%" height="100%" src="https://apps.powerapps.com/play/YOUR APP ID?source=iframe"></iframe>
Gebruikers toevoegen
Als je wilt dat andere gebruikers de Power Apps gebruiken die je hebt geïmplementeerd, moet je ze delen met de gebruikers binnen de Power Apps bouwer:
Ga naar Jouw Power Apps.
Klik op de app die je wilt delen.
Klik op Delen.
Eerst moet je de vereiste code krijgen om de Twitter live-tegel in te sluiten.
Ga naar de volgende website: https://publish.twitter.com/.
Je hebt een paar opties om in te sluiten. Voor dit voorbeeld zullen we een Twitter-profiel insluiten. Je wordt gevraagd om de URL van de inhoud die je wilt insluiten op te geven.
Scroll naar beneden. Kopieer de code.
Ga terug naar Workspace. Voeg de Web content app toe. Plak de code die je hebt gekregen van de vorige stap in het veld voor de Embed Code.
Spotify
Je kunt een Spotify live-tegel maken die een afspeellijst, een nummer of een profiel kan tonen. In dit voorbeeld laten we zien hoe je een afspeellijst live-tegel kunt maken.
Ga naar de Spotify web player en zoek de afspeellijst die je wilt tonen. Je hebt de URL van die afspeellijst nodig.
Voorbeeld embed code:
<iframe src='https://embed.spotify.com/?uri=spotify:playlist:37i9dQZF1DX4UtSsGT1Sbe' frameborder='0' allowtransparency='true'></iframe>
Je kunt deze code aanpassen. Als je wilt dat het een nummer weergeeft, hoef je alleen dit deel van de code te veranderen:
playlist:37i9dQZF1DX4UtSsGT1Sbe
Verander "playlist" in "track" en vervang "37i9dQZF1DX4UtSsGT1Sbe" door de cijfers en nummers die de browser zal tonen voor dat specifieke nummer.
Je kunt een aantal opties selecteren die je op je pagina wilt tonen. In dit voorbeeld kiezen we ervoor om een profiel toe te voegen. Je hebt de URL nodig van het profiel dat je wilt tonen. Ga naar het profiel dat je wilt en kopieer de URL uit je browser. Voeg deze vervolgens toe in het gevraagde veld.
Voor de grootte hebben we gekozen om het als een vierkant weer te geven.
Scroll op de pagina naar beneden totdat je een sectie met de code ziet, onder de voorbeeldsectie. Kopieer beide stukken code en sla ze op.
Ga terug naar Workspace. Voeg de Web content app toe. Plak de code die je hebt gekregen van de vorige stap in het veld voor Insluitcode. Zorg ervoor dat je beide stukken code direct na elkaar plaatst.
Om een Instagram live-tegel te maken, moet je de post die je leuk vindt op Instagram insluiten in Workspace 365. Op dit moment kan dit alleen met een post.
Klik op een post die je leuk vindt.
Klik op de 3 puntjes aan de rechterbovenkant.
Klik op Insluiten (Embed).
Klik op Kopieer insluitcode (Copy Embed Code). Voor een visuele presentatie van hoe dit te doen, klik hier.
Ga terug naar Workspace. Voeg de Web content app toe. Plak de code die je hebt gekregen van de vorige stap in het veld voor Insluitcode.
Je kunt een ingesloten iFrame-plugin maken op de volgende pagina: https://developers.facebook.com/docs/plugins/page-plugin/
Vul de Facebook URL in (verplicht).
Je kunt ook de breedte, hoogte, etc. invullen. Dit is optioneel.
4. Klik op 'Get code' en selecteer iFrame.
5. Kopieer de iFrame-code.
6. Ga terug naar Workspace. Voeg de Web content app toe.
Plak de code die je hebt gekregen van de vorige stap in het veld voor Insluitcode.
Google Kalender
Voorbeeld URL:
https://calendar.google.com/calendar/embedsrc=anthonycarter%40gmail.com&ctz=Europe%2FAmsterdam
Voorbeeld 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
Voorbeeld URL:
https://www.google.nl/maps/
Voorbeeld 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>
Probleem oplossen
Als je problemen hebt met het laten werken van een iFrame, kun je een iFrame tester gebruiken om de code te testen op eventuele problemen.