テンプレートの追加

注：カスタムテンプレートは有料プランの機能です。

「テンプレート」画面では、カスタムテンプレートのダウンロード、プレビュー、更新を行うことができます。

ロゴの変更

「ロゴのアップロード」パネルを使用して、ロゴをアップロードできます。このロゴは、すべての標準テンプレートで使用されます。ロゴのアップロードボックスでは、PNG、GIF、JPEG形式に対応しています。ロゴは実寸のままテンプレートに挿入されるため、アップロードする前に、待合室のレイアウトに合わせてロゴをトリミングしたり、サイズを変更したりしてください。高さと幅はそれぞれ300ピクセル程度にすることをお勧めします。

テンプレートのプレビュー

プレビューアイコンをクリックすると、テンプレートが実際にどのように表示されるかを確認できます。また、「待機中」や「販売前」など、待合室のさまざまな状態をシミュレートするためのボタンも用意されています。

テンプレートをダウンロードする

標準テンプレートをダウンロードしてその構成を確認したり、GitHubのパスワードを忘れてしまった場合に備えて、独自のカスタムテンプレートをダウンロードしたりすることができます。

テンプレートはZIPファイルとしてダウンロードされます。お好みのHTMLエディタでテンプレートを編集し、カスタムテンプレートとして再アップロードすることができます。このテンプレートでは、Vue 3のディレクティブを使用して、キューの状態に応じてセクションを条件付きでレンダリングします。

<!-- Container that shows when loaded -->
<div id="crowdhandler-template" :class="{ 'active': ch.isLoaded }" role="main">
  <!-- Screen reader announcements -->
  <div class="ch-sr-only" aria-live="polite" aria-atomic="true">{{ ch.announcement }}</div>

  <!-- Your template content -->

  <!-- Captcha container (required if captcha is enabled) -->
  <div id="ch-captcha-form"></div>

  <!-- Script inclusion -->
  <script type="module" src="/src/main.js"></script>
</div>

接続が確立されている間は、テンプレートのデフォルト設定が使用されます。つまり、ページ上のすべてのテキストは、テンプレートから直接取得されるか、コントロールパネルに追加したコンテンツから取得されるか、あるいは数値であるため、テンプレートは言語に依存しません。

カスタムテンプレートの使い方を始めるには、当社のガイドをご覧ください。

テンプレートをアップロードする

テンプレートはファイルとしてアップロードすることも、URLから動的に読み込むこともできます。

URL によるテンプレートの組み込み

URLによる読み込みの最大の利点は、自身のウェブサイト上でテンプレートをプレーンなHTMLファイルとして作成でき、そのURLをコントロールパネルに登録すれば、テンプレートに加えた変更がCrowdHandler内で自動的に反映されることです。つまり、テンプレートのデザインを自身のウェブサイトに組み込むことができるということです。

さらに良いことに、CMSを使用すれば、URLを動的なものにすることができます。つまり、サイトの他のページと同じように、待合室のページもコンテンツ管理が可能になります。ただし、正しいIDをすべて使用し、待合室のJavaScriptに支障をきたさないよう注意してください。

ページのコンテンツは約1分間キャッシュされるため、たとえ何千人ものユーザーが待合室にアクセスしていても、更新のためのリクエストは1分間に1回のみとなります。

テンプレートのアップロード

テンプレートは添付ファイルとして直接アップロードできます。ただし、アップロードできるのはHTMLファイルのみですのでご注意ください。JavaScript、CSS、画像など、外部ファイルを使用する場合は、セキュリティ上の警告が表示されないよう、それらを安全なドメイン（https://）上で別途ホストする必要があります。

Important: relative URLs, for links and assets, etc., will not resolve to your domain. You can either ensure all URLs are absolute or add a base element to your template. e.g. <base href="https://www.crowdhandler.com/"> This will affect all of your relative URLs.