Cards: Display Web Views with URLs

The Web View card allows businesses to display websites (HTML) easily, such as a company website, news portal, or even a blog, where updates can be almost instantly, or from sources that are readily available online.

The Web View card is an Appspace supported card, which is officially created and periodically updated by Appspace with new templates and features.

 

Important
Please refer to our Introduction to Cards guide for an in-depth introduction to the types of cards that are ideal for your signage solutions.

Visit our Appspace Card Gallery to find the perfect card to deliver your message.

Apart from the basic card customizations, the following customizations are available for the Web View card:

  • Website scaling options:
    • Fit to screen – matches the web page display with the screen resolution and size.
    • Custom size – displays the web page at a custom screen resolution and size.
    • Custom size with crop – displays only a particular section of the web page.

This article provides the instructions to create and configure a Web View card, which allows you to embed an external website into the card with multiple embedding options, such as:

  • Native Webview – displays the web page in the device’s browser without the ability to customize, as the web page is set as source and is not embedded.
  • XHR Proxy – uses XMLHttpRequest (XHR) proxy to by-pass some browser security settings, to display websites that do not allow embedding.
  • Basic Authentication – allows web pages with basic authentication using the XHR proxy method.
  • Iframe – uses the most basic way to embed web pages, and only works if the web page allows embedding. It may not work for websites that do not allow embedding, such as social media web sites.

This article provides instructions on how to create, configure, and customize the Web card to be displayed.

What’s in this article:

Prerequisite

Create and Configure Web View Card

The instructions below allow you to display Web content.

  1. Log in to the Appspace console.
  2. To create this card, select one of the following options:

    • Click +QUICK ACTION from the Appspace menu bar on the top right, and select Create Content.
    • Click Library from the ☰ Appspace menu, and select a library or folder you wish to create the content in. Click +CREATE, and select Content.
    • To create and add the card directly to an existing channel, refer to Add Content to Playlist Channels.
  3. Select Feeds from the All Templates drop-down menu, and click Web View.

    Important
    If you are unable to locate the content, try using either the Search bar, the Order by, or Filter icon to narrow down the content that you are looking for.
  4. In the Edit tab;

    • Enter the Title of the content as this will also act as the filename for the content. This is a mandatory field.
    • Enter the website URL in the address field.
    • Select one of the following Embed options:
      • Native WebviewDisplays the web page in the device’s browser without the ability to customize, as the web page is set as source and is not embedded.
      • XHR ProxyUses XMLHttpRequest (XHR) proxy to by-pass some browser security settings, to display websites that do not allow embedding.
      • Basic AuthenticationAllows web pages with basic authentication using the XHR proxy method.
      • IframeUses the most basic way to embed web pages, and only works if the web page allows embedding. It may not work for websites that disallow embedding, such as social media web sites.
    • Additional customization options are available when XHR Proxy, or Iframe is selected.
      • Select Set website scaling to configure the following:
        • Fit to screenAllows the web page to be displayed to match the screen resolution.
        • Custom sizeAllows the web page to be displayed at a custom resolution.
        • Custom size with crop Allows a particular section of the web page to be displayed.
      • Select More customization options to configure the following:
        • Disable interactivity Prevents users from clicking or scrolling the web page on devices with touchscreen or mouse attached.
        • Display while loadingDisplays the web page before it is fully loaded, with certain elements loaded after the web page is displayed.
      • Customize the card background color, or image.
  5. In the Article tab; This section may be skipped.
    • Include an Article or Caption to accompany the content item when being displayed on mobile apps, tablets, and other social collaboration apps.
    • Enter a Referral Link to link more information to the content.
  6. In the Schedule tab; This section may be skipped.
  7. In the Settings tab; This section may be skipped.
    • The Name field will be auto-populated to match the Title of the content which will also act as the filename for the content. This is a mandatory field.
    • Enter any relevant Tags for the content. (Optional)
    • Select a folder for the content in the Library Location drop-down menu to change the default folder location.
    • Select an expiry date for the content from the Auto Delete Content from Library drop-down menu. (Optional)
    • Upload an image to be used as the Thumbnail for the content.
  8. Once done, click SAVE.

Edit Web View Card

The instructions below show you how to edit a Web View card.

  1. Log in to the Appspace console.
  2. Click Library from the ☰ Appspace menu, and select a library or folder containing the content you wish to edit.
  3. Select and click the Web View card to edit, and select the desired tab to edit or view.
    • In the Edit, Article, and Settings tabs:
      • You may edit the content the same way as it was configured. For detailed instructions on how to do this, please refer to the Create and Configure Web View Card section above.
    • In the Preview tab:
      • Preview how the content is displayed on your device.
    • In the Channels tab:
    • In the Analytics tab:
      • View the individual content analytics in this tab. For more information, please refer to the Individual Content Analytics section of the Analytics article.
  4. Once done, click SAVE.
Related Articles