Widget Có thể Nhúng

Tạo và quản lý các widget có thể nhúng cho website của bạn. Widget cung cấp các thành phần UI sẵn sàng sử dụng cho các tính năng chiêm tinh học có thể được tích hợp vào bất kỳ trang web nào chỉ với một thẻ script.

Module Bắt buộc

Tất cả các endpoint widget yêu cầu module module:embeddable-widgets được kích hoạt cho tổ chức của bạn.

Các loại widget sau có sẵn dựa trên các module đang hoạt động của bạn:

Loại	Mô tả	Module Bắt buộc
`natal`	Lá số tử vi tương tác	`natal:calc`
`synastry`	Lá số so sánh hợp tinh	`synastry:calc`
`transit`	Lớp phủ lá số quá độ	`transit:calc`
`composite`	Lá số kết hợp quan hệ	`composite:calc`
`moonphase`	Hiển thị pha trăng	`moonphase:calc`
`daily-horoscope`	Tử vi hàng ngày cho tất cả các cung	`module:daily-report`
`numerology`	Biểu mẫu hồ sơ số học	`module:numerology`
`compatibility`	Tương hợp cung mặt trời	`compatibility:calc`
`moon-calendar`	Lịch mặt trăng hàng tháng	`moon-calendar:calc`

bash

curl "https://api.astroapi.cloud/api/widgets" \
  -H "X-Api-Key: your-api-key"

bash

curl "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
  -H "X-Api-Key: your-api-key"

Widget được tạo bằng định dạng JSON:API:

bash

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"
          }
        }
      }
    }
  }'

bash

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"
        }
      }
    }
  }'

bash

curl -X DELETE "https://api.astroapi.cloud/api/widgets/wgt_abc123" \
  -H "X-Api-Key: your-api-key"

json

{
    "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"
        }
    }
}

Tái tạo API Key

Tái tạo API key nhúng của widget. Sử dụng nếu key đã bị xâm phạm:

bash

curl -X POST "https://api.astroapi.cloud/api/widgets/wgt_abc123/regenerate-key" \
  -H "X-Api-Key: your-api-key"

Xoay vòng Key

Sau khi tái tạo key, các nhúng hiện có sử dụng key cũ sẽ ngừng hoạt động ngay lập tức. Bạn không cần cập nhật mã nhúng — ID widget vẫn giữ nguyên.

Lấy các loại widget có sẵn cho tổ chức của bạn dựa trên các module đang hoạt động:

bash

curl "https://api.astroapi.cloud/api/widgets/options" \
  -H "X-Api-Key: your-api-key"

Phản hồi

json

{
    "data": {
        "availableTypes": ["natal", "moonphase", "daily-horoscope"],
        "planFeatures": {
            "canRemoveBranding": false,
            "canUseCustomLogo": false,
            "canUseCustomCss": true,
            "maxDomains": 5
        }
    }
}

Tính năng Gói

Tính năng	Mô tả
`canRemoveBranding`	Liệu thương hiệu AstroAPI có thể được ẩn
`canUseCustomLogo`	Liệu logo tùy chỉnh có thể hiển thị thay cho mặc định
`canUseCustomCss`	Liệu CSS tùy chỉnh có thể được inject vào widget
`maxDomains`	Số lượng tối đa tên miền được phép mỗi widget

Đối tượng Tùy chỉnh

Đối tượng customization kiểm soát giao diện và hành vi của widget:

json

{
    "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"
    }
}

Các Trường Tùy chỉnh

Trường	Kiểu	Mô tả
`colors.primary`	string	Màu nhấn chính (hex)
`colors.secondary`	string	Màu nhấn phụ (hex)
`colors.background`	string	Màu nền widget (hex)
`colors.text`	string	Màu văn bản chính (hex)
`colors.border`	string	Màu viền (hex)
`fonts.family`	string	Giá trị CSS font-family
`fonts.size`	string	Kích thước phông chữ cơ sở (giá trị CSS)
`borders.radius`	string	Bán kính viền cho thẻ và đầu vào (giá trị CSS)
`borders.width`	string	Độ rộng viền (giá trị CSS)
`spacing.padding`	string	Khoảng đệm nội bộ (giá trị CSS)
`spacing.gap`	string	Khoảng cách giữa các phần tử (giá trị CSS)
`shadows.card`	string	CSS box-shadow cho các phần tử thẻ
`layout`	string	Kiểu bố cục widget (xem bên dưới)
`interaction.allowUserInput`	boolean	Liệu người dùng có thể nhập dữ liệu sinh của họ
`interaction.showTooltips`	boolean	Hiển thị tooltip khi di chuột
`branding.showPoweredBy`	boolean	Hiển thị huy hiệu "Powered by AstroAPI"
`branding.logoUrl`	string \| null	URL logo tùy chỉnh (yêu cầu `canUseCustomLogo`)
`language`	string	Mã ngôn ngữ hiển thị
`customCss`	string \| null	Injection CSS tùy chỉnh (yêu cầu `canUseCustomCss`)
`widgetOptions.showAspects`	boolean	Hiển thị đường góc chiếu trên lá số
`widgetOptions.showPoints`	boolean	Hiển thị ký hiệu hành tinh trên lá số
`widgetOptions.showHouses`	boolean	Hiển thị phân chia cung nhà trên lá số
`widgetOptions.chartSize`	number	Kích thước lá số tính bằng pixel
`widgetOptions.theme`	string	Giao diện màu sắc (`"light"` hoặc `"dark"`)

Các Tùy chọn Bố cục

Giá trị	Mô tả
`compact`	Không gian tối thiểu, phù hợp cho sidebar
`card`	Thẻ tròn có bóng (mặc định)
`full`	Toàn chiều rộng, không viền
`minimal`	Không nền, không viền

Sau khi tạo widget, sao chép embedCode từ phản hồi và dán vào HTML của website của bạn:

html

<!-- Đặt ở nơi bạn muốn widget xuất hiện -->
<div id="astroapi-widget-container"></div>

<!-- Tải script widget -->
<script
    src="https://cdn.astroapi.cloud/widget.js"
    data-widget-id="wgt_abc123">
</script>

Danh sách Tên miền Cho phép

Widget chỉ tải trên các tên miền được liệt kê trong allowedDomains. Hãy chắc chắn thêm tất cả các tên miền (bao gồm cả biến thể www) nơi bạn định nhúng widget.

Widget Có thể Nhúng

Các Loại Widget

Quản lý Widget

Liệt kê Widget

Lấy Widget

Tạo Widget

Cập nhật Widget

Xóa Widget

Phản hồi Widget

Tái tạo API Key

Các Tùy chọn Widget Có sẵn

Phản hồi

Tính năng Gói

Đối tượng Tùy chỉnh

Các Trường Tùy chỉnh

Các Tùy chọn Bố cục

Nhúng Widget

Widget Có thể Nhúng ​

Các Loại Widget ​

Quản lý Widget ​

Liệt kê Widget ​

Lấy Widget ​

Tạo Widget ​

Cập nhật Widget ​

Xóa Widget ​

Phản hồi Widget ​

Tái tạo API Key ​

Các Tùy chọn Widget Có sẵn ​

Phản hồi ​

Tính năng Gói ​

Đối tượng Tùy chỉnh ​

Các Trường Tùy chỉnh ​

Các Tùy chọn Bố cục ​

Nhúng Widget ​

Widget Có thể Nhúng

Các Loại Widget

Quản lý Widget

Liệt kê Widget

Lấy Widget

Tạo Widget

Cập nhật Widget

Xóa Widget

Phản hồi Widget

Tái tạo API Key

Các Tùy chọn Widget Có sẵn

Phản hồi

Tính năng Gói

Đối tượng Tùy chỉnh

Các Trường Tùy chỉnh

Các Tùy chọn Bố cục

Nhúng Widget