Incorporar o 6MM Trading Widget: Início Rápido

A Trading Widget SDK incorpora a interface de negociação 6MM numa página web detida por um parceiro. A integração mais rápida requer um contentor visível, o script de produção SDK e uma chamada para TradingWidget.create().

Antes de começares

• Executar o exemplo a partir de uma página web que possa carregar recursos a partir de https://app.6mm.com.
• Dar ao contentor do widget uma largura e altura explícitas.
• Carregue a SDK antes de chamar TradingWidget.create().
• Planeie o fluxo de autenticação antes de ativar funcionalidades de conta ou negociação em produção.

Exemplo mínimo

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>

Quando a integração é bem-sucedida, o SDK cria um iframe dentro de #trading-widget e chama onReady. Capturar onError durante o desenvolvimento para que falhas de configuração e carregamento fiquem visíveis.

SDK URLs

Definir baseUrl explicitamente

Ao testar a partir de páginas pertencentes a parceiros, passe baseUrl para que o iframe aponte sempre para o domínio Web 6MM .

Controlos de ecrã

Os embeds parceiros escondem o cabeçalho do PC e o ticker do mercado inferior por defeito. Usa display quando precisares de mostrar essas áreas de concha ou esconder contentores de alto nível na página de troca embutida.

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

Tamanho do recipiente

Para layouts responsivos, mantenha a largura fluida e defina uma altura mínima adequada para cada ponto de interrupção. Um contentor com altura zero pode carregar o SDK com sucesso, deixando a interface de negociação invisível.

Verificar a integração

1. Confirme que o script de SDK retorna com sucesso no painel de rede do navegador.
2. Confirme onReady dispara assim que o iframe for inicializado.
3. Teste o symbol, locale, o tema e as secções ocultas configuradas.
4. Redimensione a página entre os pontos de interrupção do ambiente de trabalho e do telemóvel.
5. Completar um teste autenticado com um utilizador não produtivo antes do lançamento.

Questões comuns

Próximos passos