Ejemplos de código

Integraciones listas que puedes copiar y adaptar a tu propio proyecto. El código completo de cada ejemplo está aquí mismo; el botón «Copiar» se encuentra en la esquina superior derecha del bloque de código.

Bot de Telegram

Python · aiogram

Bot en Python (aiogram) que recibe la fecha de nacimiento y envía una imagen con la matriz.

Widget web embebible

JavaScript · ~80 líneas

Widget en vanilla JS: una sola línea de código para insertar el formulario en cualquier sitio.

Componente React

React 18+ · TypeScript

Formulario React listo, con tipado e interpretación del resultado.

Bot de Telegram (Python · aiogram)

Bot mínimo que recibe una fecha en formato DD.MM.AAAA y devuelve las 5 posiciones clave de la matriz.

bot.py

# pip install aiogram requests
import os
import re
import asyncio
import requests
from aiogram import Bot, Dispatcher, F
from aiogram.types import Message

API = "https://zaruvia.com/api/public/matrix"
DATE_RE = re.compile(r"^(\d{1,2})\.(\d{1,2})\.(\d{4})$")

bot = Bot(token=os.environ["BOT_TOKEN"])
dp = Dispatcher()

@dp.message(F.text)
async def handle_date(msg: Message):
    m = DATE_RE.match(msg.text.strip())
    if not m:
        await msg.answer("Introduce la fecha en formato DD.MM.AAAA")
        return
    day, month, year = m.groups()
    r = requests.get(f"{API}/{day}/{month}/{year}", timeout=10)
    if r.status_code != 200:
        await msg.answer("Error en el cálculo. Revisa la fecha.")
        return
    mtx = r.json()["matrix"]
    text = (
        f"🔮 Tu matriz del destino:\n\n"
        f"{mtx['center']['emoji']} Centro: {mtx['center']['name']}\n"
        f"{mtx['personal']['emoji']} Personalidad: {mtx['personal']['name']}\n"
        f"{mtx['money']['emoji']} Dinero: {mtx['money']['name']}\n"
        f"{mtx['destiny']['emoji']} Destino: {mtx['destiny']['name']}\n"
        f"{mtx['purpose']['emoji']} Propósito: {mtx['purpose']['name']}\n\n"
        f"Cálculo: Zaruvia (CC BY 4.0)"
    )
    await msg.answer(text)

asyncio.run(dp.start_polling(bot))

Widget web embebible (vanilla JS)

Dos opciones: la sencilla (una línea <script>, nuestra CDN) o la autónoma (copia el código fuente completo a tu sitio). El widget funciona en cualquier sitio, desde HTML puro hasta WordPress / Tilda / Notion.

Opción 1 — conexión vía CDN (recomendada)

Tres líneas en el HTML de tu sitio y listo. El archivo se aloja en nuestro servidor y las actualizaciones de seguridad se aplican automáticamente.

index.html

<div id="zaruvia-widget"></div>
<script src="https://zaruvia.com/widget/v1/zaruvia-widget.js"></script>
<script>
  ZaruviaWidget.mount("#zaruvia-widget", {
    theme: "light",       // o "dark"
    accent: "#7c3aed",    // color corporativo de tu sitio (hex / rgb / nombrado)
  });
</script>

La URL contiene /v1/: versión fija. Los cambios incompatibles irán como /v2/, así tu integración no se romperá.

Opción 2 — código fuente autónomo (para personalizar)

Si necesitas cambiar la maquetación o colores más allá de accent, o añadir tus propios campos, copia el código fuente y alójalo tú mismo. Licencia MIT (ver condiciones), la atribución es obligatoria (CC BY 4.0 sobre los datos de la API).

El código fuente completo está disponible directamente: /widget/v1/zaruvia-widget.js — ábrelo en el navegador o descárgalo (~6 KB, ~180 líneas, sin dependencias).

Qué hay bajo el capó

Vanilla JavaScript, sin React/Vue/jQuery
Usa el fetch nativo para llamar a la API de Zaruvia
~6 KB de código fuente (~2 KB comprimido en gzip)
Protección XSS: validación de accent y de la URL de respuesta de la API
Ping anónimo de montaje a nuestra analítica (solo el dominio de la página y la versión del widget, sin datos del usuario)

Si tienes una CSP estricta, añade https://zaruvia.com a las directivas script-src y connect-src.

Componente React

MatrixForm.tsx

import { useState } from "react";

interface Result {
  matrix: Record<string, { arcana: number; name: string; emoji: string }>;
}

export function MatrixForm() {
  const [date, setDate] = useState("");
  const [result, setResult] = useState<Result | null>(null);

  async function calc(e: React.FormEvent) {
    e.preventDefault();
    const [y, m, d] = date.split("-");
    const r = await fetch(`https://zaruvia.com/api/public/matrix/${d}/${m}/${y}`);
    setResult(await r.json());
  }

  return (
    <form onSubmit={calc}>
      <input type="date" value={date} onChange={(e) => setDate(e.target.value)} required />
      <button type="submit">Calcular</button>
      {result && (
        <div>
          <h3>{result.matrix.center.emoji} Centro: {result.matrix.center.name}</h3>
          <p>Dinero: {result.matrix.money.name}</p>
          <p>Destino: {result.matrix.destiny.name}</p>
          <a href="https://zaruvia.com" rel="nofollow noopener">Cálculo: Zaruvia</a>
        </div>
      )}
    </form>
  );
}

¿Algo distinto?

Si creas una integración interesante, compártela y la añadiremos a la galería: [email protected].

OpenAPI / Postman

Estado del servicio