Skip to main content
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
Never expose an existing sk-... server API key in browser code, an iframe URL, a mobile bundle, or a public repository.

​
Integration flow

1

Choose a widget

Use the component guide below to select the widget that matches the user’s primary task.
2

Configure the experience

Open the component’s API Reference page. Use the embedded configurator to select data, appearance, dimensions, and supported behaviors.
3

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.
4

Validate in your layout

Test the widget at desktop and mobile breakpoints, verify domain authorization, and exercise all loading and failure states before release.

​
Choose the right component

​
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

Review the changelog

Track documentation changes and pending production integrations.

Open API Reference

Explore a live widget preview, its properties, and integration guidance.