Custom hCaptcha Page Guide

The following document outlines how to create a custom CAPTCHA page for use with Netacea’s hCAPTCHA solution.

Last updated 1 year ago

Custom hCaptcha Page Guide

The following document outlines how to create a custom CAPTCHA page for use with Netacea’s hCAPTCHA solution.

Prerequisites

Please ensure that Netacea has configured and enabled CAPTCHA for your account. Also, ensure that the standard CAPTCHA page has been tested and can be served before implementing a custom CAPTCHA page.

Provided that the above prerequisites have been completed, a custom CAPTCHA page can be created by doing the following:

HTML Page

To create an HTML page that will be used for serving CAPTCHA it may be beneficial to start with the Netacea Template HTML before adding the custom HTML code. The can be seen at the bottom of this document. Your custom HTML page can be designed per your specific requirements and/or company branding, however, the page must include the following code. The following scripts should be within the document head element (<head>...</head>):

<link rel="stylesheet" href="https://assets.ntcacdn.net/Mitigations/captcha-1.0.0.css"/>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

In addition, include the following code somewhere within the body (<body>...</body>):

<form id="frmCaptcha" action="" method="POST">
    <div
        class="h-captcha"
        data-sitekey="{{CAPTCHA_SITE_KEY}}"
        data-callback="showButton"
    ></div>
    <br />
    <br /><input type="submit" value="Submit" class="btn btnHidden" /><input
        type="hidden"
        maxlength="40"
        id="hitid"
        name="hitid"
        value="{{TRACKING_ID}}"
    />
</form>

The below scripts must also be added at the end of, but still within the body (<body>...</body>):

<script src="https://assets.ntcacdn.net/Mitigations/fetch-polyfill-3.6.2.js"></script>
<script src="https://assets.ntcacdn.net/Mitigations/submit-hcaptcha-2.0.2.js"></script>

Please note that certain links within the CAPTCHA page may not work if they are hosted behind the site that is being protected by Netacea.

Netacea CAPTCHA Template

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Help us verify real visitors | $customername</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />>
        <link rel="stylesheet" href="https://assets.ntcacdn.net/Mitigations/captcha-1.0.0.css"/>
        <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
    </head>
    <body>
        <div class="wrapper">
            <!-- Customer logo (Optional) If you would like your logo to appear, 
                uncomment lines 13 to 15 and add your source. -->
            <!-- <div class="logo">
                <img width="300" alt="logo" src="$logoURL"/>
            </div> -->
            <!-- End of customer logo -->

            <!-- Captcha page headings -->
            <h1>Help us verify real visitors</h1>
            <p>Please complete to continue</p>
            <!-- End of captcha headings -->

            <!-- Captcha Form -->
            <form id="frmCaptcha" action="" method="POST">
                <div
                  class="h-captcha"
                  data-sitekey="{{CAPTCHA_SITE_KEY}}"
                  data-callback="showButton"
                ></div>
                <br />
                <br /><input type="submit" value="Submit" class="btn btnHidden" /><input
                  type="hidden"
                  maxlength="40"
                  id="hitid"
                  name="hitid"
                  value="{{TRACKING_ID}}"
                />
              </form>
            <!-- End of captcha form -->

        </div>

        <!-- The following two scripts MUST be at the end of the body -->
        <script src="https://assets.ntcacdn.net/Mitigations/fetch-polyfill-3.6.2.js"></script>
        <script src="https://assets.ntcacdn.net/Mitigations/submit-hcaptcha-2.0.2.js"></script>
        <!-- End of scripts at the end of body -->

    </body>
</html>

Once the custom CAPTCHA page has been completed, please provide the completed CAPTCHA HTML page to Netacea. This will be uploaded to our servers and the new page will be used for any CAPTCHA pages served by the Netacea Bot Management solution.

PreviousCustom reCAPTCHA Page Guide

Last updated 1 year ago

Prerequisites

Provided that the above prerequisites have been completed, a custom CAPTCHA page can be created by doing the following:

HTML Page

<link rel="stylesheet" href="https://assets.ntcacdn.net/Mitigations/captcha-1.0.0.css"/>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

In addition, include the following code somewhere within the body (<body>...</body>):

<form id="frmCaptcha" action="" method="POST">
    <div
        class="h-captcha"
        data-sitekey="{{CAPTCHA_SITE_KEY}}"
        data-callback="showButton"
    ></div>
    <br />
    <br /><input type="submit" value="Submit" class="btn btnHidden" /><input
        type="hidden"
        maxlength="40"
        id="hitid"
        name="hitid"
        value="{{TRACKING_ID}}"
    />
</form>

The below scripts must also be added at the end of, but still within the body (<body>...</body>):

<script src="https://assets.ntcacdn.net/Mitigations/fetch-polyfill-3.6.2.js"></script>
<script src="https://assets.ntcacdn.net/Mitigations/submit-hcaptcha-2.0.2.js"></script>

Please note that certain links within the CAPTCHA page may not work if they are hosted behind the site that is being protected by Netacea.

Netacea CAPTCHA Template

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Help us verify real visitors | $customername</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />>
        <link rel="stylesheet" href="https://assets.ntcacdn.net/Mitigations/captcha-1.0.0.css"/>
        <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
    </head>
    <body>
        <div class="wrapper">
            <!-- Customer logo (Optional) If you would like your logo to appear, 
                uncomment lines 13 to 15 and add your source. -->
            <!-- <div class="logo">
                <img width="300" alt="logo" src="$logoURL"/>
            </div> -->
            <!-- End of customer logo -->

            <!-- Captcha page headings -->
            <h1>Help us verify real visitors</h1>
            <p>Please complete to continue</p>
            <!-- End of captcha headings -->

            <!-- Captcha Form -->
            <form id="frmCaptcha" action="" method="POST">
                <div
                  class="h-captcha"
                  data-sitekey="{{CAPTCHA_SITE_KEY}}"
                  data-callback="showButton"
                ></div>
                <br />
                <br /><input type="submit" value="Submit" class="btn btnHidden" /><input
                  type="hidden"
                  maxlength="40"
                  id="hitid"
                  name="hitid"
                  value="{{TRACKING_ID}}"
                />
              </form>
            <!-- End of captcha form -->

        </div>

        <!-- The following two scripts MUST be at the end of the body -->
        <script src="https://assets.ntcacdn.net/Mitigations/fetch-polyfill-3.6.2.js"></script>
        <script src="https://assets.ntcacdn.net/Mitigations/submit-hcaptcha-2.0.2.js"></script>
        <!-- End of scripts at the end of body -->

    </body>
</html>