埋め込みウィジェットを設置する

埋め込みウィジェットを使うと、YuCon で更新している混雑状況を自社ホームページにそのまま表示できます。設置は生成されたコード 2 行を貼り付けるだけで、表示は約 60 秒ごとに自動で最新の状態に更新されます。

実際に動いているウィジェットはライブデモで確認できます。

埋め込みコードを取得する

埋め込みコードは管理画面の「埋め込みコード」ページが生成します。手書きする必要はありません。入口は 2 か所あり、どちらも同じページが開きます。

ページでは次の順に選ぶだけです。

「表示する施設」で掲載したい施設にチェックを入れます(1 つ以上)
表示モードは選択数から自動で決まります — 1 施設なら単一表示、複数選択でリスト表示です
テーマとオプションを選びます(下記)
プレビューで見た目を確認し、「コピー」を押してホームページの表示したい位置に貼り付けます。<div> と <script> の 2 行が 1 セットです

オプション	内容
テーマ	☀️ Light(白基調)/ 🌙 Dark(黒基調)/ 🌓 Auto。Auto は埋め込み先サイトのテーマ設定や閲覧者の OS のダークモードに自動で追従し、サイト側でテーマを切り替えるとウィジェットもその場で切り替わります
混雑予測	当日の時間帯別の混雑予測グラフを表示します(単一施設のみ)
週間傾向	曜日 × 時間帯のヒートマップを表示します(単一施設のみ)
YuCon クレジットを非表示	ウィジェット下部の「混雑情報 by YuCon」表記を非表示にします

自動更新: 約 60 秒ごとに最新の混雑状況を取得します。閲覧者がページを開いたままでも表示が古くなりません
高さの自動調整: 表示内容に合わせてウィジェットの高さが自動で調整されます
営業時間外・休業日: 混雑度の代わりに「営業終了」「定休日」「臨時休業」などの案内が表示されます。営業スケジュールの設定がそのまま反映されます
サブ設備: 男湯/女湯・サウナなどのサブ設備がある施設では、単一施設表示に一覧が表示されます。混雑予測を表示している場合は、サブ設備をタップ(クリック)すると予測グラフの対象が切り替わります

ホームページに Content-Security-Policy(CSP)を設定している場合は、次の 2 つの許可を追加してください。ウィジェットはインラインスクリプトを使わないため、'unsafe-inline' の許可は不要です。

script-src  https://cdn.yucon.info
connect-src https://public.yucon.info

CSP を設定していないサイトでは、この作業は不要です。

状況	対処
ウィジェットが表示されない	`<div>` と `<script>` の 2 行が両方貼られているか確認してください。コードを一部だけコピーすると表示されません
「Loading…」のまま止まる	サイトに CSP を設定している場合は、上記の許可(script-src / connect-src)が追加されているか確認してください。nonce 方式のサイトでは `<script>` タグに nonce 属性が付いているかも確認してください
サイトのテーマを切り替えてもウィジェットが変わらない	テーマが Light または Dark に固定されています。追従させたい場合は「🌓 Auto」でコードを生成し直して貼り替えてください
掲載する施設を変えたい	管理画面でオプションを選び直し、新しいコードをコピーして貼り替えてください。貼ってあるコードの書き換えでも構いません