Integrate Pilllz into your website

Easily generate profile images for all your users.
You can also give them the option to edit their Pilllz avatar themselves.

Prerequisites

Request your access via email at [email protected]

Step 1 : Add Pilllz CSS and JS files to your source code

To begin, you need to add the Pilllz CSS and JavaScript files to your source code. To do this, insert the following code into the section <head> de votre page HTML :

<!-- Add Pilllz CSS file -->
<link rel="stylesheet" href="https://pilllz.com/src/widget/pilllz.theme.css">
<!-- Add Pilllz Javascript file -->
<script src="https://pilllz.com/src/widget/pilllz.js"></script>

Step 2 : Add a div to display the source user's avatar

Next, you must add a div with the ID #pilllz_generator where you want to display the user's avatar. This div should include the following parameters:

pilllz-apikey : This ID is obtained by requesting access from [email protected]
pilllz-client_id : This ID is also obtained by requesting access from [email protected]
pilllz-user_id : This ID is your user's ID; the best practice is to hash it using, for example, md5, to ensure maximum security in its usage.
pilllz-lang : currently available options are french (fr) and english (en).

Here's an example of HTML code to add:

<div id="pilllz_generator"
  pilllz-client_id="{CLIENT_ID}"
  pilllz-apikey="{API_KEY}"
  pilllz-user_id="{USER_ID_HASH}"
  pilllz-lang="en">
  You can put a text like Loading ... here</div>

Please note that the div contains the text "You can put a text like Loading ... here," which will be displayed while the avatar is loading.

Step 3 : Result

A Pilllz avatar is loaded (corresponding to your user)!

Upon clicking the user's avatar, two possibilities:

If the Bootstrap JS library is installed, it will open a Bootstrap modal.
If the Bootstrap JS library is not installed, it will open a custom modal.

Step 4 (bonus): Add an edit button for the avatar

If you wish to add a button to allow the user to edit their avatar, simply add the .pilllz-edit-avatar class to this button. For example:

<button class="pilllz-edit-avatar">Edit my avatar</button>

And there you have it! By following these simple steps, you can use the Pilllz script to display your user's avatar and allow them to easily edit it.