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.
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:
- From the Dashboard by clicking your project's open configurator button
- 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.
- Main menu
- My apps
- Data in\Actions
- Data out
- Data store
- 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.
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.
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.
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.
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 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.
It opens a panel where you can:
- Change your plan
- Toggle Wized branding
- Change your project's domain
- Access the project's Embed Code
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.
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.
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.
Let's you toggle between a dark and light version of the site.
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:
Shows which project you're currently working on.
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.
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.
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.
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.