← Todos los artículos

Nuevo: incrusta Reroute NJ en tu sitio web

Por Joe Amditis

El cambio del Portal Bridge comienza el sábado. Si cubres el transporte en New Jersey — o si gestionas un sitio comunitario, una página de Facebook de tu ciudad o un foro de viajeros — ahora puedes poner las herramientas de Reroute NJ directamente en tu sitio web.

Acabamos de lanzar un sistema completo de incrustación. Cuatro formatos de salida, un configurador visual que crea el código de incrustación por ti, y exportación PNG para redes sociales y boletines por correo electrónico. Todo es de uso gratuito.

Cuatro formas de incrustar

Tarjetas de información — Tarjetas compactas que muestran el impacto de la línea, detalles de la estación o un resumen completo del cambio. Coloca una en la barra lateral de un artículo o en la parte superior de un blog en vivo. Tres tipos de tarjetas: tarjetas de línea (impacto de una línea), tarjetas de estación (cambios de una estación) y tarjetas de resumen (las cinco líneas de un vistazo).

Widgets interactivos — Versiones mini de la guía de líneas, herramienta de comparación, feed de noticias o mapa. Estas son herramientas en vivo y funcionales con las que los lectores pueden interactuar dentro de tu página. Elige una herramienta y se carga en un iframe del tamaño adecuado.

Incrustaciones de herramientas completas — Cualquier página de Reroute NJ sin el encabezado ni el pie de página. Añade ?embed=true a cualquier URL de herramienta y se vuelve incrustable. Ideal para páginas dedicadas al cambio donde quieres dar a los lectores la experiencia completa.

Incrustaciones con etiqueta de script — Una sola etiqueta <script> y un <div>. No se necesita configuración de iframe. Añade el div con atributos de datos para el tipo de incrustación, línea y estación, incluye el script y él se encarga del resto. Funciona en CMS donde pegar código de iframe está restringido.

El configurador

La página de incrustación tiene un configurador visual que te guía para elegir tu tipo de incrustación, seleccionar la línea y la estación, elegir un tema (claro u oscuro) y establecer un color de acento personalizado. Muestra una vista previa en vivo y te proporciona código para copiar y pegar en los cuatro formatos.

Para las tarjetas de información, también obtienes un botón Download PNG que renderiza la tarjeta a una imagen de alta fidelidad. La exportación PNG usa renderizado Canvas (no una captura de pantalla), por lo que el texto se mantiene nítido en cualquier tamaño. Úsalo en boletines, tweets o folletos impresos.

También hay una opción Download HTML que te da un archivo autocontenido con todos los estilos y datos incluidos. Sin dependencias externas, sin solicitudes de red. Ábrelo en un navegador y funciona sin conexión.

Personalización

Cada incrustación admite dos opciones de personalización:

  • Theme — Claro u oscuro. Añade &theme=dark a cualquier URL de incrustación o establece data-theme="dark" en el div de etiqueta de script.
  • Accent color — Cualquier color hexadecimal. Añade &accent=FF6B35 o establece data-accent="FF6B35". El acento se aplica a los botones de llamada a la acción y resaltados de color.

Adapta la incrustación al diseño de tu sitio sin tocar ningún código.

Para salas de redacción

Construimos esto para ti. El cambio dominará la cobertura del transporte en la región durante un mes, y tus lectores necesitan herramientas, no solo artículos. Una tarjeta de línea en tu barra lateral le dice a un viajero de Montclair-Boonton exactamente qué cambia para ellos. Un widget de comparación permite a un lector ingresar su estación y ver todas las rutas alternativas.

Los códigos de incrustación funcionan en WordPress, Squarespace, Ghost, Substack (con el formato de etiqueta de script) y cualquier plataforma que acepte HTML. Si tienes problemas para incrustar en tu plataforma específica, abre un issue o envía un correo electrónico a [email protected] y te ayudaremos.

Todo tiene licencia MIT. No se requiere atribución, aunque apreciamos un enlace de vuelta a reroutenj.org.

Qué más hay de nuevo

Junto con el sistema de incrustación, esta versión incluye:

  • Blog en los 11 idiomas — Las publicaciones del blog ahora están traducidas junto con el resto del sitio. El blog tiene su propia página de índice con una estructura de publicación adecuada.
  • SEO y optimización de búsqueda de IA — Datos estructurados (JSON-LD), referencias cruzadas hreflang completas, robots.txt con orientación para bots de IA, llms.txt para motores de búsqueda de IA y sitemap.xml que cubre las 79 páginas.
  • Descargas HTML autocontenidas — Exporta cualquier tarjeta de información como un archivo HTML independiente que funciona sin conexión a internet.

Pruébalo

Ve al configurador de incrustación, elige un formato y copia el código. Toma unos 30 segundos.

Si incrusta Reroute NJ en tu sitio, nos gustaría saberlo. Envíanos un mensaje a [email protected] — agregaremos tu sitio a nuestra página de cobertura.