How to embed Experience app into external website?

5273
6
03-23-2021 07:55 AM
Lvivcenter
New Contributor III

How can I fix the issue of embeding a page created with Experience Builder into external webstie. On the external website I have created an iframe with a link to the experience builder page. It works fine in many browsers. But some users returned to me addressing the troubles - the page is just loading all the time without success. The same happens in Chrome Incognito mode - . The error in the console read as follows. The Experience page is made public.

Could you please advise what might be the reason?

spring_of_nations_error.jpg

6 Replies
ILoveACleanSanDiego
New Contributor II

Hi @Lvivcenter - are you able to share your iframe code? My web designers are having a similar yet simpler problem, and can't get the Experience embedded in the iframe so that the device-adaptive properties of the Experience still function. I'm hoping your code (while having trouble with certain browsers) may be helpful for me if you're willing to share. Thank you and sorry I can't be of help!

0 Kudos
UalasRohrer
New Contributor III

@ILoveACleanSanDiego  Try adding this to your page header. 

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

ILoveACleanSanDiego
New Contributor II

Thank you very much @UalasRohrer ! The developers figured out a workaround (I unfortunately do not have access to the code to share with others ☹️), but I will share this with them for future needs.

0 Kudos
jschuckert
New Contributor III

I am testing this same thing, embedding Experience Builder into a webpage. Did others end up finding an iframe code that worked well?

Related to this, I am also wondering if an EB layout/page can be created at a size other than full sized page. I don't see that option. I was trying to use an EB app for a non-traditional (full size map or webpage) use case which required something embedded but also a custom (smaller) size. 

0 Kudos
JakeNeedle
New Contributor III

Hi All,

Did anyone every get a solution to embedding an Experience Builder app in an external website? We could really use some direction.

Thanks,

Jake

AndrewBaddeley
New Contributor

Jake,

I've just published an Experience Builder app to our website homepage here: www.terravisus.com

We are using Hubspot for our CSS so I had to add it via an HTML widget. Here's the HTML code:

<div class="container">
<iframe src="https://experience.arcgis.com/experience/19f528ba976d4aea85d492f9c6766209/"></iframe>
</div>

 

Here's the HTML in the page header:

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<style>
  .container {
   position: relative;
   overflow: hidden;
   padding-top: 56.25%;
}
.container iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 0;
}
</style>