Starting with Streamlit version 0.73, it is now possible to embed Disqus comments in your Streamlit apps with Streamlit Disqus
This commenting service is used by many blogs and website, and will be useful to gather feedbacks on your apps.
If you have hosted your app on Streamlit Sharing, and have created a topic in Show the Community! you might be interested to embed comments from your topic instead!
I agree, having the ability to comment on an app could work really well in an educational/work environment, if the app represents an experiment or other analysis
I’ve been investigating a little on that auto resize issue, and it seems that there is no obvious way to do it as far as I understood. If there is one, I’d be glad to hear it
For testing purposes I'm using a MutationObserver to get notified when I should update the frame height.
However, calling Streamlit.setFrameHeight() causes a re-render which makes Disqus reload constantly. The reason is that setState is called everytime a streamlit:setFrameHeight message is sent.
To support setting the height without having to reload the component each time, we could rely on a react reference to get the component’s DOM, and set its height.
This change would affect the ComponentInstance class in frontend/src/components/widgets/CustomComponent/ComponentInstance.tsx.
Small update, I’ve created a GitHub issue and made the changes in a fork. With this fix, my Disqus component can update its height with no re-render issue.
I’ve made some tests, and unfortunately Disqus doesn’t like to be in an iframe which doesn’t have allow-same-origin.
I saw that it was modified for security reason, but I don’t know if we could add it back in specific cases, maybe tag the component as unsafe and warn the user about it.
However, Disqus does load correctly with st.html as it has allow-same-origin, but I cannot change the height dynamically from there.
One solution would be to have a height="auto" parameter, but even that is not that simple as there’s no easy way to support auto resizing iframes. The way I implement it is inspired from those two links (from the same author):
Awww, shoot. Yeah, it was disabled for security reasons - and yeah, it causes issues. We’re going to come up with a solution for this before launch - it might be a halfway measure to begin with (e.g. tagging the component as unsafe, as you suggest). Ultimately, we may end up serving components from a different port as Streamlit itself (running two webservers inside the Streamlit library) in order to allow-same-origin without the security concern that comes from serving components on the same origin.
I have a bit of annoying Components API news that affects your Disqus component:
For the upcoming components open beta launch, we’re going to remove allow-same-origin from st.html (which means your Disqus workaround will no longer work )
We’re not currently implementing a “allow users to opt in to unsafe components” workaround
There are several competing goals that led to this decision:
First, we want to make sure that Streamlit’s iframes are properly sandboxed. This means that we can’t use the allow-same-origin sandbox flag for any iframe content that is being served by the Streamlit webserver.
Currently, all st.html and st.declare_component iframes are served by Streamlit webserver, which means they cannot use the allow-same-origin flag.
There are a number of potential solutions to this issue (an “unsafe” flag, like you suggested; running a 2nd components-only webserver from within the Streamlit process; requiring that allow-same-origin components be served from a CDN or some other server; etc). We haven’t decided which of these - if any - we like.
We want to release the open beta soon - probably too soon to really evaluate all the allow-same-origin solutions and think about their impacts on the rest of Streamlit - and we don’t want to half-ass a solution that we later regret.
So, I have egg on my face for speaking too soon when I said “we’re going to come up with a solution to this before launch”! Apologies for that
(And for anyone else reading this thread but not sure what it’s all about, the MDN iframe reference page has a decent explanation of the folly of the allow-same-origin + allow-scripts iframe sandbox tokens for iframe content that’s served from the same origin as its host page.)
I think a solution like @tim’s could work as iframe() still has the allow-same-origin flag. I’d consist in spawning a server in a different thread which would be exposed locally only. I’ll try to investigate that this week-end, but I can’t guarantee anything for now.
Unfortunately with this method, there’s no way to auto-update the height.
Yeah, I think @okld is right - you could even serve the Disqus content from a completely different machine (doesn’t have to be in the Streamlit process).
We’re evaluating ways to have height auto-updating work even outside of st.declare_component, but yeah this doesn’t exist yet, so you currently need to hardcode an iframe’s height inside your Python script.
I am able to add Facebook Comments Plugin ( or Disqus) component to my site: https://covid19.aipert.org . The trick as Synode suggests is putting these plugins to another html page and show it through iframe() in the streamlit app. I solve the height issue by using scrolling=True.
Thanks for stopping by! We use cookies to help us understand how you interact with our website.
By clicking “Accept all”, you consent to our use of cookies. For more information, please see our privacy policy.
Cookie settings
Strictly necessary cookies
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
Performance cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
Functional cookies
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
Targeting cookies
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.