Embed the 6MM Trading Widget: Quick Start

The Trading Widget SDK embeds the 6MM trading interface inside a partner-owned web page. The quickest integration requires a visible container, the production SDK script, and a call to TradingWidget.create().

Before you start

• Run the example from a web page that can load resources from https://app.6mm.com.
• Give the widget container an explicit width and height.
• Load the SDK before calling TradingWidget.create().
• Plan the authentication flow before enabling account or trading features in production.

Minimal example

1
<div id="trading-widget" style="width: 100%; height: 720px"></div>
2
3
<script src="https://app.6mm.com/sdk/trading-widget/v1/index.js"></script>
4
<script>
5
  const widget = TradingWidget.create('#trading-widget', {
6
    baseUrl: 'https://app.6mm.com',
7
    symbol: 'BTCUSDT',
8
    theme: 'dark',
9
    locale: 'en',
10
    layout: 'default',
11
    display: {
12
      showHeader: false,
13
      showTicker: false,
14
      hidden: [],
15
    },
16
    onReady(event) {
17
      console.log('ready', event)
18
    },
19
    onError(error) {
20
      console.error('error', error)
21
    },
22
  })
23
</script>

When the integration succeeds, the SDK creates an iframe inside #trading-widget and calls onReady. Capture onError during development so configuration and loading failures are visible.

SDK URLs

Set baseUrl explicitly

When testing from partner-owned pages, pass baseUrl so the iframe always points to the 6MM Web domain.

Display controls

Partner embeds hide the PC header and bottom market ticker by default. Use display when you need to show those shell areas or hide high-level containers in the embedded trading page.

1
display: {
2
  showHeader: false,
3
  showTicker: false,
4
  hidden: ['account'],
5
}

Container size

For responsive layouts, keep the width fluid and set an appropriate minimum height for each breakpoint. A container with zero height can load the SDK successfully while leaving the trading interface invisible.

Verify the integration

1. Confirm the SDK script returns successfully in the browser network panel.
2. Confirm onReady fires once the iframe is initialized.
3. Test the configured symbol, locale, theme, and hidden sections.
4. Resize the page across desktop and mobile breakpoints.
5. Complete an authenticated test with a non-production user before launch.

Common issues

Next steps