Buy me a coffee button on streamlit app

[andyolivers]

Hi.
I deployed an app on the cloud, that includes a “buy me a coffee” button. I used the code snipped below for the button, however it is overlapping some of the text shown on the app itself. Is there any other way to include a “buy me a coffee” button on a streamlit app?

App: https://snipdna.streamlit.app/
Source code: GitHub - andyolivers/llm-snp-dna

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="adof6qkj3h" 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,
)

[mathcatsand]

Check out the component in the streamlit-extras library: ☕ Buy Me a Coffee Button - streamlit-extras

Depending on what you want, you can tweak the CSS to do different things, but the streamlit-extras component has some options built-in so it may be enough that you don’t have to manually do more. If not, just describe what you’re looking for specifically and someone might be able to suggest the necessary CSS adjustments.

[andyolivers]

Thank you, didn’t know about it. That solves this issue