**Prerequisite**: This Guide builds on topics introduced in the Quickstart. Make sure to [read the Quickstart first](/getting_started).
### Introduction
Once you have created a Gradio demo and [hosted it on Hugging Face Spaces](https://huggingface.co/blog/gradio-spaces), you may want to embed the demo on a different website, such as your blog or your portfolio. Embedding an interactive demo allows people to try out the machine learning model that you have built, without needing to download or install anything — right in their browser! The best part is that you can embed interative demos even in static websites, such as GitHub pages.
There are two ways to embed your Gradio demos, hosted on Hugging Face Spaces, into your websites:
In either case, the first step is to create your Gradio demo and host it on Hugging Face Spaces, a process which is described in this blog post: [https://huggingface.co/blog/gradio-spaces](https://huggingface.co/blog/gradio-spaces)
In this guide, we will be embedding this image classification Space: [https://huggingface.co/spaces/abidlabs/pytorch-image-classifier](https://huggingface.co/spaces/abidlabs/pytorch-image-classifier) using both web components and iframes.
* Instead of <code>3.0.18</code>, you can put whichever version of `gradio`, you'd like to run (a safe choice is the [latest stable version of Gradio](https://pypi.org/project/gradio/)).
Note: you can provide an *initial* height for your embedded demo by using the `initial_height` parameter. This height (which is 300px by default) is used to render the page appropriately until the demo loads, at which point the embedded demo takes up the height it needs for the demo. This would look like:
Notice that using web components requires importing javascript. If you cannot do this on your website, you can use Iframes instead. There are a few things to keep in mind:
* The URL to the iframe should be:
```html
https://hf.space/embed/PATH_TO_SPACE/+
```
* Iframes require a specified width and height to render correctly, so you should set the `width` and `height` attributes based on the size of the demo you are embedding.
* You must request the permissions that are needed for your demo to work. While different demos require different permissions, you could request all permissions as a catch all using the `allow` and `sandbox` attributes.
