LogoLogo
  • Overview
    • Overview
    • Integration Modes
    • Minimum Required Dataset
    • Customer Service Desk
  • Netacea Plugin Information
    • Accessing Your Integration Settings
    • Akamai
      • Akamai Plugin Logic
      • Monitoring Configuration
      • Installation and Configuration
        • Proxy Property Configuration
        • EdgeWorker Installation
        • Property Configuration
          • Optional Integration Configuration
    • Cloudflare
      • Cloudflare Plugin Logic
      • Monitoring Configuration
      • Installation and Configuration
        • Installation via Wrangler (CLI)
        • Installation via Cloudflare UI
    • CloudFront
      • CloudFront Plugin Logic
      • Monitoring Configuration
      • Installation and Configuration
    • Fastly
      • Fastly Plugin Logic
      • Monitoring Configuration
      • Installation and Configuration
        • Advanced Configuration
        • Deployment via Terraform
    • Fastly Magento
      • Fastly/Magento Plugin Logic
      • Monitoring Configuration
      • Installation and Configuration
        • Advanced Configuration
    • F5
      • F5 Plugin Logic
      • Monitoring Configuration
      • Installation and Configuration
    • Vercel
      • Vercel Plugin Logic
      • Monitoring Configuration
      • Installation and Configuration
    • API Direct Integration
      • How to Build a Netacea Plugin
  • Netacea Data Sync
    • Data Sync
    • Recommendations
  • Captcha
    • reCAPTCHA User Journey
    • hCaptcha User Journey
    • Custom reCAPTCHA Page Guide
    • Custom hCaptcha Page Guide
Powered by GitBook

Copyright Netacea 2023

On this page
  • Prerequisites
  • HTML Page
  • Netacea CAPTCHA Template
  1. Captcha

Custom reCAPTCHA Page Guide

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

PrevioushCaptcha User JourneyNextCustom hCaptcha Page Guide

Last updated 1 year ago

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://www.recaptcha.net/recaptcha/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="g-recaptcha" data-sitekey="{{CAPTCHA_SITE_KEY}}" data-callback="showButton"></div>
    <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-captcha-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 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>Captcha Page</title>
    <link rel="stylesheet" href="https://assets.ntcacdn.net/Mitigations/captcha-1.1.1.css">
    <script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
</head>
<body>
    <div class="wrapper">
        <header>
            <!-- header content -->
            <h1>Help us verify real visitors</h1>
            <!-- End of header  content -->
        </header>
        
        <!-- statement content -->
        <p>Please complete to continue</p>
        <!-- End of statement content -->

        <!-- Captcha Form, Do not change-->
            <form id="frmCaptcha" action="" method="POST">
                <div class="g-recaptcha" data-sitekey="{{CAPTCHA_SITE_KEY}}" data-callback="showButton"></div>
                <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 class="wrapper-values"></div>
    </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-captcha-2.1.4.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.

templated page