# 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: 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:
```
GET https://docs.astronomyapi.com/widgets.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.