Connect RoxyAPI to Wix Studio Using Velo

About the author: Brett Calloway is a Developer Advocate and AI Integration Specialist with 12 years of experience building APIs and developer tooling, including three years focused on AI-native infrastructure for spiritual and wellness applications. He has led developer relations at two Series B SaaS companies and spoken at PyCon and JSConf on building context-rich AI agents using Model Context Protocol. His writing covers API integration patterns, AI agent architecture, and rapid prototyping with astrology, tarot, and numerology data.

Why Wix Automations cannot call RoxyAPI

If you have tried connecting RoxyAPI to your Wix site, you probably started with Wix Automations. That is the logical first step. You set up a trigger, add an API call action, and expect it to work. Then you hit the wall. Wix Automations only supports key-value pair body format for HTTP requests. It does not allow raw JSON payloads. It also does not support custom headers like X-API-Key, which RoxyAPI requires for authentication. This means you cannot send a POST request with a JSON body to draw tarot cards, and you cannot attach your API key as a header to any request. This is the exact problem a real customer ran into recently. The solution is Wix Velo, which gives you full control over HTTP requests through backend code.

Ready to build this? RoxyAPI Astrology API gives you daily horoscopes, natal charts, and 23+ endpoints for your Wix site. See pricing.

What you will build

By the end of this guide, you will have a Wix Studio site that fetches live astrology and tarot data from RoxyAPI. Your site will display a daily horoscope for any zodiac sign, including love, career, health, and finance forecasts. It will also draw tarot cards with full interpretations, keywords, and card artwork. The backend code runs securely on Wix servers, keeping your API key hidden from visitors. Frontend page code calls your backend functions and displays results in text elements on the page. You will use two RoxyAPI endpoints: the daily horoscope GET endpoint from the Astrology API and the card draw POST endpoint from the Tarot API. Both return clean JSON with no wrapper objects, making them easy to parse and display.

Prerequisites for Wix Velo and RoxyAPI

You need a Wix site with Velo enabled. Velo is available on Wix Business Elite plans and Wix Studio plans. If you are on a lower tier, you will not see the code panel or developer tools. You also need a RoxyAPI API key. You can get one instantly at roxyapi.com/pricing with no account signup required. The API key arrives by email within minutes. For local testing while following this guide, you can use the interactive playground at roxyapi.com/api-reference to verify endpoint responses before writing any Wix code. Make sure you have access to the Wix Editor or Wix Studio IDE where the code panel and file tree are visible. You will create backend files and page code files during the following steps.

Step 1: Enable Velo in Wix Studio

Open your site in the Wix Editor or Wix Studio. Look for the Dev Mode toggle in the top menu bar, or navigate to Developer Tools in the toolbar. Turn on Dev Mode. Once enabled, a code panel appears at the bottom of the screen showing your file tree with Public, Backend, and Page sections. You will also see a Developer Console for viewing logs. In Wix Studio, the code panel is built into the IDE by default. If you are using the Wix Editor, you may need to click Turn on Dev Mode from the top toolbar. After enabling, confirm you can see the Backend section in your file tree. This is where you will create the web module file that calls RoxyAPI.

Step 2: Store your API key in Wix Secrets Manager

Never hardcode API keys in your site code. Wix provides a Secrets Manager specifically for this purpose. Navigate to Developer Tools in the Wix dashboard or code panel, then click Secrets Manager under the Security section. Click Add Secret and fill in the fields. Set the name to roxyapi-key and paste your full RoxyAPI API key as the value. Add a description like "RoxyAPI production API key" for reference. Click Add Secret to save. Changes in the Secrets Manager take effect immediately without publishing. In your backend code, you will retrieve this secret using the wix-secrets-backend module. This keeps your API key on the server side and ensures it never reaches the browser.

Step 3: Create a backend web module

In your file tree, hover over the Backend section, click the plus icon, and select Add web module. Name the file roxy.web.js. This .web.js extension tells Wix that functions exported from this file can be called from frontend page code. Paste the following code into the file:

// backend/roxy.web.js
import { Permissions, webMethod } from "wix-web-module";
import { fetch } from "wix-fetch";
import { getSecret } from "wix-secrets-backend";

const BASE_URL = "https://roxyapi.com/api/v2";

export const getDailyHoroscope = webMethod(
  Permissions.Anyone,
  async (sign) => {
    const apiKey = await getSecret("roxyapi-key");
    const response = await fetch(
      `${BASE_URL}/astrology/${sign}/daily`,
      {
        method: "GET",
        headers: { "X-API-Key": apiKey },
      }
    );
    if (!response.ok) {
      const err = await response.json();
      throw new Error(err.error || "Failed to fetch horoscope");
    }
    return response.json();
  }
);

export const drawTarotCards = webMethod(
  Permissions.Anyone,
  async (count) => {
    const apiKey = await getSecret("roxyapi-key");
    const response = await fetch(
      `${BASE_URL}/tarot/draw`,
      {
        method: "POST",
        headers: {
          "X-API-Key": apiKey,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ count: count }),
      }
    );
    if (!response.ok) {
      const err = await response.json();
      throw new Error(err.error || "Failed to draw cards");
    }
    return response.json();
  }
);

The Permissions.Anyone setting means any site visitor can trigger these functions. If you want to restrict access to logged-in members, use Permissions.SiteMember instead.

Step 4: Call backend functions from frontend page code

Open the page where you want to display horoscope or tarot data. Click on the page in the editor, then open the code panel. You will see a page code file (named after your page). Import your backend functions and call them when the page loads or when a user clicks a button. Here is example page code:

// Page code
import { getDailyHoroscope, drawTarotCards } from "backend/roxy.web";

$w.onReady(async function () {
  // Fetch daily horoscope for Aries on page load
  const horoscope = await getDailyHoroscope("aries");
  $w("#horoscopeOverview").text = horoscope.overview;
  $w("#horoscopeLove").text = horoscope.love;
  $w("#horoscopeCareer").text = horoscope.career;
  $w("#luckyNumber").text = "Lucky number: " + horoscope.luckyNumber;

  // Draw 3 tarot cards on button click
  $w("#drawButton").onClick(async () => {
    const reading = await drawTarotCards(3);
    const cards = reading.cards;
    $w("#card1Name").text = cards[0].name;
    $w("#card1Meaning").text = cards[0].meaning;
    $w("#card2Name").text = cards[1].name;
    $w("#card2Meaning").text = cards[1].meaning;
    $w("#card3Name").text = cards[2].name;
    $w("#card3Meaning").text = cards[2].meaning;
  });
});

Web module functions are always asynchronous, so use await when calling them. The response objects match the RoxyAPI JSON structure directly. For the daily horoscope, you get fields like overview, love, career, health, finance, advice, luckyNumber, luckyColor, and compatibleSigns. For tarot draws, each card in the cards array has name, meaning, keywords, reversed, imageUrl, and more.

Step 5: Display results in Wix page elements

Add text elements, images, and repeaters to your page using the Wix Editor. Give each element a meaningful ID like #horoscopeOverview, #card1Name, or #card1Meaning so your page code can reference them. For the tarot card images, add an image element and set its src property to the imageUrl field from each card. Here is how to display a full tarot card with its image:

// Inside your button click handler
const reading = await drawTarotCards(1);
const card = reading.cards[0];
$w("#cardImage").src = card.imageUrl;
$w("#cardName").text = card.name;
$w("#cardKeywords").text = card.keywords.join(", ");
$w("#cardMeaning").text = card.meaning;
$w("#cardReversed").text = card.reversed
  ? "Reversed" : "Upright";

For a zodiac sign selector, add a dropdown element with the 12 signs (Aries through Pisces) and update the horoscope display when the selection changes. Use $w("#signDropdown").onChange() to trigger a new API call with the selected sign value. The daily horoscope endpoint accepts sign names case-insensitively, so both "aries" and "Aries" work.

Common pitfalls when using RoxyAPI with Wix Velo

The most frequent mistake is importing wix-fetch in frontend page code instead of a backend web module. Wix blocks cross-origin requests from the browser for security reasons. Always make API calls from .web.js backend files. Another common error is forgetting to set Content-Type: application/json on POST requests. Without it, the tarot draw endpoint returns a 400 validation error because the body is not parsed as JSON. Make sure you call JSON.stringify() on your request body. If you see "secret not found" errors, double check the secret name in Secrets Manager matches exactly what you pass to getSecret(). The name is case-sensitive. Finally, remember that web module functions always return Promises. If you forget await, you will see [object Promise] in your text elements instead of actual data.

Frequently Asked Questions

Q: Can I use Wix Automations instead of Velo for RoxyAPI? A: No. Wix Automations only supports key-value pair body format and does not allow custom HTTP headers. RoxyAPI requires an X-API-Key header for authentication and JSON body for POST endpoints like tarot draws. You need Wix Velo with backend web modules to make these calls.

Q: Do I need a premium Wix plan to use Velo? A: Yes. Velo requires a Wix Business or Wix Studio plan. The code panel and developer tools are not available on free Wix sites. Check your current plan under Account Settings in your Wix dashboard.

Q: Is my RoxyAPI key safe in Wix Secrets Manager? A: Yes. Secrets stored in the Wix Secrets Manager are encrypted and only accessible from backend code. They never reach the browser or appear in your published site source. The getSecret() function only works in backend .web.js files, not in frontend page code.

Q: What is the response format for the daily horoscope endpoint? A: The GET /astrology/{sign}/daily endpoint returns a JSON object with these fields: sign, date, overview, love, career, health, finance, advice, luckyNumber, luckyColor, and compatibleSigns. No wrapper object. You access fields directly on the response, for example horoscope.overview. See the full spec at roxyapi.com/api-reference.

Q: How many API calls does each page view cost? A: Each function call from your page code counts as one API request against your RoxyAPI plan. If your page loads a daily horoscope and a user clicks to draw tarot cards, that counts as two requests total. RoxyAPI plans start at 5,000 requests per month. Monitor usage at roxyapi.com/pricing.

Build your Wix astrology or tarot feature today

Connecting RoxyAPI to Wix Studio through Velo takes about 30 minutes once you understand the pattern. Create a backend web module, store your API key securely, and call your functions from page code. The daily horoscope and tarot draw endpoints covered in this guide are just the starting point. RoxyAPI offers 120+ endpoints across astrology, tarot, numerology, I-Ching, dreams, crystals, and angel numbers, all accessible with the same API key and the same Velo pattern. Explore the full Astrology API and Tarot API to see what you can build. Get your API key at roxyapi.com/pricing and start building.