Package: dash-yada
dash-yadadash-yadalets you easily create interactive tutorials for your Dash app.Installation$pipinstalldash-yadaLive DemoCheck out theLive Demoto see dash-yada in action!See thecodefor this demo in the /docs folder.More ExamplesSee more examples in the/examplesfolderQuickstartTo get started, simply add theYada()component to the app's layout.
You will see the Yada image, in the top right corner.  On hover, it displays a default welcome message.importdashfromdashimporthtmlimportdash_bootstrap_componentsasdbcfromdash_yadaimportYadaAIOapp=dash.Dash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])app.layout=dbc.Container([YadaAIO(yada_id="yada"),html.H4("My Dashboard",className="p-3 bg-primary text-white text center"),],fluid=True,)if__name__=="__main__":app.run_server(debug=True)The default yada image is fromFlaticon.com.  If you use this image, please include anattribution.Customizing the Yada imageUse the following props to change the yada image and the hover message:yada_src(string; optional): Location src of the yada image.hover_message_dict(dict; optional): Props to display for the message when yada is not clicked and not playing a script.Thehover_message_dicthas keys:name(string; optional) The default name is "yada".  Ifnameis""a header is not displayed.greeting(string; optional) Ifgreetingis""the default greeting is not displayed.style(dict; optional) Sets the style of the hover message card.Set the initial position and size with CSS:The default CSS for the Yada image when the app starts is:.yada.sleeping{right:30px;top:5px;height:50px;width:35px;}yada_img="https://user-images.githubusercontent.com/72614349/236646464-1471e596-b234-490d-bf84-e2ef7a63b233.png"hover_message_dict={"name":"Hedwig","greeting":"Let's explore! Just pick a tour and we'll get started","style":{"backgroundColor":"lightgreen"}}yada=YadaAIO(yada_id="my_yada",yada_src=yada_img,hover_message_dict=hover_message_dict)Adding scriptsYou can add one or more scripts for the user to select the tour.Yada navigates by CSS selector, so it can go to any element on a page.  Learn more about selectors atMozilla web-docsFor example you could use a component'sidprop like this:"#component_id".  You can use a CSS class selector like this:".close-btn"scripts(dict of list of dicts; optional):  Dictionary of keys to scripts:each key will have an array of:
{target (string; required), convo (string; required), action (string; optional), action_args (string; optional)}Here is a simple example of one script with one step. You can find more script examples in the demo app:yada_scripts.py fileimportdashfromdashimporthtmlimportdash_bootstrap_componentsasdbcfromdash_yadaimportYadaAIOapp=dash.Dash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])yada=YadaAIO(yada_id="yada",scripts={"Intro":[{"target":"#title","convo":"Welcome to My Dashboard tour!",},]},)app.layout=dbc.Container([yada,html.H4("My Dashboard",className="p-3 bg-primary text-white text center",id="title",),],fluid=True,)if__name__=="__main__":app.run_server(debug=True)Styling the tour stepsThe steps in the script are displayed in adbc.Offcanvascomponent.  You can change the style using thesteps_offcanvas_styleprop.Note that in thescriptsprop you can also use Markdown in theconvoThis example shows how to style thedbc.Offcanvascomponent like in the live demo.importdashfromdashimporthtmlimportdash_bootstrap_componentsasdbcfromdash_yadaimportYadaAIOapp=dash.Dash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])steps_offcanvas_style={"boxShadow":"0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)","margin":"8px auto","padding":"0px 24px 5px","backgroundColor":"var(--bs-gray-500)","color":"white","borderRadius":12,"maxWidth":800,}yada=YadaAIO(yada_id="yada",steps_offcanvas_style=steps_offcanvas_style,scripts={"Intro":[{"target":"#title","convo":"""### Welcome to My Dashboard tour!The tour steps are are displayed in an offcanvas component and can be styled with the `steps_offcanvas_style` prop.Note that you can use Markdown in the "convo" prop.""",},]},)app.layout=dbc.Container([yada,html.H4("My Dashboard",className="p-3 bg-primary text-white text center",id="title",),],fluid=True,)if__name__=="__main__":app.run_server(debug=True)Referencedash-yada.YadaAIO is an All-In-One component.  Learn more about AIO components in theDash documentation.Keyword arguments:

    - yada_id (string; optional):
        The ID used to identify this component in Dash callbacks.

    - hover_message_dict (dict; optional {name, greeting, style}):
        Props to display for the message when yada is not clicked and not playing a script.
        If not defined, the default name is "yada".  Set name to "" to not display a header.  Set message to "" to not display a greeting
        {name (string; optional), greeting (string; optional), style (dict; optional}

    - script_message (dict; optional):
        String to display for the message when yada is clicked and not playing a script.

    - play_script_props (dict; optional):
        Props to control the options for the play button to run the scripts. dbc.Button props.

    - yada_src (string; optional):
        Location src of the image that you want to display for yada.

    - scripts (dict of list of dicts; optional):
        Dictionary of keys to scripts:
            - each key will have an array of a directory:
            {target (string; required), convo (string; required), action (string; optional),
            action_args (string; optional)}

    - next_button_props (dict; optional):
        Props to control the options for the next button. dbc.Button props.

    - prev_button_props (dict; optional):
        Props to control the options for the previous button. dbc.Button props.

    - end_button_props (dict; optional):
        Props to control the options for the end button. dbc.Button props.

    - steps_offcanvas_style (dict; optional):
        Style to control the offcanvas style while playing a script.