1. Home
  2. Guides
  3. Security
  4. Bot Management
  5. Client challenges

Embedding challenges in pages

Dynamic challenges can be embedded within a page of your web application or served on an interstitial page. Using the embedded presentation method helps ensure the branding and user experience of your web application remains consistent. We recommend choosing this presentation method if you have a React or single-page application.

HINT: Want to add an interactive or non-interactive challenge? Use the interstitial page presentation method.

Prerequisites

Before you add a client challenge, you must:

Adding embedded challenges

On the page where you want the challenge to appear, complete the following steps:

  1. To the page's <head>, add the following JS:

    <script src="/_fs-ch-1T1wmsGaOgGaSxcX/challenge.js" defer></script>

    HINT: As the script waits for the DOM to be ready before loading the challenge, you can use async or async defer instead of defer. For information about these attributes, check out Mozilla's documentation.

  2. In the location of the page where you want the challenge to appear, add the following div:

    <div class="fastly-challenge"></div>

  3. (Optional) Use CSS to make all challenge types visible. By default, embedded challenges don't display on the page, unless Fastly detects suspicious activity and chooses an interactive challenge (e.g., CAPTCHA challenge).

  4. (Optional) Set up rules to block requests from clients that failed a challenge.

Making all challenge types visible on the page

By default, embedded challenges don't display on the page unless Fastly detects suspicious activity and chooses an interactive challenge (e.g., CAPTCHA challenge). To make all challenge types visible, use the following CSS directives:

fastly-challenge[data-challenge-status="started"]
fastly-challenge[data-challenge-status="processing"]
fastly-challenge[data-challenge-status="complete"]
fastly-challenge[data-challenge-status="error"]
fastly-challenge[data-challenge-status="captcha_prompted"]

Sample CSS

Below is a sample CSS that makes all challenge types visible on the page.

1
2
3
4
5
6
7
/* Base container styling - Pre-allocate space to prevent layout shift */
.fastly-challenge {
content:"Powered by Fastly";
   display: inline-flex;
   align-items: center;
   min-height: 32px;
   min-width: 140px;

Related content

Fastly
© Fastly 2026