How to Add API to Wix Website

Integrating an API into your Wix website allows you to pull dynamic data, connect with third-party services, and enhance functionality. This guide will walk you through how to add an API to your Wix site using Velo, Wix's own development platform.

What Is Wix Velo and Why Use It?

Velo by Wix is a powerful development environment that lets users extend website capabilities with custom code. It's essential for integrating external APIs into a Wix website.

With Velo, you can write JavaScript on both the frontend and backend, use HTTP functions, and manage API keys securely. It supports REST APIs and allows full control over your website’s behavior.

Initial Setup and Enabling Dev Mode

Before connecting an API, make sure Dev Mode is enabled on your website.

1. Open your Wix Editor.
2. Click on Dev Mode in the top menu and select Turn on Dev Mode.
3. This will open the Code Panel, allowing you to write JavaScript for frontend and backend.

Creating Backend API Calls in Wix

Wix recommends placing external API logic in backend files to keep your API key secure and performance optimized.

Steps to make backend API requests

1. Go to the Backend section in the Code Panel.
2. Create a new file, for example: apiHandler.jsw.
3. Use fetch to call your external API:

import {fetch} from 'wix-fetch';


export function getWeatherData() {

  return fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=London', {

    method: 'get'

  })

  .then((httpResponse) => {

    if (httpResponse.ok) {

      return httpResponse.json();

    }

    return Promise.reject("Fetch failed");

  });

}

Displaying API Data on the Page

Once you have your backend API function ready, you can call it from your page code to display data dynamically.

1. Open the page where you want to show API data.
2. Import your backend function:

import { getWeatherData } from 'backend/apiHandler';


$w.onReady(function () {

  getWeatherData()

    .then(data => {

      $w("#temperatureText").text = data.current.temp_c + "°C";

    });

});

Handling API Key Setup Securely

Some APIs require authentication via API keys. Wix provides a secure way to store and access them using Secrets Manager.

Store and access API keys in Secrets Manager

• Go to Site Monitoring > Secrets Manager in the left panel.
• Add a new secret and give it a name like weatherAPIKey.
• Access it in your backend file:

import { getSecret } from 'wix-secrets-backend';


export async function getWeatherData() {

  const key = await getSecret("weatherAPIKey");

  return fetch(`https://api.weatherapi.com/v1/current.json?key=${key}&q=London`);

}

Working with REST API and JSON in Wix

Most modern APIs use REST architecture and return JSON data. Wix fully supports working with this structure.

Using Third-Party Services and APIs

You can integrate services like Google Maps, OpenWeather, or even CRMs using API endpoints. Always read their API documentation and follow Wix Velo's practices for handling async operations and displaying data.

• Popular integrations: Google Sheets, Airtable, Shopify, Mailchimp
• Use wix-fetch for data retrieval
• Connect to secured APIs via backend code

Common Issues and How to Fix Them

If your API isn’t working as expected, consider these troubleshooting tips:

• Check the console: Use the browser console to view any errors or rejected promises.
• Validate the endpoint: Ensure the API URL and parameters are correct.
• Handle HTTP errors: Always check for response.ok before parsing JSON.
• Verify permissions: Some APIs require authentication tokens or referer settings.

Useful Links

Developing Custom Websites – Learn how to customize your Wix site using Velo's full-stack development platform, enabling you to add custom functionality and interactions.

Wix Editor: Using the Editor Menus – Understand how to navigate and utilize the Wix Editor menus, including enabling Dev Mode for Velo.

Wix Automations: Using Custom Code in an Automation – Discover how to incorporate custom Velo code within Wix Automations to enhance your site's functionality.

Enterprise Solution: Using Wix API Keys – Learn how to generate and manage API keys for your Wix Enterprise solutions.

Wix for Developers – Explore Wix's open platform for developers to customize, extend, and integrate with Wix services using APIs and developer tools.

Enhance Your Wix Website with Powerful Apps!

Elfsight created dozens of useful apps to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Wix!

Conclusion

Adding an API to your Wix website opens up a world of possibilities — from displaying real-time data to integrating powerful third-party tools. Using Wix Velo, you can securely manage API keys, perform backend calls, and show dynamic content on your pages with just a bit of JavaScript. Start small, test often, and explore the flexibility of custom code in Wix.