Embed it on your own site

내 사이트에 끼워 넣기

Put a "Take the tour" button on your own page.

내 사이트에 '둘러보기' 버튼 달기.

manuscript-bridge.0.1.3.js is a small, dependency-free file (about 14 KB) you drop onto your page. From there, your "Take the tour" button can load a saved tour and ask Manuscript to play it — the spotlights, notes, and narration take care of themselves. By default playback is read-only and cleans up after itself once the tour ends.

manuscript-bridge.0.1.3.js 는 의존성 없는 약 14 KB 짜리 작은 파일입니다. 내 페이지에 넣어두기만 하면, "둘러보기" 같은 버튼으로 저장해 둔 시연을 불러와 Manuscript 에 재생을 부탁할 수 있어요. 강조 표시·메모·음성 안내는 알아서 처리됩니다. 기본 재생은 보기 전용이며 시연이 끝나면 흔적 없이 깔끔하게 정리됩니다.

Most common pattern. You author the button (any styling you want) and wire it to the bridge. When the extension is missing, send the visitor to the Web Store with openStore(); optionally to your own product page with openHomepage().

가장 자주 쓰는 패턴. 버튼은 직접 만들고(원하는 디자인 그대로) 브리지에 연결만 합니다. 확장이 없으면 openStore() 로 웹 스토어로 보내고, 옵션으로 openHomepage() 로 본인 제품 페이지로도 안내할 수 있어요.

<!-- in your page -->
<script src="/manuscript-bridge.0.1.3.js"></script>
<button id="start">Take the tour</button>

<script>
  // Opt in to the homepage fallback — without this, openHomepage() warns and no-ops.
  manuscript.configure({
    homepageUrl: 'https://zendy00.github.io/manuscript-pages/',
    banner: false,  // suppress the bridge's built-in install prompt — we handle it below
  });

  const btn = document.getElementById('start');

  btn.addEventListener('click', async () => {
    if (!(await manuscript.isInstalled())) {
      manuscript.openStore();         // or: manuscript.openHomepage()
      return;
    }
    btn.hidden = true;
    const scenario = await fetch('/tours/tour-en.json').then(r => r.json());
    await manuscript.load(scenario);
    await manuscript.play({ standalone: true });
  });

  manuscript.onExit(() => { btn.hidden = false; });
</script>

<!-- 호스트 페이지 안에 둡니다 -->
<script src="/manuscript-bridge.0.1.3.js"></script>
<button id="start">투어 시작</button>

<script>
  // 홈페이지 fallback 은 opt-in — 호출하지 않으면 openHomepage() 는 경고만 출력하고 no-op.
  manuscript.configure({
    homepageUrl: 'https://zendy00.github.io/manuscript-pages/',
    banner: false,  // 기본 설치 안내 끄기 — 아래에서 직접 처리
  });

  const btn = document.getElementById('start');

  btn.addEventListener('click', async () => {
    if (!(await manuscript.isInstalled())) {
      manuscript.openStore();         // 또는: manuscript.openHomepage()
      return;
    }
    btn.hidden = true;
    const scenario = await fetch('/tours/tour-ko.json').then(r => r.json());
    await manuscript.load(scenario);
    await manuscript.play({ standalone: true });
  });

  manuscript.onExit(() => { btn.hidden = false; });
</script>

Zero-DOM-touch path. mountLauncher() attaches a Shadow-DOM-isolated pill to the bottom-right of your page. When the extension is installed it reads "Take the tour" and runs the configured scenario on click; when it's missing the same pill morphs into "Install Manuscript" (plus an optional "Learn more" link if you set homepageUrl). A small ✕ on the install prompt persists dismissal to localStorage.

DOM 안 건드리는 경로. mountLauncher() 가 Shadow DOM 격리된 pill 을 페이지 우하단에 띄웁니다. 확장이 설치돼 있으면 "투어 시작" 으로, 미설치면 같은 자리에 "Manuscript 설치" 가 뜨고 homepageUrl 을 지정해 두면 "자세히 보기" 링크도 함께 나옵니다. 안내의 ✕ 닫기 버튼은 localStorage 에 기억되어 같은 사이트에서 다시 뜨지 않아요.

<!-- in your page -->
<script src="/manuscript-bridge.0.1.3.js"></script>
<script>
  manuscript.configure({
    homepageUrl: 'https://zendy00.github.io/manuscript-pages/',  // optional "Learn more"
    lang: 'auto',           // 'auto' (default) / 'en' / 'ko'
  });

  manuscript.mountLauncher({
    scenarioUrl: '/tours/tour-en.json',  // or scenario: {...}
    label: 'Take the tour',             // optional override
  });
</script>

<!-- 호스트 페이지 안에 둡니다 -->
<script src="/manuscript-bridge.0.1.3.js"></script>
<script>
  manuscript.configure({
    homepageUrl: 'https://zendy00.github.io/manuscript-pages/',  // 옵션: "자세히 보기"
    lang: 'auto',           // 'auto'(기본) / 'en' / 'ko'
  });

  manuscript.mountLauncher({
    scenarioUrl: '/tours/tour-ko.json',  // 또는 scenario: {...}
    label: '투어 시작',                  // 옵션: 라벨 직접 지정
  });
</script>

// ── Discovery
manuscript.isInstalled()                    // → Promise<boolean> (cached per page)
manuscript.refreshInstalled()               // re-ping, bust the cache

// ── Lifecycle
manuscript.load(scenario)                   // object or JSON string
manuscript.play({ startIndex, paused, standalone })
manuscript.pause() / manuscript.next() / manuscript.prev()
manuscript.jump(index)
manuscript.exit()

// ── Navigation (new in 0.1.3) — works with or without a launcher
manuscript.openStore()                      // opens the extension store in a new tab
manuscript.openHomepage()                   // opens configured homepageUrl, or warns + no-ops

// ── Auto-mounted launcher (new in 0.1.3)
manuscript.mountLauncher({ scenarioUrl, scenario, label, standalone })
manuscript.unmountLauncher()

// ── Configure
manuscript.configure({
  banner: true,                         // show install prompt on missing extension
  timeoutMs: 1500,
  lang: 'auto',                          // 'auto' | 'en' | 'ko'
  storeUrl: 'https://chromewebstore.google.com/...',
  homepageUrl: 'https://example.com',     // opt-in extra link
  onInstallClick: () => analytics.track('mn:install'),
  onHomeClick:    () => analytics.track('mn:learn-more'),
})

// ── Replay-end — fires on ✕ or natural end of tour
const off = manuscript.onExit(() => { /* restore your UI */ });
// off()  ← call to unregister
// or:    window.addEventListener('manuscript:exited', handler)

// ── 발견
manuscript.isInstalled()                    // → Promise<boolean> (페이지 내 캐시)
manuscript.refreshInstalled()               // 캐시 초기화 후 재핑

// ── 라이프사이클
manuscript.load(scenario)                   // 객체 또는 JSON 문자열
manuscript.play({ startIndex, paused, standalone })
manuscript.pause() / manuscript.next() / manuscript.prev()
manuscript.jump(index)
manuscript.exit()

// ── 이동 API (0.1.3 신규) — 런처 유무와 무관하게 호출 가능
manuscript.openStore()                      // 새 탭에서 확장 스토어 열기
manuscript.openHomepage()                   // homepageUrl 열기 (미설정 시 경고 + no-op)

// ── 자동 마운트 런처 (0.1.3 신규)
manuscript.mountLauncher({ scenarioUrl, scenario, label, standalone })
manuscript.unmountLauncher()

// ── 설정
manuscript.configure({
  banner: true,                         // 확장 미설치 시 설치 안내 자동 표시
  timeoutMs: 1500,
  lang: 'auto',                          // 'auto' | 'en' | 'ko'
  storeUrl: 'https://chromewebstore.google.com/...',
  homepageUrl: 'https://example.com',     // opt-in 추가 링크
  onInstallClick: () => analytics.track('mn:install'),
  onHomeClick:    () => analytics.track('mn:learn-more'),
})

// ── 재생 종료 — ✕ 클릭 또는 마지막 step 완료 시
const off = manuscript.onExit(() => { /* 사용자 UI 복원 */ });
// off()  ← 호출해서 등록 해제
// 또는:  window.addEventListener('manuscript:exited', handler)