Get started

The Common Pattern Tracker is an embeddable widget for browsing classic price-formation patterns and managing real-time pattern alerts. Host it in your app with an <iframe>—no npm package or TradingView chart required.

Production origin: https://widget-common-pattern.iccandle.ai

What users can do

1. Browse patterns — View supported formations (double top/bottom, flags, AAD, rectangle, head and shoulders) on the home grid.
2. Turn on tracking — Enable alerts per pattern; iC Candle monitors your chosen markets and timeframes while markets are open.
3. Get email when a pattern is found — When a tracked setup forms, iC Candle sends a notification to the email you pass in the iframe URL (included with the subscription on the backend).
4. Review activity — Open a pattern’s detail route to see user activity and historical context in the widget.

Prerequisites

1. Create an API key in the iC Candle corporate portal for your widget integration.
2. Pass a stable userId from your auth system so pattern subscriptions are scoped to the signed-in user.
3. Pass the signed-in user’s email on the iframe URL so alert emails are delivered when tracked patterns are found.
4. Give the iframe a sized container (height and width on the host element or parent layout).

Embed with an iframe

Pass credentials and optional theme on the initial iframe URL. Re-include them after deploys or if the user clears site data for the widget origin.

Plain HTML

<iframe
  title="Common Pattern Tracker"
  src="https://widget-common-pattern.iccandle.ai/?apiKey=YOUR_API_KEY&userId=YOUR_USER_ID&email=user@example.com&theme=dark"
  style="width: 100%; height: 100%; border: 0"
  allow="clipboard-read; clipboard-write"
></iframe>

React (match host theme)

import { useTheme } from "next-themes";

const PatternTrackerPage = ({ userEmail }: { userEmail: string }) => {
  const { resolvedTheme } = useTheme();

  return (
    <div className="h-full w-full">
      <iframe
        title="Common Pattern Tracker"
        src={`https://widget-common-pattern.iccandle.ai/?apiKey=YOUR_API_KEY&userId=YOUR_USER_ID&email=${userEmail}&theme=${resolvedTheme}`}
        style={{ width: "100%", height: "100%", border: "0" }}
        allow="clipboard-read; clipboard-write"
      />
    </div>
  );
};

Replace YOUR_API_KEY, YOUR_USER_ID, and user@example.com with values from your backend or session. Issue keys server-side when possible instead of hard-coding them in public client bundles.

Use theme=light or theme=dark explicitly if you do not use next-themes or another theme hook.

Email alerts

When a user enables tracking for a pattern, the widget saves their subscription (symbols, timeframes, and optional alert window) to iC Candle. The email query parameter is stored in the iframe’s localStorage and sent with each subscribe/update request. If a tracked pattern is detected, iC Candle notifies that address by email.

Pass email on every iframe load (same as apiKey and userId) so subscriptions always tie alerts to the correct inbox.

warning

Without email, users can still use the widget, but they will not receive email notifications when patterns are found.

URL parameters

Parameter	Required	Values	Behavior
apiKey	Yes	API key from the corporate portal	Stored in the iframe’s localStorage as api-key and sent as the api-key header on widget API requests.
userId	Yes	Your user identifier	Stored as user-id. Used when loading and updating pattern subscriptions (GET / POST /common-pattern).
theme	No	light or dark	Applied by the widget’s style provider. Overrides the default from the widget style API when set.
email	Yes (for alerts)	User email address	Stored as user-email. Sent when subscribing or updating pattern tracking so iC Candle can email the user when a tracked pattern is found.

Query names are case-sensitive: use apiKey and userId exactly as shown.

Persistence: apiKey, userId, and optional email are written when the widget loads with those query params. In-app navigation (for example to /pattern/dd_top) reuses the same localStorage values. If the iframe opens directly on a sub-route without params ever being set, API calls may fail until you reload the iframe with apiKey and userId on the URL (or visit / with them first).

Theme on sub-routes: theme is handled in the root layout, so include it on any path in the iframe src (for example /pattern/flagbull?apiKey=…&userId=…&theme=light).

Example URLs

# Home — pattern grid and alert toggles
https://widget-common-pattern.iccandle.ai/?apiKey=abc123&userId=user-456&email=trader@example.com&theme=dark

# Pattern activity for one formation
https://widget-common-pattern.iccandle.ai/pattern/dd_top?apiKey=abc123&userId=user-456&email=trader@example.com&theme=light

Routes

Path	Description
/	Pattern list and real-time notification toggles
/pattern/[type]	Activity and detail for a single pattern type

Pattern type values

Use the value from pattern config as the URL segment after /pattern/:

type	Pattern
dd_bot	Double Bottom
dd_top	Double Top
flagbull	Bullish Flag
flagbear	Bearish Flag
aad_up	Bullish AAD
aad_down	Bearish AAD
rectangle	Rectangle
has_bull	Bullish Head and Shoulders
has_bear	Bearish Head and Shoulders

Layout tips

Pattern	Approach
Full-page embed	Parent with height: 100vh (or flex child with flex: 1) and iframe at width/height: 100%.
Dashboard panel	Fixed-height column or card; keep query params on every iframe load.
Theme sync	Pass theme from your app’s light/dark mode whenever the host theme changes (update src or remount the iframe).

Security notes

• Treat apiKey as a secret; prefer short-lived or per-tenant keys from your backend.
• Load the iframe over HTTPS.
• Credentials live in the iframe origin’s localStorage; clearing site data for widget-common-pattern.iccandle.ai requires passing query params again.
• Restrict embedding on your host with Content-Security-Policy and frame ancestors as needed.