Guide & More Stuff

Guide & More Stuff

62

137

Advanced JanitorAI bio design · A free community guide by Melancholux

REGINA'S WORKSHOP // COMMUNITY RESOURCEThe Advanced Bio HandbookPhones · Archives · Intros · Audio · Galleries · Console PATCH · More
00 // REGINA'S WORKSHOPA note before we beginAn apology, a few clarifications, and a thank-you.

Hai, darlings. It's Mel. 🤍

Before sharing today's guide, I owe you an apology for how I handled the events of last week. I didn't give the kind of response people could reasonably have expected from me. I was defensive and immature, and I recognize that similar behavior has happened in past disagreements with other Janitor communities.

I don't plan to remove the content in question. At the same time, I don't intend to repeat that particular kind of content in the future if it causes discomfort. Enjoying or disliking a topic is one thing; going after actual people because of it is another. Even when someone is clearly trying to provoke us, we can choose not to reply. We don't know how deeply our words might affect someone else, and a little consideration costs us nothing.

I'm sorry for the trouble I've caused, and for taking so long to post this. I've been unusually exhausted lately and have slept through much of the day. That's not an excuse, just an explanation for being quiet. Thank you for your patience.

Now for something I actually want to share: everything I've learned experimenting with advanced Janitor bios. I want more creators to be able to make things they enjoy without gatekeeping the techniques. Welcome home. 🌷

01 // REGINA'S WORKSHOPWhat is an advanced bio?A small themed page inside a character description.

Instead of plain text, you can combine HTML with inline CSS for a miniature interface: faux phones, chat bubbles, opening-scene files, image galleries, music players, and even fake apps. This guide includes a visible demonstration and its editable code directly underneath. You do not have to download anything to learn from it.

Two different systems: Creator profile CSS can affect your profile and its native cards. Character-description HTML usually works best with style="..." on each element; a global <style> or <script> may be stripped. The API workaround described below is unofficial and may stop working after platform changes.
02 // REGINA'S WORKSHOPKeep the preview imageFirst impressions matter on bot cards.
The neutral preview header
Start with simple paragraph markup. In our experience, this makes it more likely that the first image appears in the public preview. It is not guaranteed across every Janitor update.

A sweet new guide is here!

SOURCE CODE — SELECT AND COPY
<p style="text-align:center;">A sweet new guide is here!</p>
<p style="text-align:center;"></p>
<p style="text-align:center;"><img src="https://ella.janitorai.com/media-approved/dy0zWX7NoKK4GHuBJDD5O.webp" style="display:block;max-width:100%;height:auto;margin:0 auto;"></p>
03 // REGINA'S WORKSHOPThe tiny phoneOur fake chat UI: no JavaScript required.
Clara tries the Amen pose
Phone border, chat bubbles, photo and status area. Change the text and images to match your own character.
Clara 🌸
across the hall

I saw the younger people doing something called the Amen pose...

  <p style="background:white;border-radius:15px;padding:10px;">Please don't laugh. I already regret sending this.</p>
</div>
SOURCE CODE — SELECT AND COPY
<div style="width:268px;max-width:100%;margin:auto;background:#171416;border-radius:42px;padding:9px;">
  <div style="border-radius:34px;overflow:hidden;background:#f9f1ea;font-family:Arial,sans-serif;">
    <div style="padding:12px;text-align:center;background:white;color:#41313a;"><b>Clara 🌸</b><br><small>across the hall</small></div>
    <div style="padding:12px;color:#5d4b52;">
      <p style="background:white;border-radius:15px;padding:10px;">I saw the younger people doing something called the Amen pose...</p>
      <img src="https://ella.janitorai.com/media-approved/tFa0-Leebkg_pPplQvxBj.webp" style="max-width:100%;height:auto;border-radius:12px;">
      <p style="background:white;border-radius:15px;padding:10px;">Please don't laugh. I already regret sending this.</p>
    </div>
  </div>
</div>
04 // REGINA'S WORKSHOPOpening scenariosA cinematic card with an image behind its title.
Expandable intro with cover art
Click the card to reveal the scenario debrief. The picture is the summary background, not a detached image.
01 · A Bouquet for the New Neighbor
She only wanted to welcome you...
OPEN SCENE ↓
Clara knocks with a little bouquet, suddenly much shyer than expected.
SOURCE CODE — SELECT AND COPY
<details style="border:1px solid #d3a8b8;border-radius:15px;overflow:hidden;">
  <summary style="cursor:pointer;list-style:none;display:block;background:linear-gradient(transparent,rgba(38,24,35,.88)),url('https://ella.janitorai.com/media-approved/ovh2DAZQGTdr78LhhS9Gw.webp');background-size:cover;background-position:center;padding:42% 18px 20px;text-align:center;color:white;">
    <b>01 · A Bouquet for the New Neighbor</b><br>
    <i>She only wanted to welcome you...</i><br>
    <small>OPEN SCENE ↓</small>
  </summary>
  <div style="padding:17px;background:#fff8f1;color:#73505c;">Clara knocks with a little bouquet, suddenly much shyer than expected.</div>
</details>
No image? Use an archive instead.
A parchment-style accordion can look intentional without reusing unrelated art.
✦ FILE IV — The Locked Door
One towel. One very unfortunate hallway.
OPEN ENTRY ↓
The scene has no image, so the paper itself becomes the visual theme.
SOURCE CODE — SELECT AND COPY
<details style="border:1px solid #bca47b;background:#f4e7c9;border-radius:13px;color:#4d3926;">
  <summary style="cursor:pointer;list-style:none;padding:18px;font-family:Georgia,serif;">✦ FILE IV — The Locked Door<br><i>One towel. One very unfortunate hallway.</i><br><small>OPEN ENTRY ↓</small></summary>
  <div style="padding:16px;border-top:1px dashed #c5ad89;">The scene has no image, so the paper itself becomes the visual theme.</div>
</details>
05 // REGINA'S WORKSHOPAudio and transcriptsMake a voice message or fictional scene playable.
Erika — dispatch recording
Direct MP3 URL + native HTML player + an optional written transcript. Do not count on autoplay.
☎ 911 DISPATCH ARCHIVE

Fictional recording · 184 Days Later

DISPATCHER: 911, what's your emergency?

ERIKA: Please... call {{user}}.

SOURCE CODE — SELECT AND COPY
<div style="background:#111b24;border:1px solid #567080;border-radius:14px;padding:16px;color:#e0eaf0;">
  <b>☎ 911 DISPATCH ARCHIVE</b>
  <p>Fictional recording · 184 Days Later</p>
  <audio controls preload="metadata" style="width:100%;">
    <source src="https://files.catbox.moe/7u6jbn.mp3" type="audio/mpeg">
  </audio>
  <p><b>DISPATCHER:</b> 911, what's your emergency?</p>
  <p><b>ERIKA:</b> Please... call {{user}}.</p>
</div>
06 // REGINA'S WORKSHOPImage galleries and community linksKeep separate image orientations and make real clickable cards.
Scrolling image strip
Keep portrait and landscape galleries in their own sections when you have both formats.
SOURCE CODE — SELECT AND COPY
<div style="display:flex;overflow-x:auto;gap:12px;padding:10px;">
  <img src="https://ella.janitorai.com/media-approved/dy0zWX7NoKK4GHuBJDD5O.webp" style="display:block;flex:0 0 65%;max-width:250px;height:auto;border-radius:12px;">
  <img src="https://ella.janitorai.com/media-approved/eEY7icr8-9ZhuhcKNd3KC.webp" style="display:block;flex:0 0 65%;max-width:250px;height:auto;border-radius:12px;">
</div>
Discord banner as a button
Use a real href. The full banner is the clickable surface.
REGINA'S DEN
JOIN THE COMMUNITY ↗
SOURCE CODE — SELECT AND COPY
<a href="https://discord.gg/Uvz7TG5ceJ" style="display:block;text-decoration:none;background:linear-gradient(transparent,rgba(21,17,28,.90)),url('https://ella.janitorai.com/media-approved/8OpbhA9D9TkCTKK-W31wG.webp');background-size:cover;background-position:center;padding:31% 12px 20px;text-align:center;border-radius:14px;color:white;"><b>REGINA'S DEN</b><br><small>JOIN THE COMMUNITY ↗</small></a>
07 // REGINA'S WORKSHOPAnimations: what actually worksA distinction that matters for profile CSS.

Some creators use animated profile effects, CSS tabs, hover transitions and scrolling galleries. This example shows a gentle floating sticker with reduced-motion support. Put this CSS in the profile CSS/HTML area rather than assuming it works inside a character bio.

<style>
/* FOR PROFILE CSS, NOT A CHARACTER BIO */
@keyframes gentleFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.my-profile-sticker { display:inline-block;animation:gentleFloat 3s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .my-profile-sticker { animation:none; } }
</style>
<span class="my-profile-sticker">🌸 Welcome home!</span>
08 // REGINA'S WORKSHOPHow our console PATCH method worksFor creators who want to experiment with advanced descriptions.

1. Create or open a character that you own, preferably an unpublished test bot. 2. Back up its current description. 3. Make your HTML page. 4. Find the UUID in the character URL. 5. Get your own access token locally. 6. Use a PATCH script that includes the compressed HTML description. 7. Reload and inspect the public page, desktop and mobile.

Important: The access token is a login credential, not a public code. Retrieve it only while signed into your own account. Do not send it to another creator, paste it into screenshots, or publish it inside a bot. The code below only reads your local Janitor cookies and copies the token to your own clipboard; it does not contact any third-party server. Browser or cookie changes may prevent it from working.
STEP A — YOUR OWN TOKEN

Sign into Janitor on desktop, open DevTools → Console, run this locally, then keep the copied value private.

(async () => {
  const getCookie = n => {
    const p = ("; " + document.cookie).split("; " + n + "=");
    return p.length === 2 ? p.pop().split(";").shift() : null;
  };
  const m = document.cookie.match(/(?:^|;\s*)(sb-[^=]+-auth-token)(?:\.\d+)?=/);
  const base = m ? m[1] : "sb-auth-auth-token";
  let raw = getCookie(base);
  if (!raw) {
    const chunks = [];
    for (let i = 0; ; i++) {
      const c = getCookie(base + "." + i);
      if (c === null) break;
      chunks.push(c);
    }
    raw = chunks.join("");
  }
  if (!raw) throw new Error("No Janitor session found.");
  let json;
  if (raw.startsWith("base64-")) {
    let b64 = raw.slice(7).replace(/-/g, "+").replace(/_/g, "/");
    while (b64.length % 4) b64 += "=";
    json = new TextDecoder().decode(Uint8Array.from(atob(b64), c => c.charCodeAt(0)));
  } else { json = decodeURIComponent(raw); }
  const token = JSON.parse(json)?.access_token;
  if (!token) throw new Error("No access_token found.");
  copy(token);
  console.log("✅ Your own access token was copied locally.");
})();
STEP B — PATCH SHAPE

This is the API request shell we use. Replace the character UUID, your private token, and the compressed HTML payload. The payload is the gzip → base64 representation of your complete HTML, usually generated locally or by a code tool.

(async()=>{
const CHARACTER_ID="YOUR_CHARACTER_UUID";
const ACCESS_TOKEN="YOUR_PRIVATE_ACCESS_TOKEN";
const bin=Uint8Array.from(atob("YOUR_GZIP_BASE64_HTML"),c=>c.charCodeAt(0));
const ds=new DecompressionStream("gzip");
const description=await new Response(new Blob([bin]).stream().pipeThrough(ds)).text();
const r=await fetch("https://janitorai.com/mb/characters/"+CHARACTER_ID,{
  method:"PATCH",credentials:"include",
  headers:{"content-type":"application/json","authorization":"Bearer "+ACCESS_TOKEN},
  body:JSON.stringify({description})
});
console.log("HTTP STATUS:",r.status);console.log("RESPONSE:",await r.text());
})();
Never blindly run a script given by a stranger. Read its destination URL and check that it only updates your own character. This is an unofficial method, not a promise of compatibility or permission to bypass future security restrictions.
09 // REGINA'S WORKSHOPElement picker for inspirationClick an element on a public page to inspect its rendered HTML.

Want to learn how a card, text box or layout was built? On a public character page, open DevTools and run the picker. Hover over a visible element, click to copy its outerHTML, or press Escape to cancel. This helps study structure; computed styles, private data and script-generated behavior are not included.

(() => {
  let current = null;
  const mark = e => {
    if (current) current.style.outline = "";
    current = e.target;
    current.style.outline = "3px solid #ff8db1";
  };
  const stop = () => {
    document.removeEventListener("mouseover", mark, true);
    document.removeEventListener("click", pick, true);
    document.removeEventListener("keydown", key, true);
    if (current) current.style.outline = "";
  };
  const key = e => { if (e.key === "Escape") { stop(); console.log("Picker cancelled."); } };
  const pick = async e => {
    e.preventDefault(); e.stopImmediatePropagation();
    const element = e.target;
    stop();
    const html = element.outerHTML;
    try { await navigator.clipboard.writeText(html); console.log("HTML copied."); }
    catch { copy(html); console.log("HTML copied using DevTools."); }
  };
  document.addEventListener("mouseover", mark, true);
  document.addEventListener("click", pick, true);
  document.addEventListener("keydown", key, true);
  console.log("Hover and click an element to copy its rendered HTML. ESC cancels.");
})();
Use other creators’ work as a learning reference; credit them when appropriate. Don’t repost their exact designs or art as your own. Also, a copied element might need external styles to look identical.
10 // REGINA'S WORKSHOPThings I learned the hard wayPractical checks before publishing.
✓ Use a neutral first paragraph and a real image for card previews.
✓ Prefer <div>, <span>, <img>, <a>, <details> and <summary>.
✓ Keep styles inline for character descriptions.
✓ Avoid huge fixed widths; check mobile readability.
✓ Separate vertical and horizontal photos.
✓ Give every bot its own visual language instead of recoloring one template.
✓ Use actual links, not fake buttons.
✓ Use <audio controls> and an accessible transcript when possible.
✓ Back up the previous bio before experimenting.
✓ Preserve placeholders like {{user}}.
✓ Never put your live access token inside a public description.
Make something that feels like your character.A classroom notebook, a little phone, a case archive, an enchanted book — anything that belongs to their story.MORE FROM MELANCHOLUX ↗Stay fluffy, darlings. — Mel & Regina 🌸🤍

Создано 3 дня назад

Обновлено 3 дня назад

Опубликован 3 дня назад

Опубликованные чаты