How to add a floating widget in streamlit app?

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?

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

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:

1 Like

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