---
title: Wizard
slug: docs/wizard
docTags: 
createdAt: 2024-11-22T12:01:19.869Z
---

Displays a multi-step wizard. Each panel should be created as a separate page and linked.

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/uU11OkstqUIyiKUBEDLqJ_image.png)

##

::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/HjNTCdzh2aAMvH-AwhCb-_image.png" size="84" width="2156" height="1380" position="center" showCaption="false"}

## Properties

General

Properties
General
Wizard name - name of the wizard used to identify it in the data layer
Panels - list of screens that have components for each step
Form Id - used to filter where data is saved and what is submitted on actions
Actions | Started 
Started event type - event name/type to emit on wizard start
Started Webhook URL - url to send request to on wizard start
Actions | Step 
Step event type - event name/type to emit on each wizard step
Step Webhook URL - url to send request to on each wizard step
Actions | Ended 
Ended event type - event name/type to emit on wizard completion
Ended Webhook URL - url to send request to on wizard completion
Progress
Show Progress - show/hide progress component
Show Progress Label - show/hide label of progress component
Progress Position - where to show progress component
Progress Visualisation - method of visualisation. Default: dots.
Progress Label Position - where to show progress label (relative to progress visualisation)
Progress Alignment - horizontal alignment of progress component
Styles section