Step 1: Create the Detailed Book Page (Crucial Prerequisite)

Before you create the widget, you need a page that links to it!

1. Look to the left menu of your screen and click on the "Pages" link.

2. Create a New Page for your book (e.g., "The Dragon's Eye").

3. Fill this page with your full book description, purchase links, and any other details.

4. Save the Page and copy the URL (web address) from your browser's address bar. This is the link you will use in the widget.

Step 2: Add the Widget

1. Go to your Profile Page.

2. Add a Custom HTML Widget: Drag a new "Custom HTML" widget to the top of the main content column on your profile page.

3. The widget configuration box will open.

Step 3: Copy and Paste the Code

Crucial: Copy ALL of the code below and paste it into the large content box of the Custom HTML Widget.

<div style="border: 1px solid #0056b3; padding: 15px; margin: 15px 0; background-color: #f0f8ff; border-radius: 5px;">
   <h3 style="margin-top: 0; color: #0056b3; border-bottom: 2px solid #0056b3; padding-bottom: 5px;">
       CURRENT WORK: [BOOK TITLE HERE]
   </h3>
   
   <div style="display: flex; gap: 15px; align-items: flex-start;">
       
       [IMAGE] 
       <div style="flex-grow: 1;">
           <p style="margin-top: 0; line-height: 1.5; text-align: justify;">
               **[Change this]** This is where you place your book's description. The Dragon's Eye is a gripping epic fantasy about a young sorceress who discovers she is the only one who can unlock a powerful relic.
           </p>
           <p>
               <a href="[PASTE THE URL OF YOUR BOOK'S PAGE HERE]" style="color: #1e7e34; text-decoration: none; font-weight: bold;">
                   View Book Page &rarr;
               </a>
           </p>
       </div>
   </div>
</div>

Step 4: Insert Your Cover Image

1. Delete the placeholder: Inside the editor, delete the entire line that says [IMAGE].

2. Upload Your Image: Use the text editor's image upload tool (drag-and-drop or button) to place your book cover image exactly where the [IMAGE] line was.

3. Adjust Image Size: Click on the inserted image and resize it to a width of 150 pixels for a clean, professional look.

Step 5: Customize the Placeholders

You must change the information in the three areas below:

Step 6: Save and Repeat

1. Click the "Save" button on the widget configuration.

2. If you have more works, add a new Custom HTML Widget for each one and repeat Steps 2 through 5.

The "Free HTML" widget gives you the power to add custom content to your profile, but all code must meet security requirements.

The system is designed to automatically remove any code that could harm the network or other users.

| Category | Examples of Allowed Code | Examples of Prohibited Code | | :--- | :--- | :--- | | Basic Text | Standard HTML formatting tags: <p>, <h1> to <h6>, <b>, <i>, <ul>, <ol>, <li>, <span> | Any code that attempts to change the site layout outside of your widget area. | | Embeds | Safe Embeds: YouTube, Goodreads, Amazon, or other recognized, trusted services. | Security Risks: Any Javascript code (<script>...), external stylesheets (<link rel="stylesheet"...>), or code that attempts to track other users. | | Images | Standard Image tags: <img src="..." alt="..."> | Hidden images or malicious tracking pixels. |

If you paste code and it disappears or doesn't work, it was likely stripped out for security reasons. Only use code from trusted sources. Repeated attempts to insert prohibited code may result in account suspension.