How do I embed an existing non streamlit webpage to my streamlit app

🎈 Using Streamlit
1

Summary

So I need to embed spotify onto my streamlit app for a project, how would I go about embedding spotify’s homepage onto my app? iirc, iframes only work if I’m going to embed a streamlit.app webpage into my app

Any help is much appreciated

1 Like
2

Have you checked st.components.v1.iframe? It should work with any url source.

1 Like
3

Demo with solution & code sample:

https://shinosuke-lab-2.streamlit.app/

Iframe embedding:

For the iframe you can try something like this:

import streamlit as st
import streamlit.components.v1 as components

def run():
    iframe_src = "https://open.spotify.com/embed/track/59BweHnnNQc5Y55WO30JuK?utm_source=generator"
    components.iframe(iframe_src)
   # You can add height and width to the component of course.

if __name__ == "__main__":
    run()

Whole HTML embedding:

As you can read on the Streamlit app I deployed, there’s always a problem with embedding full HTML pages, so you’ll have to find a workaround on your own.

I suggest here (for HTML embedding not iframe) to build an inner HTML component (a webpage within your Streamlit app).
If you BUILD and entire HTML yourself within your app (for structuring purposes and clean code, you can put it in a side file, e.g: html.py and call it within your main app.py), it will render fine as a HTML component unlike calling a webpage from somewhere else (some website work).

PS: You can still embed your GitHub Pages website, even if you use a custom domain name. I personally have few static pages, and tried both a GH Pages with its native github.io URL and a GH Page with a custom domain using porkbun.com, both have HTTPS enabeled, and both were embedded as iframes while if you try to embed https://discuss.streamlit.io it won’t work.

3 Likes
4

Oh alr! thanks a lot, I’m trying to do exactly that rn, appreciate the help!!

1 Like
5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.