Hardcover Widget Demo

See the source code of this page at github.com/gouthamve/hardcover-book-embed.

This page demonstrates various ways to embed the Hardcover currently reading widget.

Configuration

Note: Enter a Hardcover username above and click "Update All Widgets" to see their books.
Add a script tag to load the widget script: 
<script src="https://hardcoverembed.gouthamve.dev/static/widget.js"></script>

1. Default Widget

Simple embed with default settings:

<div data-hardcover-widget data-api-url="${apiUrl}" data-username="your-username"></div>

2. Customized Size

Widget with custom width and column settings:

<div data-hardcover-widget 
     data-api-url="${apiUrl}"
     data-username="your-username"
     data-max-width="500px"
     data-min-column-width="100px"
     data-gap="0.5rem"></div>

3. Sidebar Style

Compact widget suitable for sidebars:

Currently Reading

4. Fixed Columns

Widget with exactly 4 columns:

<div data-hardcover-widget 
     data-api-url="${apiUrl}"
     data-username="your-username"
     data-columns="4"></div>

5. Without "Powered by" Link

Hide the attribution link:

<div data-hardcover-widget 
     data-api-url="${apiUrl}"
     data-username="your-username"
     data-show-powered-by="false"></div>

6. Custom Styled

Widget with custom CSS styling:

7. JavaScript API

Programmatically initialized widget:

const widget = new HardcoverWidget(
    document.getElementById('js-widget'),
    {
        apiUrl: '${apiUrl}',
        username: 'gouthamve',
        maxWidth: '400px',
        showPoweredBy: true
    }
);

8. Iframe Method

Completely isolated iframe embed:

<iframe src="${apiUrl}/static/embed.html?username=your-username" 
        width="100%" height="300" frameborder="0"></iframe>

9. Last Read Books

Display recently finished books:

<div data-hardcover-widget 
     data-api-url="${apiUrl}"
     data-username="your-username"
     data-book-type="last-read"></div>

10. Both Currently Reading and Last Read

Show both types of books for the same user:

Currently Reading

Recently Finished