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:
card. Which one is used is controlled with the
data-pkfronters-type attribute on the embed code.
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.
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:
displayname(default: off) — Use member display names, instead of their actual member names
card_border_outer(default: off) — For the
carddisplay mode: apply the member color to the border of the whole card, rather than the avatar image
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.
pronouns(default: on) — Shows each member's pronouns (the
pk;m <name> pronounsfield) 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!