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