> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ainvest.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

> Plan, configure, and integrate your first AInvest Widget.

AInvest Widgets are embeddable financial components for charts, quotes, market discovery, scheduled events, market visualization, and news. Each API Reference page combines product guidance with a developer-provided configurator iframe.

## Before you begin

Prepare the following before integrating a production widget:

* The domain or application where the widget will appear
* The component and minimum container size required by the page layout
* A browser-safe Widget credential approved for the intended domains
* A plan for loading, empty, delayed-data, authorization, and reconnecting states

<Warning>
  Never expose an existing `sk-...` server API key in browser code, an iframe URL, a mobile bundle, or a public repository.
</Warning>

## Integration flow

<Steps>
  <Step title="Choose a widget">
    Use the component guide below to select the widget that matches the user's primary task.
  </Step>

  <Step title="Configure the experience">
    Open the component's API Reference page. Use the embedded configurator to select data, appearance, dimensions, and supported behaviors.
  </Step>

  <Step title="Copy the generated integration code">
    Copy the implementation produced by the configurator. The final loader URL, attributes, and framework examples are supplied by the production Widget service.
  </Step>

  <Step title="Validate in your layout">
    Test the widget at desktop and mobile breakpoints, verify domain authorization, and exercise all loading and failure states before release.
  </Step>
</Steps>

## Choose the right component

| User need                                           | Recommended widget                                        |
| --------------------------------------------------- | --------------------------------------------------------- |
| Technical analysis and historical price exploration | [Super Chart](/widgets/api-reference/super-chart)         |
| Track a saved or curated set of securities          | [Watchlist](/widgets/api-reference/watchlist)             |
| Discover leading, active, or unusual securities     | [Top List](/widgets/api-reference/top-list)               |
| Show a compact security snapshot                    | [Quick Quote](/widgets/api-reference/quick-quote)         |
| Track earnings and scheduled market events          | [Market Calendar](/widgets/api-reference/market-calendar) |
| Understand broad market or sector performance       | [Heat Map](/widgets/api-reference/heat-map)               |
| Follow timely market-moving headlines               | [News Wire](/widgets/api-reference/news-wire)             |

## Plan the container

Widgets should follow the width of their parent container. Give the container an explicit height so the page remains stable while the iframe loads. Avoid nesting widgets inside containers that change size continuously or hide overflow needed for menus and tooltips.

For multi-widget dashboards, use a responsive CSS Grid or Flexbox layout. Stack components vertically at smaller breakpoints and keep the primary analysis component above supporting context.

## Production checklist

* Confirm the production iframe origin, loader, and credential contract with engineering.
* Allow the required iframe origin in Content Security Policy and frame restrictions.
* Restrict browser credentials to approved production and preview domains.
* Use a descriptive `title` for every iframe and preserve keyboard navigation.
* Reserve sufficient height to prevent layout shift during initialization.
* Verify market-closed, delayed-data, empty, authorization, rate-limit, and reconnecting states.
* Test theme contrast, mobile density, localization, and timestamp clarity.

## Next steps

<CardGroup cols={2}>
  <Card title="Review the changelog" icon="clock-rotate-left" href="/widgets/changelog">
    Track documentation changes and pending production integrations.
  </Card>

  <Card title="Open API Reference" icon="book-open" href="/widgets/api-reference/super-chart">
    Explore a live widget preview, its properties, and integration guidance.
  </Card>
</CardGroup>