Web Content tile
The Web Content tile enables you to enrich your dashboards with data from other web pages and custom HTML.
With a Web Content tile you can:
- Add HTML, for example to add formatted text or links to other websites.
- Embed web pages via iframe, for example to show web content from another site alongside the data in other tiles on the dashboard.
How to configure the Web Content tile
- Create a new tile on a dashboard or perspective and choose the Web Content tile.
- Content:
Here you define what content you want to show:URLAllows you to embed other websites via iframe. Enter the absolute URL of the site you want to embed, for examplehttp://www.squaredup.com
.If your site isn't showing, you can find help here: Why isn't my site showing? Troubleshooting embedded web pagesHTMLAllows you to enter HTML code.Tips for using HTML:- If you're using colors, make sure they'll work for both light mode and dark mode.
- To use colors add
style="color:blue"
orstyle="background-color:orange; color:white"
to your content, for example<a href="https://support.squaredup.com" style="color:#FC5751" target="_blank">Knowledge Base</a>
- To make your link open in a new tab add
target="_blank"
to your link tag:<a href="http://support.squaredup.com" target="_blank">Knowledge Base</a>
<h1> <a href="https://support.squaredup.com" style="color:#FC5751;" target="_blank">Knowledge Base</a></h1> <h3>Find articles on every aspect of SquaredUp DS.</h3>
- Display:
The display section allows you to change the way the tile displays, such as the height of the tile, the zoom level, show a border, and enable scrolling.HeightAllows you to change the height of the tile. Use the slider to make the tile's size fit best for your content.ZoomAllows you to change the size of the content shown in the tile.OptionsShow border: Adds a border around the content of the tile.Enable scrolling: Adds a scroll bar to then content of a tile. Allowing your users to scroll down might be necessary if height and zoom can't make the embedded website or HTML content fit into the tile.Automatically refresh(only for embedded websites): Reloads the embedded website automatically.Open in new window when clicked (only for embedded websites): If this option is checked, the whole tile becomes a link that opens the embedded website in a new tab, and users can't use links on the embedded website. If this option is unchecked, users can click on links on the embedded website. It depends on what you are embedding if you want to prevent users from clicking links or need them to be able to click on links within the iframe.Internet Explorer and Edge do not allow tabs opened from an iframe to run JavaScript. This can cause pages to break when viewed in a new tab after clicking on a Web Content tile with the open in new window when clicked option enabled. Chrome and Firefox do not have this issue.
Click done to save the tile.
The tile now shows data according to your settings.
How to embed other dashboards via the Web Content tile
You can embed other dashboards from SquaredUp DS in your dashboard.
Which dashboards can I embed?
The best way to embed dashboards it to embed Open Access dashboards, since normal dashboards require authentication to show data.
Technically, you can embed normal dashboards, but since they require authentication to show data, this will only be useful when the dashboard you're embedding is on the same SquaredUp DS instance as the dashboard that embeds it. Since users are already logged in to see the dashboard in the SquaredUp DS instance, they can also see the data from the embedded dashboard.
But if you would try to embed a normal dashboard that is on a different instance of SquaredUp DS, the dashboard wouldn't show any data since users are not authenticated. They'd see tiles constantly trying to load data instead.
In both cases, you have to whitelist the server the dashboards are on to see any data.
Any dashboard you embed needs to be in the same domain as the dashboard it gets embedded in. Dashboards that are in a different domain get blocked by your browser due to security reasons for cookies. For example, if you are trying to embed your SquaredUp DS Standalone dashboards into your SquaredUp DS for SCOM dashboards, you need to make sure both instances are in the same domain.
How to embed a dashboard in a dashboard via the Web Content tile
- Before you can embed SquaredUp DS dashboards (including Open Access dashboards), you have to whitelist the server they are on.
You will need to connect to your SquaredUp server. See How to connect to your SquaredUp server
- On the SquaredUp server, run Notepad as administrator (Start, Run, type
notepad
, and then right-click and select Run as administrator). - Open the
security.json
file from the following path in your SquaredUp DS folder:...\User\Configuration\security.json
If the file doesn't exist, create it.Name of the SquaredUp folder
The default name of the SquaredUp folder is
SquaredUp
for v6 and above.For v5 it is
SquaredUpv5
.Location of the SquaredUp folder
If you deployed SquaredUp DS via the Azure or AWS Marketplace:
The default location for the SquaredUp folder is
F:\
.SquaredUpv[Version Number]
For v5 it isF:\SquaredUpv5
.If you installed SquaredUp DS using the installer:
A custom location may have been chosen during the installation.
The default location for the SquaredUp folder is
C:\inetpub\wwwroot\SquaredUp
For v5 it is
C:\inetpub\wwwroot\SquaredUpv5
. - You can add a whitelist of sites for which scripts are allowed to run using the following format:
"enable-embedded-scripts-whitelist": [ "https://squaredupserver1.squaredup.com/", "https://squaredupserver2.squaredup.com/" ]
So that the whole file looks something like this:{ "enable-visio-svg-sanitization": true, "enable-embedded-scripts-whitelist": [ "https://squaredupserver1.squaredup.com/", "https://squaredupserver2.squaredup.com/" ] }
Note: If security.json already contains settings, then you will need to add a comma at the end of the previous line. - Save the json file.
- Recycle the SquaredUp DS application pool.
- On the SquaredUp server, run Notepad as administrator (Start, Run, type
- You can either embed a normal dashboard or an Open Access dashboard. Insert either the normal sharing URL (for sharing a normal dashboard) or an Open Access URL (for sharing an Open Access dashboard) in the URL field of the Web Content tile.
The best way to embed dashboards it to embed Open Access dashboards, since normal dashboards require authentication to show data.
Technically, you can embed normal dashboards, but since they require authentication to show data, this will only be useful when the dashboard you're embedding is on the same SquaredUp DS instance as the dashboard that embeds it. Since users are already logged in to see the dashboard in the SquaredUp DS instance, they can also see the data from the embedded dashboard.
But if you would try to embed a normal dashboard that is on a different instance of SquaredUp DS, the dashboard wouldn't show any data since users are not authenticated. They'd see tiles constantly trying to load data instead.In both cases, you have to whitelist the server the dashboards are on to see any data.
Any dashboard you embed needs to be in the same domain as the dashboard it gets embedded in. Dashboards that are in a different domain get blocked by your browser due to security reasons for cookies. For example, if you are trying to embed your SquaredUp DS Standalone dashboards into your SquaredUp DS for SCOM dashboards, you need to make sure both instances are in the same domain.
- Go to the dashboard for which you want to find out the ID.
- Click on the share this dashboard button:
- You'll see Sharing options: Normal.
The sharing option Normal creates a link to the normal dashboard or perspective, meaning as a fully interactive version. Accessing the dashboard or perspective requires authentication with a SquaredUp DS user license. The link is based on the dashboard's or perspective's ID and does not change when the dashboard or perspective is renamed.
Normal: Just the URL based on the ID.
Full-screen:The URL based on the ID, but with
?display=fullscreen
appended. This will hide the navigation bar.Embed: The URL based on the ID, but with
?display=embed
appended which will hide the navigation bar and page title.Tip: If you're looking for the dashboard's ID, you can see it in the last part of the URL after /page/.If the URL already uses a
?
then you will need to append&
first, for example,&?display=embed
- Go to the dashboard or pinned perspective you want to create an Open Access URL for.
Note: If you want to create an Open Access URL for a pinned perspective, you need to be on the pinned perspective, not a general perspective that is not pinned. You can make sure you are on the pinned perspective by clicking on the name of the pinned perspective on the navigation bar. If you are on a perspective that is not pinned, you'll see a message that this perspective needs to be pinned first. - Make sure the dashboard or pinned perspective is already published. If it is still a draft, publish it first.
- Click on the share this dashboard button. If you can't see the button, check if you are still in edit mode since this button is only visible when you are not in edit mode.
- You'll see the following sharing options:
Sharing options
NormalThe sharing option Normal creates a link to the normal dashboard or perspective, meaning as a fully interactive version. Accessing the dashboard or perspective requires authentication with a SquaredUp DS user license. The link is based on the dashboard's or perspective's ID and does not change when the dashboard or perspective is renamed.
Normal: Just the URL based on the ID.
Full-screen:The URL based on the ID, but with
?display=fullscreen
appended. This will hide the navigation bar.Embed: The URL based on the ID, but with
?display=embed
appended which will hide the navigation bar and page title.If the URL already uses a
?
then you will need to append&
first, for example,&?display=embed
Open AccessThe Open Access feature allows you to share your dashboards with anyone, even if they are not a licensed SquaredUp DS user. It creates an Open Access version of the original dashboard that can be accessed via its own URL without the need to login. Open Access dashboards are perfect for embedding them in user portals like Sharepoint, pushing them to wall monitors or using them as high-level reports for managers.
Since there's no authentication needed, viewing Open Access dashboards does not consume Named User licenses which means you can share your dashboards with unlimited users.
Creating an Open Access version of your dashboard doesn't change anything about the original dashboard. The original version can still be accessed by logged in users.
How do Open Access dashboards work?
An Open Access dashboard is a less interactive version of the original dashboard.
Less interactive means viewers of the dashboard can hover to see graph figures and labels. If your dashboard contains links to external tools, for example linked rows in a grid, vierwers can click those links.
- In the Open Access section toggle the enable open access button to on.
- You will see the message 'Preparing your Open Access dashboard, please wait' and a thumbnail of the dashboard itself:
- Click preview to view the dashboard in Open Access mode. The dashboard is given an Open Access URL and enabled for Open Access. You can now give the URL to anyone you want to be able to access the dashboard.
After a dashboard is updated the changes are shown on the Open Access dashboard when it next refreshes, usually in 60 seconds.
FAQs
Embedding Open Access dashboards with Web Content tiles:
You can embed Open Access dashboards with a Web Content tile, but you need to whitelist your SquaredUp server first, see How to embed other SquaredUp DS dashboards via the Web Content tile.
Using Web Content tiles on Open Access dashboards:
If Web Content tiles are shown correctly on Open Access dashboards depends on the following:
- For all SquaredUp DS versions:
Embedded websites that require authentication won't work because Open Access does not use any authentication. - For SquaredUp DS v5:
Many embedded websites will work with Web Content tiles on Open Access.
To show a longer page click on display in the section settings and adjust the height slider as required to show the whole web page.
Internet Explorer and Edge do not allow tabs opened from an iframe to run JavaScript. This can cause pages to break when viewed in a new tab after clicking on a Web Content tile with the open in new window when clicked option enabled. Chrome and Firefox do not have this issue.
Why isn't my site showing? Troubleshooting embedded websites
If your Web Content tile is blank or showing an error, try the following troubleshooting steps:
- Are you trying to embed a http page in a https page? For security reasons http pages cannot be embedded in https pages. For more information see Why you should not mix http and https when using iframes.
- Open your browser's Web Developer tool. In the tool, open the Console and check if you can find an error message, for example a sameorigin or blocked script error (see following steps).
- Sameorigin error: The website itself doesn't allow embedding.
It is common for websites to actively disallow embedding. Unfortunately there's nothing you can do about it, unless the website is hosted internally and you can ask the maintainer of the site to make an exception. - Blocked script error: The website uses scripts which SquaredUp DS does not allow.
For security reasons scripts can't be run in Web Content tiles (iframes) in SquaredUp DS v4.6 onwards. The tile might displaying nothing for that site, display the site in a poorly formatted manner, or there may be a message from the site itself indicating that it requires JavaScript to function correctly.
You can at your own risk override this security setting by whitelisting trusted sites.You will need to connect to your SquaredUp server. See How to connect to your SquaredUp server
- On the SquaredUp server, run Notepad as administrator (Start, Run, type
notepad
, and then right-click and select Run as administrator). - Open the
security.json
file from the following path in your SquaredUp DS folder:...\User\Configuration\security.json
If the file doesn't exist, create it.Name of the SquaredUp folder
The default name of the SquaredUp folder is
SquaredUp
for v6 and above.For v5 it is
SquaredUpv5
.Location of the SquaredUp folder
If you deployed SquaredUp DS via the Azure or AWS Marketplace:
The default location for the SquaredUp folder is
F:\
.SquaredUpv[Version Number]
For v5 it isF:\SquaredUpv5
.If you installed SquaredUp DS using the installer:
A custom location may have been chosen during the installation.
The default location for the SquaredUp folder is
C:\inetpub\wwwroot\SquaredUp
For v5 it is
C:\inetpub\wwwroot\SquaredUpv5
. - You can add a whitelist of sites for which scripts are allowed to run using the following format:
"enable-embedded-scripts-whitelist": [ "https://squaredupserver1.squaredup.com/", "https://squaredupserver2.squaredup.com/" ]
So that the whole file looks something like this:{ "enable-visio-svg-sanitization": true, "enable-embedded-scripts-whitelist": [ "https://squaredupserver1.squaredup.com/", "https://squaredupserver2.squaredup.com/" ] }
Note: If security.json already contains settings, then you will need to add a comma at the end of the previous line. - Save the json file.
- Recycle the SquaredUp DS application pool.
- On the SquaredUp server, run Notepad as administrator (Start, Run, type