📝 User-Facing Additional Description Guide

The Additional Description field lets you customize the content users see on your character’s introduction page.

When you fill in this field, its content appears in place of the original world and character descriptions. You can choose which information to share or use Markdown and HTML to create an introduction page that matches your character’s atmosphere.

Content entered in Additional Description is not included in the character’s prompt. Any settings you want the AI to remember or use in conversations should go in the world description, character description, or other character settings fields.

This guide applies specifically to a character’s user-facing Additional Description. Chat messages and widgets may support different code and use different rendering rules, so please check their requirements separately.

• Additional Description supports up to 15,000 characters.

• The limit includes more than the text visible on the page. Markdown symbols, HTML tags, styles, image URLs, spaces, and line breaks all count toward the limit.

• Some emoji and special characters may count as multiple characters even when they look like a single character. Check the counter in the input field for the final count.

• If you use AI to write your content, ask it to check everything that will be pasted into the field, not just the written text. When checking with JavaScript, use the string’s length.

We recommend leaving some room for edits and translation. For example, you can aim for around 14,000 characters initially, then add anything else you need.

Q. What if I have too much content for the description?

You can move usage instructions or messages from the creator to Creator Comments, which has a separate limit of 30,000 characters.

If you split HTML between the two fields, make sure each field contains complete, independent HTML. You cannot open a tag in Additional Description and close it in Creator Comments.

Markdown uses simple symbols to create headings, emphasis, lists, and other formatting. It is useful when you want to organize your content clearly without background colors or complex layouts.

Additional Description supports the following Markdown syntax.

You can use one to six # symbols to set the heading level. Add a space after the marker when writing headings, list items, and blockquotes.

In ordinary body text, pressing Enter once creates a line break. Add a blank line to start a new paragraph. Blank lines before and after headings, lists, blockquotes, and dividers also help keep sections clearly separated.

You can write a table like this.

| Item | Details |
| --- | --- |
| Name | Character name |
| Occupation | Character’s occupation |

To display multiple lines of code as written, place three backticks on a separate line before and after the content. This feature displays the code itself; it does not execute the code or apply it as a design.

Copy the example below and adjust it to fit your character. Paste only the content inside the code block into the input field.

Markdown alone offers limited control over background colors, borders, font sizes, and multiple-column layouts. If you need these design details, use HTML.

HTML lets you customize background colors, spacing, borders, image placement, and other details on your introduction page.

However, HTML is processed to keep only permitted tags and attributes before it is displayed. This means that not all code that works on a regular webpage will work here.

When writing HTML directly, use the following tags.

The following tags are not on the allowlist for directly written HTML.

<section>, <article>, <header>, <footer>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<table>, <ul>, <ol>, <li>
<details>, <summary>
<button>, <input>
<svg>, <canvas>

To create layouts that look like headings or tables, use <div> and <span> with inline styles. Collapsible sections built with <details> and <summary> are not supported in Additional Description.

Headings, lists, and tables written in Markdown are processed separately. An element being supported in Markdown does not mean you can use its corresponding HTML tag directly.

Q. Can I add a YouTube video?

YouTube embeds are supported as an exception. Valid <iframe> code using either of the following URL formats is converted into a dedicated video player.

• https://www.youtube.com/embed/VIDEO_ID

• https://www.youtube-nocookie.com/embed/VIDEO_ID

Embedding ordinary webpages with <iframe> is not supported. The original styles and options in a YouTube embed may not be preserved exactly.

To set background colors, spacing, borders, and other design details, write CSS inside each tag’s style attribute. This is called inline styling.

<div style="background:#f5f1eb;color:#302b26;padding:20px;border-radius:12px;">Enter your content here.</div>

Inline styles let you set colors, backgrounds, spacing, borders, rounded corners, shadows, font sizes, line spacing, and more. You can also use Flex or Grid layouts.

Properties such as position, transform, and filter are not categorically prohibited. However, their appearance may vary between browsers and the app, so check the actual result.

The following methods are not supported.

• Defining styles with a <style> tag or an external CSS file

• Methods that require JavaScript execution, such as <script>, onclick, or onmouseover

• Code that requires an additional runtime or external library, such as React, JSX, Tailwind, or Bootstrap

• Methods that require separate CSS rules, such as @media, @font-face, @keyframes, :hover, or ::before

Adding a class name does not automatically apply a design. Do not rely on the platform’s internal classes. Write the styles you need in each tag’s style attribute instead.

Q. Can I use a font of my choice?

You can specify a font with font-family. However, entering a font’s name does not download that font.

Include a default or fallback font so the content remains readable on devices that do not have your chosen font.

Additional Description also goes through Markdown processing. Depending on the indentation and line breaks in your code, the HTML may appear as raw code instead of displaying your design.

Please keep the following points in mind when writing HTML.

• Use one line break between tags. You do not need to put all your code on a single line.

• Do not indent lines with tabs or four or more spaces. Indented code, especially after a blank line, may be treated as a Markdown code block. When using AI, ask it to write the HTML without leading indentation.

• Avoid adding unnecessary blank lines inside HTML. Blank lines do not always cause errors, but they can affect which parts are interpreted as Markdown.

• If the AI provides HTML in a code block, copy only the HTML inside it. To apply the design, do not paste the opening or closing triple backticks or the html label into the input field.

• Do not add a backslash before a tag, as in \<div>, or turn the tag into escaped text, as in <div>. Write actual HTML tags as <div>.

• Make sure quotation marks and tags are properly closed. Use straight quotation marks, " or ', for attribute values.

• Inside HTML, use <strong>Emphasis</strong> rather than Markdown such as **Emphasis**. Markdown inside HTML may appear as plain text instead of being converted.

Line breaks that make your HTML code easier to read are different from line breaks displayed on the page.

Pressing Enter in your HTML source code does not necessarily create a visible line break. Use <br> to break a line on the page, and <p> or <div> to separate paragraphs.

We recommend keeping an opening tag’s attributes and styles on one line, then adding line breaks between tags.

To add an image, put an image URL that other users can access in the src attribute of an <img> tag. We recommend using URLs for images uploaded to Caveduck.

A file path on your own computer, a file:// URL, or a local preview URL cannot be used to display images to other users. Embedding an image directly in your code as a Base64 string greatly increases the character count, so we recommend avoiding it.

Images added through Markdown also need URLs that other users can access.

Check the following points to make your content readable on both desktop and mobile.

• Let the overall width shrink to fit the screen. For example, you can apply width:100%;max-width:640px;box-sizing:border-box; to the outer container. The 640px value is an example, not a required size.

• Using display:block;max-width:100%;height:auto; as a starting point for images can help prevent them from overflowing their container.

• Avoid fixing the height of text areas or hiding overflowing text. Automatic translation can make sentences longer, which may cause content to be cut off.

• If you use multiple columns, make sure the layout can wrap on narrow screens.

• For readability, we recommend 12–14px or larger for body text, and at least 10px for small supporting text. These are recommendations, not mandatory platform limits. Check font sizes and line wrapping in the app as well.

• Keep text that needs translation together in sentences or meaningful phrases, rather than placing it inside images or wrapping each character in a separate tag.

• When using replacement keywords such as {{char}} and {{user}}, keep their spelling and braces unchanged.

Here is a simple example using only supported tags and inline styles. Copy only the HTML inside the code block into the input field.

<div style="width:100%;max-width:640px;margin:0 auto;padding:20px;box-sizing:border-box;background:#f5f1eb;color:#302b26;font-size:14px;line-height:1.8;">
<p style="margin:0 0 12px;font-size:20px;font-weight:700;">Character Name</p>
<p style="margin:0 0 16px;">Write a sentence introducing your character here.<br>Add any other content you want to display.</p>
<div style="padding:14px;border:1px solid #d7cfc4;border-radius:10px;">
<p style="margin:0;"><strong>Basic Information</strong><br>Enter details you want to share, such as age and occupation.</p>
</div>
</div>

An HTML file opened in a regular browser may look different when used on Caveduck. Once you have finished, check the preview in the character editor, then view the saved introduction on both desktop and mobile.

When asking AI to create your introduction, first specify whether you want Markdown or HTML.

Ask for Markdown if you want to organize your content with simple headings and lists. Ask for HTML if you want more detailed styling, such as background colors and borders.

Providing the character’s atmosphere, your preferred colors, the content you want to share, and image URLs will also help it create an introduction that matches your vision.

Use the following requirements alongside your design instructions when asking AI to create HTML.

Please create HTML for the user-facing Additional Description field of a Caveduck character.

• Keep the entire final HTML code within 15,000 characters, measured using JavaScript string length, and leave room for edits. Include tags, styles, image URLs, spaces, and line breaks in the count.

• The only supported HTML tags are div, p, span, b, strong, i, em, br, hr, img, and a.

• Write all styles inside each tag’s style attribute.

• Do not use a full HTML document structure, <style> or <script> tags, external CSS or font loading, JavaScript, React, JSX, or custom CSS classes.

• Do not use features that require separate CSS rules, such as @media, @font-face, @keyframes, :hover, or ::before.

• Do not use tags outside the allowlist, such as <table>, <details>, <summary>, or <svg>.

• Keep each opening tag’s attributes and styles on one line, and insert one actual line break between tags. Do not add unnecessary blank lines or leading indentation.

• Do not mix Markdown into the HTML. Use <br> for line breaks that should appear on the page.

• Make sure the layout does not overflow mobile screens and that text is not cut off when translation makes it longer.

• As a default, use 12–14px or larger for body text and at least 10px for small supporting text.

• Keep translatable text together in sentences or meaningful phrases. Do not wrap each character in a separate tag.

• Use only the image URLs I provide, and do not modify the {{char}} or {{user}} keywords.

• Output only the finished HTML so it can be pasted directly into the field. Do not include backtick code fences or explanatory text.