Ir al contenido principal

¿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 3 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:

  1. Ingresa al panel de administración de tu WordPress.

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

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

  4. 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.

    image.png

    <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.

    image.png


    <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>

3.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.

    image.png


    <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í.

    image.png


    <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>

4.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.

    image.png


    <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.

    image.png


    <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.

    image.png


    <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)
Volver arriba