Properties

The following properties can be customized in the Captcha page, in the

Captcha Block Language

window._pxSelectedLocale = '<languageCode>';
A list of supported language codes can be found below

Theme

window._pxreCaptchaTheme='<light/dark>';
Select either light or dark
Default: light

Translation Object

If you wish to set the entire Captcha page in a language other than English, add the _pxTranslation object to your page. This object should contain the language code as the key.

Callback Function

Add the _pxOnCaptchaSuccess callback function to the window object. The function is called when the Captcha is solved, and returns a single parameter indicating if it was solved successfully or not:

window._pxOnCaptchaSuccess = function(isValid) { // Define logic based on the isValid parameter }

If no callback function is defined, the page will reload on valid Captcha solves.

📘

Note

If you wish to add the callback to a mobile web challenge (for example, React Native webview), use the _pxOnMobileCaptchaSuccess callback instead of _pxOnCaptchaSuccess. The callback signature and usage are identical.

Localizing

There are two levels of localization available: Captcha Block or the Entire Block Page.

• To translate the Captcha Block only, set window._pxSelectedLocale = '<languageCode>'; to your desired language from the Language Codes page.

• To translate the entire Captcha page to a language other than English, set the _pxTranslation object to your page. You must set the language to show in the window._pxSelectedLocale = '<languageCode>';.

• You must define the CSS Selectors according to the elements you are translating. The following is an example of the _pxTranslation object with the CSS Selectors for the default block page defined to pt-PT (Portuguese):

• You need to add window._pxSelectedLocale = '<languageCode>'; and the object below directly to the Captcha/custom block page or using a custom JS file defined in the enforcer’s JSref property.

  • Optionally, you can set the text of a specific attribute on the HTML element, by adding the attribute property to a translation element. For example, if you want to set the placeholder text of an input element, you can do so by adding "attribute": "placeholder". See example for captcha form below.

📘

Note

If you have a custom page, you must define the correct css selectors.

window._pxTranslation = {
    'pt-PT': [
        {
            'selector': ".page-title h1",
            "text":'Ops! Tem certeza que você não é um robô?'
        },
        {
            "selector": ".content-wrapper p:nth-of-type(1)",
            "text": "Antes que você volte a navegar na página que queria, precisamos garantir que você é uma pessoa de verdade, e não um robô ;)"
        },
        {
            "selector": ".content-wrapper p:nth-of-type(2)",
            "text": "Isso pode ter ocorrido por conta de uma dessas hipóteses:"
        },
        {
            "selector": ".content-wrapper li:nth-of-type(1)",
            "text": "Seu Javascript está desligado ou bloqueado por algum plugin ou aplicativo (exemplo: ad blocker)"
        },
        {
            "selector": ".content-wrapper li:nth-of-type(2)",
            "text": "Seu browser de internet não suporta cookies"
        },
        {
            "selector": ".content-wrapper p:nth-of-type(3)",
            "text": "Pra isso não acontecer mais, garanta que o Javascript e os Cookies estejam ativos no seu navegador e que eles não estejam bloqueados quando você estiver navegando."
        },
        {
            "selector": ".content-wrapper p:nth-of-type(4)",
            "text": "#{{refId}}"
        }
    ]
}

window._pxSelectedLocale = 'pt-PT';
    window._pxTranslation = {
    'pt-PT': [
        {
            "selector": "#px-form-head span",
            "text": "Experimentando problemas? Por favor, forneça mais informações:"
        },
        {
            "selector": "#px-form div:nth-of-type(1) label",
            "text": "Eu não estou vendo nenhum elemento captcha"
        },
        {
            "selector": "#px-form div:nth-of-type(2) label",
            "text": "Eu resolvi o captcha e consegui outro"
        },
        {
            "selector": "#px-form div:nth-of-type(3) label",
            "text": "Eu tenho resolvido vários captchas, mas ainda assim não consigo acessar o site"
        },
        {
            "selector": "#px-form div:nth-of-type(4) label",
            "text": "Outro (por favor elabore)"
        },
        {
            "selector": "#px-form h4:nth-of-type(1)",
            "text": "Informação adicional:"
        },
        {
            "selector": "#px-form-submit",
            "text": "Enviar comentários"
        },
        {
            "selector": "#px-block-toggle-button",
            "text": "Comunicar um problema"
        },
        {
            "selector": "#px-form textarea",
            "text": "Experimentando outros problemas?",
            "attribute": "placeholder"
        }
    ]
}

The following languages are available

Customizing the Default Challenge Page

There are several options for customizing the Challenge page. You can insert a logo into our default challenge page. You can also overwrite our JS and CSS to to customize the look of the page.

Customizing Your own Challenge Page

When using the Advanced Blocking Response feature, you must create a custom Captcha section that will display the Captcha challenge. In order to display the Captcha challenge you must perform the following on your page (be it a full page, an pop-up modal template, etc.):

Step1: Add a div with an id of px-captcha

<div id="px-captcha"></div>

Step 2: Add a script tag with the following parameters

<script>
    window._pxJsClientSrc = '<jsClientSrc>';
    window._pxFirstPartyEnabled = <firstPartyEnabled>;
    window._pxVid = '<vid>';
    window._pxUuid = '<uuid>';
    window._pxHostUrl = '<hostUrl>';
</script>

📘

Note

All of these parameters can be taken from the JSON response of the Advanced Blocking Response output

Step 3: Include the blockScript script from the Advanced Blocking Response

<script src="<blockScript>"></script>

var script = document.createElement('script');
script.src = getParameterByName('blockScript'); // get the parameter from query string
document.getElementsByTagName('head')[0].appendChild(script);

Step 4: Add the _pxOnCaptchaSuccess

This function is called when the Captcha is solved successfully or when it is not validated

window._pxOnCaptchaSuccess = function(isValid) {
 // Define logic based on the isValid parameter
}

📘

Note

If no callback function is defined the page will reload upon successful Captcha solve

Captcha Form

The Captcha form allows your customers to report an issue they are having solving the challenge. The form also protects against false positives.
The Captcha form is included in the PerimeterX default Block Pages.

To include the Captcha form in your custom block flow:

Contact PerimeterX on Slack, SFDC or at [email protected], to make sure your block flow is implemented properly.
Add the following HTML tags where would like to implement the form:
<div><div id="px-captcha"></div></div>
To localize the form, refer to the Localizing section.