# Portal web
En este documento encontraremos toda la información relativa al sitio web.
# Manual de Usuario - Área de Clientes
El **Área de Clientes** permite a inquilinos y propietarios gestionar sus servicios contratados con la agencia. Desde aquí podrá:
✔ Actualizar datos de contacto
✔ Ver y descargar facturas/comprobantes
✔ Realizar pagos electrónicos (si está disponible)
✔ Gestionar PQRS (Peticiones, Quejas, Reclamos, Sugerencias)
#### **Acceso al Sistema**
##### **Paso 1: Ingresar credenciales**
1. Ingrese a la página web de la Inmobiliaria.
2. Haga clic en **"Área de Clientes"**.
3. Complete:
- **Usuario**
- **Contraseña**
- Validación **"No soy robot"** (CAPTCHA)
- Presione **"Acceder "**.
(Datos proporcionados por la inmobiliaria al correo electrónico registrado)
[](https://docs.nuby.ai/uploads/images/gallery/2025-05/7bbRdPRtaLi8lP9o-2025-05-28-18-31-14-greenshot.png)
#### **Página Principal**
##### **Paso 1: Según su perfil, verá un dashboard personalizado**
- **Inquilinos**: Facturas de arrendamiento, historial de pagos.
- **Propietarios**: Facturas de comisión, historial de ingresos.
- **Propietario-Inquilino**: Acceso combinado.
**Para propietarios:**
[](https://docs.nuby.ai/uploads/images/gallery/2025-01/pMoAKashEjplBfeG-image.png)
**Para inquilinos:**
[](https://docs.nuby.ai/uploads/images/gallery/2025-01/sqBmHvAGKU4A4Owr-image.png)
**Para propietario – inquilino:**
[](https://docs.nuby.ai/uploads/images/gallery/2025-01/WtG0aDU6NmzTyofK-image.png)
#### **Gestión de Perfil**
##### **Paso 1: ¿Cómo actualizar sus datos?**
1. Haga clic en **"Datos de Perfil"**.
2. Edite:
- Teléfono, email, dirección.
- Contraseña (requerirá confirmación).
3. Guarde los cambios.
**[](https://docs.nuby.ai/uploads/images/gallery/2025-05/N5Sudlmx1b4mqdE3-2025-05-28-18-36-32-greenshot.png)**
#### **Inquilino - Visualización de Facturas**
##### **Paso 1: En el menú principal, seleccione "Factura de Arrendamiento".**
1. Verá una lista de sus facturas con:
- **Número de factura**
- **Descripción de la factura**
- **Fecha de emisión y Fecha de vencimiento**
- **Valor facturado**
- **Estado** (Pagada/Facturado)
- **Acciones disponibles** (Descargar/Realizar pago).
[](https://docs.nuby.ai/uploads/images/gallery/2025-05/kiamzOpMZufLCywC-2025-05-28-18-42-12-greenshot.png)
##### **Paso 1: Visualice y descargue sus Facturas**
1. Ubique la factura que desea visualizar y/o descargar.
2. Haga clic en el ícono **"Descargar"** (generalmente representado con un símbolo de PDF ).
3. El archivo se abrirá automáticamente en una ventana nueva, para visualizar o descargar.
##### **Paso 2: Realizar Pagos Electrónicos** *(Solo si la Inmobiliaria tiene habilitado el servicio)*
**Paso 2.1: Iniciar el proceso de pago**
1. En la lista de facturas, ubique la factura **pendiente**.
2. Haga clic en el ícono **"Realizar Pago"** (símbolo del carrito).
[](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdJqYSa2TtxGRyUkeyC0YJ8gb-mu7oF9YkX-02YtZ4ru8nVuk8-jRcRQa4qaq0gVoqujGfxKqGZgwo6ieFR6Wijz6JSKX80MCXlxML7ME9cPJmgAhJfyL6G-SJ64fN3yU-JX39c_F1QGwmXef6pSuNFauU?key=1iBAA8fICZJ5pfmdDCHnbw)
**Paso 2.2: Completar el formulario de pago**
1. Se abrirá la ventana **"Registrar Pago"** con los datos de la factura:
- Monto total.
- Fecha de vencimiento.
- Detalles del contrato.
2. Verifique que la información sea correcta.
[](https://docs.nuby.ai/uploads/images/gallery/2026-03/mgANqqx6yHNr4vpZ-captura-de-pantalla-2026-03-31-112032.png)
**Paso 2.3: Seleccionar método de pago**
1. Haga clic en el botón **"Pagar con PayU" o "EnLineapagos"**.
2. Elija su medio de pago preferido:
- Tarjeta de crédito/débito.
- Transferencia bancaria.
- Nequi.
- Entre otros
[](https://docs.nuby.ai/uploads/images/gallery/2025-05/BRavIMNPEMtv4dDk-2025-05-28-18-50-33-greenshot.png)
**Paso 2.4: Confirmar y finalizar el pago**
1. Ingrese los datos requeridos por PayU (ej. número de tarjeta, CVV).
2. Revise el resumen y haga clic en **"Pagar"**.
3. Espere la confirmación en pantalla:
- **¡Pago exitoso!** (aparecerá un comprobante digital).
- **"Regresar al sitio"**: Al hacer clic, volverá al portal de la agencia.
**Confirmación de pago.**
#### **Historial de Pagos**
##### **Paso 1: En el menú principal, seleccione "Históricos de Pagos".**
1. Verá un listado con:
- **Número de Ingreso**
- **Concepto**
- **Fecha de pago**
- **Valor Recibo**
- **Estado**
2. Acciones:
- Haga clic en el ícono **"PDF"** junto al pago deseado para previsualizar y descargarlo.
[](https://docs.nuby.ai/uploads/images/gallery/2025-05/R6tQQicd9s95U3Nd-2025-05-29-07-26-38-greenshot.png)
#### **Historial de Transacciones**
##### **Paso 1: En el menú principal, seleccione "Históricos de Transacciones".**
1. Verá un listado con:
- **Código de Referencia**
- **Descripción**
- **Valor Iva**
- **Valor Total**
- **Fecha de Proceso**
2. Acciones:
- Haga clic en el ícono **"PDF"** junto al pago deseado para previsualizar y descargarlo.
**[](https://docs.nuby.ai/uploads/images/gallery/2025-05/YPOABNSW6YfEPH3P-2025-05-29-07-32-21-greenshot.png)**
#####
#### **Propietario - Facturas de Comisión**
##### **Paso 1: Seleccione "Factura de Comisión" en el menú.**
1. Verá una lista de sus facturas con:
- **Número de factura**
- **Descripción de la factura**
- **Número de Contrato**
- **Fecha de emisión**
- **Valor facturado**
- **Estado** (Pagada/Facturado)
2\. Acciones:
- Haga clic en el ícono **"PDF"** junto al pago deseado para previsualizar y descargarlo.
[](https://docs.nuby.ai/uploads/images/gallery/2025-05/u9ccJvYawAXfYme6-2025-05-29-07-42-01-greenshot.png)
#### **Historial de Ingresos (Propietarios)**
##### **Paso 1: Acceda a "Históricos de Ingresos".**
1. Revise los pagos recibidos de inquilinos:
- **Número de documento**
- **Concepto**
- **Fecha**
- **Valor Recibo**
- **Estado**.
2. Acciones:
- Haga clic en el ícono **"PDF"** junto al pago deseado para previsualizar y descargarlo.
[](https://docs.nuby.ai/uploads/images/gallery/2025-05/NNaFyaumam9HQ13T-2025-05-29-07-44-12-greenshot.png)
#### **Gestión de PQRS**
##### **Paso 1: Ver PQRS existentes**
1. Verá un listado con:
- **Código**
- **Clasificación**
- **Estado**
- **Asunto**
- **Descripción**
- **Fecha**
2. Acciones:
- Haga clic en el ícono **"Ver Detalles"** para abrir:
- Estado actual.
- Fechas de creación y última actualización.
- Respuestas de la agencia.
[](https://docs.nuby.ai/uploads/images/gallery/2025-05/IwkJsjHVmfjKtFaC-2025-05-29-07-50-19-greenshot.png)[](https://docs.nuby.ai/uploads/images/gallery/2025-05/CEvTaol6tymTNSzl-2025-05-29-07-51-37-greenshot.png)
##### **Paso 2: Crear una nueva PQRS**
1. Haga clic en **"Crear PQRS"**.
2. Complete todos los campos obligatorios (\*):
3\. Haga clic en **"Guardar PQRS"**
[](https://docs.nuby.ai/uploads/images/gallery/2025-05/GrF2b6lqp7HEWBIm-2025-05-29-07-56-59-greenshot.png)
**¡Gracias por confiar en nosotros!**
Esperamos que este manual te haya sido útil para gestionar tus servicios de manera fácil y segura. Si tienes alguna duda o necesitas asistencia, no dudes en comunicarte con tu inmobiliaria.
# ¿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?](https://docs.nuby.ai/books/portal-web/page/como-puedo-instalar-y-actualizar-los-plugins-para-la-integracion-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.
- **Buscador con Mapa Interactivo:**
Mapa interactivo donde los usuarios pueden ver la ubicación de tus inmuebles y filtrar resultados.
[](https://docs.nuby.ai/uploads/images/gallery/2024-10/M7ndvJDDBKfSvepF-image.png)
### 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.
[](https://docs.nuby.ai/uploads/images/gallery/2024-10/M7ndvJDDBKfSvepF-image.png)
```
- **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í.
[](https://docs.nuby.ai/uploads/images/gallery/2024-10/M7ndvJDDBKfSvepF-image.png)*
```
- **Detalle de Propiedad:**
Es la ficha completa del inmueble. Muestra fotos, características, precios y botones de acción (compartir, pedir cita).
### 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**.
[](https://docs.nuby.ai/uploads/images/gallery/2024-10/M7ndvJDDBKfSvepF-image.png)*
- **Contactar Asesor:**
Formulario de contacto directo para consultas generales. *Envía notificaciones a los correos electrónicos de los asesores configurados en el sistema.
[](https://docs.nuby.ai/uploads/images/gallery/2024-10/M7ndvJDDBKfSvepF-image.png)*
- **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.
[](https://docs.nuby.ai/uploads/images/gallery/2024-10/M7ndvJDDBKfSvepF-image.png)*
## ⚙️ 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](https://docs.nuby.ai/link/699#bkmrk-%F0%9F%93%82-cat%C3%A1logo-de-planti)
`template="template1"`
`filters="true"`
Habilita o deshabilita los **filtros de búsqueda** dentro del mapa.
`filters="true"` (Muestra filtros)
# ¿Cómo puedo instalar y actualizar los plugins para la integración de nuby con WordPress?
Bienvenido al ecosistema **nuby**. Esta guía le permitirá integrar su sitio web en WordPress con la potencia de nuestro software inmobiliario. A través de estos plugins, habilitará funcionalidades clave como el inicio de sesión unificado, el área de clientes para propietarios e inquilinos, y la integración de componentes visuales.
### 📌 Conceptos Clave antes de empezar
Para entender mejor el proceso, aclaramos algunos términos técnicos mencionados en la instalación:
- **Instancia de nuby (URL Arrendasoft):** Es la dirección web única de su empresa en nuestro software (ej. `https://su-inmobiliaria.arrendasoft.co`). Esta URL es el "puente" que conecta su sitio web con sus datos en nuby.
- **Plugins Arrendasoft:** Notará que los archivos tienen el nombre "Arrendasoft". Esto es correcto; son los componentes oficiales que impulsan la tecnología de nuby.
- **Actualización Automática:** Nuestros plugins están diseñados para actualizarse solos, garantizando que siempre tenga las últimas mejoras de seguridad y funcionalidad sin esfuerzo extra.
---
### 📋 Introducción
El ecosistema de nuby para sitios web se compone de **3 plugins esenciales** que trabajan en conjunto. Para que todo funcione correctamente, es necesario que los tres estén instalados y activos en tu WordPress.
#### Los 3 Componentes del Sistema:
1. **Arrendasoft Login**:
- **¿Qué hace?**: Es la llave de acceso. Gestiona la seguridad y la conexión entre tu WordPress y la base de datos de nuby.
- **Importancia**: Fundamental. Los otros dos plugins dependen de este para funcionar.
2. **Arrendasoft Web Components API**:
- **¿Qué hace?**: Es la "caja de herramientas" visual. Contiene todos los elementos públicos que ven tus visitantes: buscadores, listados de propiedades, mapas y formularios de contacto.
- **Uso**: Se implementa pegando códigos simples en tus páginas.
3. **Arrendasoft Customer Area**:
- **¿Qué hace?**: Crea una zona privada para tus clientes (propietarios e inquilinos).
- **Funcionalidades**: Permite ver estados de cuenta, descargar facturas, consultar historiales de pago y actualizar datos personales.
---
### 🚀 Fase 1: Descarga de los Plugins
Para garantizar que instale la versión más reciente y segura, utilizamos un sistema de descarga directa desde nuestros repositorios.
Existen 3 plugins esenciales. El procedimiento de descarga es el mismo para todos:
1. Haga clic en el enlace del archivo de información (`update-info.json`) del plugin que desea descargar.
2. Verá un texto técnico; busque la línea que dice **"package"**.
3. Copie la dirección web (URL) que aparece junto a "package" (termina en `.zip`).
4. Pegue esa dirección en su navegador para descargar el archivo instalador.
#### Enlaces de descarga:
**Plugin**
**Función Principal**
**Enlace de Información**
**External Login**
Conecta la base de datos de usuarios de nuby con su web.
> **💡 Consejo Pro:** No se preocupe por el código que ve en los enlaces JSON. Solo necesita la dirección del `.zip` para obtener el instalador.
---
### 🛠️ Fase 2: Instalación en WordPress
Una vez tenga los archivos `.zip` descargados en su computador:
1. Ingrese al panel administrativo de su WordPress (`/wp-admin`).
2. En el menú lateral, vaya a **Plugins > Añadir nuevo**.
3. Haga clic en el botón **Subir plugin** (parte superior).
4. Seleccione el archivo `.zip` que descargó y haga clic en **Instalar ahora**.
5. Al finalizar, haga clic en **Activar plugin**.
Repita estos pasos para los tres plugins listados anteriormente.
---
### ⚙️ Fase 3: Configuración (Paso Crítico)
El plugin **Arrendasoft External Login** es el corazón de la integración. Debe configurarlo correctamente para que todo funcione.
1. Vaya a **Ajustes** (o *Settings*) del plugin "Arrendasoft External Login".
2. Complete los siguientes campos:
- **Habilitar autenticación Arrendasoft:** ✅ Marque esta casilla. Esto activa la validación de usuarios contra su base de datos en nuby.
- **URL Arrendasoft:** Ingrese la dirección completa de su instancia en nuby (ej: `https://su-empresa.arrendasoft.co`).
- *Nota: Es vital que esta URL sea correcta. Si tiene dudas, consulte con nuestro equipo de soporte.*
- **URL Redirect Customer Area:** Defina el "slug" o nombre de la página donde alojará el área de clientes (ej: `zona-clientes` o `customer-area`).
- *El sistema redirigirá a `https://su-web.com/zona-clientes`. Asegúrese de crear esta página en WordPress posteriormente.*
- **Borrar configuración al desactivar:** (Opcional) Márquela solo si desea que se borren los datos al desinstalar el plugin.
#### ✅ Validación
Antes de guardar, use el botón **"Probar la conexión a la API de Arrendasoft"**.
- Si la conexión es exitosa: ¡Felicidades! Su sitio ya está conectado con nuby.
- Si falla: Verifique que la "URL Arrendasoft" no tenga espacios ni errores de escritura.
Finalmente, haga clic en **Guardar cambios**.
---
### 🔄 Fase 4: Actualización de Plugins
Mantener sus plugins actualizados es vital para la seguridad y el acceso a nuevas funciones.
#### Actualización Automática (Recomendada)
El plugin **Web Components API** y las versiones recientes de los otros plugins están configurados para actualizarse automáticamente. WordPress detectará las nuevas versiones y las instalará sin que usted tenga que intervenir.
#### Actualización Manual
Si necesita forzar una actualización o la automática no se ha ejecutado:
1. Vaya a la sección **Plugins** en su WordPress.
2. Busque los plugins de Arrendasoft en la lista.
3. Si hay una nueva versión, verá un aviso amarillo indicando "Hay una nueva versión disponible".
4. Haga clic en el enlace "actualícela ahora" para aplicar los cambios inmediatamente.
---
### 💡 Próximos pasos recomendados
Ahora que tiene la base técnica instalada y conectada, es momento de hacer visibles las herramientas para sus usuarios finales. Le recomendamos continuar con las siguientes guías para configurar la visualización:
1. **Muestre su inventario:** Aprenda a insertar el buscador de inmuebles, listados destacados y fichas de propiedades en sus páginas siguiendo la guía: 👉 **[¿Cómo puedo agregar componentes de la integración de nuby en WordPress?](https://docs.nuby.ai/books/portal-web/page/como-puedo-agregar-componentes-de-la-integracion-de-nuby-en-wordpress)**
2. **Active la zona privada:** Configure el espacio donde propietarios e inquilinos podrán descargar facturas y gestionar sus contratos: 👉 **[¿Cómo puedo agregar el área de clientes de la integración de nuby en WordPress?](https://docs.nuby.ai/books/portal-web/page/como-puedo-agregar-el-area-de-clientes-de-la-integracion-de-nuby-en-wordpress)**
# ¿Cuáles son las plantillas disponibles de la intergración de nuby con WordPress?
Dale una identidad única y profesional a tu portal inmobiliario. En esta guía aprenderás a explorar, seleccionar y aplicar las plantillas de diseño disponibles en el ecosistema **nuby** para personalizar la apariencia de tus inmuebles en tu sitio web.
---
## 🧠 Conceptos Clave
Antes de iniciar, es importante entender dos términos que usarás frecuentemente al configurar tu página:
- **Plantilla:** Es un diseño predefinido que determina cómo se visualizan los inmuebles, fotos y descripciones en tu sitio web. Cada plantilla tiene una estructura y estilo visual único (colores, distribución, tipografía).
- **Componentes:** Son los bloques funcionales de **nuby** que instalas en tu sitio de WordPress (como el *Buscador de Inmuebles*, *Carrusel de Destacados* o *Listado de Propiedades*). Estos componentes se insertan usualmente mediante **shortcodes** (códigos cortos).
- **Identificador (ID):** Es el código técnico (ej: `template1`) que debes copiar y pegar en la configuración de tus componentes para "activar" el diseño que elegiste.
---
## 🚀 Pasos para Elegir tu Diseño
Sigue este flujo de trabajo para seleccionar la mejor opción para tu marca:
1. **Explora:** Haz clic en los enlaces de "Previsualización" de la tabla inferior para ver cómo luce cada diseño en tiempo real.
- *Tip UX:* Abre los enlaces en una nueva pestaña y verifica cómo se ven tanto en computadora como en celular.
2. **Elige:** Selecciona la plantilla que mejor se adapte a los colores y estilo de tu logotipo.
3. **Copia el ID:** Una vez decidido, toma nota del **Identificador** (columna derecha). Lo necesitarás para la configuración.
4. **Implementa:** Usa ese identificador dentro de los parámetros de tus shortcodes o plugins de nuby en WordPress.
---
## 📂 Catálogo de Plantillas Disponibles
A continuación encontrarás el listado completo de diseños. Utiliza el **Identificador** para configurar tus componentes web.
**\#**
**Vista Previa del Diseño**
**Identificador (ID) (Copiar este código)**
**01**
[🌐 Ver demostración (Plantilla 1)](https://plantilla-1.arrendasoft.co/)
`template1`
**02**
[🌐 Ver demostración (Plantilla 2)](https://plantilla-2.arrendasoft.co/)
`template2`
**03**
[🌐 Ver demostración (Plantilla 3)](https://plantilla-3.arrendasoft.co/)
`template3`
**04**
[🌐 Ver demostración (Plantilla 4)](https://plantilla-4.arrendasoft.co/)
`template4`
**05**
[🌐 Ver demostración (Plantilla 5)](https://plantilla-5.arrendasoft.co/)
`template5`
**06**
[🌐 Ver demostración (Plantilla 6)](https://plantilla-6.arrendasoft.co/)
`template6`
**07**
[🌐 Ver demostración (Plantilla 7)](https://plantilla-7.arrendasoft.co/)
`template7`
**08**
[🌐 Ver demostración (Plantilla 8)](https://plantilla-8.arrendasoft.co/)
`template8`
**09**
[🌐 Ver demostración (Plantilla 9)](https://plantilla-9.arrendasoft.co/)
`template9`
**10**
[🌐 Ver demostración (Plantilla 10)](https://plantilla-10.arrendasoft.co/)
`template10`
**11**
[🌐 Ver demostración (Plantilla 11)](https://plantilla-11.arrendasoft.co/)
`template11`
**12**
[🌐 Ver demostración (Plantilla 12)](https://plantilla-12.arrendasoft.co/)
`template12`
**13**
[🌐 Ver demostración (Plantilla 13)](https://plantilla-13.arrendasoft.co/)
`template13`
**14**
[🌐 Ver demostración (Plantilla 14)](https://plantilla-14.arrendasoft.co/)
`template14`
**15**
[🌐 Ver demostración (Plantilla 15)](https://plantilla-15.arrendasoft.co/)
`template15`
**16**
[🌐 Ver demostración (Plantilla 16)](https://plantilla-16.arrendasoft.co/)
`template16`
**17**
[🌐 Ver demostración (Plantilla 17)](https://plantilla-17.arrendasoft.co/)
`template17`
**18**
[🌐 Ver demostración (Plantilla 18)](https://plantilla-18.arrendasoft.co/)
`template18`
---
## 🛠️ ¿Cómo aplicar el Identificador?
Una vez tengas tu `templateX`, debes ir a tu panel de administración de WordPress donde tienes instalado el plugin de **nuby**.
1. Identifica la página o sección donde está insertado el **shortcode** o componente de inmuebles.
2. Busca o agrega el atributo de configuración llamado `template`
3. Escribe el identificador tal cual aparece en la tabla (ej. `template5`).
4. Guarda los cambios y actualiza tu página para ver el nuevo diseño aplicado.
Nota: Para detalles técnicos específicos sobre dónde pegar este código, consulta la guía [¿Cómo puedo agregar componentes de la integración de nuby en WordPress?](https://docs.nuby.ai/books/portal-web/page/guia-de-integracion-plugins-de-nuby-para-wordpress)
# ¿Cómo puedo agregar el área de clientes de la integración de nuby en WordPress?
Ofrece a tus clientes (propietarios e inquilinos) una oficina virtual disponible 24/7. Esta guía te enseñará a configurar el **Área de Clientes** en tu sitio WordPress, permitiendo que tus usuarios consulten estados de cuenta, descarguen facturas y actualicen sus datos de forma autónoma.
**Antes de empezar: Requisito Indispensable** Para que el Área de Clientes funcione, tu sitio WordPress debe tener instalados y activos los plugins base del ecosistema nuby: "Arrendasoft Customer Area" y "Arrendasoft External Login".
**¿Aún no los tienes?** Consulta primero nuestra guía: [¿Cómo instalar y actualizar los plugins de nuby?](https://docs.nuby.ai/books/portal-web/page/como-puedo-instalar-y-actualizar-los-plugins-para-la-integracion-de-nuby-con-wordpress)
---
## ⚙️ Paso 1: Configurar la URL de destino (Redireccionamiento)
Antes de crear la página, debemos decirle al sistema **dónde** aterrizarán los usuarios después de iniciar sesión.
1. En tu administrador de WordPress, ve a la configuración del plugin **Arrendasoft External Login**.
2. Busca el campo llamado **"URL Redirect Customer Area"**.
3. Escribe el "slug" o nombre que deseas para la dirección web de tu zona de clientes.
- *Ejemplo recomendado:* `zona-clientes` o `area-usuarios`.
- *Nota:* No escribas la dirección completa (http...), solo la palabra final.
4. Guarda los cambios.
**Importante:** Recuerda la palabra exacta que escribiste aquí (ej: `zona-clientes`), ya que la necesitarás obligatoriamente en el siguiente paso.
---
## 🏗️ Paso 2: Creación de la Página en WordPress
Ahora vamos a crear la página real que coincida con la configuración anterior.
1. Ve a **Páginas > Añadir nueva**.
2. **Asigna el Título:** Puede ser "Zona de Clientes", "Oficina Virtual", etc.
3. **Verifica el Enlace Permanente (URL):**
- En la barra lateral derecha (configuración de página), busca la sección de **URL** o **Enlace permanente**.
- Asegúrate de que el "slug" sea **exactamente igual** al que definiste en el Paso 1 (ej: `zona-clientes`).
4. Inserta el Componente: En el cuerpo de la página, pega el siguiente código corto:
```html
[customer_area]
```
5. Haz clic en **Publicar**.
---
## 🔗 Paso 3: Dar visibilidad al acceso
De nada sirve tener la zona creada si tus clientes no pueden encontrarla.
1. Ve a **Apariencia > Menús** en tu WordPress.
2. Busca la página que acabas de crear.
3. Agrégala a tu **Menú Principal**.
4. (Opcional) Crea un botón llamativo en tu página de Inicio (Home) llamado "Ingreso Clientes" que dirija a esta página.
---
## 📘 Manual de Uso para Clientes
El Área de Clientes es una poderosa herramienta transaccional que permite a propietarios e inquilinos autogestionarse: descargar facturas, ver estados de cuenta, generar informes y actualizar datos personales.
Para conocer en detalle cada funcionalidad y cómo explicársela a tus clientes, te invitamos a consultar el manual completo de usuario final: 👉 **[Ver Manual de Usuario: Área de Clientes](https://docs.nuby.ai/books/portal-web/page/manual-de-usuario-area-de-clientes)**