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

<p class="callout warning">**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?](https://docs.nuby.ai/books/portal-web/page/como-puedo-instalar-y-actualizar-los-plugins-para-la-integracion-de-nuby-con-wordpress)</p>

<div _ngcontent-ng-c2284167979="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-" inline-copy-host="">---

</div>## 🧩 ¿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.

<div _ngcontent-ng-c2284167979="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-arrendasoft-login%3A-%C2%BF" inline-copy-host="">---

</div>## 🛠️ 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:

<div _ngcontent-ng-c2284167979="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-ingresa-al-panel-de-" inline-copy-host="">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.

</div><p class="callout info">**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.**</p>

<div _ngcontent-ng-c2284167979="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk--2" inline-copy-host="">---

</div>## 📚 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.

<div _ngcontent-ng-c2284167979="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-buscador-simple-%28fil" inline-copy-host="">- **Buscador **Simple (Filtros básicos)**:**
    
    Barra de búsqueda con filtros por código, tipo de inmueble, ubicación y precio.
    
    <div _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-80 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="formatted-code-block-internal-container ng-tns-c3513861865-80"><div _ngcontent-ng-c3513861865="" class="animated-opacity ng-tns-c3513861865-80">[![image.png](https://docs.nuby.ai/uploads/images/gallery/2024-10/scaled-1680-/M7ndvJDDBKfSvepF-image.png)](https://docs.nuby.ai/uploads/images/gallery/2024-10/M7ndvJDDBKfSvepF-image.png)  
      
    </div></div></div>```html
    <div class="arrendasoft">[arrendasoft_web_components_api component="simple-search"]</div>
    ```
    
    <div _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-79 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="formatted-code-block-internal-container ng-tns-c3513861865-79"><div _ngcontent-ng-c3513861865="" class="animated-opacity ng-tns-c3513861865-79"></div></div></div>*Opción avanzada (Solo un tipo de servicio, ej. solo Ventas):*
    
    ```html
    <div class="arrendasoft">[arrendasoft_web_components_api component="simple-search" servicio="1"]</div>
    ```

</div><div _ngcontent-ng-c2284167979="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-buscador-con-mapa-in" inline-copy-host="">- **Buscador con Mapa Interactivo:**
    
    Mapa interactivo donde los usuarios pueden ver la ubicación de tus inmuebles y filtrar resultados.  
      
    [![image.png](https://docs.nuby.ai/uploads/images/gallery/2024-10/yD9ANwSAwfw9nsps-mapa-de-propiedades.jpg)](https://docs.nuby.ai/uploads/images/gallery/2024-10/M7ndvJDDBKfSvepF-image.png)
    
    <div _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-80 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="formatted-code-block-internal-container ng-tns-c3513861865-80"><div _ngcontent-ng-c3513861865="" class="animated-opacity ng-tns-c3513861865-80">  
    </div></div></div>```html
    <div class="arrendasoft">[arrendasoft_web_components_api component="map-of-properties"]</div>
    ```
    
    <div _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-80 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="formatted-code-block-internal-container ng-tns-c3513861865-80"><div _ngcontent-ng-c3513861865="" class="animated-opacity ng-tns-c3513861865-80"></div></div></div>*Con filtros activados:*
    
    ```html
    <div class="arrendasoft">[arrendasoft_web_components_api component="map-of-properties" filters="true"]</div>
    ```

</div>### 2. Visualización de Propiedades

Muestra los resultados y detalles de tus inmuebles.

<div _ngcontent-ng-c2284167979="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-resultados-de-b%C3%BAsque" inline-copy-host="">- **Resultados de Búsqueda:**
    
    Página donde aterrizan los usuarios después de usar el buscador.  
      
    [![image.png](https://docs.nuby.ai/uploads/images/gallery/2024-10/e2QIgFoke8jOUKSw-resultados-de-la-busqueda.jpg)](https://docs.nuby.ai/uploads/images/gallery/2024-10/M7ndvJDDBKfSvepF-image.png)
    
    <div _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-81 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="code-block-decoration header-formatted gds-title-s ng-tns-c3513861865-81 ng-star-inserted">  
    </div></div>```html
    <div class="arrendasoft">[arrendasoft_web_components_api component="search-results"]</div>
    ```
    
    <div _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-81 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="formatted-code-block-internal-container ng-tns-c3513861865-81"><div _ngcontent-ng-c3513861865="" class="animated-opacity ng-tns-c3513861865-81"></div></div></div>*Cambiar diseño:*
    
    ```html
    <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](https://docs.nuby.ai/uploads/images/gallery/2024-10/wWsqaFzbZxruGSUs-image.png)](https://docs.nuby.ai/uploads/images/gallery/2024-10/M7ndvJDDBKfSvepF-image.png)*
    
    <div _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-82 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="formatted-code-block-internal-container ng-tns-c3513861865-82"><div _ngcontent-ng-c3513861865="" class="animated-opacity ng-tns-c3513861865-82">  
    </div></div></div>```html
    <div class="arrendasoft">[arrendasoft_web_components_api component="featured-properties"]</div>
    ```
    
    <div _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-82 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="formatted-code-block-internal-container ng-tns-c3513861865-82"><div _ngcontent-ng-c3513861865="" class="animated-opacity ng-tns-c3513861865-82"></div></div></div>*Ejemplo personalizado (Mostrar 3 inmuebles de un servicio específico con diseño alternativo):*
    
    ```html
    <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 _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-83 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="formatted-code-block-internal-container ng-tns-c3513861865-83"><div _ngcontent-ng-c3513861865="" class="animated-opacity ng-tns-c3513861865-83">  
    </div></div></div>```html
    <div class="arrendasoft">[arrendasoft_web_components_api component="detalle-propiedad"]</div>
    ```
    
    *Cambiar diseño:*
    
    ```html
    <div class="arrendasoft">[arrendasoft_web_components_api component="detalle-propiedad" template="template1"]</div>
    ```
    
    <div _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-83 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="formatted-code-block-internal-container ng-tns-c3513861865-83"><div _ngcontent-ng-c3513861865="" class="animated-opacity ng-tns-c3513861865-83"></div></div></div>

</div>### 3. Formularios de Captación y Contacto

Convierte visitantes en clientes potenciales.

<div _ngcontent-ng-c2284167979="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-consignar%2Fregistrar-" inline-copy-host="">- **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 &gt; Propiedades Pendientes**.  
      
    [![image.png](https://docs.nuby.ai/uploads/images/gallery/2024-10/pNsBfhvEUvDEC7mF-consigne-su-inmueble.jpg)](https://docs.nuby.ai/uploads/images/gallery/2024-10/M7ndvJDDBKfSvepF-image.png)*
    
    <div _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-84 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="code-block-decoration header-formatted gds-title-s ng-tns-c3513861865-84 ng-star-inserted">  
    </div></div>```html
    <div class="arrendasoft">[arrendasoft_web_components_api component="property-register"]</div>
    ```
    
    <div _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-84 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="formatted-code-block-internal-container ng-tns-c3513861865-84"><div _ngcontent-ng-c3513861865="" class="animated-opacity ng-tns-c3513861865-84"></div></div></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](https://docs.nuby.ai/uploads/images/gallery/2024-10/ZvV7nGEXIm2HCUO8-comuniquese-con-un-asesor.jpg)](https://docs.nuby.ai/uploads/images/gallery/2024-10/M7ndvJDDBKfSvepF-image.png)*
    
    <div _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-85 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="formatted-code-block-internal-container ng-tns-c3513861865-85"><div _ngcontent-ng-c3513861865="" class="animated-opacity ng-tns-c3513861865-85">  
    </div></div></div>```html
    <div class="arrendasoft">[arrendasoft_web_components_api component="contact-adviser"]</div>
    ```
    
    <div _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-85 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="formatted-code-block-internal-container ng-tns-c3513861865-85"><div _ngcontent-ng-c3513861865="" class="animated-opacity ng-tns-c3513861865-85"></div></div></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 &gt; Requerimientos** de nuby y notifica al correo configurado.  
      
    [![image.png](https://docs.nuby.ai/uploads/images/gallery/2024-10/iIMPWP4P5LUh39AM-solicitud-inmueble.jpg)](https://docs.nuby.ai/uploads/images/gallery/2024-10/M7ndvJDDBKfSvepF-image.png)*
    
    <div _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-86 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="code-block-decoration header-formatted gds-title-s ng-tns-c3513861865-86 ng-star-inserted">  
    </div></div>```html
    <div class="arrendasoft">[arrendasoft_web_components_api component="requirements"]</div>
    ```
    
    <div _ngcontent-ng-c3513861865="" class="code-block ng-tns-c3513861865-86 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation" jslog="223238;track:impression,attention;BardVeMetadataKey:[["r_5373beb880f19321","c_ad5c432cee6176f5",null,"rc_4df9fdc01b9d3341",null,null,"es",null,1,null,null,1,0]]"><div _ngcontent-ng-c3513861865="" class="formatted-code-block-internal-container ng-tns-c3513861865-86"><div _ngcontent-ng-c3513861865="" class="animated-opacity ng-tns-c3513861865-86"></div></div></div>

---

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

<div _ngcontent-ng-c2284167979="" aria-busy="false" aria-live="polite" class="markdown markdown-main-panel stronger enable-updated-hr-color" dir="ltr" id="bkmrk-par%C3%A1metro-descripci%C3%B3" inline-copy-host=""><table data-path-to-node="32"><thead><tr><td>**Parámetro**</td><td>**Descripción**</td><td>**Ejemplo de uso**</td></tr></thead><tbody><tr><td><span data-path-to-node="32,1,0,0">`items="X"`</span></td><td><span data-path-to-node="32,1,1,0">Define la **cantidad** de inmuebles a mostrar. Útil para la sección de destacados.</span></td><td><span data-path-to-node="32,1,2,0">`items="3"` (Muestra 3 inmuebles)</span></td></tr><tr><td><span data-path-to-node="32,2,0,0">`servicio="ID"`</span></td><td><span data-path-to-node="32,2,1,0">Filtra por **Tipo de Servicio**. El número corresponde al ID en tu configuración de nuby (Servicio 1 Arriendo - Servicio 2 Venta).</span></td><td><span data-path-to-node="32,2,2,0">`servicio="1"`</span></td></tr><tr><td><span data-path-to-node="32,3,0,0">`template="X"`</span></td><td><span data-path-to-node="32,3,1,0">Cambia la **apariencia visual** del componente si hay múltiples diseños disponibles.  
[Catálogo de Plantillas](https://docs.nuby.ai/link/699#bkmrk-%F0%9F%93%82-cat%C3%A1logo-de-planti)</span></td><td><span data-path-to-node="32,3,2,0">`template="template1"`</span></td></tr><tr><td><span data-path-to-node="32,4,0,0">`filters="true"`</span></td><td><span data-path-to-node="32,4,1,0">Habilita o deshabilita los **filtros de búsqueda** dentro del mapa.</span></td><td><span data-path-to-node="32,4,2,0">`filters="true"` (Muestra filtros)</span></td></tr></tbody></table>

</div>