Microsoft Teams Logo

Publish content to your screens directly from Microsoft Teams

Learn More ScreenCloud Banner Arrow
ScreenCloud Close Icon
Login
Get Demo
PricingContact
Get DemoLogin
Overview

On Screen

ScreenCloud Integrations Icon
Integrations
ScreenCloud Dashboards Icon
Dashboards
ScreenCloud Design Icon
Design
ScreenCloud Broadcast Icon
Broadcast

Manage

ScreenCloud OS Icon
ScreenCloud OS
ScreenCloud Hardware Icon
Hardware
ScreenCloud Studio Icon
Studio
ScreenCloud Security Icon
Security
Overview

Solutions

Workplace Employee ScreensCommercial Customer ScreensScreen Network Management

Need something answered?

Resources & GuidesEmployee Engagement MasterclassHelp CenterTraining Tutorials

Want to work with us?

PartnersDevelopers

Product

How to set up Canva using Playgrounds

ScreenCloud’s Playgrounds app allows users to write custom code to create apps for screens and now you can share Canva templates too.

July  2022

ScreenCloud Post

Why use Playgrounds?

  • Quickly get Canva designs on screen with animations
  • Automatically updates when changes are applied in Canva, so there is no need to return to your app instance
  • Utilize our code editor to customize your on screen experience

1. Collect the Embed link of your Canva presentation

While viewing your Canva presentation that you are ready to share on your screens, click the Share icon.

Navigate from Share > More > Embed so that you find your Canva Smart embed link for the presentation. Please note that setting your slide to an Embed link means that it is published online and accessible to anyone who has the shared link of the document.

Canva Embed link.png

Save this link for the steps ahead.

2. Create new ScreenCloud Playgrounds app instance

Within Studio, navigate to Apps and search for the Playgrounds app.

Add the Playgrounds app to your account , select New Instance, and then pick the Canva template to begin.

3. Paste the Embed code

This is the Canva template in Playgrounds.

Playgrounds Canva Code.png

In the JavaScript column's, scroll down to the code at line 99, and find the const url = "[URL]" section. You can remove the existing URL there and replace it with the one from your Canva slide.

What you will need to do is just add ?embed at the end of your Canva Smart embed link.

Playgrounds Canva Javascript.png

Your link should look like the example below within the Javascript section:

https://www.canva.com/design/DAFJxf7ymVA/view?embed

4. Set up your Canva slideshow settings in the Playgrounds app

If your Canva presentation contains more than one slide, please set this number at the slideCount at code line 100. For example, if your Canva presentation contains 4 pages:

const slideCount = 4

To adjust the duration a page or slide displays, please set the slideDuration number at code line 101. For example, if you wish to display for 5 seconds, please write:

const slideDuration = 5000

5. Preview your instance

To preview your instance, click the Preview button in the top right corner and ensure the Canva design has loaded correctly. You can then select Save.

6. Add Playground instance to Playlist or Channel

Finally, schedule your Playground instance amongst your content as normal to display on screen!

Canva via Playgrounds

If you have any additional questions or feedback on using the ScreenCloud Playgrounds app, please contact our support team at support@screencloud.com.

 SC Gradient

Ready to get your organization connected?

Connect your first screen today with our 14-day free trial

Free TrialBook Demo