従来のテンプレートの編集

このテンプレートは非推奨です。 最新のテンプレートに更新してください。最新のカスタムテンプレートの完全なドキュメント

一部のプランでは、カスタムテンプレートを作成する機能をご利用いただけます。操作自体は簡単ですが、この機能を最大限に活用するには、HTMLやCSSについて十分に理解していると役立ちます。

まず、admin.crowdhandler.com の「テンプレート」セクションから「Classic Template」をダウンロードしてください。

基本的なスタイルは、https://wait.crowdhandler.com/css/latest/ch-main.cssにある .css ファイルから提供されています。

カスタムテンプレートの head セクションにインラインスタイルを追加して、スタイルを上書きするか、または自己ホスト型の .css ファイルへのリンクを設定してください。

When editing the file locally comment out the <script> tag at the bottom of the file to disable API calls and any protocol errors.

テンプレートをアップロードする際は、この行のコメント解除を忘れないでください

<!-- <script src="https://wait.crowdhandler.com/js/latest/main.js?id=ch-public-key"></script> -->

テンプレートの構造

CrowdHandlerのテンプレートでは、待合室が正しく機能するために、いくつかのセクションが含まれている必要があります。

These are represented by <section> tags in the Standard template and have ids that are prefixed by 'ch-'.

それらは以下の通りです：

ch-ロゴ

アカウントにアップロードされたロゴを表示します。

ch-header

「待機室」のタイトルと、その待機室に設定したメッセージが表示されます。

これらは、それぞれ「ch-title」および「ch-message」というIDで識別されます。

<section class="ch-section" id="ch-header">
         <h2 id="ch-title">You are in our virtual waiting room</h2>
         <p id="ch-message" class="alert alert-info" role="alert">Our website is very busy at the moment.</p>
      </section>

キャプチャ

ご利用のプランでキャプチャが有効になっている場合 <div id="ch-captcha-form"></div> 選択したキャプチャ方式が設定され、入力必須です。

<section class="ch-section" id="ch-captcha">
         <p id="ch-captcha-message">Please complete the captcha to proceed</p>
         <div id="ch-captcha-form"></div>
      </section>

ch-ブロックされた

不審な活動のためユーザーがブロックされた場合に表示されます。

<section class="ch-section" id="ch-blocked">
         <p class="alert alert-danger" role="alert">You have been blocked due to suspicious activity.</p>
      </section>

ch-room-full

待合室に空きがなくなった場合に表示されます。

<section class="ch-section" id="ch-room-full">
         <p class="lead">We're sorry, the waiting room is full. We will let you in if a position becomes available.</p>
      </section>

ch-prelude

待合室のカウントダウンが、キューが有効になる日時よりも前の日時になっている場合、その待合室は「アクティブ」と表示されます。

<section class="ch-section" id="ch-prelude">
         <div id="ch-sooner">
            <p class="lead">This waiting room opens <br><strong id="ch-countdown">soon</strong></p>
         </div>
         <div id="ch-later">
            <p class="lead">This waiting room opens on <br><strong id="ch-datetime">checking date</strong></p>
         </div>
         <small>There is no need to refresh this page; you will automatically receive a random queue position when the
            room opens.
            Users who arrive later will join the back of the queue.</small>
      </section>

ch-active

その部屋がアクティブで、重要な要素がいくつか含まれている場合に表示されます。

ch-count は、ユーザーの待ち行列内の順位を表示し、待ち行列の進行状況がわかるようカウントダウンを行います。

そのポジションがまだ割り当てられていない場合、タグには「ch-count」IDを持つタグに入力した内容が表示されます。

<h1>Position: <strong id="ch-count">estimating</strong></h1>

ch-progressはプログレスバーを表示します。プログレスバーには 2 種類あり、CSS クラス「progress-bar-stripes」および「progress-bar-pulse」で指定できます。

<div class="progress">
            <div id="ch-progress" class="progress-bar progress-bar-pulse" role="progressbar" aria-valuenow="25"
               aria-valuemin="0" aria-valuemax="100"></div>
         </div>

ch-estimated-wait は、ユーザーに対する推定待ち時間を表示します。推定待ち時間が算出されるまでは、プレースホルダー画像であるch-estimated-placeholder が表示されます。通常、この表示はごく短時間ですが、レートが 0 に設定されている場合は、かなり長い間表示されたままになります。

「ch-estimated-hours」および「ch-estimated-minutes」タグは、それぞれ時間と分を表示します。

<div id="ch-estimated-wait" class="ch-show">
            Estimated wait:
            <span id="ch-estimated-placeholder">
               <img src="https://wait.crowdhandler.com/img/ellipse-dots.gif" />
            </span>
            <span id="ch-estimated-hours" class="ch-hide"><strong class="ch-number"></strong> hours</span>
            <span id="ch-estimated-minutes" class="ch-hide"><strong class="ch-number"></strong> minutes</span>
         </div>

最後に、ch-sessions-expireおよびch-sessions-no-expire は、ユーザーに追加情報を表示するために使用されます。待機中にセッションの有効期限を切らないように設定している場合、ch-sessions-no-expire を使用して、ユーザーがキューの先頭に達してから取引を開始するまでの残り時間を分単位で通知します。この情報はch-sessions-expiryタグに設定されます。

<p id="ch-sessions-expire" class="ch-hide">You will move to the front of the queue automatically. There is no
            need to refresh this page but please keep this window open, and if you are using a mobile device, do not
            allow it to go to sleep for too long</p>
         <p id="ch-sessions-no-expire" class="ch-hide">You will move to the front of the queue automatically. There is
            no need to refresh this page. Once you reach the front of the line you will have <span
               id="ch-sessions-expiry">15</span> minutes to start your transaction.</p>

ch-stock

カスタムテンプレートを使用したプランでは、待合室のフィールドから取得した在庫数を表示することができます。

これを使えば、在庫がなくなった際に顧客に通知できるため、顧客が不必要に待合室で待たされることを防げます。

<section class="ch-section ch-hide" id="ch-stock">
         <p id="ch-stock-available" class="">Availability <span id="ch-stock-value">X</span> items</p>
         <p id="ch-stock-unavailable" class="ch-hide">
            We’re all sold out, sorry please come again next time!
         </p>
      </section>

ch-email-me

「メールで送信」機能が利用可能なプランにおいて。

<section class="ch-section ch-hide" id="ch-email-me"> ... </section>

このセクションでは、利用規約を修正することができます。利用規約は、ユーザーがメールアドレスを入力した際に表示され、ユーザーがメールアドレスの収集に同意することを確認するためのものです。

<section class="ch-section ch-hide" id="ch-email-me">
         <form>
            <div class="ch-email-me-group">
               <input id="ch-email-me-input" type="text" class="ch-email-me-input" placeholder="Enter email address"
                  aria-label="Enter email address">
               <span class="input-group-btn">
                  <button id="ch-email-me-btn-action" class="btn btn-default" type="submit">
                     <span class="ch-show">
                        Email Me
                     </span>
                  </button>
               </span>
            </div>
         </form>
         <div id="ch-email-terms" class="ch-hide">
            <p>Your email address will be stored temporarily to notify you when your queue session ends. It will only be
               used for this purpose and deleted immediately after.</p>
            <p>See crowdhandler.com/privacy for details.</p>
            </p>
         </div>
         <div id="ch-email-notification" class="">
            <p>An email notification will be sent to <span class="ch-email-notification-message"></span></p>
            <button id="ch-email-me-btn-reset" class="btn btn-default ch-email-me-btn-reset" type="button">
               <span class="ch-show">
                  Change address
               </span>
            </button>
         </div>
      </section>

ch-priority

一部のプランでは、ユーザーに優先順位コードを割り当てる機能があります。このセクションでは、ユーザーが優先順位コードを送信できるフォームを提供しています。

The form is comprised of an input field ch-priority-input, a button ch-priority-btn-action and two elements to show success and error states, ch-priority-success and ch-priority-error. In the standard template these are <span> tags that contain svgs, but these can be anything you want.

<section class="ch-section" id="ch-priority">
         <h3>Got a priority code?</h3>
         <form>
            <div class="ch-priority-group">
               <input id="ch-priority-input" type="text" class="ch-priority-input" placeholder="Enter Code"
                  aria-label="Enter Code">
               <span class="input-group-btn">
                  <button id="ch-priority-btn-action" class="btn btn-default" type="submit">
                     <span class="ch-show">
                        Apply
                     </span>
                  </button>
               </span>
               <span id="ch-priority-success" class="ch-icon ch-hide ch-priority-group-add-item">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                     class="feather feather-check">
                     <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
               </span>
               <span id="ch-priority-error" class="ch-icon ch-hide ch-priority-group-add-item">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                     class="feather feather-x">
                     <line x1="18" y1="6" x2="6" y2="18"></line>
                     <line x1="6" y1="6" x2="18" y2="18"></line>
                  </svg>
               </span>
            </div>
         </form>

      </section>

ch-footer

フッターセクションには、ユーザーの現在のトークンと、CrowdHandler API に最後にチェックインした時刻が表示されます。これは、デバッグやユーザーからの問い合わせに対応する際に役立ちます。