Send Xano data to Webflow or Bubble using Fetch in Javascript

Hey there! In this guide, we'll walk through how to use JavaScript to send data to Xano, a no-code platform for building backend services. Even if you're not familiar with coding, don't worry - we'll break it down in a simple, easy-to-follow manner.

Why Use JavaScript with Xano?

You might be thinking, "Xano is a no-code solution, so why would I need JavaScript?" Well, the answer lies in your frontend application. If your frontend doesn't have a built-in Xano connector, you'll need to use some custom code to send and receive data to/from Xano properly.

Some common use cases for sending data to Xano with JavaScript include:

1. Authorization Tokens: When a user signs into your app, you might need to pass their authorization token to Xano to keep their session valid.
2. Context-specific Data: In a restaurant app, for example, you might need to send the restaurant data to Xano when a user clicks on a specific restaurant, so Xano knows what data to send back.

Essentially, JavaScript gives you the building blocks to integrate Xano with your frontend application seamlessly.

The Code Breakdown

Let's dive into the code and understand what each part does:

const XanoInput = {
 token: 'your_token_here',
 username: 'Chris'
};

window.onload = () => {
 if (XanoInput) {
 sendToXano(XanoInput);
 }
};

function sendToXano(data) {
 fetch('https://your-xano-endpoint.url', {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify(data)
 })
 .then(response => response.json())
 .then(data => {
 // Handle the response from Xano
 console.log(data);
 })
 .catch(error => {
 console.error('Error:', error);
 });
}

1. Defining Inputs: The first line creates a JavaScript object called XanoInput with two properties: token and username. You can add more properties here if you need to send additional data to Xano.

2. Triggering the Function: The window.onload event listener checks if XanoInput exists, and if it does, it calls the sendToXano function when the page loads. You can modify this to trigger the function on a specific action, like a button click.

3. The sendToXano Function: This is where the magic happens. It uses the fetch function to send an HTTP POST request to your Xano endpoint URL (replace 'https://your-xano-endpoint.url' with your actual endpoint URL from Xano). The request body contains the XanoInput data in JSON format. The .then blocks handle the response from Xano, logging it to the console in this example.

Putting it into Practice

Now that we understand the code, let's look at some examples of how to implement it in different frontend environments.

Webflow Example

In Webflow, you can add the JavaScript code to the Custom Code section of your project. Here's how:

1. Copy the code snippet above.
2. In Webflow, go to your project's Custom Code editor.
3. Paste the code snippet.
4. Replace 'your_token_here' with your actual token value.
5. To get your Xano endpoint URL, click on the endpoint in Xano and copy the URL from the "Endpoint URL" button.
6. Paste the copied URL between the quotation marks in the fetch function.
7. If you want to send dynamic data (e.g., from an input field), you can modify the code to get the value from the corresponding element on the page.

Bubble Example

In Bubble, you'll need to install the Toolbox plugin to run JavaScript as a workflow action. Here's how:

1. Install the Toolbox plugin in your Bubble app.
2. Create a new workflow and add the "Run JavaScript" action from the Toolbox plugin.
3. Paste the code snippet into the JavaScript editor.
4. Replace 'your_token_here' with your actual token value.
5. Replace 'https://your-xano-endpoint.url' with your Xano endpoint URL.
6. Trigger the workflow by connecting it to a button click or any other event you need.

Customizing the Code

The provided code is a starting point for sending data to Xano with JavaScript. You can customize it further based on your specific requirements. For example, you might want to:

• Send additional data beyond the token and username.
• Perform data transformations or logic on the response from Xano.
• Display the response on the page instead of logging it to the console.

The possibilities are endless, and the code is designed to be flexible and extensible.

Conclusion

Sending data to Xano with JavaScript opens up a world of possibilities for integrating Xano with your frontend applications, regardless of their tech stack. While this guide focused on the sending aspect, you can use similar techniques to receive data from Xano as well.

Remember, if you have any questions or need further assistance, you can reach out to the Xano support team or join the Xano community for more guidance.

Happy coding (or no-coding)!