# Naviguer

## Aperçu

L’interaction Naviguer vous permet de définir des actions de navigation lorsque les utilisateurs interagissent avec des composants, par exemple en cliquant sur un bouton. Cette fonctionnalité permet une redirection fluide vers différents types de pages, améliorant l’engagement des utilisateurs et créant une expérience de navigation harmonieuse sur votre site.

<figure><img src="https://3803934262-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>

### **Fonctionnalités clés**

* Prise en charge de plusieurs types de références de page
* Actions de navigation personnalisables
* Améliore le flux de navigation du site

### Cas d’utilisation

* **Page produit :** Rediriger vers une page détaillée de spécifications du produit.
* **Page d’assistance :** Naviguer vers un article d’aide ou un formulaire de contact.
* **Page communautaire :** Lien vers un profil de membre ou un fil de discussion.
* **Page d’événement :** Diriger vers un formulaire d’inscription à un événement.
* **Page de destination :** Guider vers une page de détails d’une campagne.
* **Page de profil :** Naviguer vers des enregistrements de contact liés.

## Configuration

Ajoutez l’interaction Naviguer à un composant (par exemple, un bouton) sur une page du site Experience Cloud et configurez-la via l’onglet Interactions dans Experience Builder.

### **Types de navigation disponibles**

Ces types de référence de page spécifient où les utilisateurs sont dirigés.

| Type de navigation                                   | Description                                                                        | Exemple d’utilisation                             |
| ---------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------- |
| **Aura - Page d’enregistrement externe**             | Lien vers une page d’enregistrement spécifique en utilisant le framework Aura.     | Afficher les détails d’un Contact.                |
| **Aura - Page de relation d’enregistrement externe** | Lien vers des enregistrements liés (par ex., Contacts d’un Compte).                | Voir les Opportunités pour un Compte.             |
| **Aura - Page de connexion**                         | Déclenche des actions de connexion ou de déconnexion.                              | Se connecter pour accéder à du contenu restreint. |
| **Article de Knowledge**                             | Dirige vers un article Knowledge spécifique.                                       | Accéder à un article d’assistance.                |
| **Page de contenu géré**                             | Lien vers une page de contenu gérée par un CMS.                                    | Afficher un article d’actualité.                  |
| **Page nommée**                                      | Redirige vers une page interne d’Experience Builder.                               | Aller à une page nommée « Support ».              |
| **Page d’objet**                                     | Navigue vers une vue liste ou une page de création d’enregistrement pour un objet. | Ouvrir la vue liste des Contacts.                 |
| **Page d’enregistrement**                            | Lien vers la page de détails d’un enregistrement spécifique.                       | Afficher un enregistrement de Compte.             |
| **Page de relation d’enregistrement**                | Navigue vers une liste liée (par ex., Opportunités d’un Contact).                  | Voir les Cas pour un Compte.                      |
| **Page Web**                                         | Redirige vers une page Web externe ou interne.                                     | Lien vers le site d’un partenaire.                |

*<mark style="color:par défaut;background-color:green;">**Bonne pratique**</mark>:* Choisissez le type en fonction de la cible (par ex., Page d’enregistrement pour des enregistrements) ; testez la navigation en mode aperçu.

**Configurer la navigation vers une page spécifique**

Pour configurer la navigation vers une page ou une ressource spécifique, suivez ces étapes en fonction de votre cas d’utilisation :

### **Naviguer vers une page nommée**

1. Ajoutez un composant Bouton et allez dans le **Interactions** onglet.
2. Sélectionnez **Naviguer** et choisissez **Page nommée**.
3. **Nom de la page :** Saisissez le nom API de la page cible (par ex., Content\_Document\_\_c).
4. *Pourquoi ceci ?* Dirige les utilisateurs vers une page interne (par ex., une page de document de contenu) définie dans Experience Builder.

<figure><img src="https://3803934262-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>

### **Naviguer vers une page d’enregistrement**

Utilisez cette option lorsque vous souhaitez qu’un bouton ou un composant ouvre la page de détails d’un enregistrement spécifique sur votre site Experience Cloud

#### Étapes de configuration

1. Sélectionnez **Naviguer** et choisissez **Page d’enregistrement**.
2. **Nom API de l’objet :** Saisissez l’objet (par ex., Contact).
3. **ID de l’enregistrement :** Sélectionnez le champ d’ID d’enregistrement correct pour la redirection ; habituellement, il s’agit de «**`Enregistrement : Id`**».
4. **Nom de l’action :** Définir sur Afficher (par défaut pour les détails).

*Pourquoi ceci ?* Emmène les utilisateurs à la page de détails d’un enregistrement spécifique (par ex., un enregistrement Contact).

<figure><img src="https://3803934262-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" %}

#### Important

Pour garantir que la navigation vers une page d’enregistrement fonctionne correctement, créez d’abord la Page d’objet sur votre site Experience où l’interaction Naviguer doit aboutir. Si cette page n’existe pas, l’interaction Naviguer vers la page d’enregistrement ne fonctionnera pas.
{% endhint %}

### **Naviguer vers une page Web externe**

Utilisez cette option lorsque vous souhaitez qu’un bouton ou un composant ouvre un site externe ou une autre ressource Web, comme votre site principal, un portail partenaire ou une page de documentation

#### Étapes de configuration

1. Choisissez l’ **Naviguer** interaction et sélectionnez l’ **Page Web** option.
2. **URL cible :** Vous pouvez soit :
   * Sélectionner un champ (par ex., un champ formule sur l’enregistrement qui stocke l’URL) pour définir dynamiquement la cible de redirection.
   * Ou, choisissez **Personnalisé** et saisissez manuellement une URL externe (par ex., <https://www.example.com>).
3. **Pourquoi ceci ?** Cette option redirige les utilisateurs vers un site Web ou une ressource externe, améliorant la connectivité du site.
4. **Dépannage :** Si la navigation ne fonctionne pas, vérifiez que l’URL ou la valeur du champ sélectionné est valide, et assurez-vous que l’utilisateur dispose des autorisations nécessaires pour accéder au site cible.

### **Passage de paramètres d’URL avec Naviguer vers une page nommée**

Cette fonctionnalité vous permet d’envoyer des données dynamiques (par ex., un ID d’enregistrement) à une page cible, personnalisant son contenu en fonction du contexte de l’utilisateur. Elle est parfaite pour créer des expériences personnalisées, comme afficher les détails d’un enregistrement spécifique sur une nouvelle page.

<figure><img src="https://3803934262-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 %}

#### **Configurer la page cible**

Ajoutez un composant comme Avonni Record Detail à la page cible (par ex., CustomerDetails). Dans son attribut « Record ID », utilisez l’expression {!Route.recordId} pour capturer un paramètre d’URL nommé recordId.

<figure><img src="https://3803934262-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 %}

#### **Configurer le bouton**

Sur la page source (par ex., page d’accueil), ajoutez un Avonni Button. Dans les **Naviguer** paramètres, choisissez **Page nommée** et saisissez le nom API (par ex., CustomerDetails).
{% endstep %}

{% step %}

#### **Ajouter des paramètres**

* **Nom :** Saisissez recordId (correspondant à l’attribut du composant cible).
* **Valeur :** Sélectionnez un champ (par ex., {!Record.Id}) ou saisissez un ID d’enregistrement spécifique à transmettre.

<figure><img src="https://3803934262-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 %}
*Pourquoi est-ce utile*

Cette fonctionnalité vous permet d’envoyer des données dynamiques (par ex., un ID d’enregistrement) à la page cible, personnalisant son contenu. Par exemple, cliquer sur un bouton sur la page d’accueil peut emmener les utilisateurs vers une page CustomerDetails affichant les informations d’un Contact spécifique en fonction du recordId transmis.
{% endstep %}

{% step %}
*Analogie*

Pensez-y comme adresser une lettre—le Naviguer vers une page nommée est l’enveloppe, et le paramètre d’URL (par ex., recordId) est l’adresse, indiquant au système où aller et quelles données apporter
{% endstep %}

{% step %}
*Dépannage*

Si la page cible ne se charge pas correctement, assurez-vous que le paramètre recordId correspond à l’attribut du composant cible et que l’ID est valide.
{% endstep %}
{% endstepper %}

### **Naviguer vers un article Knowledge**

1. Sélectionnez **Naviguer** et choisissez **Article de Knowledge**.
2. **Nom URL :** Saisissez l’expression `{{Record.UrlName}}` pour lier dynamiquement à l’article Knowledge associé à l’enregistrement courant.
3. *Pourquoi ceci ?* Dirige les utilisateurs vers une page d’article Knowledge spécifique basée sur le `champ UrlName` de l’enregistrement courant, simplifiant l’accès au contenu d’assistance.
4. *Astuce :* L’ `{{Record.UrlName}}` expression utilise la syntaxe LWR pour récupérer le nom d’URL unique de l’article Knowledge (par ex., depuis un enregistrement lié). Assurez-vous que l’enregistrement a un `champ UrlName` champ
5. *Dépannage :* valide renseigné. `champ UrlName` Si la navigation échoue, vérifiez que le

***

## champ existe et contient un segment d’URL d’article Knowledge valide (par ex., article-title) ; vérifiez les autorisations utilisateur pour accéder à l’article.

### **Exemples**

Exemple 1 : Naviguer vers la page d’assistance

1. **Cet exemple ajoute un bouton pour naviguer vers une page d’assistance sur un site Experience Cloud.**
   * **Configurer le bouton :** Libellé :
   * **"Obtenir de l’aide"** Nom d’icône :
   * **utility:help** Variant :
   * *Pourquoi ceci ?* neutre
2. **Crée un bouton d’aide pour l’assistance aux utilisateurs.**
   * **Définir le lien sur Interaction :**
     * **Naviguer :** Page nommée
     * **Nom de la page :** Type :
     * *Pourquoi ceci ?* Customer\_Support\_\_c

**Redirige vers la page CustomerSupport définie dans Experience Builder.** Résultat :

<figure><img src="https://3803934262-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>

***

## Les utilisateurs cliquent sur le bouton depuis n’importe quelle page et naviguent vers la page d’assistance.

* **Considérations clés** Précision de la cible :
* **Assurez-vous que les noms de page ou les ID correspondent exactement.** Performances :
* **Garder les cibles de navigation légères.** Accessibilité :
* **Tester le focus et le contraste du bouton.** Sécurité :

***

## Valider les URL externes pour éviter les problèmes.

* **Dépannage des problèmes courants** La navigation ne fonctionne pas :
* **Vérifiez le type sélectionné et la cible (par ex., nom de page correct ou ID d’enregistrement) ; vérifiez les autorisations.** Page introuvable :
* **Assurez-vous que la page nommée ou l’objet existe dans Experience Builder.** Échec de l’ID dynamique :
* **Confirmez que la source de l’ID d’enregistrement (par ex., {!Record.Id}) est valide.** Si les problèmes persistent : [Contactez notre équipe de support à](mailto:support@avonni.com) <support@avonni.com>

***

## pour obtenir de l’aide.

Résumé — Conclusion : Le composant Navigate d’Avonni améliore les sites Experience Cloud avec des actions de navigation personnalisables. Il est parfait pour guider les utilisateurs vers des pages ou des ressources