Tours
The product tour walks a new reader round a screen one step at a time: a card beside each thing that matters, the rest of the page dimmed, and Back, Next and Skip. Each step is a tour step element whose content is your own markup, pointed at its target by a CSS selector.
A step can ask the reader to try the real control — the cut-out lets the pointer through, and doing it moves the tour on. Tours branch, wait for parts of the page that arrive late, and ask your page before moving forward. The card follows its target as the page scrolls and resizes, flips to the side with room, and is a proper dialog for screen readers, with focus returned where it was when the tour ends. Whether someone has seen a tour is yours to remember: the tour stores nothing.
A first look at a sales dashboard
Six steps. On the second, change the period yourself and the tour moves on when you do. This page remembers that you have taken the tour, as an application would, from the tour's end event.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-select id="tr-period" label="Period" hide-label value="month" style="inline-size: 11rem"> <bmx-option value="week">This week</bmx-option> <bmx-option value="month">This month</bmx-option> <bmx-option value="quarter">This quarter</bmx-option> </bmx-select> <bmx-tour id="tr-tour" label="Dashboard tour"> <bmx-tour-step value="welcome" heading="Welcome to Sales">How the business is doing, at a glance. Six short steps.</bmx-tour-step> <bmx-tour-step value="period" target="#tr-period" heading="Choose the period" placement="bottom-start" interactive advance-on="bmxChange">Try it: pick another period. Everything on the page follows, and the tour moves on when you do.</bmx-tour-step> <bmx-tour-step value="kpis" target="#tr-kpis" heading="The three numbers that matter">Revenue, orders and the average order for the period you chose.</bmx-tour-step> <bmx-tour-step value="chart" target="#tr-chart" heading="Where it comes from" placement="top">Revenue by region. North is ahead again this month.</bmx-tour-step> <bmx-tour-step value="share" target="#tr-share" heading="Send it on" placement="left">Share a link to this view, with the period you chose.</bmx-tour-step> <bmx-tour-step value="done" heading="That's it">You can take this tour again from the Help menu.</bmx-tour-step> </bmx-tour>
One tour, two paths
The first card asks what the reader does, and the tour goes a different way for each answer. Steps say which step follows them, so both paths end on the same card.
We'll show you the parts you'll use.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-tour id="tr-branch" label="Help desk tour">
<bmx-tour-step value="who" heading="What do you do here?">
<p style="margin: 0 0 10px">We'll show you the parts you'll use.</p>
<div style="display: flex; gap: 8px; flex-wrap: wrap">
<bmx-button size="sm" id="tr-agent">I answer tickets</bmx-button>
<bmx-button size="sm" variant="outline" id="tr-lead">I run the team</bmx-button>
</div>
</bmx-tour-step>
<bmx-tour-step value="agent-queue" target="#tr-queue" heading="Your queue">The oldest ticket is at the top. Take it, and it is yours.</bmx-tour-step>
<bmx-tour-step value="agent-replies" target="#tr-macros" heading="Saved replies" next="end">Answers to the questions people ask most, ready to send.</bmx-tour-step>
<bmx-tour-step value="lead-sla" target="#tr-sla" heading="Deadlines">Tickets close to their target time are counted here.</bmx-tour-step>
<bmx-tour-step value="lead-rota" target="#tr-rota" heading="The rota" next="end">Who is on, who is off, and who covers for whom.</bmx-tour-step>
<bmx-tour-step value="end" heading="You're set">Good luck with the queue.</bmx-tour-step>
</bmx-tour>
Steps the reader has to finish
Setting up a profile. Next on the first step asks the page first, and the page says no until the name is filled in. The last step points at a confirmation that only appears a moment after Save is pressed: the step waits for it.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-input id="tr-name" label="Your name" autocomplete="name"></bmx-input> <bmx-input id="tr-team" label="Team" placeholder="Optional"></bmx-input> <bmx-tour id="tr-check" label="Profile set-up"> <bmx-tour-step value="name" target="#tr-name" heading="Start with your name" interactive>Type your name, then press Next.</bmx-tour-step> <bmx-tour-step value="save" target="#tr-save" heading="Save it" interactive advance-on="click">Press Save.</bmx-tour-step> <bmx-tour-step value="saved" target="#tr-saved" heading="Saved" wait-for="3000">Your profile is saved. You can change it at any time.</bmx-tour-step> </bmx-tour>
A single hint, page left usable
Not every tour is a tour. One step, no dimming and no progress: a pointer to something new that the reader can dismiss, while the rest of the page carries on working.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-tour id="tr-hint" label="What's new" backdrop="false" show-progress="false"> <bmx-tour-step target="#tr-ai" heading="New: Summarise" placement="bottom">Turns a long thread into five lines. Select some text first, or summarise the whole document.</bmx-tour-step> </bmx-tour>