Using Chatbot dialogflow in Streamlit App

Using Streamlit
2

Hi @Gheouany_Saad, welcome to the Streamlit community! :partying_face: :tada:

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

image
image1165Ă—997 25.7 KB

Let us know if increasing the height of the frame works :slightly_smiling_face:

Happy Streamlit-ing! :balloon:
Snehan

1 Like