Catálogo de widgets
Guía de integración de widgets
Todos los widgets siguen el mismo patrón: un único script, opcionalmente con configuración embebida o global.
Patrón 1 · Atributo en el script
<!-- Reemplaza my-widget y la versión por la que corresponda -->
<script
src="https://static.serveisexterns.com/js/my-widget.v1.0.js"
data-config='{"opcion":"valor"}'
></script>Patrón 2 · Configuración global
<script>
window.MY_WIDGET_CONFIG = { opcion: 'valor' };
</script>
<script src="https://static.serveisexterns.com/js/my-widget.v1.0.js"></script>- Versionado: usa archivos versionados (ej.:
.v1.0.js). - Sin dependencias: widgets en JS nativo, ligeros.
- Accesibilidad: cada widget documenta sus atajos y roles.
- SEO: si aplica (p. ej., i18n), sigue las notas de la sección.
Pestañas de demostración
Widget: Selector de Idioma flotante
Widget fijo en la esquina inferior derecha, con banderas, nombres, menú desplegable y soporte móvil/escritorio. No requiere dependencias ni cuentas externas.
- Un solo script
- Responsive
- Sin dependencias (JS nativo)
- Configurable por atributo
data-languageso porwindow.LANG_SWITCHER_CONFIG
Uso rápido (V1)
Copia y pega antes de </body> en tu página:
<script
src="https://static.serveisexterns.com/js/lang-switcher.v1.0.js"
data-languages='[
{"code":"fr","name":"Français","flag":"https://flagcdn.com/fr.svg","url":"https://tusitio.com/"},
{"code":"es","name":"Español","flag":"https://flagcdn.com/es.svg","url":"https://tusitio.com/es/"},
{"code":"en","name":"English","flag":"https://flagcdn.com/us.svg","url":"https://tusitio.com/en/"}
]'
></script>Alternativamente, define la configuración global y carga el script sin atributos:
<script>
window.LANG_SWITCHER_CONFIG = {
languages: [
{ code: 'fr', name: 'Français', flag: 'https://flagcdn.com/fr.svg', url: 'https://tusitio.com/' },
{ code: 'es', name: 'Español', flag: 'https://flagcdn.com/es.svg', url: 'https://tusitio.com/es/' },
{ code: 'en', name: 'English', flag: 'https://flagcdn.com/us.svg', url: 'https://tusitio.com/en/' }
]
};
</script>
<script src="https://static.serveisexterns.com/js/lang-switcher.v1.0.js"></script>Widget: Selector de Idioma flotante
Widget fijo en la esquina inferior derecha, con banderas, nombres, menú desplegable y soporte móvil/escritorio. No requiere dependencias ni cuentas externas.
- Un solo script
- Responsive
- Sin dependencias (JS nativo)
- Configurable por atributo
data-languageso porwindow.LANG_SWITCHER_CONFIG
Versiones
- V1: conmutador entre páginas separadas por idioma. Demo: /lang-switcher/v1/
- V2: misma página con JSON e i18n. Ver “Uso V2”.
Uso V2 (misma página con JSON)
Define el listado de idiomas y la configuración i18n. Crea /i18n/es.json, /i18n/en.json, etc. y marca tu HTML con data-i18n. El widget recargará la URL con ?lang=xx y aplicará las traducciones.
<script
src="https://static.serveisexterns.com/js/lang-switcher.v2.0.js"
data-languages='[
{"code":"es","name":"Español","flag":"https://flagcdn.com/es.svg"},
{"code":"en","name":"English","flag":"https://flagcdn.com/us.svg"},
{"code":"fr","name":"Français","flag":"https://flagcdn.com/fr.svg"}
]'
data-i18n='{"strategy":"param","defaultLang":"es","translationsBase":"/i18n"}'
></script>
<!-- Ejemplos de marcado traducible -->
<h1 data-i18n="home.title"></h1>
<p data-i18n="home.subtitle"></p>
<input data-i18n="form.name" data-i18n-attr="placeholder" placeholder="Tu nombre" />La siguiente demo carga el mismo script con configuración inline.
Prueba a cambiar entre ES/EN/FR.
Widget: Botón flotante para volver arriba
Botón fijo en la parte inferior, centro o superior derecha de la pantalla y soporte móvil/escritorio. No requiere dependencias ni cuentas externas.
- Un solo script
- Responsive
- Sin dependencias (JS nativo)
- Configurable por atributo
data-positiono porwindow.BACK_TO_TOP_CONFIG
Notas
- Privacidad: el widget no almacena cookies ni datos.
- Accesibilidad: se puede cerrar con tecla Esc.
- Compatibilidad: navegadores modernos (no requiere transpilers).