Intégrez Pilllz à votre site web

Générez facilement des images de profil pour tous vos utilisateurs.
Vous pouvez également leur donner la possibilité d'éditer eux-même leur avatar Pilllz.

Prérequis :

Demandez vos accès par e-mail à [email protected]

Étape 1 : Ajouter les fichiers CSS et JS de Pilllz dans votre code source

Pour commencer, vous devez ajouter le fichier CSS et le fichier JavaScript de Pilllz dans votre code source. Pour cela, ajoutez le code suivant dans la section <head> de votre page HTML :

<!-- Ajouter le fichier CSS de Pilllz -->
<link rel="stylesheet" href="https://pilllz.com/src/widget/pilllz.theme.css">
<!-- Ajouter le fichier JavaScript de Pilllz -->
<script src="https://pilllz.com/src/widget/pilllz.js"></script>

Étape 2 : Ajouter une div pour afficher l'avatar de l'utilisateur source

Ensuite, vous devez ajouter une div avec l'ID #pilllz_generator à l'endroit où vous voulez afficher l'avatar de l'utilisateur. Cette div doit inclure les paramètres suivants :

pilllz-apikey : cet ID est récupéré en demandant des accès à [email protected]
pilllz-client_id : cet ID est également récupéré en demandant des accès à [email protected]
pilllz-user_id : cet ID est le user ID de votre utilisateur, la meilleure méthode est de le hasher avec du md5 par exemple pour sécuriser au maximum l'utilisation.
pilllz-lang : les options actuellement disponibles sont français (fr) et anglais (en).

Voici un exemple de code HTML à ajouter :

<div id="pilllz_generator"
  pilllz-client_id="{CLIENT_ID}"
  pilllz-apikey="{API_KEY}"
  pilllz-user_id="{USER_ID_HASH}"
  pilllz-lang="">
  Vous pouvez mettre un texte comme Chargement ... ici</div>

Notez que la div contient un texte "Vous pouvez mettre un texte comme Chargement ... ici" qui s'affichera tant que l'avatar n'est pas encore chargé.

Étape 3 : Résultat

Un avatar pilllz est chargé (celui de votre utilisateur) !

Au clic sur l'avatar de l'utilisateur, deux possibilités :

Si la librairie Bootstrap JS est installée, cela ouvrira une modale Bootstrap.
Si la librairie Bootstrap JS n'est pas installée, cela ouvrira une modale personnalisée.

Étape 4 (bonus) : Ajouter un bouton pour éditer l'avatar

Si vous souhaitez ajouter un bouton pour permettre à l'utilisateur d'éditer son avatar, il vous suffit d'ajouter la classe .pilllz-edit-avatar à ce bouton. Par exemple :

<button class="pilllz-edit-avatar">Editer mon avatar</button>

Et voilà, vous avez terminé ! En suivant ces étapes simples, vous pourrez utiliser le script Pilllz pour afficher l'avatar de votre utilisateur et lui permettre de l'éditer facilement.