What’s an “embed”?
An ‘embed’ is a code snippet provided by another web property, like an app or a web site. You’ll also often hear them referred to as ‘embed codes’, ‘widgets’ or ‘html widgets’.
The purpose of an embed is to display ‘external’ information on separate web site.
For example, if you’re a blogger and you wanted to reference a Tweet in an article, you’d “embed” the tweet into your blog post. You’d likely go to the tweet on Twitter, grab the embed code for that tweet, and copy/paste that code into your blog page. When someone views your page, the embed code calls Twitter and asks for the tweet referenced by the code. This is useful, since tweets are ‘live’ documents; the tweet, follows, mentions will have likely changed between the time the article was written and the time viewers are reading it.
Embed codes are used all over the Internet, to help people share information between apps and web sites. For example, the video below is embedded in this Help page using an Embed code provided by our video hosting service.
What is the Embed App?
The Embed App is an integration app available in the ScreenScape Media editor.
The app adds a single layer to a media item. The layer (technically an iframe) shows the results of an embed code that’s added to the app settings. Usually that layer contains a mix of content – text, images, maybe even video – embedded by a third party web property.
The Embed layer acts like a Web Page layer – it can be move and resized, but it’s monolithic in nature. You can’t do anything with the internal embedded content other than move it around as a block.
When should I use the Embed App?
Embeds are particularly useful for default formatting of external content. For example, an embedded Tweet automatically looks familiar – it uses the right brand colors, the right font, a familiar placement of elements, rounding of corners, etc.
Embeds are also very useful when the embed updates itself over time. For example, an embed that always shows the latest price of a NYSE stock can be very handy.
What are examples of what I can do with an embed?
Here’s a abbreviated list of what you might do with the Embed app:
- Instagram Feed – Display Instagram images in your Media
- Facebook Feed – Make your Facebook content work in your Media, or highlight specific Comments, Posts, Videos or Pages
- Twitter Feed – Embed your Twitter feed or customer testimonials from Twitter, or highlight specific Tweets
- Pinterest Feed – Integrate Pinterest account feeds, Boards or Pins
- Pricing Tables – Display your prices in a simple and graphic way
- Countdown Timers – Embed counters and timers to create dynamism and excitement in your media
- Testimonials – Boost brand trust with bright client testimonials in your Media
- Sliders – Shape custom photo, video, and banner sliders for your Media
- Amazon Reviews – Display reviews on your Amazon products
- Trustpilot Reviews – Uplevel social trust and attract more reviews
- Facebook Reviews – Display your Facebook reviews
- TripAdvisor Reviews – Increase your trustworthiness with TripAdvisor reviews
- Google Reviews – Show your spotless reputation with Google reviews
- Yelp Reviews – Prove your business positive image with Yelp reviews
- Airbnb Reviews – Display your Airbnb reviews for higher credibility
- Weather – Present the Weather in a variety of formats for any location
- Financial – Show market summaries, tickers and symbol quotes
- Clocks – Present the time in various formats
- Event Calendars – Display upcoming events
- Google Maps – Add Google Maps to your Media
- Google Calendar – Embed Calendars for meeting rooms, schedules, team members and more
- Google Sheets / Charts – Embed live charts into your Media
- Vimeo Gallery – Embed Vimeo videos and channels in your Media
- YouTube Gallery – Add YouTube channels and videos to your Media
- Twitch channels – Embed live Twitch channels for a window on the latest online action
- Photo Galleries – Embed external image collections into your Media
It’s important to note that the goal of many of these examples could be achieved in other ways. For example, YouTube has it’s own app, and also shares Webpage app- friendly URLs, vs a putting a YT embed code in the Embed app. The Embed app is just another tool in your toolbox. Each have pros and cons, there’s no one right way.
What are the limitations of the Embed App?
Most embeds are good for referencing a snippets of data, like a single tweet. They aren’t usually great for complicated tasks, like showing all tweets on a certain subject over time.
Most limitations of an embed is defined by the provider of the embed. As a consumer, you don’t have much control over what the embed can and can’t do. For example, if the font they use in their embed is too small to be legible on your display… tough luck.
Embeds are also meant to be public (think tweets and stock info), so they’re generally limited to public information. They aren’t useful for accessing data that’s protected and requires user authentication. If the data you want to display is protected, you’ll need to use a dedicated App that provides steps for user credentials.
Beware of embeds that: require user interaction; have tiny fonts; or have poor contrast. You’re making a digital sign after all. An embed with buttons that a user would have to click (like the Play button on a video) doesn’t fit your digital signage use case.
Finally, embeds with a ‘fixed’ resolution or ‘absolute’ resolution require special handling – check out the next question for details.
Why does my embed look different between Previews and my TV?
Many embeds you’ll find use a ‘fixed’ resolution (aka absolute resolution). Their height and width in pixels is explicitly declared in the embed’s code.
ScreenScape Media is ‘relative’. The size and position of layers is a percentage of the total screen area.
Getting fixed and relative elements to work together smoothly is often tricky. When you’re working across multiple screen resolutions (as you often are with digital signage) it can be a real challenge.
If you’re seeing positioning issues like the one shown above (your embed would be the red square), you’re likely dealing with an embed in a fixed resolution. Try going back to the provider to get a ‘relative’ or ‘responsive’ embed. If you’re feeling brave, you could also try editing the embed code itself to a percentage height and width. If neither of those work, the only solution is iterative testing – go back and forth between your editor and your TV until you get the embed positioned just right.
How do I find Embed codes?
Most of the popular social media apps out there have embeds – it’s one of the central ways that they gain popularity.
Exactly where to find it will depend on the app. Some sites, like Twitter, dedicate an entire section of their app to nothing but the generation of embeds. (For example, publish.twitter.com.) But in general look for a Share button, or a reference to a ‘widget’. Sometimes they simply call it an Embed.
Follow the apps instructions to copy the embed code.
Then go back to your ScreenScape editor, paste the code into your Embed App settings and Save.
Can I buy embed codes?
Yes. Usually vendors who sell embeds call them ‘widgets’. There are all kinds of them out there.
Vendors will often offer simpler widgets for free, and reserve their higher-end offerings for a fee. Some vendors you may find useful:
- Weatherwidget – Sidebar and ‘lower thirds’ weather bars are available in varying styles and colors here.
- ClockLink – If you’re looking for an alternative to our standard clock app, this is a good place to start.
- Elfsight – Elfsight has more than two dozen widgets including Facebook, Instagram, Twitter and many more. Be aware that with their free widgets you’re sometimes limited to a fixed number of views per month.
- Snapwidget – Life Elfsight, they have many social widgets, with some free and others for a fee.
Can I modify embed codes?
Yes – embeds often have parameters you can tweak to change how they’ll behave on your display.
However, this is again limited by the options provided for by the third party web property – results may vary!
What is the Webpage app?
‘Webpage’ is an app that you can add to any media. It adds a dynamic layer to your media item, similar to how you’d add a clock, the date, or other apps.
What makes the Webpage app special is that it will display external websites. It acts like a browser window in your media item. When the external website changes, the Webpage layer in your media item changes.
Note: An alternate name for the Webpage app is “Webview”.
How do I use the Webpage app?
You add a Webpage layer like any other – in the media editor hit (+), select the ‘cloud’ from the speed dial, and select the Webpage app.
You’ll see a new layer added to your media item. Select the layer and hit the settings icon (looks like a round-toothed gear). You enter the URL of your target website and hit ‘Save’. A layer displaying that website will be added to your media. You can resize the new layer just like you would any other.
Will my website play in the Webpage app?
Probably. But it’s not guaranteed. The Webpage app was created as a solution to a particular challenge (display online HTML documents). It’s not a general browser. And not all web pages are created equal; some will display flawlessly, while others won’t display at all. Some will display, but just aren’t designed for the digital signage use case. Your success will come down to the individual HTML page and its implementation. With this FAQ we’ll try to demystify the differences.
However, be warned that it’s a very large topic (the World Wide Web!) and can get quite complex. Your fastest route might be to just try it…copy your site’s URL and paste it into a Webpage layer. If it fails to preview, or previews but fails to perform well on your test player, come back to this FAQ and we’ll help you to figure out why.
What are some common sites that work well with the Webpage app?
The list is long, but here are some highlights:
What type of sites don’t work well with the Webpage app?
Here’s a top 10 of the reasons sites don’t work well with the Webpage app:
- Complex Layouts
If the layout of the site is not designed for digital signage, it won’t look right. For a successful implementation of Webpage, it is critical that the HTML page considers digital signage in its design. By far the most common reason for Webpage fails is that the designer of the site just didn’t envision that it would be used as part of a digital sign. If that’s the case they likely included common elements like:
- navigation bars
- buttons and forms
- tiny fonts that can’t be read from a distance
- a main body element that’s cut off from view (like an iframe, image gallery, webcam or video)
- Username and password
The second most common point of failure are sites that require user authentication (a username and password) to access the site’s content.
For example, if you attempt to view a Google Sheet that is not public, Google will deliver a user login page instead of your sheet. Making the document public (instructions here) allows ScreenScape players to access the document directly.
- Blocked sites and CORS
Website operators can directly block the use of their site for use in an embedded frame on another site. (That’s basically what a Webpage layer is – an iframe that embeds another site into your ScreenScape media item – which is in itself an HTML page). If the site owner chooses to block embedding of their site, it can’t be used.
For example, cnn.com/ blocks their site from being embedded.
A variation of this issue is called CORS – Cross Origin Resource Sharing. CORS is technical topic, but the upshot is that some external embedded resources on your site (for example, a Google Map) might get blocked. The good news is that the owner of the site you’re referencing can unblock them if they choose to.
- Internal sites
Websites on internal networks are behind firewalls that may not allow the ScreenScape Webpage proxy to access the HTML page they protect. When blocked by a network in this way the site can’t be embedded in a media item. The reverse might also be true – the firewall of your local area network may prevent your player from accessing the web address that connects to ScreenScape’s proxy server.
Many sites have user prompts, modal dialogs and advertising popups that block the view of the page.
- Navigation and user settings
The design of some sites assume that a user will be present to scroll down, navigate or otherwise interact with the screen to view the desired content. If the page can’t be linked to directly from a URL and viewed without further navigation, it can’t be viewed properly with Webpage.
Similarly, the design of some sites assumes that users will be able to select settings on the current page to create a view of specific content. This might include search criteria, a checkbox, view selection, or other user setting that lets users change what’s displayed on the screen.
If the user setting does not result in an argument in the URL of the page that can be passed along to the Webpage, the specific view won’t be visible.
- Single page apps
Some users want to display graphs, lists, statistics or other information that is embedded in a Single Page Application. This type of app generally requires user authentication, but if it doesn’t, the destination in the SPA will need to be ‘deep linked’ – available directly via URL.
- Multiple videos or animations
If a page has a very large number of animated elements, high resolution, uses aggressive animations, or has multiple videos this will affect the playback of the Web Page content. The render time of the page will likely result in delays, dropped frames and choppy playback. These will degrade the viewing experience of the content on the page.
Some modern web pages use a communication protocol to display real time data to the viewer. Websockets are good example.
Because of the way media items are architected as static web pages, two-way protocols like websockets are not supported.
- Incompatible HTML
Outdated HTML, unsupported element types, or non-standard HTML may be unintelligible to the Webpage proxy engine or unrenderable by the Webpage browser.
Can Webpage be used for interactive screens?
For example, if I had a touchscreen display could I use it to navigate my wayfinding site?
Websites that require user interaction are not supported.
Nothing will happen if you click on the screen or otherwise interact with the page, as with a touchscreen. However, it won’t break the display either.
What is the recommended aspect ratio for my webpage design? Should it be 16:9?
The ideal aspect ratio for a ‘full screen’ Webpage is the same aspect ratio of your TV, likely 16:9.
If a site uses responsive design (recommended), it will adjust its output to the size of the window in which its rendered. You can change the aspect ratio of the Webpage layer frame for non-fullscreen Web Pages just as you would for any other layer. Your site will adjust to the aspect ratio of the layer frame (e.g. 1:1, 16:3 banners, 9:16 portrait etc).
We recommend using a tool like Flexitive to design your responsive content. In the case of Flexitive they have a great library of templates well suited to digital signage. You can take the output of your Flexitive design and input it directly to your Webpage app – it will work right out of the box (example above).
What is the recommended image size for my webpage design?
There is no one-size-fits-all. Website image optimization is a big topic (here’s a good starting point from Google and another from an ecommerce incubator). That said, here are some quick pointers.
- Not too big and not small. Images that are too small need to be scaled up and will look pixelated and blurry. Images that are too large will need to be scaled down and will lose detail while taking longer to render.
- Match your TV. The best way to select image sizes is to identify the resolution(s) the image will be displayed at its destination and match that. You’ll improve graphics performance and playback quality when images are scaled to the output resolution before they are rendered in HTML. You have an advantage over most website producers, in that your final display conditions are narrow and you can identify them in advance.
- For backgrounds, try 1920×1080. It’s the most common 16:9 screen resolution out there. When in doubt, that’s a good place to start.
- Design Responsively. We recommend that you design your site to be responsive. You can then prepare a range of image resolutions for your images that will adjust to the display conditions at the time the page is rendered.
How long does it take for website changes to show up in a Webpage layer?
On average, 5-10 minutes. This can be sped up or slowed down, depending on the use case. Either way – every time Webpage refreshes there’s a hit to your bandwidth consumption. It’s flushing out it’s old cache and downloading a new version of your target webpage.
Can I use custom web fonts with Webpage?
Yes, you can embed custom Web fonts into your page.
However be aware that the overall performance of the page may be affected by the render time of the font on a player. Also note that if the font file is referenced by the HTML page but not available, text will be rendered using a default system font.
Can I use animations on my page?
Yes, animations are supported.
However the final result, and especially the frame rate performance of your animations, will depend on many factors:
- Animation method (SVG [recommended], Canvas, WebGL, JS)
- Number of concurrent animations
- Size of animation (# of pixels moving at once)
- Current player CPU / GPU load
- Current memory usage
We recommend light use of animations to prevent frame rate drops, since many of these variables are circumstantial and will be difficult to predict in the field. It’s also a solid design principle to avoid making your screens too busy. A little movement goes a long way.
Does the Webpage app support Flash?
No. Flash is not supported.
There is no Flash runtime on the players, so webpages that have embedded Flash content will not render successfully. If it’s your site, we recommend the use of authoring applications like Adobe’s Creative Suite to export Flash content to HTML, and use that on your page instead.
If the site belongs to someone else and they are using Flash, the site can’t be used with the Webpage app.
Does the Webpage app support embedded video?
Yes, pages with embedded video are supported.
However the page will be responsible for auto-playing the video, muting audio, looping, etc. Also be aware that videos affect overall player performance. A video stacked with other visual effects like animations, or multiple videos, may result in frame drops and choppy playback on lightweight players.
Does the Webpage app support live cams?
Yes. A site with elements that stream video, like a webcam viewer, can be displayed in a Webpage layer.
However be aware that live cams require a high amount of bandwidth for your player (a fast connection), and like other videos can consume player resources like memory and CPU. The video element will need to be positioned on the page such that it’s fully viewable on initial page load. The page will need to be designed with these constraints in mind to be successful.
Why does a Webpage layer look different in Preview?
When I view it on my TV, I see more of the page than in the preview on my laptop.
At the end of the day, it’s “just a website”. Website are rendered slightly differently across various platforms. It’s similar to the difference between the same site on your phone, vs on your desktop. On your phone’s screen, you’ll see a slightly different version of the page.
A Webpage on the player is running on a specific hardware and browser platform at the resolution of your TV. When you view the site in a Webpage layer in Preview, you’re using a different combination of hardware, browser and resolution, on a different internet connection to render the site. Each of these factors will affect presentation when the site is rendered.
When using Webpage we highly recommend testing your website’s final output under the same conditions that you’ll be deploying in public. e.g. a ScreenScape player, a full-size TV, a similar WiFi network, etc.
Does the Webpage app use a proxy? (and… What’s a proxy?)
Yes, by default the Webpage app uses a proxy.
A proxy is a server that acts as an intermediary between the website, the Webpage media layer, and the ScreenScape player.
ScreenScape uses the proxy to interpret the contents of the website’s HTML, looking out for parts of the site that might be incompatible with being displayed in a Webpage media layer. When it finds incompatibilities, it makes a best-effort attempt to translate them into usable elements. The success ratio isn’t 100% (the Web is a big place), but it does increase the probability of a successful result.
Can the Webpage proxy be turned off?
Yes, the proxy can be turned off.
Why would you want to do that? In some cases, a proxy can get in the way. The most common of these is when the website in question is hosted behind a firewall. Players that are also behind the firewall could play those websites – but ScreenScape’s proxy server would be denied access by the firewall.
In other instances, there may be an incompatibility between the proxy and whatever website you’re attempting. If a website fails to render correctly with the Proxy on, try turning it off.
Will my dynamic webpage work?