# Wizard

### **appmixer.ui.Wizard**

![](https://3013747694-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LATDgYqVMe0hChW7efU%2F-MScMuxqWH7WYUM1HbZ9%2F-MSd9Kn72ZXYr2qk0gsq%2FScreenshot%202021-02-04%20at%2001.30.00.png?alt=media\&token=5f3cdc73-4ff0-4909-8375-4152126214a5)

The *appmixer.ui.Wizard* is a UI widget that creates a custom integration instance.

| Method                       | Description                                                                                                                                                                                                                                          |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `appmixer.ui.Wizard(config)` | Constructor function that accepts `config` object. The `config` object must contain at least the `el` property that points to a container DOM element where the Wizard will be rendered.                                                             |
| `open()`                     | Render the Wizard inside its container.                                                                                                                                                                                                              |
| `close()`                    | Close the Wizard.                                                                                                                                                                                                                                    |
| `on(event, handler)`         | React on events of the Wizard widget. See below for the list of events the Wizard widget supports.                                                                                                                                                   |
| `off([event, handler])`      | Remove event listeners. If no arguments are provided, remove all event listeners. If only the `event` is provided, remove all listeners for that event. If both `event` and `handler` are given, remove the listener for that specific handler only. |
| `reload()`                   | Refresh the Wizard.                                                                                                                                                                                                                                  |

### Wizard Events

| Event        | Callback           | Triggered when ...                                                  |
| ------------ | ------------------ | ------------------------------------------------------------------- |
| `flow:start` | `function(flowId)` | The user clicked the submit button and the integration was started. |
| `cancel`     | `function()`       | The user clicked the cancel button.                                 |

### Example

```javascript
var wizard = appmixer.ui.Wizard({
    el: '#your-wizard-div',
    flowId: 'your-integration-id',
});
wizard.on('flow:start', function(flowId) {
    wizard.close();
});
wizard.open();‌
```