TC
The Comparator
Academy Wiki / Guía de Integración

Guía de Integración de Widgets para Editores

Documentación paso a paso sobre cómo integrar Monitores de Ofertas, Indicadores de Valor y Widgets de Comparación en WordPress, Ghost y CMS personalizados.

Guía de Integración de Widgets para Editores

The Comparator ofrece widgets interactivos y ligeros de valor de hardware que los editores pueden integrar directamente en sus análisis y guías de compra de tecnología.

1. Tipos de Widgets y Casos de Uso

Tipo de Widget Ubicación Ideal en el Artículo Qué Muestra Enlace de Demostración
Monitor de Ofertas Ficha de análisis de producto Precio mínimo de mercado en vivo, stock, tendencia a 30 días Ver Demo
Indicador de Valor Sección de conclusión / veredicto Calibrador de Puntuación de Valor (0-100) relativo al mercado Ver Demo
Comparación Directa Artículos de enfrentamientos cara a cara Tabla comparativa de especificaciones y veredicto ganador Ver Demo

2. Integración Estándar mediante iFrame

Pega el código de iFrame adaptativo directamente en el bloque HTML de tu editor de artículos:

<!-- Widget Monitor de Ofertas de The Comparator -->
<iframe src="https://thecomparator.tech/embed/deal-ryzen-7-9800x3d.html" 
        width="100%" 
        height="450" 
        frameborder="0" 
        scrolling="no"
        loading="lazy" 
        title="AMD Ryzen 7 9800X3D — Precios y Puntuación de Valor">
</iframe>

3. Instrucciones Específicas por CMS

WordPress (Editor Gutenberg)

  1. Añade un bloque de HTML Personalizado en tu artículo.
  2. Pega el fragmento <iframe> mostrado arriba.
  3. Guarda o publica tu artículo.

Ghost CMS

  1. Haz clic en el icono + del editor de Ghost y selecciona HTML Card.
  2. Pega el fragmento <iframe>.

Webflow / Plataformas Personalizadas

Pega el código dentro de un componente de Embed.

4. Personalización de Parámetros del Widget

Puedes pasar parámetros de consulta en la URL para personalizar el comportamiento del widget:

  • theme=dark o theme=light: Fuerza un esquema de color específico.
  • currency=USD: Especifica la moneda del mercado.
  • subid=tu_etiqueta_editorial: Añade tu etiqueta de seguimiento de afiliados personalizada.

Ejemplo:

<iframe src="https://thecomparator.tech/embed/deal-ryzen-7-9800x3d.html?theme=dark&subid=techblog_analisis_2026" ...></iframe>