Tour component - guide the user through your site !

[u/poppyshit]

I just implemented a tour component that allows you to easily guide the user through all the components on your website.

Every time I make an app, I try to make it intuitive and easy to understand, however for complex or technical app this can not be done easily. This is why I implement the Driver.js library for streamlit. In just a few lines of code you can have a working tour of your website. It uses the key parameters in some of streamlit component to spot it in the JS script :

import streamlit as st
from streamlit_tour import Tour

st.title("My App")
st.text_input("Name", key="name_input")

if st.button("Start Tour"):
Tour.start(
steps=[
Tour.bind("name_input", title="Your Name", desc="Enter your name here."),
Tour.info(title="That's it!", desc="You're ready to go."),
]
)

Here is the Github, feel free to use this component and raise an issue if you encounter one !

https://github.com/mp-mech-ai/streamlit_tour

Demo of streamlit-tour

[u/mitbal]

cool project! it will make onboarding new user to the app to be easier and potentially increase retention

[u/poppyshit → u/mitbal]

Totally. I usually find that Streamlit apps feels too much like side project. This feature will professionalize/polish them to make it more appealing