Afficher les informations d'un utilisateur connecté à un espace membre Webflow

L'intégration d'un espace membre dans votre site Webflow offre de nombreuses possibilités pour personnaliser l'expérience de vos utilisateurs. Cependant, il y a quelques mois, Webflow a décidé de mettre en pause le développement de cette fonctionnalité. La fonctionnalité Users est disponible pour tout le monde, mais comporte des limitations. Une des limitations est que l'on ne peut pas afficher les informations d'un utilisateur connecté nativement.

Dans cet article, nous allons vous guider à travers les étapes nécessaires pour parvenir à afficher le nom, l'email ou une autre information d'un utilisateur connecté sur une page web.

1. Paramétrer votre espace membre dans Webflow

Avant de pouvoir afficher les informations d'un utilisateur, il est important de s'assurer que votre espace membre est correctement configuré.

Apprendre à configurer son espace membre Webflow !

2. Utilisation de la documentation Sygnal Attributes 5 Memberships

Pour pouvoir afficher les informations d'un utilisateur connecté, nous allons passer par la solution Sygnal Attributes 5 Memberships. Un peu comme pour les attributes Finsweet, Sygnal Attributes propose une documentation pour ajouter des fonctionnalités à son site web assez "facilement".

Il existe beaucoup de fonctionnalités que l'on peut ajouter à notre site Webflow, mais dans cet article, nous allons nous concentrer sur l'affichage d'informations d'un utilisateur de son espace membre.

Étape 1 : Ajouter du code dans le head code de son projet

Pour afficher les informations d'un utilisateur, vous devrez tout d'abord intégrer un script dans le head code de votre projet Webflow. Pour se faire, il suffit de se rendre dans les paramètres de son projet Webflow, aller dans la partie "custom code" et coller le code suivant dans la partie "Head code" :

<!-- Sygnal Attributes 5 | Memberships -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.3.4/dist/css/webflow-membership.css">
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.3.4/dist/nocode/webflow-membership.js"</script>
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['getMembershipConfig',
  (config) => {
    // Apply any configuration settings here
    // such as access groups
    return config;
  }]);
</script>

Cette étape est cruciale pour le bon fonctionnement de l'opération.

Étape 2 : Ajouter des attributs spécifiques à vos éléments

Vous pouvez maintenant retourner dans le designer et vous rendre sur la page sur laquelle vous souhaitez afficher les informations de l'utilisateur connecté.

Vous devrez ensuite ajouter des attributes aux éléments sur lesquels vous souhaitez afficher une information spécifique de l'utilisateur.

Vous pouvez ajouter les attributes autant à des champs de formulaires (input) qu'à des éléments de texte (via un span par exemple).

Afficher le nom de l'utilisateur connecté dans Webflow

Pour rendre visible le nom de l'utilisateur connecté, vous devez sélectionner votre texte ou votre input, vous rendre dans les paramètres de l'élément et dans la partie "custom attributes" ajouter l'attribute suivant :

[wfu-bind="$user.name"] (wfu-bind est le "Name" et $user.name est la "Value")

Afficher l'email de l'utilisateur connecté dans Webflow

Pour rendre visible l'adresse mail de l'utilisateur connecté, vous devez sélectionner votre texte ou votre input, vous rendre dans les paramètres de l'élément et dans la partie "custom attributes" ajouter l'attribute suivant :

[wfu-bind="$user.email"] (wfu-bind est le "Name" et $user.email est la "Value")

Afficher un champ personnalisé de l'utilisateur connecté dans Webflow

Pour réaliser cette manipulation, il faut bien entendu avoir au préalable ajouter un champ personnalisé dans la partie "Users" de votre espace membre Webflow".

Ensuite, il faudra ajouter ce champ dans la page "User Account" par défaut de Webflow. Cette manipulation est possible depuis les paramètres de l'élément form de cette page en cliquant sur le "+" de "Custom fields".

Enfin, retourner sur la page où vous souhaitez afficher l'information, sélectionner le texte ou l'input et ajouter l'attribute suivant :

[wfu-bind="$user.data.slug"] (wfu-bind est le "Name" et $user.data.slug est la "Value").

Il faut noter que slug est le slug de votre champ personnalisé dans votre espace membre (il faut donc changer cette partie en fonction de votre configuration).

Résultat des informations affichées d'un utilisateur connecté à son espace membre Webflow garanti sans trucage :

Afficher les informations d'un utilisateur connecté à un espace membre Webflow peut améliorer l'expérience utilisateur de votre site. En suivant les étapes décrites dans cet article, vous pouvez maintenant afficher des messages personnalisés ou pré-remplir des formulaires. N'hésitez pas à explorer davantage les possibilités et à personnaliser votre site en fonction de vos besoins spécifiques.