How to use Wized to create web apps on Webflow?

Do you want to create a web application, but you're a Webflow expert and the interfaces of other tools like Bubble don't appeal to you? Wized is for you!

‍

Wized is a no-code tool that complements Webflow, allowing you to create applications. You can now add functions and leverage databases directly through Webflow. This means you can develop apps like Uber or Twitter! 

‍

We're introducing you to this very promising tool that pushes the boundaries of no-code and brings increasingly ambitious functionalities to Webflow.
 

I. What is Wized? 

‍

Wized is a no-code tool specifically built for Webflow. Its ambition is to offer the ability to develop web applications with Webflow.  

‍

A web application is a type of website that allows for one or more specific action(s). It differs in that it generally relies on functions. These often use databases and require "back-end" code.
 

Reminder: A site's back-end encompasses all the logical elements that communicate with a database to create interactions. It is invisible to a site user, in contrast to the front-end, which includes all the visual and interactive elements presented to a website user.

Wized has an intuitive interface that allows you to add the "back-end" component to your Webflow projects. For example, this can be used to create user accounts, manage bookings, order products from a menu, and more. 

Thanks to Wized, you will therefore be able to develop marketplaces like Airbnb directly on Webflow! 

‍

Initially created by a freelancer, Wized now belongs to Finsweet and is currently under development. To access the tool, you will need an invitation. 

‍

II. How does Wized work? 

‍

Wized functions as a relay between Webflow and third-party applications. Wized communicates directly with Webflow elements and does not treat it as an external application, unlike popular automation tools such as Zapier or Make.  

‍

Wized can therefore exchange information with your Airtable database without even having to go through the CMS, simply thanks to custom attributes!  

‍

In the image below, this connectivity is represented by the "Data in" and "Data out" tabs.
 

‍

Wized is also equipped with the "Actions" feature, responsible for your app's logical elements. Wized converts your no-code choices into Javascript code to add your associated conditions and reactions. 

‍

III. Example of Wized's capabilities: Wanderlust 

‍

Let's take the example provided by Wized to illustrate the tool's capabilities. Wanderlust is a website that allows you to plan a trip based on a destination, a budget, and travel dates. 

‍

Your Webflow page will automatically appear in the Wized application. With the "X-Ray" feature, you can identify all elements that have a Wized-specific attribute. This then allows you to communicate with them to establish functions. 

In our example, we see the "input_destination" label attached to the text field where the user will enter their destination.  

‍

Similarly, the "input_startDate", "input_endDate", and "input_budget" fields will collect date and budget information. 

Once the information is collected, we will use actions to send this data to the OpenAI API so that its GPT-3 model can provide us with a response. 

‍

Once the connection is made, "Data Out" is responsible for displaying the obtained response on screen. 

‍

The site is now functional! 

We invite you to test Wanderlust for yourself if you wish to plan your next trip! 

Conclusion 

Wized thus serves as a complement to Webflow Logic, which is still quite limited in its possible actions. 

‍

The Webflow community is once again proving very creative and offering new solutions to improve the tool, which is becoming increasingly versatile! 

To learn how to master Webflow, we encourage you to check out our Webflow tutorials!