How can I embed my ArcGIS Dashboard into a website?

KatherineHumphreys · ‎10-11-2022

Hi,

I am a research assistant and I made a dashboard to communicate where racial covenants are in the Chicago area. To find this dashboard easily, I would like to embed it into my project's website.

Currently my website is created using Squarespace and I have added an empty "embed'" block into it shown below. My website can be replicated with all of the functions available to a user with Squarespace's free trial period.

When following the instructions from the ArcGIS Online documentation on embedding maps, apps, and groups , I was able to imbed my web map but not my dashboard when following the section embed an app.

Is it possible to embed an ArcGIS Dashboard into a squarespace website? If so, what is the syntax to do so?

I would appreciate any suggestions!

DominicRoberge2 · ‎10-11-2022

I am not familiar with squarespace but if you can add a HTML tag in you code, the following code should do it:

<iframe frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"
src="https://cityofamesgis.maps.arcgis.com/apps/dashboards/5367247413a24b0784414e7f18eb5b97"></iframe>

the final product is accessed through the following HTML page

https://gis.cityofames.org/images/AFD/AFDburnpermits.html

KatyMiller · ‎02-03-2023

Hi there,

I just used this to embed my dashboard, it was extremely useful. Thank you.

I just wondered if you also had any HTML that would work to inset a Storymap into Squarespace but eliminating the header. I read this article and have tried a few different things but it doesn't seem to work. I'm no expert on html, but just looking at the code snippet above and the fact both dashbaords and storymaps have urls to inset there must be some similarity and I just need to append &embed somewhere?

Many thanks in advance

Katy

DominicRoberge2 · ‎02-03-2023

Hi Katy,

I do have a storymap embed in HTML

https://gis.cityofames.org/amesconstruction/index.html

try this HTML code: (replace the src with the link to your own story map)

<!DOCTYPE html>
<html>
<script type="text/javascript">
	
var http = new XMLHttpRequest(); 


</script>

<head>
    <meta charset="utf-8" />
    <title>City of Ames Construction Projects</title>
</head>

<body style="margin:0px;padding:0px;overflow:hidden">
<iframe frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"
src="https://storymaps.arcgis.com/stories/58266c1834d844a8ab354dca3ecdd638"></iframe>
</body>

</html>

KatyMiller · ‎02-03-2023

Hi Dominic,

Thanks so much for the speedy reply. I have used your html above and replced my storymap url after scr:

This works to show me my storymap in my Squarespace site, but what Im trying to do is eliminate the header (white space at the top with the text "My personal journey..."). This is the webpage I'm working on and as you can see it isn't very tidy and I added a "scroll down" button to get the user to actually see the map. The article I looked at seems to suggest adding the text "&embed" directly after the url but before closing syntax should sort this. Everytime I try I get a traffic cone picture, as in an error!!

Any help is greatly appreciated! I'm not an expert on html at all, but I sort of get there is a syntax like any other code and it is about getting this right to then embed this map the way I want it!

Kind wishes

Katy

DominicRoberge2 · ‎02-03-2023

Yeah I am not sure as I believe this article was for the Old Story Map (Story Map Classic) . Not sure how the new Story Map would do the same.

Sorry I can't help you more here. Good luck!

KatyMiller · ‎02-03-2023

No problem! Thanks again for your help with the html! Always handy to have this.

Have a good evening

Katy 🙂