How to Turn a Webflow site into a no-code Web App

If you want to:

• add memberships and user login to your Webflow site
• send user submissions to third party apps
• receive and display external data on your Webflow site
• let users customize their experience

then you’ll love this guide.

In this walkthrough, we are going to build a simple wishlist with Webflow, Wized and Airtable.

Now that you know what’s coming, let’s jump right into it.

1. Add Wized to your Webflow project

Wized is a powerful no-code front end framework built specifically for Webflow.

Wized allows you to connect your website with any app that uses a REST API. In other words, it allows you to turn your Webflow site into a functional web app.

Definitely check out the cloneable showcase to see what can be built with Wized.

To add Wized to your Webflow project, go to the dashboard, start a new project, and follow the installation instructions.

Once you added Wized to your Webflow Website, you will be able to access the Configurator.

In the configurator, you can set up any front-end logic that you want your app to perform.

In this walkthrough, we will continue by setting up user accounts, but if you don’t need that functionality, you can skip this step.

2. Set up authentication (Auth) [optional]

There are several ways to add user authentication to your Wized web app.

In this tutorial, we are going to use Airtable which is the easiest to set up.

Note that you can also let users sign in with Google or Facebook through Firebase, or Xano.

The first thing you need to do is:

1. go to My Apps,
2. select Airtable
3. insert your API

You can find your Airtable API key on your Account page.

Then, you’ll have to:

1. create a user base in Airtable which has an email address as the first field.
2. go to the Auth tab in the Configurator and select your user Base
3. restrict pages and content for unauthenticated users
4. you can also restrict content for non-paying users

That’s it!

You can find a more detailed walkthrough on setting up Auth with Airtable here. Now that you have your user base in place, you can start building requests with user data.

3. Connect to other Apps (My Apps)

Wized has lots of deep integrations which make it easy to connect to third party apps. But if you want to connect to an app that’s not listed, you can do this too via REST API.

In this tutorial, we are going to use Airtable as our database.

The first thing we need to do is build our base in Airtable.

Since we’re building a wishlist, we need to have a base with wishes.

In this case we are going to have the following fields:

• Title (String)
• Description (Rich text)
• Vote count (Number)
• Users who voted (Reference field)

Here, I added a few wishes, which we will render on our Webflow site in the next step.

4. Fetch data (Data In)

First we have to fetch our data from somewhere.

Head over to the Data In panel, and select the app from which you want to fetch data.

Here, you can select any app that you added to My Apps previously.

To fetch an item, you need to:

1. Name the request
2. Select a resource
3. Select the request type
4. Build your request (this is not always the case)

Under this link, you can learn everything about Data In requests.

If you’re just following along this walkthrough, you want to fetch all of the records from the wishlist base that is in Airtable.

So we are going to:

1. Call the request get wishlist records
2. Select Airtable as our resource
3. Select get all items under request type
4. Execute the request on page load

That’s it!

If you fire the request now, you can see that we have got some data from Airtable.

All of the data from this request can be found in the Data Store.

Now let’s learn how to display that data in our App.

5. Render Data (Data Store)

Once you got some data in your data store, it’s easy to render it on the page.

Prepare the elements in Webflow and publish your changes

First, you have to go to Webflow, and choose which elements are you going to use as a template for displaying data.

Then, it’s time to add wized-el attributes to these elements. For example, if you have an H2 that you’re going to use as the title, you can give it an attribute of wized-el=”title”.

You can name the Wized elements any way you like, as long as you have the key set to wized-el.

In this case, we build our collection template item, and we are adding the following attributes:

• wized-el=”list-item”
• wized-el=”title”
• wized-el=”description”
• wized-el=”vote-count”
• wized-el=”upvote”
• wized-el=”remove-vote”
• wized-el=”submit”

Now let’s publish the project, and get back to Wized.

Wized setup

In Wized, we are going to select these attributes, and we are going to drag the data from the data store into our elements.

If you’re getting one item, then just map the data to the right field.

In our case, we want to generate a list of items out of our template, so we are going to start by dragging the array from our data store to our list-item.

This will multiply the number of items to match the number of records.

Now, if we add the title, and the description to each item, you will see that the data is mapped correctly.

The only thing that’s left now is to accept user input.

6. Send data (Data Out and Actions)

Wized lets you create requests that send data from your Wized app to any REST API.

Requests are structured in a similar way to Data In requests.

You have to:

• Name your request
• Select a resource
• Select request type
• Build your request
• Choose when to execute the request

Once you build your request, you can also set up a trigger in the Actions panel.

In our example, we are going to send a request to our wishlist Airtable base when a user submits a wish.

To do that, we are going to:

1. Call the request Submit item
2. Select Airtable as the resource
3. Select our base and the right table
4. Set the request type to Create item
5. In the request body, we are going to map our input values to the values of the table
6. Set Execute on page load to No

Setting up a custom trigger for our request

Now that you’ve created a request, it’s time to move to the Actions panel.

There, you can choose on which event you would like to trigger an action, or in this case fire a request.

In our case, we want to fire the request when a user hits the submit button.

So we are going to select our submit button, and we are going to set the event to On click, and the Action to perform a request. Then we are going to select our request from the dropdown.

That’s it!

If we submit an item now, and we look at our wishlist page, we will see that the item that we submitted is listed there.

Now the only thing that’s left is adding the upvoting logic. You can find that as well as the form validation logic inside this cloneable.

You can clone this project for free, and explore how all of the requests are structured. Wized is free to use as long as your project is on a Webflow staging domain.