属性リファレンス

スクリプトタグ

• src必須

  https://widget.pitakun.com/v1/pitakun.js

  バージョンつき：中身は変わりません（変えるときは v2 として別のURLで出します）。

• data-model必須

  機種ID（探し方）。英数字・-・_。

  見つからない機種IDのときは何も表示せず、確保した高さも戻します。

• data-lang任意

  表示言語：ja en zh ko vi my。

  省略時はページの <html lang>。どれにも当たらなければ日本語。対応言語

• integrity · crossorigin="anonymous"推奨

  SRI：ファイルが1バイトでも違えばブラウザが実行しません。値と使い方

• async推奨

  ページの表示を待たせません。

表示枠

• <div data-pitakun-slot style="min-height:344px">推奨

  スクリプトの直前に置くと、この中に表示します。高さを先に確保するので、読み込み中にページがずれません。

  ないときは、スクリプトの直後に枠を作ります（スクリプトが動いた時点で高さを確保）。

イベント

表示が終わると、スクリプトタグに pitakun:ready（detail.model = 機種ID）が届きます。

document.querySelector('script[data-model]')
  .addEventListener('pitakun:ready', function (e) {
    console.log(e.detail.model);
  });

お店のCSPでインラインスクリプトを禁止している場合は、自分の .js ファイルに書いてください。

そのほか

• 1ページに複数置けます（タグごとに1つ）。
• <head> の中では表示しません。<body> の表示したい場所に。
• 中身は Shadow DOM：お店のCSSの影響を受けず、お店のCSSも変えません。外側の余白は .pitakun-widget に。