Incrustar el 6MM Trading Widget: Inicio rápido

El Trading Widget SDK integra la interfaz de trading 6MM dentro de una página web propiedad del socio. La integración más rápida requiere un contenedor visible, el script de SDK de producción y una llamada a TradingWidget.create().

Antes de empezar

• Ejecutar el ejemplo desde una página web que pueda cargar recursos desde https://app.6mm.com.
• Asignar al contenedor del widget un ancho y una altura explícitos.
• Carga el SDK antes de llamar a TradingWidget.create().
• Planificar el flujo de autenticación antes de habilitar funciones de cuenta o trading en producción.

Ejemplo 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>

Cuando la integración tiene éxito, el SDK crea un iframe dentro de #trading-widget y llama a onReady. Capture onError durante el desarrollo para que los fallos de configuración y carga sean visibles.

SDK URLs

Establecer baseUrl explícitamente

Cuando pruebes desde páginas propiedad del socio, pasa baseUrl para que el iframe siempre apunte al dominio web 6MM .

Controles de pantalla

Las incrustaciones de socios ocultan por defecto la cabecera del PC y el ticker de mercado inferior. Usa display cuando necesites mostrar esas áreas de shell o ocultar contenedores de alto nivel en la página de trading incrustada.

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

Tamaño del contenedor

Para diseños responsivos, mantén el ancho fluido y establece una altura mínima adecuada para cada punto de interrupción. Un contenedor con altura cero puede cargar el SDK con éxito dejando invisible la interfaz de negociación.

Verifica la integración

1. Confirmar que el script de SDK regresa correctamente en el panel de red del navegador.
2. Confirmar onReady se dispara una vez que el iframe esté inicializado.
3. Prueba las secciones configuradas symbol locale, tema y ocultas.
4. Redimensionar la página entre los puntos de interrupción de escritorio y móvil.
5. Completar una prueba autenticada con un usuario no productivo antes del lanzamiento.

Cuestiones comunes

Próximos pasos