Widget Integration Guide

Ting Reader provides a powerful external player component (Widget) that allows you to seamlessly integrate audiobook playback into personal blogs, Notion, Obsidian, or any webpage that supports HTML/iframe.

1. Basic Integration

Get the embed code

Go to the “Personalization Settings” -> “Widget” page of Ting Reader, where you can choose between two modes:

Private mode (no login): The URL contains your access Token.
- Use cases: Personal dashboards, private Notion pages.
- Note: Do not leak this code on public webpages, otherwise others can use your account to play.
Public mode (login required): The URL does not contain a Token.
- Use cases: Public blogs, website sidebars.
- Behavior: Visitors need to enter their account and password to log in on first visit.

2. Layout Modes

For easy integration, we provide pre-wrapped HTML code. You can copy and paste it directly into your website’s HTML.

2.1 Standard embed (document flow)

The default method: the Widget is inserted at a specified position in an article or page just like an image.

<iframe 
  src="http://your-ting-reader.com/widget?token=YOUR_TOKEN" 
  width="100%" 
  height="150" 
  frameborder="0" 
  allow="autoplay; fullscreen">
</iframe>

2.2 Fixed bottom

Like the NetEase Cloud Music web version, it is fixed at the bottom of the screen and does not scroll with the page.

<div style="position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9999;">
  <iframe 
    src="http://your-ting-reader.com/widget?token=YOUR_TOKEN" 
    width="100%" 
    height="150" 
    frameborder="0" 
    allow="autoplay; fullscreen">
  </iframe>
</div>

2.3 Floating bottom-right

Floats in the bottom-right corner of the screen like a chat window. When the screen is narrow, the Widget automatically switches to a vertical compact layout.

<div style="position: fixed; bottom: 20px; right: 20px; width: 350px; height: 150px; z-index: 9999; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.15);">
  <iframe 
    src="http://your-ting-reader.com/widget?token=YOUR_TOKEN" 
    width="100%" 
    height="100%" 
    frameborder="0" 
    allow="autoplay; fullscreen">
  </iframe>
</div>

Note: Please replace http://your-ting-reader.com in the code with your actual deployment address, and YOUR_TOKEN with your real Token (if you are using private mode). It is recommended to copy the generated code directly from the settings page.

3. Custom CSS Injection

If you want to modify the styles inside the Widget (for example, removing the white background or changing the font color), please use the “Personalization Settings” -> “Custom CSS Injection” feature.

Important note: This CSS only affects the inside of the Widget and cannot control the position of the Widget in the webpage (the position is controlled by the HTML code above).

Fully transparent background

Best used with floating mode, floating directly on the webpage background.

/* 移除背景色、边框和阴影 */
.widget-mode, 
.widget-mode > div, 
.widget-mode .bg-white\/95, 
.widget-mode .dark\:bg-slate-900\/95 {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
}

Minimalist mode

Hides the “Back to list” button in the upper-left corner, only allowing playback of the current album.

/* 隐藏左上角的返回箭头 */
.widget-mode > button.absolute {
    display: none !important;
}

Custom font style

Modify the title color to match your blog theme.

/* 标题改为品牌色 */
.widget-mode h4 {
    color: #ff4757 !important; 
    font-family: 'Georgia', serif !important;
}

Right-angle style

Remove all rounded corners for a hard-edged style.

.widget-mode * {
    border-radius: 0 !important;
}

← PreviousPWA Install Next →Webhook