Примеры кода

Готовые интеграции, которые можно скопировать и адаптировать под свой проект. Полный код каждого примера — прямо здесь, кнопка «Копировать» в правом верхнем углу блока кода.

Telegram-бот
Python · aiogram

Бот на Python (aiogram), который принимает дату рождения и присылает картинку с матрицей.

Встраиваемый веб-виджет
JavaScript · ~80 строк

Vanilla JS виджет — одна строка кода для встраивания формы на любой сайт.

React-компонент
React 18+ · TypeScript

Готовая React-форма с типизацией и интерпретацией результата.

Telegram-бот (Python · aiogram)

Минимальный бот, принимающий дату в формате ДД.ММ.ГГГГ и возвращающий 5 ключевых позиций матрицы.

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://taliora.ru/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("Введите дату в формате ДД.ММ.ГГГГ")
        return
    day, month, year = m.groups()
    r = requests.get(f"{API}/{day}/{month}/{year}", timeout=10)
    if r.status_code != 200:
        await msg.answer("Ошибка расчёта. Проверьте дату.")
        return
    mtx = r.json()["matrix"]
    text = (
        f"🔮 Ваша матрица судьбы:\n\n"
        f"{mtx['center']['emoji']} Центр: {mtx['center']['name']}\n"
        f"{mtx['personal']['emoji']} Личность: {mtx['personal']['name']}\n"
        f"{mtx['money']['emoji']} Деньги: {mtx['money']['name']}\n"
        f"{mtx['destiny']['emoji']} Судьба: {mtx['destiny']['name']}\n"
        f"{mtx['purpose']['emoji']} Предназначение: {mtx['purpose']['name']}\n\n"
        f"Расчёт: Taliora (CC BY 4.0)"
    )
    await msg.answer(text)

asyncio.run(dp.start_polling(bot))

Встраиваемый веб-виджет (vanilla JS)

Две опции — простая (одна строка <script>, наш CDN) или автономная (скопируйте полный исходник к себе). Виджет работает на любом сайте — от чистого HTML до WordPress / Tilda / Notion.

Опция 1 — подключение через CDN (рекомендуется)

Три строки в HTML вашего сайта — готово. Файл хостится у нас, обновления безопасности применяются автоматически.

index.html
<div id="taliora-widget"></div>
<script src="https://taliora.ru/widget/v1/taliora-widget.js"></script>
<script>
  TalioraWidget.mount("#taliora-widget", {
    theme: "light",       // или "dark"
    accent: "#7c3aed",    // фирменный цвет вашего сайта (hex / rgb / именованный)
  });
</script>

URL содержит /v1/ — фиксированная версия. Breaking changes пойдут как /v2/, ваше встраивание не сломается.

Опция 2 — автономный исходник (для кастомизации)

Если нужно изменить вёрстку или цвета вне accent, добавить свои поля — скопируйте исходник и хостите у себя. Лицензия MIT (см. условия), attribution обязателен (CC BY 4.0 на данные API).

Полный исходник доступен напрямую: /widget/v1/taliora-widget.js — открыть в браузере или загрузить (~6 КБ, ~180 строк, zero deps).

Что под капотом

  • Vanilla JavaScript, без React/Vue/jQuery
  • Использует встроенный fetch для вызова Taliora API
  • ~6 КБ исходника (~2 КБ gzipped)
  • XSS-защита: валидация accent и URL ответа от API
  • Анонимный mount-ping в нашу аналитику (только домен страницы и версия виджета — без user-данных)

Если у вас строгий CSP — добавьте https://taliora.ru в директиву script-src и connect-src.

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://taliora.ru/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">Рассчитать</button>
      {result && (
        <div>
          <h3>{result.matrix.center.emoji} Центр: {result.matrix.center.name}</h3>
          <p>Деньги: {result.matrix.money.name}</p>
          <p>Судьба: {result.matrix.destiny.name}</p>
          <a href="https://taliora.ru" rel="nofollow noopener">Расчёт: Taliora</a>
        </div>
      )}
    </form>
  );
}

Что-то другое?

Если делаете интересную интеграцию — поделитесь, добавим в галерею: mir@taliora.ru.