Hey , I am working on a streamlit application and I want to integrate my chatbot that I made with dialogflow, the problem is that the message bar is not displayed completely, I have to show you the difference between using a page HTML and the web app with streamlit, the chatbot must be displayed in streamlit as in the html page . I will show the code that i used :

Hi @Gheouany_Saad, welcome to the Streamlit community!

I didn’t realize that integrating a chatbot with a Streamlit app could be this simple. Really cool!
I tried embedding my own chatbot and ran into the same issue. To display the entire chatbot window, try increasing the value of the height parameter for components.html. The default value for height is 150 pixels.
Increasing to height=700 worked perfectly on my end:
import streamlit as st
import streamlit.components.v1 as components
components.html(
"""
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger
chat-title="Web-Search"
agent-id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
language-code="en"></df-messenger>
""",
height=700, # try various values to see what works best (maybe use st.slider)
)
Let us know if increasing the height of the frame works 
Happy Streamlit-ing! 
Snehan
1 Like


