How to add a floating widget in streamlit app?

[TracingInsights]

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 Button or a Widget to your website?

How to add a floating widget in streamlit app?

[blackary]

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,
)

[TracingInsights]

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

[blackary]

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:

Uncaught DOMException: Failed to construct ‘PaymentRequest’: Must be in a top-level browsing context or an iframe needs to specify allow=“payment” explicitly

[blackary]

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

[jarednxx]

@blackary

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.

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.

Integrated iFrame for donations weird formatting issues

Summary I’m the founder of Mash and we have a number of widgets (e.g., components, iframes) that talk to each other, and embeddable in JS on almost any platform – donations per one-click, per page view, app run, and locking specific types of content with per use monetization. One of our users is trying to deploy the features on streamlit, but the formatting/result is behaving in a bizarre fashion. We’re trying to figure out how to fix it, and then promote streamlit as a platform that Mash work…

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