nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How can I embed my ArcGIS Dashboard into a website?

KatherineHumphreys

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!

Capture.PNG

ShengdiZhang_1-1723690538408.png

Find more posts tagged with

Accepted answers

All comments

DominicRobergeIADOT

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

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

DominicRobergeIADOT

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

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

Krocha

Hi Dominic! I just want to ask about your dishoard layout! That would be so useful! did you use one from solutions or you created it from scratch?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.