> For the complete documentation index, see [llms.txt](https://docs.astronomyapi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.astronomyapi.com/widgets.md).
# Widgets
Need to integrate any of the studio endpoints on your website quickly? You might be looking for AstronomyAPI Widgets.
## Bare minimum
Widgets script can be loaded to your webpage by including a script tag inside the `` tags, as shown below. Make sure to update the `yourEncryptedAuthString` with the base64 string you created as mentioned in the [authentication instructions](/readme.md#basic-authentication). Notice how the string should not include the term `Basic`.
{% code overflow="wrap" %}
```javascript
My Website
```
{% endcode %}
A \ tag is required to populate the widget. By default, the element id must be `moon-phase` or `star-chart`, depending on the type of widget you need.
A full list of examples could be found in the [examples folder on GitHub](https://github.com/AstronomyAPI/Widgets/tree/main/examples)
## Plugin API
The client instance is created using `new AstronomyAPI({...options})`. The parameter `basicToken` is required to initiate the class.
All methods follow the same payload body as the [moon phase](/endpoints/studio/moon-phase.md) or [star chart](/endpoints/studio/star-chart.md) API with an optional parameter `element` which can be used to attach a custom HTML element instead of the default element selector.
```
client.moonPhase({..options}, (response) => {})
client.starChart({..options}, (response) => {})
```
A callback function can be passed as the second parameter for each method. The callback function will be passed with the original response received from the API.
```javascript
var client = new AstronomyAPI({
basicToken: "yourEncryptedAuthString", // required
});
client.moonPhase(
{
element: "#moon-phase-element", // custom html element
format: "png",
style: {
moonStyle: "sketch",
backgroundStyle: "stars",
backgroundColor: "red",
headingColor: "white",
textColor: "white",
},
observer: {
latitude: 40.712772,
longitude: -73.935242,
date: "2020-10-28",
},
view: {
type: "portrait-simple",
},
},
(re) => { // callback function
console.log("done", re);
},
);
});
```
```javascript
var client = new AstronomyAPI({
basicToken: "yourEncryptedAuthString",
});
client.starChart(
{
element: "#star-chart-element", // custom html element
style: "navy",
observer: {
latitude: 12.775867,
longitude: -23.39733,
date: "2012-12-21",
},
view: {
type: "constellation",
parameters: {
constellation: "ori",
},
},
},
(re) => { // callback function
console.log("done", re);
},
);
});
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.astronomyapi.com/widgets.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.