¿Cómo puedo agregar componentes de la integración de nuby en WordPress?

Aprende a gestionar y visualizar las funcionalidades de tu inmobiliaria en tu sitio web. Esta guía te explicará cómo usar los "Componentes Web" (plugins) de nuby para mostrar tus inmuebles, captar clientes y recibir solicitudes directamente en tu CRM. 

 Antes de empezar: Requisito Importante Para que los componentes que verás en esta guía funcionen, es indispensable que tu sitio WordPress tenga instalados y activos los  plugins requeridos del ecosistema. ¿Aún no los has instalado? Por favor, revisa primero nuestra guía paso a paso: ¿Cómo puedo instalar y actualizar los plugins para la integración de nuby con WordPress? 

 

 🧩 ¿Qué son los Componentes Web? 

 Son pequeñas aplicaciones o "bloques" funcionales que conectan tu página web (WordPress) con tu sistema nuby. Permiten que los visitantes vean tu inventario en tiempo real o te envíen datos que llegarán automáticamente a tu software. 

 Para usarlos, utilizamos Shortcodes (códigos cortos). Piensa en ellos como "etiquetas mágicas": al pegar un pequeño texto entre corchetes [...] en una página, el sistema mostrará automáticamente un buscador completo, un mapa o un formulario. 

 

 🛠️ Instrucciones de Implementación 

 Para mostrar cualquier funcionalidad de nuby en tu web, utilizamos un sistema de Shortcodes . Un shortcode es una pequeña línea de código entre corchetes [...] que le dice a WordPress: "¡Aquí va el buscador de propiedades!". 

 Pasos generales: 

 

 

 

 Ingresa al panel de administración de tu WordPress. 

 

 

 Ve a la sección Páginas y crea una  Nueva Página o edita una existente (ej. "Inmuebles", "Contacto", "Zona Clientes"). 

 

 

 En el editor de texto, pega el Shortcode del componente que necesitas (ver lista abajo). 

 

 

 Guarda y publica la página. 

 

 

 

 Tip: Si usas editores visuales como Elementor o Divi, busca el bloque o widget de "Shortcode" o "Código HTML" y pega allí el texto. 

 

 📚 Catálogo de Componentes (Shortcodes) 

 A continuación, encontrarás los códigos listos para copiar y pegar según la funcionalidad que necesites. 

 1. Buscadores de Inmuebles 

 Facilita a tus visitantes encontrar la propiedad de sus sueños. 

 

 

 

 Buscador Simple (Filtros básicos) : 

 Barra de búsqueda con filtros por código, tipo de inmueble, ubicación y precio. 

 

 

 

 

 

 

 

 <div class="arrendasoft">[arrendasoft_web_components_api component="simple-search"]</div> 

 

 

 

 

 

 

 Opción avanzada (Solo un tipo de servicio, ej. solo Ventas): 

 <div class="arrendasoft">[arrendasoft_web_components_api component="simple-search" servicio="1"]</div> 

 

 

 

 

 

 

 Buscador con Mapa Interactivo: 

 Mapa interactivo donde los usuarios pueden ver la ubicación de tus inmuebles y filtrar resultados. 

 

 

 

 

 

 

 <div class="arrendasoft">[arrendasoft_web_components_api component="map-of-properties"]</div> 

 

 

 

 

 

 Con filtros activados: 

 <div class="arrendasoft">[arrendasoft_web_components_api component="map-of-properties" filters="true"]</div> 

 

 

 

 2. Visualización de Propiedades 

 Muestra los resultados y detalles de tus inmuebles. 

 

 

 

 Resultados de Búsqueda: 

 Página donde aterrizan los usuarios después de usar el buscador. 

 

 

 

 

 <div class="arrendasoft">[arrendasoft_web_components_api component="search-results"]</div> 

 

 

 

 

 

 

 Cambiar diseño: 

 <div class="arrendasoft">[arrendasoft_web_components_api component="map-of-properties" filters="true"]</div> 

 

 

 Propiedades Destacadas: 

 Muestra un carrusel o grilla con tus mejores inmuebles (ideal para el Inicio). Nota: Asegúrate de marcar los inmuebles como "Destacados" en tu CRM nuby para que aparezcan aquí. 

 

 

 

 

 

 

 <div class="arrendasoft">[arrendasoft_web_components_api component="featured-properties"]</div> 

 

 

 

 

 

 

 Ejemplo personalizado (Mostrar 3 inmuebles de un servicio específico con diseño alternativo): 

 <div class="arrendasoft">[arrendasoft_web_components_api component="featured-properties" items="3" servicio="1" template="template1"]</div> 

 

 

 Detalle de Propiedad: 

 Es la ficha completa del inmueble. Muestra fotos, características, precios y botones de acción (compartir, pedir cita). 

 

 

 

 

 

 

 <div class="arrendasoft">[arrendasoft_web_components_api component="detalle-propiedad"]</div> 

 Cambiar diseño: 

 <div class="arrendasoft">[arrendasoft_web_components_api component="detalle-propiedad" template="template1"]</div> 

 

 

 

 

 

 

 

 

 3. Formularios de Captación y Contacto 

 Convierte visitantes en clientes potenciales. 

 

 

 

 Consignar/Registrar Propiedad: 

 Permite a propietarios registrar los datos de un inmueble que desean vender o arrendar contigo. La información llega a nuby para que tus asesores la gestionen desde el módulo Propiedades > Propiedades Pendientes . 

 

 

 

 

 <div class="arrendasoft">[arrendasoft_web_components_api component="property-register"]</div> 

 

 

 

 

 

 

 

 Contactar Asesor: 

 Formulario de contacto directo para consultas generales. Envía notificaciones a los correos electrónicos de los asesores configurados en el sistema. 

 

 

 

 

 

 

 <div class="arrendasoft">[arrendasoft_web_components_api component="contact-adviser"]</div> 

 

 

 

 

 

 

 

 Requerimientos: 

 Para clientes que buscan algo específico y no lo encuentran en el momento. Crea automáticamente un registro en el módulo Propiedades > Requerimientos de nuby y notifica al correo configurado. 

 

 

 

 

 <div class="arrendasoft">[arrendasoft_web_components_api component="requirements"]</div> 

 

 

 

 

 

 

 

 

 ⚙️ Personalización Avanzada (Parámetros) 

 Puedes modificar el comportamiento de los componentes agregando parámetros adicionales dentro del shortcode. Aquí explicamos qué hace cada uno: 

 

 

 

 

 Parámetro 

 Descripción 

 Ejemplo de uso 

 

 

 

 

 items="X" 

 Define la cantidad de inmuebles a mostrar. Útil para la sección de destacados. 

 items="3" (Muestra 3 inmuebles) 

 

 

 servicio="ID" 

 Filtra por Tipo de Servicio . El número corresponde al ID en tu configuración de nuby (Servicio 1 Arriendo - Servicio 2 Venta). 

 servicio="1" 

 

 

 template="X" 

 Cambia la apariencia visual del componente si hay múltiples diseños disponibles. Catálogo de Plantillas 

 template="template1" 

 

 

 filters="true" 

 Habilita o deshabilita los filtros de búsqueda dentro del mapa. 

 filters="true" (Muestra filtros)