To embed PKfronters in your own site, granting you full control over the CSS, all you need is two lines of HTML!
Copy and paste the code below, and change exmpl
to your PluralKit system ID.
<div data-pkfronters-system="exmpl" data-pkfronters-type="card"></div>
<script src="https://irys.cc/fronters/pkfronters.js"></script>
PKfronters supports two display types: list
and card
. Which one is used is controlled with the data-pkfronters-type
attribute on the embed code.
The card
display mode is the one used on the main PKfronters site: it displays your current fronters' avatars, as well as their names and pronouns.
The list
display mode renders a list (as an HTML <ul>
element) of your current fronters' names and pronouns.
There are some options that can be enabled by adding their names, separated by commas, to the data-pkfronters-options
attribute on the embed code. Options can also be explicitly disabled by prefixing their name with an exclamation point (!
).
The available options are:
dn
or displayname
(default: off)
—
Use member display names, instead of their actual member names
cbo
or card_border_outer
(default: off)
—
For the card
display mode: apply the member color to the border of the whole card, rather than the avatar image
ip
or image_proxy
(default: on)
—
Enables using The Iris System's PluralKit avatar rescaler for member avatar images. Using the avatar rescaler proxy service ensures that avatars always render with correct proportions, and decreases loading times (particularly on slow internet connections, or for large avatar images). Disabling this option will use the avatar URL direct from PluralKit.
prns
or pronouns
(default: on)
—
Shows each member's pronouns (the pk;m <name> pronouns
field) underneath their avatar.
For example, to embed a list of member display names, with member pronouns hidden, you could use:
<div data-pkfronters-system="exmpl" data-pkfronters-type="list" data-pkfronters-options="dn,!prns"></div>
Take a look at pkfronters.css - this is the base CSS used in the main PKfronters site, and should give you a good starting point to work from :)
Feel free to ask in the #community-resources-help channel of the PluralKit support Discord server!