| Test Case Title | TC1.25 – Embed Snap4City dashboards and widgets in external Websites |
| Goals |
|
| Prerequisites | The user is registered and logged in the system and has privileges to access dashboards in edit. |
| Expected successful result | By copying a HTML code generated by Snap4City, an external website can show an embedded Snap4City dashboard. |
A dashboard can be embedded in third party web site.
This section explains the steps needed to embed in an external web pages, widgets and dashboards created in Snap4City through the embedding feature.
In this guide will explain:
- An example of a web page hosting a Sna4City dashboard;
- All the steps needed to achieve the result;
- Possible applicable changes and available settings.
An example of external web page embedding a Snap4City dashboard, showing map and data related to Rome, is available in the following link: http://www.snap4.eu/example/roma
The direct access to the dashboard is https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=Mjc1Mg==
This dashboard contains two distinct widgets:
- The Selector widget on the right, containing 5 different icons. By clicking an icon, the corresponding service is shown on the left;
- The Map widget that shows the geolocated pins on the map, or other services on the basis of the selection done by the user.
The services that can be shown on the map on the basis of the selection done by the user, are respectively, from the top:
- Real time position of public busses in the city;
- Position of the closest bus stops;
- All services around a given position;
- Position of cultural heritage services;
- Sensors’ position and data from environmental sensors and COVID-19.
To authorize an external website to host a Snap4City dashboard, enter in edit mode of the interested dashboard and click on the Embedding item available on the top horizontal main menu.
A new view is open showing on the right a preview of the dashboard to be embedded and on the left some settings to be used to generate the HTML code to be directly embedded in the external page.
This window is composed by three main areas:
- Iframe preview – The area on the right shows the generated iframe object in real time during parameters setting.
- Iframe markup generation - In this area you can valorize some parameters in order to customize the embedding mode and get the generated markup via copy&paste of the automatically generated code.
- Embed mode (1) - There are two embed modes available:
- Automatic - This mode removes dashboard header and widgets's header, moreover it performs an automatic autofit of the dashboard to the iframe area. A "auto refit in progress, please wait" message appears in the iframe preview area while autofit is being performed.
- Manual – This mode allows to set additional parameters: to show or hide the dashboard header (2) when embedded and to apply or not autofit (3) of the dashboard according to the iframe dimensions.
- Iframe width (px) and Iframe height (px) (4) - Width and height expressed in pixels for the host iframe.
- Code to embed this dashboard (5) - This HTML markup is generated in real time during parameters setting. The code can be copied and pasted directly in the external webpage hosting the snap4City dashboard.
- Save iframe markup (6) - In this area you can save the generated markup in two different ways:
- Save in txt file: click this button and a popup window is open to save in your hard drive a .txt file containing the generated markup.
- Save in HTML file: click this button to open a popup window to save in your hard drive a basic but complete HTML page containing the generated iframe.
- Embed mode (1) - There are two embed modes available:
- Embedding authorized pages (7): the list of external web site authorized to host Snap4City Dashboard. Click on the plus button to authorize more external website. Click the minus button to revoke the authorization.
