Guide & More Stuff
62
137
Advanced JanitorAI bio design · A free community guide by Melancholux
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. 🌷
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.
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.A sweet new guide is here!
<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>
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>
<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>
01 · A Bouquet for the New Neighbor
She only wanted to welcome you...
OPEN SCENE ↓
<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>✦ FILE IV — The Locked Door
One towel. One very unfortunate hallway.
OPEN ENTRY ↓
<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>
Fictional recording · 184 Days Later
DISPATCHER: 911, what's your emergency?
ERIKA: Please... call {{user}}.
<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><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>
JOIN THE COMMUNITY ↗
<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>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>
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.
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.");
})();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());
})();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.");
})();
✓ 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.
Создано 3 дня назад
Обновлено 3 дня назад
Опубликован 3 дня назад
- Безлимитный
- #guide
- #announcement
- #reginaden