DigiMetrics OÜ

Guías y Documentación / 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)

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

Ghost CMS

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

Webflow / Plataformas Personalizadas

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

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_review_2026" ...></iframe>