Skip to content

Split the section about embed=true parameter of embedded Streamlit apps #709

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
+28 −7
Open

Split the section about embed=true parameter of embedded Streamlit apps #709

Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0febb6d
Split the section about embed=true parameter of embedded Streamlit apps
whitphx Mar 14, 2023
44a1ba5
Update
whitphx Dec 6, 2023
c5ea317
Update docs/hub/spaces-sdks-streamlit.md
whitphx Dec 6, 2023
5f5ebea
Update docs/hub/spaces-sdks-streamlit.md
whitphx Dec 6, 2023
34b05ca
Merge branch 'main' into streamlit-embed-param
whitphx Dec 6, 2023
55a15cc
Replace NimaBoscarino/hotdog-streamlit with whitphx/hotdog-streamlit …
whitphx Dec 6, 2023
492bd0b
Add inner-page anchor link
whitphx Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 24 additions & 3 deletions docs/hub/spaces-sdks-streamlit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,34 @@ You can use the HTML `<iframe>` tag to embed a Streamlit Space as an inline fram

For example, the demo above can be embedded in these docs with the following tag:

```
<iframe
src="https://NimaBoscarino-hotdog-streamlit.hf.space"
title="My awesome Streamlit Space"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we also include the height, as it is mentioned in your comment below? What about all the allow settings, are they required?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The height used below is an ad-hoc optimization, so I think leaving this sample code as-is without height would be ok as an example.

></iframe>
```

<iframe
src="https://NimaBoscarino-hotdog-streamlit.hf.space"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This Space is not working right now, so the embed won't work either.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I created a new Space with the same code in my namespace.

frameborder="0"
height="600"
title="Streamlit app"
class="container p-0 flex-grow space-iframe"
allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"
></iframe>

Please note that, for the versions <1.19, scrolling is disabled and you'll need to set the height of the iframe enough to fit the embedded Streamlit app's content or use the auto-resizing technique described below.

## Embed mode

You can use the `embed=true` query parameter in the URL to activate the embed mode of the Streamlit app, removing some spacers and the footer for slim embeds.

```
<iframe
src="https://NimaBoscarino-hotdog-streamlit.hf.space?embed=true"
title="My awesome Streamlit Space"
height="364"
></iframe>
```

Expand All @@ -94,9 +118,6 @@ For example, the demo above can be embedded in these docs with the following tag
sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"
></iframe>

Please note that we have added `?embed=true` to the URL, which activates the embed mode of the Streamlit app, removing some spacers and the footer for slim embeds.


## Embed Streamlit Spaces with auto-resizing IFrames

Streamlit has supported automatic iframe resizing since [1.17.0](https://docs.streamlit.io/library/changelog#version-1170) so that the size of the parent iframe is automatically adjusted to fit the content volume of the embedded Streamlit application.
Expand Down