# Navegar

## Resumen

La interacción Navegar te permite definir acciones de navegación cuando los usuarios interactúan con componentes, como hacer clic en un botón. Esta función posibilita la redirección sin problemas a varios tipos de páginas, mejorando el compromiso del usuario y creando una experiencia de navegación fluida en tu sitio.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FtlkRQRTe0y31PgiN6g8K%2F2023-11-06_11-26-43.png?alt=media&#x26;token=b0f59ea3-6bb3-4614-9338-c5b9ccc3fc9e" alt="" width="563"><figcaption></figcaption></figure>

### **Características clave**

* Admite múltiples tipos de referencia de página
* Acciones de navegación personalizables
* Mejora el flujo de navegación del sitio

### Casos de uso

* **Página de producto:** Redirigir a una página con especificaciones detalladas del producto.
* **Página de soporte:** Navegar a un artículo de ayuda o formulario de contacto.
* **Página de la comunidad:** Vincular a un perfil de miembro o hilo de discusión.
* **Página de evento:** Dirigir a un formulario de registro del evento.
* **Página de aterrizaje:** Guiar a una página de detalles de la campaña.
* **Página de perfil:** Navegar a registros de contacto relacionados.

## Configuración

Agrega la interacción Navegar a un componente (por ejemplo, Botón) en una página del sitio Experience Cloud y configúrala a través de la pestaña Interacciones en Experience Builder.

### **Tipos de navegación disponibles**

Estos tipos de referencia de página especifican hacia dónde se dirigen los usuarios.

| Tipo de navegación                                | Descripción                                                                       | Ejemplo de caso de uso                               |
| ------------------------------------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------- |
| **Aura - Página de registro externa**             | Vincula a una página de registro específica usando el framework Aura.             | Ver los detalles de un Contacto.                     |
| **Aura - Página de relación de registro externa** | Vincula a registros relacionados (p. ej., Contactos de una Cuenta).               | Ver Oportunidades de una Cuenta.                     |
| **Aura - Página de inicio de sesión**             | Activa acciones de inicio de sesión o cierre de sesión.                           | Iniciar sesión para acceder a contenido restringido. |
| **Artículo de Knowledge**                         | Dirige a un artículo específico de Knowledge.                                     | Acceder a un artículo de soporte.                    |
| **Página de contenido administrado**              | Vincula a una página de contenido administrada por el CMS.                        | Ver un artículo de noticias.                         |
| **Página nombrada**                               | Redirige a una página interna de Experience Builder.                              | Ir a una página nombrada "Soporte".                  |
| **Página de objeto**                              | Navega a una vista de lista o a la página de crear nuevo registro para un objeto. | Abrir la vista de lista de Contactos.                |
| **Página de registro**                            | Vincula a la página de detalles de un registro específico.                        | Ver un registro de Cuenta.                           |
| **Página de relación de registro**                | Navega a una lista relacionada (p. ej., Oportunidades de un Contacto).            | Ver Casos de una Cuenta.                             |
| **Página web**                                    | Redirige a una página web externa o interna.                                      | Enlace a un sitio de un socio.                       |

*<mark style="color:predeterminado;background-color:green;">**Mejor práctica**</mark>:* Elige el tipo según el objetivo (p. ej., Página de registro para registros); prueba la navegación en vista previa.

**Configurar la navegación a una página específica**

Para configurar la navegación a una página o recurso específico, sigue estos pasos según tu caso de uso:

### **Navegar a una página nombrada**

1. Agrega un componente Botón y ve a la **Interacciones** Pestaña.
2. Selecciona **Navegar** y elige **Página nombrada**.
3. **Nombre de la página:** Introduce el nombre API de la página de destino (p. ej., Content\_Document\_\_c).
4. *¿Por qué esto?* Dirige a los usuarios a una página interna (p. ej., una página de documento de contenido) definida en Experience Builder.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fd2OdAatoU9AOjfyO2P0e%2F2025-09-05_15-36-22.png?alt=media&#x26;token=00a9702f-4aaf-44d7-9d87-9be052fedf24" alt=""><figcaption></figcaption></figure>

### **Navegar a una página de registro**

Usa esta opción cuando quieras que un botón o componente abra la página de detalles de un registro específico en tu sitio Experience Cloud

#### Pasos de configuración

1. Selecciona **Navegar** y elige **Página de registro**.
2. **Nombre API del objeto:** Introduce el objeto (p. ej., Contact).
3. **ID de registro:** Selecciona el campo de ID de registro correcto para la redirección; generalmente, es “**`Registro: Id`**”.
4. **Nombre de la acción:** Configurar en Ver (predeterminado para detalles).

*¿Por qué esto?* Lleva a los usuarios a la página de detalles de un registro específico (p. ej., un registro de Contacto).

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F0e6UxR4PyIPq33uW4wPC%2F2025-09-05_15-41-52.png?alt=media&#x26;token=3a18568f-5aa0-4d54-bfb2-bf3fa72de303" alt="" width="304"><figcaption></figcaption></figure>

{% hint style="warning" %}

#### Importante

Para garantizar que la navegación a una página de registro funcione correctamente, primero crea la Página de Objeto en tu sitio Experience donde debe aterrizar la interacción Navegar. Si esta página no existe, la interacción Navegar a Página de Registro no funcionará.
{% endhint %}

### **Navegar a una página web externa**

Usa esta opción cuando quieras que un botón o componente abra un sitio externo u otro recurso web, como tu sitio principal, un portal de socios o una página de documentación

#### Pasos de configuración

1. Elige la **Navegar** interacción y selecciona la **Página web** opción.
2. **URL de destino:** Puedes ya sea:
   * Seleccionar un campo (p. ej., un campo fórmula en el registro que almacene la URL) para establecer dinámicamente el destino de la redirección.
   * O, elegir **Personalizado** y escribir manualmente una URL externa (p. ej., <https://www.example.com>).
3. **¿Por qué esto?** Esta opción redirige a los usuarios a un sitio web o recurso externo, mejorando la conectividad del sitio.
4. **Solución de problemas:** Si la navegación no funciona, verifica que la URL o el valor del campo seleccionado sea válido y asegúrate de que el usuario tenga los permisos necesarios para acceder al sitio de destino.

### **Pasar parámetros de URL con Navegar a página nombrada**

Esta función te permite enviar datos dinámicos (p. ej., un ID de registro) a una página de destino, personalizando su contenido según el contexto del usuario. Es perfecto para crear experiencias personalizadas, como mostrar detalles específicos de un registro en una nueva página.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FXrIBtaU3JgTJSaaCgx3e%2F2024-10-17_15-22-41.png?alt=media&#x26;token=69f7d53a-c4a7-4e62-88c8-9c1de55c1587" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

#### **Configurar la página de destino**

Agrega un componente como Avonni Record Detail a la página de destino (p. ej., CustomerDetails). En su atributo "Record ID", usa la expresión {!Route.recordId} para capturar un parámetro de URL llamado recordId.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FBIIdsdEBZirvtvLdUBGt%2F2024-10-17_15-21-19.png?alt=media&#x26;token=ac4ed5dc-bcb3-4020-b0e9-20a18a3416c4" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **Configurar el botón**

En la página origen (p. ej., la página principal), agrega un Avonni Button. En la **Navegar** configuración, elige **Página nombrada** y escribe el nombre API (p. ej., CustomerDetails).
{% endstep %}

{% step %}

#### **Agregar parámetros**

* **Nombre:** Introduce recordId (coincidiendo con el atributo del componente de destino).
* **Valor:** Selecciona un campo (p. ej., {!Record.Id}) o introduce un ID de registro específico para pasar.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FGfflY1y2Fl82YAa1unmP%2Fimage%20-%202025-09-05T160337.867.avif?alt=media&#x26;token=67d9e1f6-b45f-4d73-837c-23a704080dbd" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
*Por qué es útil*

Esta función te permite enviar datos dinámicos (p. ej., un ID de registro) a la página de destino, personalizando su contenido. Por ejemplo, hacer clic en un botón en la página principal puede llevar a los usuarios a una página CustomerDetails que muestre la información de un Contacto específico basada en el recordId pasado.
{% endstep %}

{% step %}
*Analogía*

Piénsalo como dirigir una carta: Navegar a una página nombrada es el sobre, y el parámetro de URL (p. ej., recordId) es la dirección, indicando al sistema a dónde ir y qué datos traer
{% endstep %}

{% step %}
*Solución de problemas*

Si la página de destino no carga correctamente, asegúrate de que el parámetro recordId coincida con el atributo del componente de destino y que el ID sea válido.
{% endstep %}
{% endstepper %}

### **Navegar a un artículo de Knowledge**

1. Selecciona **Navegar** y elige **Artículo de Knowledge**.
2. **Nombre de URL:** Introduce la expresión `{{Record.UrlName}}` para vincular dinámicamente al artículo de Knowledge asociado con el registro actual.
3. *¿Por qué esto?* Dirige a los usuarios a una página específica de artículo de Knowledge basada en el `UrlName` del registro actual, simplificando el acceso al contenido de soporte.
4. *Consejo:* La `{{Record.UrlName}}` expresión utiliza la sintaxis LWR para extraer el nombre de URL único del artículo de Knowledge (p. ej., desde un registro relacionado). Asegúrate de que el registro tenga un `UrlName` campo válido rellenado.
5. *Solución de problemas:* Si la navegación falla, verifica que el `UrlName` campo exista y contenga un segmento de URL válido del artículo de Knowledge (p. ej., article-title); comprueba los permisos de usuario para acceder al artículo.

***

## Ejemplos

### **Ejemplo 1: Navegar a la página de soporte**

Este ejemplo añade un botón para navegar a una página de soporte en un sitio Experience Cloud.

1. **Configurar botón:**
   * **Etiqueta:** "Obtener soporte"
   * **Nombre del icono:** utility:help
   * **Variante:** neutral
   * *¿Por qué esto?* Crea un botón de ayuda para la asistencia al usuario.
2. **Establecer enlace a interacción:**
   * **Navegar:**
     * **Tipo:** Página nombrada
     * **Nombre de la página:** Customer\_Support\_\_c
     * *¿Por qué esto?* Redirige a la página CustomerSupport definida en Experience Builder.

**Resultado:** Los usuarios hacen clic en el botón desde cualquier página y navegan a la página de soporte.

<figure><img src="https://567120047-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FsDnurrqUnlmWVznxxs61%2F2025-09-05_15-49-24.png?alt=media&#x26;token=fe0f39ee-01c5-4d5f-95c4-ec1a1390222a" alt="" width="375"><figcaption></figcaption></figure>

***

## Consideraciones clave

* **Precisión del objetivo:** Asegúrate de que los nombres de página o IDs coincidan exactamente.
* **Rendimiento:** Mantén los destinos de navegación ligeros.
* **Accesibilidad:** Prueba el enfoque del botón y el contraste.
* **Seguridad:** Valida las URL externas para prevenir problemas.

***

## Solución de problemas comunes

* **Navegación que no funciona:** Revisa el tipo y el objetivo seleccionados (p. ej., Nombre de página correcto o ID de registro); verifica los permisos.
* **Página no encontrada:** Asegúrate de que la página nombrada u objeto exista en Experience Builder.
* **Fallo de ID dinámico:** Confirma que la fuente del ID de registro (p. ej., {!Record.Id}) sea válida.
* **Si los problemas persisten:** Contacta a nuestro equipo de soporte en <support@avonni.com> para obtener ayuda.

***

## Resumen

El componente Avonni Navigate mejora los sitios Experience Cloud con acciones de navegación personalizables. Es perfecto para guiar a los usuarios a páginas o recursos