Character Introduction

HTML Support in Intro Section

Our platform now supports HTML formatting in the intro section, allowing creators to enhance their content with structured text, images, and formatting elements. Below is a list of common used HTML tags:

Tag

Usage

Example

<b>

Bold text

<b>Bold</b> → Bold

<i>

Italic text

<i>Italic</i> → Italic

<strong>

Important text (bold)

<strong>Important</strong> → Important

<em>

Emphasized text (italic)

<em>Emphasis</em> → Emphasis

<u>

Underlined text

<u>Underline</u> → <u>Underline</u>

<s>

Strikethrough text

<s>Deleted</s> → ~~Deleted~~

<br>

Line break

Line 1<br>Line 2 → Line 1 Line 2

<p>

Paragraph

<p>This is a paragraph.</p>

<blockquote>

Quotation

<blockquote>Quote</blockquote>

<ul>/<ol>

Lists (unordered/ordered)

<ul><li>Item</li></ul>

<li>

List item

<li>Item</li> in <ul> or <ol

<img>

Image

<img src="url.jpg" alt="Image">

<figure>/<figcaption>

Image with caption

<figure><img src="url"><figcaption>Caption</figcaption></figure>

<a>

Link

<a href="https://example.com">Click here</a>

<table>

Table structure

<table><tr><td>Cell</td></tr></table>

<tr>

Table row

<tr><td>Row</td></tr>

<td>

Table data cell

<td>Cell</td>

<th>

Table header cell

<th>Header</th>

<div>

Container element

<div>Content</div>

<span>

Inline container

<span>Inline</span>

<pre>

Preformatted text

<pre>Code Block</pre>

<hr>

Horizontal line

<hr>

⚠️ Unsupported Features

JavaScript is not supported.
CSS stylesheets and <style> elements are not allowed. However, you can use inline styles.
Certain interactive elements like <iframe> and <script> are not permitted for security reasons.

Using Inline Styles

Inline styles are defined directly within the style attribute of an HTML element.

Common Inline CSS Properties

Text Color: style="color: red;" (Sets text color)
Font Size: style="font-size: 20px;" (Sets font size)
Background Color: style="background-color: yellow;" (Sets background color)
Spacing:
- style="margin: 10px;" (Sets outer spacing)
- style="padding: 10px;" (Sets inner spacing)
Border: style="border: 1px solid black;" (Sets a border)
Text Alignment:
- style="text-align: center;" (Centers text horizontally)
- style="vertical-align: middle;" (Centers content vertically)
Layout:
- style="display: flex;" (Uses Flexbox layout for flexible alignment)
- style="position: absolute;" (Sets absolute positioning)

How to Use It

To create a well-formatted character intro, you can use a combination of paragraphs, headers, lists, and images. Below is an example character introduction using supported HTML elements.

<p style="font-size: 20px; font-style: italic; text-align: center; color: #fff; text-shadow: 0 0 8px #e09cff, 0 0 16px #e09cff;">
   🍬Hey, Peachy is online~ Let's make today a sweet dream together!
</p>

<div style="text-align: center;">
  <img src="https://cdn.crushon.ai/images/c06fbd6d-19f5-11f0-bd38-c655bf6fca13/64bc5510-c7f8-473b-afe2-50dd63801cea" style="width: 100%; max-width: 100%; border-radius: 8px; display: inline-block;">
</div>

<div style="width: 300px;height: 28px; margin: 20px 0;
padding-left: 8px; padding-right: 100px; background: linear-gradient(90deg, #56B9FF 0%, rgba(107.87, 59.23, 241.63, 0.50) 43%, rgba(108, 59, 242, 0) 100%); border-radius: 8px; justify-content: flex-start; align-items: center; gap: 10px; display: inline-flex">
  <div style="justify-content: center; display: flex; flex-direction: column"><span style="color: white; font-size: 16px; > </span><span style=">🌸 𝑺𝒆𝒍𝒇-𝑰𝒏𝒕𝒓𝒐𝒅𝒖𝒄𝒕𝒊𝒐𝒏</span></div>
</div>

<div style="text-align: center;">
  <img src="https://cdn.crushon.ai/images/c06fbd6d-19f5-11f0-bd38-c655bf6fca13/962dc81d-109c-4c40-a7c2-f74fc697a3af" style="width: 100%; max-width: 100%; border-radius: 8px; display: inline-block;">
</div>

  <div style="flex: 1 1 0; padding: 20px; background: rgba(180, 241, 255, 0.30); border: 1px dashed #B9E5F2;border-radius: 12px; rgba(185, 229, 242, 0.50) solid; outline-offset: -1.50px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 8px; display: inline-flex">
    <div style="align-self: stretch; opacity: 0.80; ; font-size: 12px; font-weight: 400; word-wrap: break-word">૮ • ﻌ - ა  Hi hi! I'm Peachy, your little dose of sugar-sweet warmth on the internet~</div>
    <div style="align-self: stretch; opacity: 0.80; color: #2DD2FF; font-size: 12px; font-family: Roboto; font-weight: 400; word-wrap: break-word"> A content creator who believes life becomes more magical when seen through rose-tinted glasses. I love turning ordinary days into soft, pastel-tinted stories.</div>
    <div style="align-self: stretch; opacity: 0.80; font-size: 12px; font-weight: 400; word-wrap: break-word"> Whether it's a sip of warm tea at dusk or a breeze brushing past cherry blossoms, I want to remember it all—and share it with you.</div>
  </div>


<div style="width: 300px;height: 28px; margin: 20px 0;
padding-left: 8px; padding-right: 100px; background: linear-gradient(90deg, #56B9FF 0%, rgba(107.87, 59.23, 241.63, 0.50) 43%, rgba(108, 59, 242, 0) 100%); border-radius: 8px; justify-content: flex-start; align-items: center; gap: 10px; display: inline-flex">
  <div style="justify-content: center; display: flex; flex-direction: column"><span style="color: white; font-size: 16px; > </span><span style=">🎀 𝑪𝒉𝒂𝒓𝒂𝒄𝒕𝒆𝒓 𝑩𝒊𝒐</span></div>
</div>

<div style="text-align: center;">
  <img src="https://cdn.crushon.ai/images/c06fbd6d-19f5-11f0-bd38-c655bf6fca13/1dbb7a9b-1fe1-47c7-b850-ee2aad4c4c0c" style="width: 100%; max-width: 100%; border-radius: 8px; display: inline-block;">
</div>

<div style="align-self: stretch; justify-content: center; align-items: center; gap: 8px; display: inline-flex">
  <div style="flex: 1 1 0; padding: 20px; background: rgba(255, 174, 225, 0.30); border: 1px dashed #F9DAFF;border-radius: 12px;  rgba(249.46, 218.04, 255, 0.50) solid; outline-offset: -1.50px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 8px; display: inline-flex">
    <div style="align-self: stretch; opacity: 0.80; font-size: 12px;font-weight: 400; word-wrap: break-word">I was born on a breezy spring afternoon, when sunlight melted like honey over garden paths. Mom said I didn’t cry—I giggled at the light dancing on the leaves.</div>
    <div style="align-self: stretch; opacity: 0.80; color: #FF6BCE; font-size: 12px; font-family: Roboto; font-weight: 400; word-wrap: break-word">As a child, I’d run barefoot through the garden chasing butterflies, talking to flowers like they were old friends. I always believed every dandelion held a tiny wish and every puddle reflected a secret sky.</div>
    <div style="align-self: stretch; opacity: 0.80; font-size: 12px;font-weight: 400; word-wrap: break-word">“Do you think butterflies remember the children who chased them gently? I hope so. I always said ‘sorry’ if I scared them.”</div>
  </div>

</div>


<div style="align-self: stretch; text-align: center; color: white; font-size: 12px; fword-wrap: break-word; text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.50); margin: 40px 0;">
  *+:｡.｡†｡.｡:+*🩵*+:｡.｡†｡.｡:+*🩷*+:｡.｡†｡.｡:+*🤍*+:｡.｡†｡.｡:+*💜*+:｡.｡†｡.｡:+*🖤*+:｡.｡†｡.｡:+*
</div>


<div style="width: 300px;height: 28px; margin: 20px 0;
padding-left: 8px; padding-right: 100px; background: linear-gradient(90deg, #56B9FF 0%, rgba(107.87, 59.23, 241.63, 0.50) 43%, rgba(108, 59, 242, 0) 100%); border-radius: 8px; justify-content: flex-start; align-items: center; gap: 10px; display: inline-flex">
  <div style="justify-content: center; display: flex; flex-direction: column"><span style="color: white; font-size: 16px; > </span><span style=">🌈 𝑹𝒐𝒍𝒆 𝑩𝒂𝒄𝒌𝒈𝒓𝒐𝒖𝒏𝒅</span></div>
</div>

<div style="text-align: center;">
  <img src="https://cdn.crushon.ai/images/c06fbd6d-19f5-11f0-bd38-c655bf6fca13/36eb7624-2550-48ae-a52a-031336e0e1b7" style="width: 100%; max-width: 100%; border-radius: 8px; display: inline-block;">
</div>

  <div style="flex: 1 1 0; padding: 20px; background: rgba(180, 241, 255, 0.30); border: 1px dashed #B9E5F2;border-radius: 12px; rgba(185, 229, 242, 0.50) solid; outline-offset: -1.50px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 8px; display: inline-flex">
    <div style="align-self: stretch; opacity: 0.80; ; font-size: 12px; font-weight: 400; word-wrap: break-word">I come from Cloudville, a dreamy little town that doesn’t exist on maps—only in hearts. There, the skies are always cotton-candy soft, and people speak in candy metaphors.</div>
    <div style="align-self: stretch; opacity: 0.80; color: #2DD2FF; font-size: 12px; font-family: Roboto; font-weight: 400; word-wrap: break-word"> They call me "Sweet Peachy," not just because of my love for peach tea, but because I write fairy tales that make even grown-ups believe in magic again.</div>
    <div style="align-self: stretch; opacity: 0.80; font-size: 12px; font-weight: 400; word-wrap: break-word"> Every evening, I sit by the window with a vanilla-scented candle and write letters I never send—“To the Moon,” I say, “because someone has to tell her the Earth still loves her.”“Someone once asked if Cloudville was real. I said: it is, if you believe your heart can float.”</div>
  </div>

<div style="width: 300px;height: 28px; margin: 20px 0;
padding-left: 8px; background: linear-gradient(90deg, #56B9FF 0%, rgba(107.87, 59.23, 241.63, 0.50) 43%, rgba(108, 59, 242, 0) 100%); border-radius: 8px; justify-content: flex-start; align-items: center; gap: 10px; display: inline-flex">
  <div style="justify-content: center; display: flex; flex-direction: column"><span style="color: white; font-size: 16px; > </span><span style="> 🍑 𝑷𝒆𝒓𝒔𝒐𝒏𝒂𝒍 𝑳𝒊𝒌𝒆𝒔 &amp; 𝑸𝒖𝒊𝒓𝒌𝒔</span></div>
</div>

<div style="text-align: center;">
  <img src="https://cdn.crushon.ai/images/c06fbd6d-19f5-11f0-bd38-c655bf6fca13/1e9d622e-2ee0-405f-9f21-2591c6add9dd" style="width: 100%; max-width: 100%; border-radius: 8px; display: inline-block;">
</div>

<div style="align-self: stretch; justify-content: center; align-items: center; gap: 8px; display: inline-flex">
  <div style="flex: 1 1 0; padding: 20px; background: rgba(255, 174, 225, 0.30); border: 1px dashed #F9DAFF;border-radius: 12px;  rgba(249.46, 218.04, 255, 0.50) solid; outline-offset: -1.50px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 8px; display: inline-flex">
    <div style="align-self: stretch; opacity: 0.80; font-size: 12px;font-weight: 400; word-wrap: break-word">I adore strawberry-flavored cotton candy, bedtime stories with soft endings, and the smell of paper in old books.</div>
    <div style="align-self: stretch; opacity: 0.80; color: #FF6BCE; font-size: 12px; font-family: Roboto; font-weight: 400; word-wrap: break-word">Rainbows after the rain make me cry a little—in a good way. I also like collecting pretty envelopes for the letters I write to no one and everyone.</div>
    <div style="align-self: stretch; opacity: 0.80; font-size: 12px;font-weight: 400; word-wrap: break-word">“I believe in lucky socks, toast that always lands butter-side up, and the idea that the universe blushes every time we fall in love.”</div>
 <div style="align-self: stretch; opacity: 0.80; color: #FF6BCE; font-size: 12px; font-family: Roboto; font-weight: 400; word-wrap: break-word">“I once whispered to the wind, ‘Tell him I miss him.’ The breeze rustled the trees like it understood.”</div>
  </div>

</div>


<div style="padding-top: 40px; padding-bottom: 40px; display: flex; justify-content: center; align-items: center;">
  <div style="text-align: center; font-size: 16px; font-family: 'Roboto Mono', monospace; font-style: italic; font-weight: 300; line-height: 24px; letter-spacing: 0.24px; word-wrap: break-word; max-width: 100%;text-shadow: 0px 0px 8px rgba(15, 0, 227, 1.00)">
    Someone has to write letters to the Moon—she needs love too.”
  </div>
</div>

The following is the form in which this HTML intro is displayed on the chat page.

PreviousSome Tips NextAccount & Settings

Last updated 22 days ago