Embedding PKfronters in your own site

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>

Display types

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.

Options

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:

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>

Example CSS

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 :)

Need support?

Feel free to ask in the #community-resources-help channel of the PluralKit support Discord server!