Ir al contenido
winclus.com Volver a la guía técnica

Winclus en cada plataforma

Widget 0.8.4. En todas es lo mismo: una línea antes de </body> en la plantilla común. Aquí está dónde se pega en cada plataforma, y los plugins y módulos listos para las que los tienen.

En pocas palabras

<script src="https://winclus.com/widget.js" async data-idioma="es-CO"></script>

Los atributos opcionales (data-posicion, data-camara, data-idioma, data-arreglos…) están en la guía técnica. En Colombia deja data-idioma="es-CO".

WordPress

Plugin: descarga winclus-wordpress-0.8.6.zip, súbelo en Plugins → Añadir nuevo → Subir plugin y actívalo. En Ajustes → Winclus pones la clave del sitio (si tienes plan) y eliges posición, cámara, idioma, arreglos al vuelo, Centro de Relevo, servicio de IA y versión (por defecto «Siempre la última»). Viene en español y en inglés.

Sin plugin: Apariencia → Editor de temas → footer.php, antes de </body>; o con un plugin de «insertar cabeceras y pies» pega la línea en el pie.

Drupal 10 y 11

Módulo: descarga winclus-drupal-0.8.6.zip, descomprímelo en modules/contrib/ y actívalo (drush en winclus). Los ajustes, con la clave del sitio, están en Configuración → Interfaz de usuario → Winclus Accessibility. Para Drupal 10 y 11.

Sin módulo: en html.html.twig del tema, antes de </body>.

Joomla 4 y 5

Plugin de sistema: descarga plg_system_winclus-0.8.6.zip e instálalo desde Sistema → Instalar → Extensiones. Actívalo en Sistema → Plugins → «Sistema - Winclus Accesibilidad» y pon la clave del sitio, la posición, la cámara y el idioma en sus opciones. Se actualiza desde el propio Joomla.

Sin plugin: en la plantilla, templates/tu-plantilla/index.php antes de </body>; o un módulo «HTML personalizado» en una posición del pie con el editor en modo código.

PrestaShop 1.7 y 8

Módulo: descarga winclus-prestashop-0.8.6.zip e instálalo desde Módulos → Administrador de módulos → Subir un módulo. Se engancha en displayBeforeBodyClosingTag; en Configurar pones la clave del sitio y eliges posición, cámara e idioma.

Sin módulo: en el tema, themes/tu-tema/templates/_partials/footer.tpl o layouts/layout-both-columns.tpl, antes de </body>.

Magento 2 / Adobe Commerce

Contenido → Diseño → Configuración → edita tu tema → «Pie de página» → «Varios HTML»: pega la línea. Se aplica a toda la tienda sin tocar el tema. (Alternativa: HTML Head → «Scripts y hojas de estilo», aunque el pie es mejor.)

Shopify

Tienda online → Temas → Acciones → Editar código → layout/theme.liquid: pega la línea justo antes de </body>. Si usas el checkout personalizado de Shopify Plus, repítela en checkout.liquid.

Wix

Configuración → Avanzado → Código personalizado → «+ Agregar código personalizado»: pega la línea, aplícalo a «Todas las páginas», colócalo en «Fin del body» y guarda. Necesita un plan con dominio propio (Wix no permite código en los planes gratuitos).

Squarespace

Configuración → Avanzado → Inyección de código → «Pie de página»: pega la línea y guarda. Disponible en los planes Business y Commerce.

Webflow

Project settings → Custom code → «Footer code»: pega la línea, guarda y publica. Se aplica a todas las páginas del proyecto.

Framer

Site settings → General → Custom code → «End of <body> tag»: pega la línea y publica.

HubSpot CMS

Settings → Website → Pages → elige el dominio → «Site footer HTML»: pega la línea. Vale para páginas del sitio, landing pages y blog.

Ghost

Settings → Code injection → «Site footer»: pega la línea y guarda.

Moodle

Administración del sitio → Apariencia → HTML adicional → «Antes de que se cierre BODY»: pega la línea y guarda. Así todas las aulas y cursos llevan Winclus; junto a las herramientas de accesibilidad de Moodle (no las sustituye).

Odoo Website

Sitio web → Configuración → Ajustes → «Código personalizado» (o «Inyección de código») → «</body>»: pega la línea y guarda.

Blogger

Tema → Personalizar → «Editar HTML»: busca </body> y pega la línea justo antes. Guarda el tema.

Weebly

Configuración → SEO → «Código del pie de página»: pega la línea y publica.

Jimdo

Menú → Configuración → «Editar cabecera» (Jimdo Creator): pega la línea; se carga en todas las páginas. En Jimdo Dolphin no se puede añadir código: usa otra plataforma o pide ayuda.

Google Tag Manager

Etiqueta lista: importa integraciones/gtm/winclus-gtm.json (Administrar → Importar contenedor → «Combinar») y publica. Crea una etiqueta «HTML personalizado» con la línea de Winclus disparada en «All Pages».

A mano: Etiquetas → Nueva → HTML personalizado → pega la línea → activador «All Pages» → publica. Winclus no usa cookies ni envía datos, así que no necesita el consentimiento de cookies para cargarse; si tu gestor de consentimiento bloquea todo GTM hasta aceptar, ponlo mejor en la plantilla del sitio para que esté también para quien no acepta.

GOV.CO y MiColombiaDigital

En la administración del sitio, «código en el pie» o el pie de la plantilla común: pega la línea con data-idioma="es-CO". Recomendaciones para sujetos obligados por la Resolución 1519 en la guía técnica, apartado 5, y en el manual para entidades.

React, Vue, Angular, Svelte, Next.js, Nuxt

Carga winclus-elemento.js y usa el web component <winclus-widget>, o inserta el script una vez en el documento raíz (index.html, _document, app.html). El widget sobrevive a los cambios de ruta y arregla el contenido que llega después. Detalle en la guía técnica, apartado 3.

HTML estático, Hugo, Jekyll, Astro, Eleventy

En la plantilla base (baseof.html, default.html, Layout.astro, base.njk), antes de </body>.

SharePoint Online y Power Pages

Power Pages: Diseño → Configuración del sitio → «Código personalizado» o en la plantilla web «Encabezado/Pie», antes de </body>. SharePoint Online (sitios modernos): hace falta un extensor de aplicación (SPFx Application Customizer) que inserte el script; te lo pasamos con el acuerdo de soporte. En sitios clásicos, en la página maestra.

Comprobar que quedó bien

Abre tu sitio y pulsa Alt+Mayús+W: debe abrirse el panel. Si no, revisa que la línea esté en todas las páginas y que tu política de seguridad (CSP) permita https://winclus.com en script-src. Para saber cómo está tu sitio, y que nada empeore después, usa Winclus Audit y Winclus Monitor.