How to add a floating widget in streamlit app?

🎈 Using Streamlit
1

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?

2

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,
)
2 Likes
3

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

4

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:

1 Like
5

There’s now a Streamlit Extra for that https://extras.streamlit.app/Buy%20Me%20a%20Coffee%20Button