Customize the appearance and behavior of your widget using data-* attributes (Script Tag) or HTML attributes (Web Component).

Configuration Options

Option	Data Attribute	Values	Default	Description
Widget type	data-type	quote-of-the-day, random	— (required)	Widget type to display
Language	data-lang	ko, en	ko	Quote language
Theme	data-theme	light, dark	light	Widget theme
Width	data-width	CSS value	100%	Widget width
Max width	data-max-width	CSS value	500px	Widget max width
Show author	data-show-author	true, false	true	Show author name
Show topics	data-show-topics	true, false	false	Show topic tags
Refresh button	data-show-refresh	true, false	false	Refresh button (random only)
Branding	data-show-branding	true, false	true	Show "Powered by InspireMe"
Border radius	data-border-radius	CSS value	12px	Widget corner radius
Accent color	data-accent-color	CSS color	Theme default	Accent color

Examples

Basic (Quote of the Day, Korean, Light theme)

<div id="inspireme-widget"></div>
<script
  src="https://inspireme.advenoh.pe.kr/widget/embed.js"
  data-type="quote-of-the-day"
></script>

Dark Theme + English

<div id="inspireme-widget"></div>
<script
  src="https://inspireme.advenoh.pe.kr/widget/embed.js"
  data-type="quote-of-the-day"
  data-lang="en"
  data-theme="dark"
></script>

Random Quote + Refresh Button

<div id="inspireme-widget"></div>
<script
  src="https://inspireme.advenoh.pe.kr/widget/embed.js"
  data-type="random"
  data-lang="en"
  data-show-refresh="true"
></script>

Custom Styling

<div id="inspireme-widget"></div>
<script
  src="https://inspireme.advenoh.pe.kr/widget/embed.js"
  data-type="quote-of-the-day"
  data-theme="dark"
  data-max-width="600px"
  data-border-radius="0"
  data-accent-color="#ff6b6b"
  data-show-topics="true"
></script>

Web Component

With the <inspireme-quote> Web Component, pass the same options as HTML attributes using kebab-case.

<script src="https://inspireme.advenoh.pe.kr/widget/inspireme-quote.js"></script>

<!-- Dark theme + English + show topics -->
<inspireme-quote
  type="quote-of-the-day"
  lang="en"
  theme="dark"
  show-author="true"
  show-topics="true"
></inspireme-quote>

<!-- Slider + custom styling -->
<inspireme-quote
  type="slider"
  lang="en"
  theme="auto"
  slide-count="5"
  slide-interval="8"
  accent-color="#ff6b6b"
></inspireme-quote>

Web Component Events:

Event	Description
quote-loaded	Fired when a quote loads (event.detail contains quote data)
quote-error	Fired on error (event.detail contains error info)

const widget = document.querySelector('inspireme-quote');
widget.addEventListener('quote-loaded', (e) => {
  console.log(e.detail); // { content: "...", author: "..." }
});

Dynamic Attribute Changes:

The Web Component automatically updates the widget when attributes change.

const widget = document.querySelector('inspireme-quote');
widget.setAttribute('theme', 'dark');  // Instantly switches to dark theme
widget.setAttribute('lang', 'en');     // Changes to English quotes

Theme Preview

Light Theme

Displayed with a white background (#ffffff) and dark text. Best suited for sites with light-colored backgrounds.

Dark Theme

Displayed with a dark background (#1a1a2e) and light text. Best suited for dark mode sites or dark backgrounds.