Skip to content
Docent

Customize

Slots and templates

Replace one part of the popover with your own content, and bundle a look under a name that tours can pick.

Customization comes in levels. Use the lowest one that does the job:

You want to Use
change colors, corners, width or font theme tokens
restyle a part a little CSS parts
replace one part with your own content slots, on this page
reuse a whole look across tours by name templates, on this page
draw the entire popover yourself headless mode

Slots

Section titled “Slots”

A slot is one region of the built-in popover: header, title, close, body, media, footer, progress or buttons. Give the renderer a function for a slot and it is called for every step.

The function receives the render context and returns one of:

  • a DOM Node or a string, to replace the region,
  • null, to remove the region,
  • undefined, to keep the default.

This example replaces the step counter with dots and removes the close button:

createTour(tour, {
  renderer: {
    slots: {
      progress: (ctx) => {
        const dots = document.createElement('div')
        dots.className = 'dots'
        for (let i = 1; i <= ctx.progress.total; i++) {
          const dot = document.createElement('i')
          if (i === ctx.progress.current) dot.className = 'on'
          dots.appendChild(dot)
        }
        return dots
      },
      close: () => null,
    },
  },
})

Your content is projected through native shadow DOM slots, so it stays in your page’s DOM. Your CSS styles it, and your framework’s event handling keeps working.

Templates

Section titled “Templates”

A template bundles a theme, slots and CSS under a name. Register templates in code, then let each tour pick one by name in its JSON:

createTour(tour, {
  renderer: {
    templates: {
      card: {
        theme: { radius: '16px' },
        slots: { progress: dots },
        css: '.popover { border: 1px solid rgba(124, 58, 237, 0.35) }',
      },
    },
  },
})
// in the tour JSON
options: { template: 'card' }

This split is deliberate. Code stays in your app, while the JSON only says “use card”, so a builder or an API can choose looks without shipping functions. Set the renderer’s template to apply one when a tour names none.

Templates can also set arrow, spotlight and overlay, so a “hint” template could use no overlay and a pin arrow everywhere.

LiveA template with CSS, picked by name in the tour