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 templated page 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.3.0.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.

Auto Completion of Captcha

Netacea also offer a Hcaptcha page template where the captcha challenge is auto completed once the challenge has been completed by the user. If you wish to use this solution, please use the template below

<!DOCTYPE html>
<html lang="en">
  <head runat="server">
    <meta
      name="viewport"
      content="initial-scale=1.0, width=device-width, maximum-scale=1.0"
    />
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>Auto-submit hCaptcha Custom Page</title>
    <link
      rel="stylesheet"
      href="https://assets.ntcacdn-uat.net/Mitigations/captcha-1.0.0.css"
    />
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>###---THIS IS A CUSTOM AUTO-SUBMIT HCAPTCHA PAGE---###</h1>
            <h1>Help us verify real visitors</h1>
      </header>
      <hr><br><br>
      <h1>🤖Are you a bot?🤖</h1>
      <br>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFb1qE_jzVunCV4Rx6BMblb1WlodceKEwr3A&usqp=CAU" alt="bot-mugshot">
      <br>
        <p>Please complete this custom hCaptcha page to continue...</p>
      <form id="frmCaptcha" action="" method="POST" data-auto-submit>
        <div
          class="h-captcha"
          data-sitekey="{{CAPTCHA_SITE_KEY}}"
          data-callback="frmCaptchaCallback"
        ></div>
        <br />
        <br /><input type="submit" value="Submit" class="btn btnHidden" /><input
          type="hidden"
          maxlength="40"
          id="hitid"
          name="hitid"
          value="{{TRACKING_ID}}"
        />
      </form>
    </div>
    <script src="https://assets.ntcacdn-uat.net/Mitigations/fetch-polyfill-3.6.2.js"></script>
    <script src="https://assets.ntcacdn-uat.net/Mitigations/hsubmit-captcha-2.3.0.js"></script>
  </body>
</html>

PreviousCustom reCAPTCHA Page Guide NextNetacea Verify

Last updated 3 months ago

hashtagPrerequisites

hashtagHTML Page

hashtagNetacea CAPTCHA Template

hashtagAuto Completion of Captcha

Prerequisites

HTML Page

Netacea CAPTCHA Template

Auto Completion of Captcha