How do I change the Streamlit User Interface such that the chatbot appears as a small icon on the bottom right-hand side of my website that expands when clicked on?

[chloe1]

If you’re creating a debugging post, please include the following info:

1. Are you running your app locally or is it deployed? locally, not deployed yet

Hi all,

I would like to preface this by saying that I am very new to Streamlit. I am using it for the first time ever on a project.

In my project, I am creating a generative AI chatbot using the following github repository. It uses AWS Bedrock, Lambda, OpenSearch Serverless, CloudFormation, and S3 to build the chatbot, and Streamlit to test the chatbot in a locally hosted domain. This github repo is how I was introduced to Streamlit. The generative AI chatbot will allow customers on my website to query the chatbot about industry-related knowledge as well as about our digital products (predictive machine learning tools for our domain).

Here is what the chatbot looks like viewed as a Streamlit application in a locally hosted browser:

My questions:

1. How do I get the Streamlit application to look like a little icon on the bottom right-hand side of the page, which when clicked on, expands into a chatbot about half the size of the page, rather than a full-screen chatbot as seen in the image above? I saw on this forum question that you could use st.popover to potentially achieve this, but I can’t see any examples of it being used for this use-case, so it’s quite difficult to know how to achieve this desired look as someone who has never used Streamlit until now

2. How do I get the small icon/expandable chatbot overlain onto my website? As all of the deployed streamlit applications I’ve come across so far are whole-page applications, that show the Streamlit user interface. I hope this makes sense. The image above is the type of Graphic User Interfaces I’ve come across in Streamlit application examples, but what I am trying to achieve is this look:

small icon on bottom right-hand corner of AWS page:

which expands into a chatbot of about 1/4 the size of the webpage when clicked on:

I want it to appear like this on my webpage. I just used the AWS page as an example of what I am trying to achieve using Streamlit.

As a final clarification question, I was hoping that once I have built this GUI, I can use Streamlit oEmbed to retrieve an embed code to send to my website developer team, for them to simply embed with the existing website code. Is this right?

[raethlein]

Hey @chloe1, what you want to achieve will likely require custom CSS as we don’t allow right now this kind of positioning easily within Streamlit.

Here is an example that might go into the direction you are looking for

import streamlit as st

st.html(
"""
<style>
.stPopover {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

</style>
"""
)

with st.popover("Chat"):
  prompt = st.chat_input("Say something")
  if prompt:
    st.write(f"User has sent the following prompt: {prompt}")

This code puts the popover and chat in the bottom right corner:

I hope this gives you a starting point

With regards to oembed, I think you are right but I have not done it myself before so I am not 100% certain. Probably best would be to tackle this unknown upfront with a random UI and make sure that this is possible if it’s a hard requirement for you!

[chloe1]

Thank you @raethlein!

Just to clarify, in the screenshot you’ve provided the chatbot is a small icon as desired and the webpage behind it is blank. If i were to deploy what is shown in your screenshot on my webpage, would the white/blank screen be replaced by the contents of my webpage? Or is this the part you’re not too sure on regarding your comment about oEmbed? (:

[raethlein]

Oh yeah, the blank page in the background is the Streamlit app itself. I assume you would need to adjust the width and height of the entire Streamlit app to make it overlay properly over your website
My comment about oembed is mainly about how exactly to use as I have not looked into that myself, so not tied to the styling. I hope that makes sense