What is Wized?

Wized is a tool for visually creating JavaScript, the same way Webflow is a tool for visually creating HTML and CSS.

JavaScript lets you add much more functionality to your Webflow website, such as

• Sending data to external tools like ChatGPT, and displaying the result on your Webflow website
• Creating a personalised ‘logged in’ experience for your users
• Letting users submit content to your website, e.g. a Jobs Board
• Creating a data-powered web application by connecting to a backend service like Airtable, Supabase, Xano, Firebase, etc.

Wized lets you visually build out all kinds of ‘logic’ that makes things happen on your website based on actions that a user takes.

It allows us to make a website interactive and to link in 3rd party services and databases without having to write a lot of JavaScript. We call this kind of website a ‘web application’.

Wized is a low-code tool. To get the most out of it you will be writing some JavaScript. Wized makes this easy to do by giving you a visual editor that gives you quick access to the different inputs, variables, and elements that you want to manipulate and control in your web app. Many users who struggle to pick up JavaScrip on its own find it significantly easier to use it inside of Wized, as a lot of the complicated coding is handled for you

You will need to know the basics of JavaScript in order to use Wized. If you don’t know it, you can pick up the basics from our tutorial videos. Many Wized users also use AI tools like ChatGPT and Claude to write JavaScript for use inside of Wized.

Let’s look at an example of what we can do with Wized - creating a ‘Story Generator’ using Webflow, Wized, and ChatGPT, then storing these stories in Airtable.

Here is what we need to set up:

1. When a user clicks the ‘Generate Story’ button, their ‘story prompt’ text is sent to ChatGPT’s API.
2. We wait for the response to come back from ChatGPT. When it does, display this on the page in a text element.
3. We then send the ‘story prompt’ and the response from ChatGPT to Airtable so that we can keep a record of all stories that are generated.

In this web app, the frontend that users see and interact with is built with Webflow. It has a form that users fill out.

Wized is used to set up the logic that says ‘send this information to ChatGPT when the user clicks the submit button, and display the result on the page.’

Wized is also used to send the story prompt, and the result, to Airtable for storage.

Click here to create your own story!

Click into the dropdown below to see a short tutorial on how this was made, as well as Webflow and Wized ‘read-only’ links to look inside the project.

Explore this Web App Example

Links:

Webflow site

Webflow Read-Only

Wized Read-Only

Wized doesn’t always have to connect to 3rd party services like ChatGPT, or databases like Airtable. It can also be used on its own with Webflow.

Here’s an example - a Webflow Quote Calculator.

This is a simple form build in Webflow.

Wized is used to create a ‘variable’ that tracks the total price using logic that we write with JavaScript. It also displays the value of this variable at the end of the calculator and updates it as the form inputs change.

LEGO Toy Analogy

Analogies are useful to help us understand new concepts.

Here we imagine a web app built with Webflow and Wized as a custom LEGO car:

Imagine You're Building a Custom LEGO Car

• Webflow: Think of Webflow as the box of LEGO blocks you use to create the outside of your car. You snap together different pieces to make your toy look exactly how you want—bright colors and cool shapes. This is what Webflow does for your website's design and layout, letting you visually create the parts that people see and interact with. Webflow provides the blocks so that you don’t have to make them from scratch.
• Backend: The backend is like the box under the hood of your car that makes it move, light up, or make sounds. It’s the hidden machinery that powers your car's functions. In web development terms, the backend handles all the important background stuff, like storing data and connecting to 3rd party services to do things like send emails or text messages
• Wized: Wized is the wiring that connects your car control panel to the buttons, wheels, and lights on the outside. When you press a button, the car lights up or moves because Wized makes sure the commands get sent from the outside (what you see) to the inside (the hidden control panel). Wized is the “brains” of your car or web app, telling it what to do when someone interacts with it.

Webflow is the face of your web app or LEGO car, the backend is the engine, and Wized is the brain that makes everything work together!

‍