Configurator

In this lesson, you will learn the basics of the Wized Configurator. We'll give you a brief overview of each panel.

Learn your way around the Wized Configurator.

We'll cover:

1. Accessing the configurator
2. Anatomy of the configurator

The Wized Configurator allows you to visually build your web app. Think of it as a powerful logic component stacked on top of your Webflow website.

You can connect your site with other apps, receive data, send data, update states and much more.

As you build your app, the Wized Configurator creates clean and light-weight code, without slowing down your site.

Accessing the configurator

There are 2 ways to access the Wized Configurator:

1. From the Dashboard by clicking your project's open configurator button
2. From Project settings by clicking Configurator in the upper right corner

Add staging domain

The first thing you need to do here is add a webflow staging domain of your project.

Anatomy of the configurator

The Configurator consists of the main canvas and a set of toolbars and panels.

Here's an overview:

• The Canvas
• The left toolbar and panels
• The top bar

The left toolbar

The left toolbar contains tools which form the main functionality of Wized, and a few other helpful links.

These are:

• Main menu
• My apps
• Data in\Actions
• Data out
• Auth
• Settings
• Data store
• Debugger
• Get Support

Main menu - wized logo

When you click the Wized icon, you'll see a menu which allows you to navigate to the Dashboard, or the project settings.

My apps

This opens the Apps panel from where you can connect to other apps.

From the dropdown, you can select one of the most commonly used apps. If the app you want to connect with isn't listed, you can choose Rest API.

Rest API allows you to connect to almost any app out there.

Data in

This opens the Data in panel from where you can configure requests that get data from your apps.

This panel allows you to see and change incoming data from a request. You can filter, sort, or limit incoming data.

You can also change fields using logic or formulas, set up triggers, and choose what happens after the request.

Actions

The Action panel shows all your Wized elements, the actions that you have on the page, and it let's you create new actions.

Actions allow you to trigger requests and layout changes based on the user's input, request status or page load.

Data out

Similar to data in, the data out panel let's you configure requests.

Data out allows you to see and change outgoing data from a request. You can filter, sort, or limit data that you want to send to your apps.

Just like data in, data out let's you change fields using logic or formulas, set up triggers, and choose what happens after the request.

Auth

Auth is short for authentication. This panel let's you build login and signup flows with ease.

You can create login, signup, reset password and set new password forms

Once you configure this option, you can start building app logic based on user information.

You can protect content from unauthorized users, customize layout based on a user's plan and much more.

Settings

It opens a panel where you can:

• Change your plan
• Toggle Wized branding
• Change your project's domain
• Access the project's Embed Code

Data store

The Data store is a place where you can find all of the data at your disposal. Here you can find data that is being requested from your apps. You can also find data that can be sent out like inputs, variables, query parameters and computed values.

Debugger

This opens the debugging panel. Here you can find any bugs you had or are currently having. For issues that are still present, you can click on the fix issue button to open the panel which is causing the issue.

Get support

The get support dropdown provides you with tools to make using the Configurator easier.

• Wized uni — allows you to browse Wized help center. From here, you can also navigate to the learning paths, articles or the Wized forum.
• Contact — opens a modal from where you can choose how you want to get in touch with us.
• Join our Discord — Gets you to our Discord channel
• Report bug — lets you report any bugs which you might be experiencing.

Light/Dark mode

Let's you toggle between a dark and light version of the site.

The canvas

The major area in the Configurator is the Canvas. It's where you can see changes on your site in real-time.

The top bar

The top bar provides a navigation panel and some useful tools to preview, save and publish your site. Starting from the left side and moving to the right, you have the following tools:

Project indicator

Shows which project you're currently working on.

Page indicator

Shows which page you are currently on. Clicking on the indicator opens the pages panel

Undo and Redo

Let's you undo or redo actions you took in the Configurator like adding a new action or setting up a filter.

Save indicator

Shows you when your project is being saved. Saving is indicated with gray ellipses (…), and when your work is saved, with a green checkmark. Note that your work in the Configurator is saved automatically.

Preview

The preview button simply opens your published project in a new tab. Note that the preview is always on the staging domain of your project.

Publish

Opens a modal from where you can publish your project. You can choose if you want to publish your project to a staging domain or a custom domain. Note that in order to publish your project to a custom domain, you'll have to upgrade to a paid plan.