Embed Streamlit apps anywhere with PixieBrix

Show the Community!
1

Hi everyone! :wave:

I thought it would be cool to layer Streamlit apps into websites and SaaS tools, and pass context from the page into the app.

Our method was to use a browser extension to embed the app as an iframe and pass inputs via URL parameters; (full disclosure I work for PixieBrix and we’re a low code extension builder)

We tested this out by embedding Max Bolger’s NFL Receiver dashboard into the CBS Sports Fantasy Football player profile page. The app dynamically updates based on which player we’re viewing.

I’d love to get your feedback (good or bad) on this concept or any use cases you’d like to see?

Here’s a tutorial: Embed Streamlit apps anywhere with PixieBrix (10 min)

5 Likes
2

yes, iframe can add any python or other url to your html web page

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>test</title> 
</head> 
<body>

<iframe src="http://localhost:8501/"></iframe>

</body>
</html>
1 Like
3

Hi @BeyondMyself, I wanted to clarify that the example embeds Streamlit into a 3rd-party website (cbssports.com), which I don’t control. This is why I’m using a browser extension.

This method also lets you embed Streamlit into SaaS apps like Salesforce, so you’re not limited to the set of app builders and visualization tools available in the AppExchange.

The extension is open source if you’d like to check it out: https://github.com/pixiebrix/pixiebrix-extension

3 Likes
4

Why does this method work for localhost URL but not my network?

I’m trying to embed my streamlit app into my WordPress site and when I use the network URL it does not render anything but the localhost works just fine.

Thanks in advance for any help.

5

you need to replace the localhost with your real IP address or domain name

1 Like
6

Hi @amc007,

What does the frame look like? Is it showing an error message, or just showing as blank?

Also, are you using Streamlit’s hosting service or your own domain/host? If you’re using your own, you might want to double-check that: 1) you’re using https:, 2) you don’t have an Adblocker or other extension running that might block that URL

Todd

7

this look pretty nice