Webflow
Connect Xano to Webflow
Connecting Webflow to Xano is quick and seamless. If you're coming from Webflow and don't have a Xano account follow the instructions labeled: Connect Webflow to a new Xano account. If you're already using Xano and want to connect Webflow to your account follow the instructions titled: Connect Webflow to an existing Xano account.
Connect Webflow to a New Xano Account
On the Webflow Connect page (xano.com/connect/webflow) select Connect to Webflow to get started.
From there, you will be taken to Webflow, enter your Webflow credentials to log into your Webflow account.
Next, select which Webflow workspaces and sites you want to connect to Xano.
Then, sign up for Xano by entering the required information.
Enable Webflow for Your Xano Workspace
Once you've created an account, open your Xano workspace and navigate to the Connect page. From there, find the Webflow connection and select Enable to enable Webflow for your Xano workspace.
Connect Webflow to an Existing Xano Account
Navigate to the Account page and select Connect with Webflow.
Next, a Webflow-hosted sign-in page will pop up. Enter your Webflow credentials to continue.
Select the Webflow workspaces and sites that you want to connect with Xano.
After selecting Authorize Application, your account page will show you are connected to Webflow.
Finally, follow the Enable Webflow for your Xano Workspace steps above to connect Webflow to your Xano workspace.
You must enable the Webflow connection to each workspace you want to connect to Webflow.
Using Webflow in Xano
Once you've enabled Webflow to your Xano workspace, your workspace will automatically populate with Webflow environment variables so you can seamlessly interact with Webflow in the Function Stack.
Webflow Environment Variables
These variables are pulled from your Webflow account once you enable the connection to your Xano workspace -- they cannot be edited or viewed in Xano.
Webflow in the Function Stack
With Webflow enabled in your Xano workspace, it can be accessed directly in the Function Stack to call Webflow's API.
A Webflow-specific API request enables you to easily call Webflow's API.
Once added to the Function Stack, the Webflow API Request will look similar to an External API Request function, but without the Headers section. This is because Xano will automatically define the appropriate headers including your Webflow API key.
To call a Webflow API, navigate to their API reference (https://developers.webflow.com/) and find the API request that you'd like to perform.
Each API request may have different requirements and parameters. Xano will handle the API key piece automatically. Be sure to follow Webflow's API Reference carefully to make successful calls.
In this example, /sites API endpoint will be used to demonstrate how to call Webflow (https://developers.webflow.com/#list-sites). This API will list the Webflow sites associated with your account.
Webflow API Reference will provide a curl command example, copy this, go back to Xano and open IMPORT CURL in the Webflow API Request function, then paste the curl command. Once again, please be sure to pay attention to any parameters like unique IDs that are required to make the call.
Once you select import, Xano will create the API call for you. Notice the path is different than a normal External API Request. Since Xano knows you are calling Webflow it does not need the full HTTPS address, but rather just the URL path.
If we were calling this in the External API Request function, the entire path would section would need to say: https://api.webflow.com/sites.
When the function is executed, a successful response listing all of our Webflow sites is returned.
Last updated
