Summary
I want to add buymeacoffee.com floating widget in one of my pages of streamlit app. I tried using components api, but it doesnât appear to be floating and the position of the widget is fixed
How to add a floating widget in streamlit app?
I want to add buymeacoffee.com floating widget in one of my pages of streamlit app. I tried using components api, but it doesnât appear to be floating and the position of the widget is fixed
How to add a floating widget in streamlit app?
Youâll need to use a little bit of css to get the button to be positioned where you want. Note that this particular method only works if you only have 1 iframe on the page. If you have more, it will get more complicated. [Edit: I updated it to select only iframes with this exact width, which will probably keep it from affecting other iframes]
import streamlit as st
from streamlit.components.v1 import html
button = """
<script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="blackarysf" data-color="#FFDD00" data-emoji="" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#000000" data-font-color="#000000" data-coffee-color="#ffffff" ></script>
"""
html(button, height=70, width=220)
st.markdown(
"""
<style>
iframe[width="220"] {
position: fixed;
bottom: 60px;
right: 40px;
}
</style>
""",
unsafe_allow_html=True,
)
This works for me. Thank you very much
Is there a way to use âwebsite widgetâ script instead of âwebsite buttonsâ script?
When I use website widget it doesnât open up when I click on it, like it is supposed to
No, I donât think that will work very easily, as there seem to be some restrictions about what the browser allows you to do from inside of an iframe.
Hereâs the error I get in the javascript console when I try:
Thereâs now a Streamlit Extra for that https://extras.streamlit.app/Buy%20Me%20a%20Coffee%20Button
Weâre looking to add a website widget in a streamlit app similar to bmac. However, it changes in size when engaged with, and interacts with other webcomponents from our monetization platform for users (mash.com). It is JS based, and works across most platforms. Is there a way to solve this e.g., mimick the widget being in the âheaderâ. Hereâs an example of an issue that one of our users was having. Weâre seeing lots of new interest for app-builders like streamlit (lots of activity on replit atm), and want to find a way to easily resolve and provide support.
You can try some of the widgets, see some of the code live at
â https://lightning.store/
â https://artgrinch.xyz/
â @getmash/client-sdk - npm
Best,
Jared