floors.js
floors.js transforma cualquier sitio web en un espacio social interactivo en 3D donde los visitantes aparecen como avatares, pueden moverse por las páginas y chatear en tiempo real sin fricciones.
¿Qué es floors.js?
floors.js — Convierte Tu Sitio Web en un Hotel Habbo
¿Qué es floors.js?
floors.js es un script revolucionario que inyecta interacción social persistente y en tiempo real directamente en tu sitio web existente mediante una sola línea de JavaScript. Convierte tus páginas web estáticas en salas 3D isométricas explorables, que recuerdan a juegos sociales clásicos como Habbo Hotel. En lugar de que los visitantes consuman contenido pasivamente, se convierten en avatares 3D tangibles que pueden verse entre sí, moverse entre páginas (salas) y participar en conversaciones en vivo directamente en tu dominio. Esto cambia fundamentalmente la interacción del sitio web de una transmisión unidireccional a un espacio digital compartido y persistente.
Esta herramienta resuelve el problema crítico de las altas tasas de rebote y la intención del visitante no capturada. Al convertir tu sitio en un 'lugar' en lugar de solo un documento, floors.js te permite estar presente, ofrecer asistencia inmediata, recopilar comentarios espontáneos y construir una atmósfera de comunidad genuina. No requiere absolutamente ninguna configuración de backend, integración de SDK o configuración compleja: solo inserta la etiqueta de script y tu sitio cobra vida instantáneamente con presencia.
Características Principales
- Presencia 3D Instantánea: Los visitantes aparecen inmediatamente como avatares 3D de bloques al llegar, con nombres aleatorios, lo que elimina la fricción del registro. Ven a otros visitantes en tiempo real.
- Mapeo de Salas Isométricas: Cada página de tu sitio se mapea automáticamente a un diseño de sala isométrico 3D único y explorable, completo con suelos y paredes.
- Navegación en Tiempo Real: Los avatares caminan por el suelo hasta donde hace clic el usuario. Las transiciones de sala son fluidas, detectadas automáticamente a través de cambios de navegación (listo para SPA con React, Next.js, Vue, etc.).
- Chat Sin Fricciones: Los mensajes aparecen como burbujas de voz flotantes sobre los avatares. Puedes chatear directamente con los visitantes mientras están navegando activamente por tu contenido.
- Configuración Cero Configuración: El script escanea automáticamente los enlaces de navegación (
<nav>) para definir las salas. Funciona universalmente en sitios estáticos, WordPress, Shopify y marcos modernos de JavaScript. - Enfoque en la Privacidad: Sin cookies, sin registro de IP, y solo utiliza un seudónimo aleatorio almacenado localmente. Está diseñado para ser compatible con GDPR por defecto.
- Opciones de Personalización: Los atributos de datos extensos permiten personalizar el color de acento, el nombre de visualización, los mensajes de bienvenida fijados por sala y la designación de un avatar propietario.
Cómo Usar floors.js
Comenzar con floors.js está diseñado para ser increíblemente rápido y sencillo, requiriendo solo un paso para la implementación básica:
- Obtén Tu Clave: Regístrate y recupera tu
data-keyúnico. - Pega el Script: Inserta la etiqueta
<script>proporcionada en el HTML de tu sitio web, normalmente justo antes de la etiqueta de cierre</body>.<script src="https://floorsjs.com/embed.js" data-key="flr_..." ></script> - Creación Automática de Salas: El script comienza inmediatamente a escanear la estructura de navegación de tu sitio para definir las diferentes páginas como salas de chat distintas.
- Interactúa: Una vez cargado, tú y tus visitantes verán aparecer avatares. Puedes hacer clic en el icono del widget (generalmente abajo a la derecha) para abrir el panel de chat y comenzar a interactuar con los usuarios que navegan por diferentes partes de tu sitio simultáneamente.
Para un control avanzado, puedes añadir atributos opcionales a la etiqueta de script, como data-accent para que coincida con tu marca o data-pinned-message para establecer anuncios específicos de la sala.
Casos de Uso
- Soporte y Ventas de Comercio Electrónico: En lugar de depender de ventanas emergentes de chat en vivo estáticas, el personal de ventas puede recorrer la 'sala de página de producto' y saludar proactivamente a los compradores que se detienen, ofreciendo asesoramiento contextual inmediato u oportunidades de venta adicional.
- Centros de Documentación de SaaS/Software: Los redactores técnicos y los agentes de soporte pueden monitorear las páginas de documentación. Cuando un usuario se atasca en una guía compleja, un avatar experto puede aparecer instantáneamente a su lado para ofrecer una aclaración, reduciendo los tickets de soporte.
- Eventos y Conferencias Virtuales: Utiliza floors.js para crear áreas de vestíbulo persistentes o salas de descanso para eventos virtuales alojados en un sitio web estándar, permitiendo a los asistentes mezclarse y establecer contactos visualmente entre sesiones programadas.
- Creación de Comunidad en Blogs/Foros: Transforma las publicaciones de blog con mucho tráfico en puntos de encuentro persistentes donde los lectores pueden discutir el contenido del artículo en tiempo real, fomentando un sentido de comunidad más fuerte en torno a tu contenido.
- Recopilación de Comentarios en Tiempo Real: Lanza una nueva función o página de destino y observa cómo los visitantes interactúan con ella en 3D. Puedes recopilar comentarios cualitativos inmediatos charlando con los usuarios mientras experimentan el nuevo diseño o funcionalidad por primera vez.
Preguntas Frecuentes (FAQ)
P: ¿Qué cuenta exactamente como un visitante concurrente? R: Un visitante concurrente es cualquiera conectado activamente a tu sitio en el mismo momento. Si un visitante cierra su pestaña o navega completamente fuera de tu dominio, su espacio se libera. El plan vitalicio admite hasta 100 visitantes concurrentes por sitio.
P: ¿Requiere esto una integración compleja para marcos modernos como Next.js o Shopify?
R: No. Para Shopify y sitios estáticos, pegas la etiqueta de script en el pie de página de tu tema. Para Aplicaciones de Página Única (SPA) como Next.js, Vue o Astro, floors.js se conecta automáticamente al sistema de enrutamiento (pushState/popstate), asegurando que los cambios de sala ocurran sin problemas cuando los usuarios navegan internamente.
P: ¿Qué sucede si supero el límite de visitantes concurrentes? R: Los nuevos visitantes se colocan en una cola de espera. Se unirán automáticamente al espacio 3D tan pronto como un visitante existente se vaya, asegurando que aquellos que ya están presentes nunca se desconecten.
P: ¿Cumple esto con el GDPR?
R: Sí, floors.js está diseñado para priorizar la privacidad. No utiliza cookies, no registra direcciones IP y solo almacena un seudónimo aleatorio temporal en localStorage. No requiere avisos de consentimiento explícito para la funcionalidad básica.
P: ¿Cuál es la garantía si el producto no se ajusta a mis necesidades? R: floors.js ofrece una garantía de devolución de dinero de 7 días. Si no estás satisfecho durante la primera semana de prueba del servicio, puedes enviar un correo electrónico al equipo para obtener un reembolso completo.
Alternatives
Prompty Town
Prompty Town es una plataforma innovadora que permite a los usuarios transformar sus enlaces en edificios virtuales, creando una forma única y atractiva de compartir e interactuar con contenido.
Make Real
Dibuja una UI y hazla real usando el SDK de tldraw.
beehiiv
beehiiv es una plataforma de boletines informativos todo en uno que proporciona herramientas integradas para la publicación de correo electrónico, creación de sitios web sin código, crecimiento de audiencia y monetización para creadores y marcas.
Actor Builder
Actor Builder te convierte instantáneamente en un actor, permitiéndote ser cualquier personaje en cualquier escenario.
Mixels.ai
Mixels.ai es un generador de arte en píxeles impulsado por IA que permite a los usuarios convertir imágenes en arte en píxeles y crear avatares de estilo 8 bits con una alineación de cuadrícula perfecta.
Fronty
Fronty es un convertidor de imagen a HTML CSS impulsado por IA que permite a los usuarios generar rápidamente código HTML y CSS a partir de imágenes.