You can review all information about ScreenCloud’s Embeddable Channels here, which is a premium feature that comes available with the Pro Plan or higher. To learn about pricing for the plans that include this feature, please see here. If you are interested in upgrading your subscription plan, please reach out to our support team.
Please also ensure you have the correct Microsoft user permissions to insert the ScreenCloud Embed link into Sharepoint. Instructions on settings you need to apply are included in this guide.
1. Set up a channel for Embedding into Sharepoint
1.1. Get started by visiting your Channels section of your ScreenCloud account. Create a new channel or make a duplicate of an existing one.
1.2. We recommend creating a dedicated channel for embedding into Sharepoint and Microsoft Teams, as this will need to be resized to 720p, as this is the max resolution for the embedded player in this setup.
2. Activate the embed code for your channel
2.1. With your channel selected, hover your mouse cursor over the channel and select the Share icon.
2.2. A pop-up window for the channel's sharing options will appear. Locate the Share with others option.
2.3. Select the drop-down menu and activate the embed code by selecting either Anyone with the link can view or Anyone in your X account can view.
2.4. With your sharing setting selected, you can now click the Copy and Embed button.
2.5. If you were to copy and paste the embed link (select Copy) into your web browser, you'd be able to view your channel directly from the link provided. The end-user would see and need to select Start Playing to view the channel in the browser. However, if the link is restricted to 'Anyone in your X account can view' then you'll be required to log in with your ScreenCloud credentials before viewing content.
2.6. To share the channel in SharePoint, you will need to use the Embed code and not the Embed link. To find this, click the Embed button to generate an iFrame code to share your channel as a virtual player. For example, you can use this option to directly embed the channel into your company intranet, a website, or anywhere you'd like that can display an iFrame player.
ScreenCloud Channel embed code
2.7. Select Copy and you'll automatically copy the embed code to paste where needed. You can then use the code anywhere you'd like which supports an iFrame player to embed and use the virtual player to display your channel.
Next, let’s access your Microsoft SharePoint account!
3. Add your embed code into SharePoint
3.1. Log in to your Microsoft SharePoint account.
3.2. Open up SharePoint site and either edit an existing page or create a new one. If you plan to use this Sharepoint page in a Microsoft Teams group, make sure the site is connected to a Microsoft Teams group. You'll know a site is connected to a group by a little Microsoft Teams icon next to it.
3.3. When adding content to your page and into elements, search for and add Embed "< / >".
3.4. With the Embed element added, a pop-up window will open which prompts an embed code to be placed. Copy and paste the embed code for your Embeddable Channel into the section Website address or embed code. Once you’re finished, you can publish the page.
If you see the error "Embedding content from this website isn't allowed..." and are unable to add the ScreenCloud embed code, please modify your site settings as instructed here. You will need to add the ScreenCloud domain embed.screencloud.com to allow for the insertion of iframes.
3.4. The embedded player will appear with a Start Playing button for the viewer. To modify this so that it autoplays instead, you can modify the embed link inside the iframe code.
3.5. To do this, add the below code to the end of the embed link your iframe.
?type=channel&autoplay=1
For example, the image and code below highlights where exactly you can add this:
<iframe src="https://embed.screencloud.com/eu/[channel-ID]?type=channel&autoplay=1"" width="1280" height="720" scrolling="no" />
You'll notice in the iframe code that the embedded player's size is 1280 x 720 px - This is the max size for the embedded channel and player. If you notice your content does not resize appropriately, you can review these instructions to learn how to adjust the zoom settings of the channel zones so that the text and content appears suitable in the Sharepoint site.
3.6. With your Embeddable Channel now showing your ScreenCloud content in your SharePoint page, go ahead and give page a name and select Publish!
3.7. Your digital signage content is now available for your team with access to the Sharepoint site to see!
3.8. If you want to learn how to add this ScreenCloud embedded channel to a Microsoft Teams group, please continue below.
4. Display the Sharepoint page in a Microsoft Teams group
4.1. Head to Microsoft Teams Chat segment and find the group that is connected with the Sharepoint site that you added the ScreenCloud embeddable channel too.
4.2. Click the + 'Add a tab' icon.
4.3. Search for and select the Sharepoint Pages app.
4.4. Select the Sharepoint page you just created which contains the ScreenCloud embedded channel, and click Save.
4.5. Allow the page to load - Your ScreenCloud Channel and digital signage content is now available for you Microsoft Teams to see!
5. How to resize the channel for Sharepoint and Microsoft Teams
5.1. Follow these instructions for your channel and zones if the content within the embedded player is not fitting well as it sits in the Sharepoint site, as the max resolution of the player comes to 720p HD (1280 x 720) when embedded. However, if you have a channel with one zone, your content might not need these adjustments.
5.2. As seen in the image below, certain apps are affected by the smaller resolution channel and zones.
5.3. To fix this, you can edit the selected channel zone layout and create a custom zone layout from this. Learn how to create a custom zone from an existing layout here.
5.4. Next, select the CSS tab and add a zoom setting for each zone until you have the correct content size that looks appropriate in Sharepoint.
5.5. In the sample below, the zoom level has been adjust for the main zone, the sidebar zone and the small zone containing the Clock app.