Inserta resultados de trading en vivo en Wix, Webflow, Squarespace o Shopify

Un widget de trading en vivo es un solo fragmento de HTML. Cualquier creador de sitios web lo acepta, pero cada uno esconde el elemento correcto bajo un nombre distinto y en cada uno hay un detalle que conviene conocer.

Esta página es una tabla de consulta con instrucciones: busca tu creador, sigue cuatro pasos y lee el único aviso. Para WordPress hay una guía aparte.

📋 El fragmento de código que vas a pegar

Lo obtienes en ShowMyTrades: conecta tu cuenta (MetaTrader, cTrader o TradeLocker), publícala, abre Widgets en el panel y copia el código. Todo es gratis.

<iframe
  id="smt-equity-a1b2c3d4e"
  src="https://showmytrades.com/widget/YOUR-ACCOUNT-SLUG?type=equity&theme=light"
  width="100%"
  height="400"
  loading="lazy"
  frameborder="0"
  style="border-radius: 8px; width: 100%;">
</iframe>
<script>
(function() {
  var iframe = document.getElementById('smt-equity-a1b2c3d4e');
  window.addEventListener('message', function(e) {
    if (e.data?.type === 'widget-resize' && e.source === iframe.contentWindow) {
      iframe.height = e.data.height;
    }
  });
})();
</script>

Tiene dos partes. El <iframe> es el widget. El <script> deja que el widget le diga a tu página cuánto mide de alto, así el marco crece y se encoge con el contenido. Algunos creadores ejecutan ese script y otros no: ese es el detalle que hay que conocer de cada uno.

Algunos creadores piden una dirección web en lugar de código. En ese caso usa solo la dirección que hay dentro de src="…": esa dirección es el widget.

🟦 Wix

1. En el editor, haz clic en Agregar elementos (Add Elements), el botón +.
2. Elige Insertar código (Embed Code) y luego Insertar HTML (Embed HTML).
3. Haz clic en Ingresar código (Enter Code), pega el fragmento completo y haz clic en Actualizar (Update).
4. Arrastra el elemento hasta el ancho y el alto que quieras, y publica.

El detalle. Wix mete tu código dentro de un marco propio, con el tamaño que arrastras. El widget no puede cambiar el tamaño de ese marco exterior, así que aquí el script no sirve de nada: fija la altura a mano, un poco más alta de lo que necesita el widget, y revísala también en la vista móvil. Los widgets de altura fija («Tarjeta de estadísticas», «Estadísticas en fila») son los que mejor encajan en Wix.

🟪 Webflow

1. Abre el panel Add y busca Code Embed.
2. Arrástralo hasta donde debe ir el gráfico.
3. Pega el fragmento completo y haz clic en Save & Close.
4. Publica el sitio.

El detalle. El script no se ejecuta dentro del Designer, así que en el lienzo el widget puede verse cortado o mostrar un marcador de posición. Júzgalo en el sitio publicado, donde cambia de tamaño sin problemas. Code Embed requiere un plan de pago de Webflow.

⬛ Squarespace

1. Edita la página y haz clic en Agregar bloque (Add Block).
2. Elige Código (Code).
3. Comprueba que el tipo sea HTML y que Mostrar código fuente (Display Source) esté desactivado, y pega el fragmento completo.
4. Guarda.

El detalle. Mientras tienes la sesión iniciada y estás editando, Squarespace puede mostrar el bloque desactivado por seguridad. Abre la página publicada en una ventana privada para ver el resultado real. Los bloques de código con scripts o iframes están disponibles en los planes que incluyen código personalizado, no en el plan básico.

🟩 Shopify

1. Ve a Tienda online → Temas (Online Store → Themes) y haz clic en Personalizar (Customize).
2. Abre la plantilla de la página donde debe aparecer el gráfico.
3. Haz clic en Agregar sección (Add section), o en Agregar bloque (Add block) dentro de una sección, y elige Liquid personalizado (Custom Liquid).
4. Pega el fragmento completo y guarda.

El detalle. Liquid personalizado existe en la generación actual de temas (Online Store 2.0), que incluye todos los temas gratuitos que Shopify ofrece hoy. Con un tema más antiguo, edita la página en Páginas (Pages), cambia el editor a HTML con el botón <> y pega ahí.

Si es una página de producto que vende un EA o una señal, lee resultados en real de tu EA en la página de ventas antes de decidir dónde va el gráfico.

🧩 Otros creadores

📐 Opciones que te ahorran problemas

Configúralas en el creador de widgets de ShowMyTrades antes de copiar el código.

🖼️ Si el creador no acepta código: usa una imagen

Algunos sitios no aceptan ningún código: un plan gratuito con el código personalizado bloqueado, una ficha en un marketplace, una herramienta de envío de boletines. Cada cuenta tiene además once imágenes que se actualizan solas, y una imagen se acepta en todas partes.

En el creador de widgets, elige Imagen autoactualizable, escoge el tipo y el tema (claro, oscuro o transparente) y copia la dirección de la imagen. Agrégala con el elemento de imagen normal de tu creador de sitios web y haz que la imagen enlace a la página de tu cuenta.

La imagen se vuelve a dibujar cuando cambian tus datos de trading. No es interactiva, así que úsala solo donde no pueda ir el widget en vivo.

❓ Preguntas frecuentes

El widget muestra una barra de desplazamiento por dentro. ¿Por qué? El marco es más bajo que su contenido y el script no ha podido cambiarle el tamaño. En Wix, Google Sites y Framer, pon a mano una altura mayor. En los demás, comprueba que el código pegado incluya también la parte del <script>.

El widget se ve bien en escritorio, pero en el teléfono sale cortado. El ancho se copió en píxeles. Vuelve al creador de widgets, pon el ancho al 100 % y copia el código otra vez.

¿Puedo poner más de un widget en una página? Sí. Copia cada uno por separado desde el creador de widgets: cada fragmento tiene su propio id, así que no se estorban.

¿Tengo que actualizar el código cuando hago operaciones nuevas? No. El widget pide los datos a ShowMyTrades cada vez que se carga la página.

¿Funciona con un plan gratuito de mi creador de sitios web? El widget en sí es gratis. Que puedas pegar código depende del creador: Webflow, Squarespace y Carrd reservan el código personalizado a los planes de pago. En esos casos, la «Imagen autoactualizable» es la vía gratuita.

¿Hay una app o un plugin de ShowMyTrades para estos creadores? No, y no hace falta: el fragmento de código es la integración.

🔗 Artículos relacionados

• Inserta tus resultados verificados en cualquier sitio: todos los widgets, formatos y opciones
• Cómo agregar resultados de trading a WordPress: Gutenberg, Elementor, Divi y el editor clásico
• Cómo crear una página de historial de resultados: qué poner alrededor del widget
• Resultados de trading en la firma de foro, el correo o el chat: los formatos de imagen en detalle

Conecta tu cuenta gratis, copia el widget y pégalo en tu creador de sitios web. Si quieres ver el código antes de registrarte, abre el Creador de widgets y elige cualquier cuenta pública.