Tour component - guide the user through your site !

Posted by poppyshit@reddit | Python | View on Reddit | 2 comments

What my project does:
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

Target audience:

This is still in early development so I wouldn’t yet recommend to use it in production but my goal is to make robust enough to make it possible.

Comparison:

This type of guided tour was inexistent in Streamlit so here it is.