Встраиваемые виджеты
Создавайте и управляйте встраиваемыми виджетами для вашего сайта. Виджеты предоставляют готовые UI-компоненты для астрологических функций, которые можно интегрировать на любую веб-страницу с помощью одного тега скрипта.
Необходимый модуль
Для всех эндпоинтов виджетов требуется модуль module:embeddable-widgets, активированный для вашей организации.
Типы виджетов
Следующие типы виджетов доступны в зависимости от ваших активных модулей:
| Тип | Описание | Необходимый модуль |
|---|---|---|
natal | Интерактивная натальная карта | natal:calc |
synastry | Сравнительная карта синастрии | synastry:calc |
transit | Наложение транзитной карты | transit:calc |
composite | Композитная карта отношений | composite:calc |
moonphase | Отображение фазы Луны | moonphase:calc |
daily-horoscope | Ежедневный гороскоп для всех знаков | module:daily-report |
numerology | Форма нумерологического профиля | module:numerology |
compatibility | Совместимость знаков Солнца | compatibility:calc |
moon-calendar | Ежемесячный лунный календарь | moon-calendar:calc |
Управление виджетами
Список виджетов
curl "https://api.astroapi.cloud/api/widgets" \
-H "X-Api-Key: your-api-key"Получение виджета
curl "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
-H "X-Api-Key: your-api-key"Создание виджета
Виджеты создаются в формате JSON:API:
curl -X POST "https://api.astroapi.cloud/api/widgets" \
-H "X-Api-Key: your-api-key" \
-H "Content-Type: application/vnd.api+json" \
-d '{
"data": {
"type": "widgets",
"attributes": {
"name": "My Natal Chart Widget",
"widgetType": "natal",
"allowedDomains": ["example.com", "www.example.com"],
"customization": {
"language": "en",
"layout": "card",
"colors": {
"primary": "#5b2d8e",
"background": "#ffffff",
"text": "#1a1a1a"
},
"widgetOptions": {
"showAspects": true,
"showPoints": true,
"showHouses": true,
"chartSize": 500,
"theme": "light"
}
}
}
}
}'Обновление виджета
curl -X PATCH "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
-H "X-Api-Key: your-api-key" \
-H "Content-Type: application/vnd.api+json" \
-d '{
"data": {
"type": "widgets",
"id": "wgt_abc123",
"attributes": {
"name": "Updated Widget Name",
"customization": {
"language": "nl"
}
}
}
}'Удаление виджета
curl -X DELETE "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
-H "X-Api-Key: your-api-key"Ответ виджета
{
"data": {
"type": "widgets",
"id": "wgt_abc123",
"attributes": {
"name": "My Natal Chart Widget",
"widgetType": "natal",
"allowedDomains": ["example.com", "www.example.com"],
"embedCode": "<script src=\"https://cdn.astroapi.cloud/widget.js\" data-widget-id=\"wgt_abc123\"></script>",
"customization": {
"language": "en",
"layout": "card",
"colors": {
"primary": "#5b2d8e",
"background": "#ffffff",
"text": "#1a1a1a"
},
"widgetOptions": {
"showAspects": true,
"showPoints": true,
"showHouses": true,
"chartSize": 500,
"theme": "light"
}
},
"createdAt": "2024-06-15T12:00:00Z",
"updatedAt": "2024-06-15T12:00:00Z"
}
}
}Перегенерация API-ключа
Перегенерация встроенного API-ключа виджета. Используйте это, если ключ был скомпрометирован:
curl -X POST "https://api.astroapi.cloud/api/widgets/wgt_abc123/regenerate-key" \
-H "X-Api-Key: your-api-key"Смена ключа
После перегенерации ключа существующие вставки, использующие старый ключ, немедленно перестанут работать. Обновлять код вставки не нужно — ID виджета остаётся прежним.
Доступные параметры виджетов
Получение типов виджетов, доступных вашей организации на основе активных модулей:
curl "https://api.astroapi.cloud/api/widgets/options" \
-H "X-Api-Key: your-api-key"Ответ
{
"data": {
"availableTypes": ["natal", "moonphase", "daily-horoscope"],
"planFeatures": {
"canRemoveBranding": false,
"canUseCustomLogo": false,
"canUseCustomCss": true,
"maxDomains": 5
}
}
}Функции тарифного плана
| Функция | Описание |
|---|---|
canRemoveBranding | Можно ли скрыть брендинг AstroAPI |
canUseCustomLogo | Можно ли показывать пользовательский логотип вместо стандартного |
canUseCustomCss | Можно ли внедрять пользовательский CSS в виджет |
maxDomains | Максимальное количество разрешённых доменов на виджет |
Объект настройки
Объект customization управляет внешним видом и поведением виджета:
{
"colors": {
"primary": "#5b2d8e",
"secondary": "#a07cc5",
"background": "#ffffff",
"text": "#1a1a1a",
"border": "#e0e0e0"
},
"fonts": {
"family": "Inter, sans-serif",
"size": "14px"
},
"borders": {
"radius": "8px",
"width": "1px"
},
"spacing": {
"padding": "16px",
"gap": "12px"
},
"shadows": {
"card": "0 2px 8px rgba(0,0,0,0.1)"
},
"layout": "card",
"interaction": {
"allowUserInput": true,
"showTooltips": true
},
"branding": {
"showPoweredBy": true,
"logoUrl": null
},
"language": "en",
"customCss": ".astroapi-widget { font-weight: 500; }",
"widgetOptions": {
"showAspects": true,
"showPoints": true,
"showHouses": true,
"chartSize": 500,
"theme": "light"
}
}Поля настройки
| Поле | Тип | Описание |
|---|---|---|
colors.primary | string | Основной акцентный цвет (hex) |
colors.secondary | string | Вторичный акцентный цвет (hex) |
colors.background | string | Цвет фона виджета (hex) |
colors.text | string | Основной цвет текста (hex) |
colors.border | string | Цвет границы (hex) |
fonts.family | string | Значение CSS font-family |
fonts.size | string | Базовый размер шрифта (CSS-значение) |
borders.radius | string | Радиус границы для карточек и полей ввода (CSS-значение) |
borders.width | string | Ширина границы (CSS-значение) |
spacing.padding | string | Внутренний отступ (CSS-значение) |
spacing.gap | string | Промежуток между элементами (CSS-значение) |
shadows.card | string | CSS box-shadow для карточных элементов |
layout | string | Стиль разметки виджета (см. ниже) |
interaction.allowUserInput | boolean | Могут ли пользователи вводить свои данные о рождении |
interaction.showTooltips | boolean | Показывать подсказки при наведении |
branding.showPoweredBy | boolean | Показывать значок «Powered by AstroAPI» |
branding.logoUrl | string | null | URL пользовательского логотипа (требуется canUseCustomLogo) |
language | string | Код языка отображения |
customCss | string | null | Внедрение пользовательского CSS (требуется canUseCustomCss) |
widgetOptions.showAspects | boolean | Показывать линии аспектов на картах |
widgetOptions.showPoints | boolean | Показывать символы планет на картах |
widgetOptions.showHouses | boolean | Показывать разделение домов на картах |
widgetOptions.chartSize | number | Размер карты в пикселях |
widgetOptions.theme | string | Цветовая тема ("light" или "dark") |
Варианты разметки
| Значение | Описание |
|---|---|
compact | Минимальное пространство, подходит для боковых панелей |
card | Закруглённая карточка с тенью (по умолчанию) |
full | На всю ширину, без границ |
minimal | Без фона и границ |
Встраивание виджета
После создания виджета скопируйте embedCode из ответа и вставьте его в HTML вашего сайта:
<!-- Разместите здесь, где должен появиться виджет -->
<div id="astroapi-widget-container"></div>
<!-- Загрузка скрипта виджета -->
<script
src="https://cdn.astroapi.cloud/widget.js"
data-widget-id="wgt_abc123">
</script>Белый список доменов
Виджеты загружаются только на домены, указанные в allowedDomains. Обязательно добавьте все домены (включая варианты с www), где планируете встраивать виджет.