If you encounter issues while using the widget, refer to the guide below.

Widget Not Displaying

1. Verify Script URL

Make sure the script src path is correct.

<!-- Correct URL -->
<script src="https://inspireme.advenoh.pe.kr/widget/embed.js"></script>

2. CSP (Content Security Policy)

If your website has a CSP policy configured, you need to allow the InspireMe domain.

Content-Security-Policy:
  script-src 'self' https://inspireme.advenoh.pe.kr;
  connect-src 'self' https://inspireme.advenoh.pe.kr;
  style-src 'self' 'unsafe-inline';

3. Check JavaScript Errors

Open your browser's Developer Tools (F12) and check the Console tab for error messages.

4. HTTPS Required

The widget script is served over HTTPS only. On HTTP sites, mixed content warnings may occur.

Broken Styles

Shadow DOM Not Supported

In very old browsers that don't support Shadow DOM, widget styles may conflict with the host page. In this case, use the iframe method instead.

Widget Size Issues

If the widget appears too large or small, adjust the data-width and data-max-width attributes.

<script
  src="https://inspireme.advenoh.pe.kr/widget/embed.js"
  data-type="quote-of-the-day"
  data-width="100%"
  data-max-width="400px"
></script>

Web Component Issues

Custom Tag Not Recognized

If the <inspireme-quote> tag doesn't work, check the script loading order. The script must load before the tag.

<!-- Correct order: script first -->
<script src="https://inspireme.advenoh.pe.kr/widget/inspireme-quote.js"></script>
<inspireme-quote type="quote-of-the-day"></inspireme-quote>

Alternatively, when using defer, the component auto-registers after DOMContentLoaded.

Framework Usage Notes

React: Using Web Components in JSX may trigger type warnings. Add a declare statement.

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'inspireme-quote': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
        type?: string; lang?: string; theme?: string;
      };
    }
  }
}

Vue / Angular: Works out of the box with no additional configuration.

Rate Limiting

The widget API has a limit of 60 requests per minute per IP. This is not an issue for normal usage, and caching is automatically applied for high-traffic sites.

Platform-Specific Guides

WordPress

Paste the widget code in the Theme Editor or a Custom HTML block.

Blogger

Use the HTML/JavaScript gadget in Layout settings to add the widget code.

Notion

Notion does not support external script execution. Use the iframe method with a /embed block.

Additional Support

If your issue persists, please reach out via GitHub Issues.