InspireMe - 명언 서비스

InspireMe 명언 위젯을 사용하면 외부 웹사이트에 명언을 간편하게 삽입할 수 있습니다. 블로그, 포트폴리오, 사내 페이지 등 어디서든 코드 한 줄로 명언을 표시하세요.

위젯 유형

위젯	설명
오늘의 명언	매일 자동으로 바뀌는 명언 1개를 표시합니다
랜덤 명언	페이지 로드 시 랜덤 명언을 표시합니다
슬라이더	여러 명언을 자동 슬라이드로 표시합니다

임베딩 방식

InspireMe 위젯은 두 가지 방식으로 제공됩니다.

항목	Script Tag	Web Component
대상	모든 웹사이트 (HTML만 있으면 가능)	모든 웹사이트 + 모든 프레임워크
설치	코드 복사·붙여넣기	`<script>` 1줄
다중 위젯	추가 처리 필요	태그 여러 개 배치
스타일 격리	Shadow DOM (수동)	Shadow DOM (내장)
동적 업데이트	없음	속성 변경 시 자동 반영
권장 용도	간단 삽입 (위젯 1개)	프레임워크 프로젝트, 다중 위젯

빠른 시작

1단계: 위젯 코드 생성

위젯 페이지에서 원하는 위젯 유형과 옵션을 선택하면 embed 코드가 자동 생성됩니다. Script Tag 또는 Web Component 탭을 선택하여 원하는 형식의 코드를 복사하세요.

2단계: 코드 삽입

Script Tag 방식

HTML에 아래 코드를 붙여넣으세요.

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

Web Component 방식

스크립트를 1회 로드한 후 <inspireme-quote> 태그를 사용하세요.

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

<inspireme-quote
  type="quote-of-the-day"
  lang="ko"
  theme="light"
></inspireme-quote>

같은 페이지에 여러 위젯을 배치할 수 있습니다.

<inspireme-quote type="quote-of-the-day" lang="ko"></inspireme-quote>
<inspireme-quote type="random" lang="en" theme="dark"></inspireme-quote>

React, Vue, Angular 등 프레임워크에서도 동일하게 사용 가능합니다.

3단계: 완료

코드를 삽입하면 위젯이 자동으로 명언을 불러와 표시합니다. 별도의 API Key나 인증 설정이 필요하지 않습니다.

지원 환경

모든 최신 브라우저 (Chrome, Firefox, Safari, Edge)
모바일 브라우저
WordPress, Tistory, Blogger 등 HTML 삽입을 지원하는 플랫폼
React, Vue, Angular 등 모든 프레임워크 (Web Component 방식)

위젯 시작하기