Using Chatbot dialogflow in Streamlit App

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 :
Capture d’écran 2021-05-16 164039


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

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

Happy Streamlit-ing! :balloon:
Snehan

1 Like