# Gradio iframe embedding

**URL:** <https://discuss.huggingface.co/t/gradio-iframe-embedding/13021>\
**Category:** Spaces\
**Created:** [December 21, 2021, 10:28pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021 "2021-12-21T22:28:40Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![luisoala](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/luisoala/32/3524_2.png) [@luisoala](https://discuss.huggingface.co/u/luisoala)\
**Post date:** [December 21, 2021, 10:28pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/1 "2021-12-21T22:28:40Z")

</div>

hi all,

hf spaces gradio iframe embedding appears useful, seems to work fine but does not seem to be documented well.

are there plans to expland the gradio documentation for hf spaces?

if yes, is there a place to make suggestions?

in good spirits,  
luis

---

<div class="post-metadata">

**Author:** ![abidlabs](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/abidlabs/32/21878_2.png) [@abidlabs](https://discuss.huggingface.co/u/abidlabs)\
**Post date:** [December 22, 2021, 1:51pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/2 "2021-12-22T13:51:35Z")

</div>

Hi @luisoala, one of the developers of Gradio here. Thanks for your question - the Gradio website has some documentation on hosting on Spaces ([Gradio](https://gradio.app/getting_started/)), but we can definitely improve it.

What improvements would you like to see?

---

<div class="post-metadata">

**Author:** ![luisoala](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/luisoala/32/3524_2.png) [@luisoala](https://discuss.huggingface.co/u/luisoala)\
**Post date:** [December 22, 2021, 2:46pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/3 "2021-12-22T14:46:28Z")

</div>

hi @abidlabs thanks for quick response.

gradio docs and also getting started with hf spaces + gradio ([Documentation for Spaces](https://huggingface.co/docs/hub/spaces#streamlit-and-gradio)) is great

what i meant with “Gradio iframe embedding” is the following use case:

1. i host a gradio demo on hf space, in my case [raw2logit - a Hugging Face Space by luisoala](https://huggingface.co/spaces/luisoala/raw2logit)
2. i want to embed the demo in a website, in my case a project site “A”

to me, it was not obvious which url should be used for the iframe embed. after doing ctl+c on hf space i found “B” which is different from the default spaces url for the demo “C”. also, the first url provides some further fromatting options with “?\_”, e.g. dark mode etc.

if there is documentation explaining how hf spaces are to embedded it could be linked in the “gradio+hf spaces” guide.

let me know if this was clear or further context is needed.

in good spirits,  
luis

---

<div class="post-metadata">

**Author:** ![luisoala](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/luisoala/32/3524_2.png) [@luisoala](https://discuss.huggingface.co/u/luisoala)\
**Post date:** [December 22, 2021, 2:47pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/4 "2021-12-22T14:47:14Z")

</div>

p.s. the forum does not allow me to put more than two links into the post, so here the variables  
A = [aiaudit .org | Dataset Drift Controls Using Raw Image Data and Differentiable ISPs](https://aiaudit.org/raw2logit/)  
B = [static pipeline demo](https://hf.space/gradioiframe/luisoala/raw2logit/+)

---

<div class="post-metadata">

**Author:** ![luisoala](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/luisoala/32/3524_2.png) [@luisoala](https://discuss.huggingface.co/u/luisoala)\
**Post date:** [December 22, 2021, 2:47pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/5 "2021-12-22T14:47:53Z")

</div>

C = [raw2logit - a Hugging Face Space by luisoala](https://huggingface.co/spaces/luisoala/raw2logit)

---

<div class="post-metadata">

**Author:** ![abidlabs](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/abidlabs/32/21878_2.png) [@abidlabs](https://discuss.huggingface.co/u/abidlabs)\
**Post date:** [December 22, 2021, 6:48pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/6 "2021-12-22T18:48:25Z")

</div>

Yes you have great timing, since we actually just implemented this feature! You can now use native embeddings instead of iframes for a better experience and better UI. We’ll be announcing this shortly along with instructions, but in the meantime, you can take a look at our landing page where we have used the new native embeddings for all 4 of the demos: [https://www.gradio.app/](https://www.gradio.app/)

---

<div class="post-metadata">

**Author:** ![abidlabs](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/abidlabs/32/21878_2.png) [@abidlabs](https://discuss.huggingface.co/u/abidlabs)\
**Post date:** [December 23, 2021, 1:10am UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/7 "2021-12-23T01:10:12Z")

</div>

We haven’t officially added docs yet, but unofficially, here’s how you do it 😉

```auto
// import this in HTML file
<script defer="defer" id="gradio-library" src="www.gradio.app/gradio_static/bundle.js">

// in script tags:
launchGradioFromSpaces("path/to/spaces", "#div")

```

---

<div class="post-metadata">

**Author:** ![luisoala](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/luisoala/32/3524_2.png) [@luisoala](https://discuss.huggingface.co/u/luisoala)\
**Post date:** [December 23, 2021, 3:50pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/8 "2021-12-23T15:50:05Z")

</div>

excellent, saw the twitter announcement, too. will give it a spin 🙂

---

<div class="post-metadata">

**Author:** ![abidlabs](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/abidlabs/32/21878_2.png) [@abidlabs](https://discuss.huggingface.co/u/abidlabs)\
**Post date:** [December 24, 2021, 5:28pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/9 "2021-12-24T17:28:54Z")

</div>

Hey @luisoala here’s the complete minimum working example in order to embed a Gradio interface. Thanks!

```auto
<html>
<head>
<link rel="stylesheet" href="https://gradio.s3-us-west-2.amazonaws.com/2.6.2/static/bundle.css">
</head>
<body>
<div id="target"></div>
<script src="https://gradio.s3-us-west-2.amazonaws.com/2.6.2/static/bundle.js"></script>
<script>
launchGradioFromSpaces("abidlabs/question-answering", "#target")
</script>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![dnth](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/dnth/32/17144_2.png) [@dnth](https://discuss.huggingface.co/u/dnth)\
**Post date:** [February 16, 2022, 8:12am UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/10 "2022-02-16T08:12:44Z")

</div>

I find that clicking on an example image (image segmentation tab) for inference does not work on [https://www.gradio.app/](https://www.gradio.app/). Is there any way we can make it work?

---

<div class="post-metadata">

**Author:** ![abidlabs](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/abidlabs/32/21878_2.png) [@abidlabs](https://discuss.huggingface.co/u/abidlabs)\
**Post date:** [February 21, 2022, 12:32pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/11 "2022-02-21T12:32:03Z")

</div>

Thanks @dnth for bringing this up! We have an open issue to fix this and we’ll get on it soon: [Website Improvements and Fixes · Issue #562 · gradio-app/gradio (github.com)](https://github.com/gradio-app/gradio/issues/562)

If you find any other issues with the website, you can comment in that issue 🤗

---

<div class="post-metadata">

**Author:** ![charlesfrye](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/charlesfrye/32/4806_2.png) [@charlesfrye](https://discuss.huggingface.co/u/charlesfrye)\
**Post date:** [May 17, 2022, 11:02pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/12 "2022-05-17T23:02:52Z")

</div>

FYI I found that I needed to pin my SDK version to before 3.0 on Hugging Face (e.g. 2.9.4) in order for embedding to work, even on an identical copy of the Space.

This was a tricky one to debug, because the SDK versions are not pinned on the example Spaces. I believe there’s implicit state here, where the SDK version is set when the Space is built, so cloning a Space is not enough to get the same behavior.

Didn’t fully root cause, but noticed that the “view the API” link doesn’t appear if you have `gradio>2.9.4` and the associated endpoints, e.g. `https://hf.space/embed/{entity}/{project}/api` give 500 errors. Could be due to a cross-origin issue, based on error output below, but I’m out of my web dev depth here:

 ![image](https://us1.discourse-cdn.com/hellohellohello/original/2X/6/6fbb1489d4b7d56cb9ab947c0ba8720bb345a7ed.png)

---

<div class="post-metadata">

**Author:** ![abidlabs](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/abidlabs/32/21878_2.png) [@abidlabs](https://discuss.huggingface.co/u/abidlabs)\
**Post date:** [October 25, 2022, 5:09pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/13 "2022-10-25T17:09:11Z")

</div>

UPDATE: please use the following approach to embed Spaces: [Sharing Your App (gradio.app)](https://gradio.app/sharing_your_app/#embedding-hosted-spaces)

---

<div class="post-metadata">

**Author:** ![greendra](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/greendra/32/46012_2.png) [@greendra](https://discuss.huggingface.co/u/greendra)\
**Post date:** [October 25, 2022, 6:26pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/14 "2022-10-25T18:26:40Z")

</div>

embedding is now broken. getting CORS error on all my embeds.

---

<div class="post-metadata">

**Author:** ![tomaseo2022](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tomaseo2022](https://discuss.huggingface.co/u/tomaseo2022)\
**Post date:** [October 25, 2022, 6:46pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/15 "2022-10-25T18:46:23Z")

</div>

Yes, I also have this problem

---

<div class="post-metadata">

**Author:** ![abidlabs](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/abidlabs/32/21878_2.png) [@abidlabs](https://discuss.huggingface.co/u/abidlabs)\
**Post date:** [October 25, 2022, 7:38pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/16 "2022-10-25T19:38:47Z")

</div>

Hi @tomaseo2022, is the Space you are trying to embed a private Space or a public Space? If it’s a public Space, can you link it here?

---

<div class="post-metadata">

**Author:** ![tomaseo2022](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tomaseo2022](https://discuss.huggingface.co/u/tomaseo2022)\
**Post date:** [October 25, 2022, 7:49pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/17 "2022-10-25T19:49:12Z")

</div>

Yes, they are public spaces.

> **[Text A Voz - a Hugging Face Space by tomaseo2022](https://huggingface.co/spaces/tomaseo2022/Text-a-Voz)**
>
> Discover amazing ML apps made by the community

> **[MP3 a Texto - a Hugging Face Space by tomaseo2022](https://huggingface.co/spaces/tomaseo2022/mp3-a-texto)**
>
> Discover amazing ML apps made by the community

---

<div class="post-metadata">

**Author:** ![abidlabs](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/abidlabs/32/21878_2.png) [@abidlabs](https://discuss.huggingface.co/u/abidlabs)\
**Post date:** [October 25, 2022, 7:58pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/18 "2022-10-25T19:58:41Z")

</div>

Hi @tomaseo2022 I’m getting 404s when I visit your Spaces. Can you try factory rebooting them?

---

<div class="post-metadata">

**Author:** ![tomaseo2022](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tomaseo2022](https://discuss.huggingface.co/u/tomaseo2022)\
**Post date:** [October 25, 2022, 8:38pm UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/19 "2022-10-25T20:38:32Z")

</div>

A factory reboot seems to have fixed the problem. Thank you very much for your time!

---

<div class="post-metadata">

**Author:** ![chinhon](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/chinhon/32/2966_2.png) [@chinhon](https://discuss.huggingface.co/u/chinhon)\
**Post date:** [November 4, 2022, 3:37am UTC](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021/20 "2022-11-04T03:37:21Z")

</div>

Hi, I’m looking for recommendations for website hosts that can handle ML app embeds like those for HF-Gradio.

I’ve been trying Squarespace for a bit, and can’t seem to get the embed right, even after taking up a “business” account that allows iframes and JS.

I don’t have web design skills so would rather use a host that has ready-made templates. Would folks who have successfully embedded their apps on their own website have any recommendations?

[Next page](https://discuss.huggingface.co/t/gradio-iframe-embedding/13021.md?page=2)