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

huggingface · Mar 14, 2023 · f88d84e · f88d84e
1 parent c0a44d9
commit f88d84e
Showing 1 changed file with 23 additions and 2 deletions.
diff --git a/docs/hub/spaces-sdks-streamlit.md b/docs/hub/spaces-sdks-streamlit.md
@@ -76,10 +76,33 @@ 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"
+></iframe>
+```
+
+<iframe
+  src="https://NimaBoscarino-hotdog-streamlit.hf.space"
+  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>
+
+## Embed mode
+
+You can use the `embed=true` query parameter to activate the embed mode of the Streamlit app, removing some spacers and the footer for slim embeds.
+Please note that this parameter disables scrolling in the iframe, so you'll need to set the height of the iframe enough to fit the embedded Streamlit app's content.
+
 ```
 <iframe
   src="https://NimaBoscarino-hotdog-streamlit.hf.space?embed=true"
   title="My awesome Streamlit Space"
+  height="364"
 ></iframe>
 ```
 
@@ -94,7 +117,5 @@ 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.
-
 
 Additionally, you can checkout [our documentation](./spaces-embed).