In this document we’ll look at a few ways to embed TreePlotter™ into your website.
Prerequisites:
- Access to your own website
Topics covered in this Tutorial:
- HTML iFrame
- Faux embed with a hyperlink
- CEM (Community Engagement Map)
HTML iFrame:
(Click to expand):
This approach embeds the TreePlotter interface directly within your webpage using standard HTML <iframe> code. The code would have looked something like this and allowed you to point it to your TreePlotter URL:
<iframe
src="https://pg-cloud.com/tpDemo/"
width="100%"
height="500"
frameborder="1"
marginwidth="0"
marginheight="0"
scrolling="no"
title="TreePlotter">
</iframe>iFrame Example:
Known Issues:
- With Chrome and Edge browsers, it may return an ‘Error’ and you won’t be able to access TreePlotter properly. This is because embedded content has been restricted due to browser security policies.
- It does work in FireFox and some other browsers, but because you won’t be able to control which browser people are accessing your site from, we don’t recommend this method.
Faux embed with a hyperlink:
If you have an image of TreePlotter, you can display that on your website, but have it as a hyperlink to TreePlotter. The hyperlink can be your main URL, or a map scenario taking you to a specific set of data.
Hyperlink Example:
Known Issues:
- TreePlotter includes built‑in roles that control who can see and do what. The Public role applies to anyone visiting your site without logging in. If you use a Map Scenario link on your website, remember to check that the Public role has permission to view the data you want people to see.
CEM (Community Engagement Map):
If you have our Community Engagement Map, it has been designed to be embedded into your website. There is more information in our Tutorial: Community Engagement Map, but here is an example of the embed code where name is the name of your TreePlotter site.
<script src='//cem.pg-cloud.com/js/embed-setup.js' components='tree-map'
map-name='<name>'>
</script>