← Cloudflare Waiting Room / waiting-room / how-to

Přizpůsobení čekárny

Svou čekárnu můžete přizpůsobit v dashboardu nebo prostřednictvím API.

Chcete-li navrhnout a zobrazit náhled vzhledu čekárny, vyberte Přizpůsobení kartu v Vytvoření čekárny stránce.

Cloudflare nabízí možnosti, jak přizpůsobit vzhled vaší čekárny:

• Výchozí čekárna: Neoznačená čekárna, která návštěvníkům zobrazuje odhadovanou dobu čekání.
  • Vyberte jazyk výchozí stránky waiting roomu. Můžete si vybrat z těchto jazyků: angličtina, arabština, němčina, španělština, francouzština, indonéština, italština, japonština, korejština, nizozemština, polština, portugalština (brazilská), turečtina a čínština (zjednodušená a tradiční).
• Vlastní čekárna: Upravte text šablony nebo vytvořte vlastní kód HTML:
  • Přizpůsobte obsah HTML i CSS, včetně písem, barev, statických obrázků, dalších jazyků a dalšího.
  • Obsah můžete upravit přímo na dashboardu nebo importovat příslušné soubory.
• Vrácení odpovědi čekárny ve formátu vhodném pro JSON: Přepínač pro zapnutí odpovědi ve formátu JSON se stavem uživatele v čekárně.

Výběr výchozí čekárny bez vlastního designu:

1. Vyberte waiting room.
2. Přejděte na Přizpůsobení krok.
3. Vyberte Výchozí čekárna.
4. Vyberte jazyk výchozí stránky waiting roomu.

Přizpůsobení čekárny:

1. Vyberte waiting room.
2. Přejděte na Přizpůsobení krok.
3. Vyberte Vlastní čekárna.

Kód HTML můžete upravit přímo v textovém poli:

• Vyberte Stáhnout výchozí šablonu a stáhněte si do počítače soubor HTML s výchozím obsahem šablony.
• Vyberte Stáhnout a stáhněte si do počítače soubor HTML s obsahem textového pole.
• Vyberte Copy a zkopírujte text z textového pole do schránky, poté jej vložte do editoru dle vlastního výběru.

Text šablony obsahuje kód pro zobrazení doby čekání. Pokud chcete návštěvníkům zobrazovat odhadovanou dobu čekání, tento obsah neodstraňujte.

1. Vyberte Import a nahrajte soubor HTML z počítače.
2. V dialogovém okně vyberte soubor a poté klikněte na Open. Limit velikosti souboru HTML je 1 048 576 bajtů (1 MB).

V textovém poli proveďte další úpravy. Zahrňte kód pro zobrazení doby čekání k zobrazení odhadované doby čekání na stránce čekárny, nebo si vytvořte vlastní stránku pomocí dostupné proměnné.

Následující obsah v <main> kódu šablony HTML zobrazuje dobu čekání:

<h2 id="time-remaining">
  <noscript>
    {{#waitTimeKnown}}Your estimated wait time is {{waitTimeFormatted}}...{{/waitTimeKnown}}
    {{^waitTimeKnown}}{{#queueIsFull}}The estimated wait time is greater than a day. You will
    automatically be placed in the queue once space is available.{{/queueIsFull}}
    {{^queueIsFull}}Your estimated wait time is unavailable.{{/queueIsFull}}{{/waitTimeKnown}}
  </noscript>
</h2>

Následující skript v rámci <body> sekce po <main> načte dobu čekání:

<script type="text/javascript">
  var remainingEl = document.getElementById('time-remaining');
  var waitTime = {{waitTime}};
  var waitTimeKnown = {{waitTimeKnown}};

  var remainingString = 'Your estimated wait time is ';

  if (!waitTimeKnown) {
    remainingString += 'unavailable.'
  } else {
    if (waitTime === 1) {
      remainingString += waitTime + ' minute...';
    } else {
      remainingString += waitTime + ' minutes...';
    }
  }

  remainingEl.innerText = remainingString;
</script>

Pokud pro vlastní čekárnu používáte Turnstile, musíte zajistit turnstile proměnná se přidá. Výchozí šablona stránky fronty i všechny nově vytvořené vlastní šablony tuto proměnnou již obsahují. Pokud máte existující vlastní šablonu HTML a chcete povolit integraci Turnstile, musíte přidat {{{turnstile}}} někde v šabloně, aby Waiting Room věděl, kam má být widget umístěn. Waiting Room používá šablony Mustache, takže pro vložení nezpracovaného HTML do šablony bez escapování jsou potřeba tři složené závorky místo dvou.

<!DOCTYPE html>
<html>
  <head>
    <title>Waiting Room</title>
  </head>
  <body>
    <h1>You are currently in the queue.</h1>
    {{#waitTimeKnown}}
      <h2>Your estimated wait time is {{waitTimeFormatted}}.</h2>
    {{/waitTimeKnown}}
    {{^waitTimeKnown}}
      <h2>Your estimated wait time is unknown.</h2>
    {{/waitTimeKnown}}
    {{#turnstile}}
      <!-- for a managed (and potentially interactive) challenge, you may want to instruct the user to complete the challenge -->
      <p>Please complete this challenge so we know you're a human:</p>
      {{{turnstile}}} <!-- include the turnstile widget -->
    {{/turnstile}}
  </body>
</html>

Při použití Infinite Queue (zejména v kombinaci s managed challenges, které mohou vyžadovat interakci) je vhodné uživatele informovat, že se do fronty nedostanou, dokud challenge nedokončí.

Když vytvoříte čekárnu s vlastním HTML, máte k dispozici několik proměnných pro úpravu odpovědi. Úplný seznam proměnných najdete v json_response_enabled parametr v Dokumentace API Cloudflare.

Přizpůsobitelné čekárny mohou zobrazovat text v libovolném jazyce podporovaném znakovou sadou UTF-8. Pro zobrazení odhadované doby čekání můžete použít číselné proměnné, například waitTime a waitTimeHours ve vaší šabloně čekárny bez ohledu na jazyk uživatele. V tuto chvíli jsou však následující proměnné dostupné pouze v angličtině: waitTimeFormatted, timeUntilEventStartFormatted, a timeUntilEventEndFormatted.

Pokud chcete ve vlastní čekárně zobrazovat různé jazyky podle cesty nebo subdomény, můžete do vlastního HTML přidat kód JavaScript, který to zajistí. Níže najdete několik úvodních šablon, které můžete použít jako výchozí příklad:

• Chcete-li zobrazovat jiný jazyk podle cesty, stáhněte si šablona. Šablona zobrazuje obsah v angličtině, pokud cesta obsahuje en nebo jako výchozí japonštinu, pokud cesta obsahuje jp, francouzsky, pokud cesta obsahuje fr, a španělsky, pokud cesta obsahuje es.

• Chcete-li zobrazovat jiný jazyk podle subdomény, stáhněte si šablona. Šablona zobrazuje obsah v angličtině jako výchozí možnost nebo pokud subdoména obsahuje en, japonsky, pokud subdoména obsahuje jp, francouzsky, pokud subdoména obsahuje fr, a španělsky, pokud subdoména obsahuje es.

Stáhněte si libovolnou z těchto šablon a upravte ji podle svých potřeb. Cestu nebo subdoménu upravte tak, aby odpovídala struktuře výběru jazyka na vašem webu. Do těchto šablon můžete zahrnout další jazyky přidáním překladů do translations objekt pro každou lokalitu.

Pokud pro vlastní čekárnu používáte obrázky nebo jiné zdroje, nedělejte hostovat tato aktiva na hostname, který je pokrytý vaší čekárnou. Jinak požadavky na tato aktiva čekárnou neprojdou.

Zobrazení náhledu vzhledu čekárny:

1. Ve své aplikaci přejděte na Provoz > Waiting Room.
2. Buď vytvoření čekárny nebo upravit stávající.
3. Přejděte na Zkontrolovat krok.
4. Vyberte Náhled čekárny:

• Vyberte Řazení do fronty k zobrazení vzhledu čekárny, když je povolena na dashboardu, a Queue-all není povoleno.
• Vyberte Queue-All k zobrazení vzhledu čekárny, když je povolena na dashboardu, a Queue-all je povoleno. Když Queue-all je pro čekárnu povoleno, odhadovaná doba čekání se nezobrazuje.

Pokud si při náhledu čekárny všimnete něčeho neočekávaného, zkontrolujte syntaxi svého vlastního kódu. Často se stává, že zapomenete uzavřít jednotlivé značky odpovídající ukončovací značkou (název značky s /).

Pomocí Waiting Room API můžete přizpůsobit webovou stránku, která se návštěvníkům zobrazí, když jsou umístěni do virtuální čekárny.

V následujícím PATCH požadavek, custom_page_html pole obsahuje kód HTML pro přizpůsobená čekárna:

curl "https://api.cloudflare.com/client/v4/zones/$ZONE_ID/waiting_rooms/$WAITING_ROOM_ID" \
	--request PATCH \
	--header "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
	--json '{
		"name": "webshop-waiting-room",
		"host": "example.com",
		"new_users_per_minute": 200,
		"total_active_users": 300,
		"custom_page_html": "<p>Include custom HTML here</p>"
	}'

Odpověď:

{
  "success": true,
  "errors": [],
  "messages": [],
  "result": [
    {
      "id": "1111111111111111111111",
      "name": "webshop-waiting-room",
      "description": "Waiting room for webshop",
      "host": "example.com",
      "path": "/shop",
      "suspended": false,
      "queue_all": false,
      "new_users_per_minute": 200,
      "total_active_users": 300,
      "session_duration": 1,
      "disable_session_renewal": false,
      "json_response_enabled": false,
      "queueing_method": "FIFO",
      "cookie_attributes": {
        "samesite": "auto",
        "secure": "auto"
      },
      "custom_page_html": "<p>Include custom HTML here</p>",
      "created_on": "2014-01-01T05:20:00.12345Z",
      "modified_on": "2014-01-01T05:20:00.12345Z"
    }
  ]
}

Než odešlete požadavek API ke konfiguraci webové stránky čekárny s upraveným HTML, můžete si vlastní HTML zobrazit v náhledu nahráním na koncový bod pro náhled:

POST https://api.cloudflare.com/client/v4/zones/{zone_id}/waiting_rooms/preview

Do těla požadavku zahrňte vlastní obsah HTML v custom_html pole:

{
  "custom_html": "<p>Include custom HTML here</p>"
}

Upozorňujeme, že obsah HTML předáváte do preview endpointu v custom_html pole, ale pokud čekárnu konfigurujete přes API, předáváte obsah HTML v poli custom_page_html .

Příklad požadavku:

curl "https://api.cloudflare.com/client/v4/zones/$ZONE_ID/waiting_rooms/preview" \
	--request POST \
	--header "Authorization: Bearer $CLOUDFLARE_API_TOKEN" \
	--json '{
		"custom_html": "<p>Include custom HTML here</p>"
	}'

Endpoint pro náhled vrátí v těle odpovědi dočasnou adresu URL, na které si můžete prohlédnout vaši vlastní stránku:

{
  "result": {
    "preview_url": "https://waitingrooms.dev/preview/111111111111"
  },
  "success": true,
  "errors": [],
  "messages": []
}

K přístupu k náhledovému odkazu nepotřebujete účet Cloudflare, takže si stránku čekárny můžete ověřit na více zařízeních.

Po generování náhledové adresy URL, pomocí následujícího koncového bodu vygenerujte odkaz pro náhled aktuálně nakonfigurované webové stránky čekárny, nebo výchozí stránky, pokud není nastavena žádná vlastní stránka.

GET https://waitingrooms.dev/preview/{preview_id}

Odkaz v odpovědi zobrazuje obsah custom_page_html pole, vykreslené pomocí mustache ↗.

Použijte volitelný force_queue parametr dotazu, chcete-li zobrazit náhled webové stránky čekárny, když je veškerý provoz nuceně zařazen do fronty.