Human Challenge Customizations and Configurations
Challenge Page Customization and Configuration
Challenge Configuration
To view and modify the challenge settings in the portal, go to the “Challenge Settings” under the Bot Defender “Product Setting” section.
Change the Challenge to the HUMAN Challenge
To apply the Human Challenge as the default challenge per app, select the “HUMAN Managed” option under “The challenge to apply” and click “Save Changes”.
Enabling Auto ABR (Advanced Blocking Response)
To enable the Advanced Blocking Response, turn on the ABR toggle, and click “Save Changes”. When "Auto-ABR" is on, the HUMAN Web Sensor will automatically display the challenge overlay for any API requests sent by the web browser outside of the page request and rendering process. See our documentation for further details.
Enabling Enhanced Accessibility Mode
To enable the Enhanced Accessibility Mode, turn on the toggle, and click “Save Changes”. When “Enhanced Accessibility Mode” is on, the HUMAN Web Sensor will automatically display the accessible version of the HUMAN challenge. See our documentation for further details. Please allow up to 10 minutes for this change to take effect.
Enabling the “Enhanced Accessibility Mode” in production
Before enabling Enhanced Accessibility Mode, we recommend testing this version with existing customizations on a staging environment before using it in production. Please note that any customizations you make may cause issues with accessibility guidelines.
Challenge Look & Feel
- Human Challenge provides customization options for the user interface.
- The interface allows the customer:
- Changing the color and style of the Challenge button and its surroundings.
- Adding Text translations and localization.
- The challenge can be customized by setting the customization object on the window object in the Captcha page.
- The customization code itself is injected as a remote script in the block page HTML.
- The script path can be set via the px_js_ref configuration property on the enforcer side, please make sure it is an absolute path.
For more information on the Look & Feel customization, please see our Human Challenge Console Customization Tool
Customizing ABR
Customizing ABR (Advanced Blocking Response)
When attempting to Customize ABR, make sure the object is set on the window within the website pages for which you will present a challenge.
Here is an example of a snippet to set the customization object on the window (Detailed options will follow below):
window['_<YOUR_APPID>'] = {
challenge: {
context: {
// customization options for the look and feel of the button surroundings (Logo, Header etc)
},
translation: {
// translation\localization customization
},
view: {
// challenge button options for look and feel (colors, fonts etc)
}
}
};
Human Challenge Language
Forcing a specific locale translation
To force a specific locale translation regardless of browser's identified locale, set the following field on the window.
This will translate all texts to the specified language, otherwise texts will be translated according to the browser's identified locale.
A list of supported language codes can be found below.
window._pxSelectedLocale = '<languageCode>';
Note
For Old block pages - this will only translate the challenge button itself, read further for instructions on translating the rest of the page.
Custom translation
To define your own custom translations for languages, you will need to add to the configuration object, set on the window.
A few options here:
- You can define the default object - forcing the translation you define here to appear regardless of the browser's identified locale.
- Redefine some or all of the locale translations (see list of supported locales below).
Note
When configuring custom translations, we recommend using
ctx_hdrinstead ofheaderText.headerTextwill override other translations and should only be used when other translations are not applied.
Setting default translation example (change texts as you wish):
window['_<APPID>'] = {
challenge: {
translation: {
'default': {
'btn': 'Press & Hold', //button text
'failed': 'Please try again', // challenge failed message
'ctx_hdr': 'Before we continue...', // modal header
'ctx_msg': 'Press & Hold to confirm you are<br>a human (and not a bot).', //modal main message, supports html tags
'ctx_altmsg': 'Please confirm you are a human (and not a bot).', // main message for recaptcha (if used)
// feedback form translations
'ctx_frm': 'Having a problem?',
'ctx_rid': 'Reference ID',
'frm_hdr': 'Report a problem',
'frm_msg': 'Experiencing issues with this page? please let us know:',
'frm_rid': 'You can contact us for assistance. You should use Ref ID',
'frm_fb': 'You can also send us your feedback:',
'frm_opt1': 'I do not see where to confirm',
'frm_opt2': 'I keep getting the "Please try again" message',
'frm_opt3': 'Other (please elaborate below)',
'frm_inp': 'Experiencing other issues?',
'frm_cxl': 'Cancel',
'frm_snd': 'Send',
'frm_thx': 'Thank you for the feedback',
// translations for accessible users
'ac_1': 'Human Challenge requires verification. Please press and hold the button until verified',
'ac_1a': 'Human Challenge requires verification. Please press and hold the button until verified, press tab for an accessible version',
'ac_1b': 'Human Challenge requires verification. Please press the button once, wait for confirmation, and press again when prompted',
'ac_2': 'Human Challenge completed, please wait',
// accessibility email based solution translations
'ac_3': 'Accessible challenge',
'ac_4': 'To continue, you will need a temporary verification code.',
'ac_5': 'Please enter your email address.',
'ac_6': 'We just sent you a temporary verification code.',
'ac_7': 'Enter your code below (Check your inbox for an email from [from])',
'ac_8': 'Email address',
'ac_9': "Didn't receive an email?",
'ac_10': 'Loading',
'ac_11': 'Submit',
'ac_12': 'Verification code',
'ac_13': 'Code digit',
'ac_14': 'Human verification challenge',
'ac_15': 'Accessible human challenge',
'ac_16': 'Human challenge',
'ac_17': 'Valid email required',
'ac_18': 'Please wait',
'ac_19': 'Press again',
// identified problems translations
'al_1': "There seems to be a connection issue. Please make sure you're online, and then refresh the page",
'al_2': 'There seems to be a problem with your browser. Please upgrade to load PerimeterX Human Challenge'
}
}
}
};
Setting custom language translations example:
window['_<APPID>'] = {
challenge: {
translation: {
'de': {
'btn': 'Länger gedrückt halten', // button text
'failed': 'Bitte erneut versuchen', // challenge failed message
'ctx_hdr': 'Bevor wir fortfahren ...', // modal header
'ctx_msg': 'Halten Sie die Taste gedrückt, um zu bestätigen,<br>dass Sie ein Mensch sind (und kein Roboter).', //modal main message, supports html tags
'ctx_altmsg': 'Bitte bestätigen Sie, dass Sie ein Mensch sind (und kein Roboter).', // main message for recaptcha (if used)
// feedback form translations
'ctx_frm': 'Haben Sie ein Problem?',
'ctx_rid': 'Referenz-ID',
'frm_hdr': 'Ein Problem melden',
'frm_msg': 'Falls Sie ein Problem mit dieser Seite haben, lassen Sie es uns bitte wissen:',
'frm_rid': 'Sie können uns um Hilfe bitten. Verwenden Sie bitte die Ref-ID',
'frm_fb': 'Sie können uns auch Ihr Feedback schicken:',
'frm_opt1': 'Ich weiß nicht, wo ich bestätigen soll',
'frm_opt2': 'Ich erhalte ständig die Meldung "Bitte erneut versuchen',
'frm_opt3': 'Sonstiges (bitte unten näher erläutern)',
'frm_inp': 'Haben Sie andere Probleme?',
'frm_cxl': 'Abbrechen',
'frm_snd': 'Senden',
'frm_thx': 'Vielen Dank für Ihr Feedback',
// translations for accessible users
'ac_1': 'Human Challenge muss überprüft werden. Bitte den Button länger gedrückt halten, bis die Verifizierung erfolgt',
'ac_1a':
'Human Challenge muss überprüft werden. Bitte den Button länger gedrückt halten, bis die Verifizierung erfolgt. Für eine zugängliche Version auf die Tabulatortaste drücken',
'ac_1b': 'Human Challenge erfordert eine Überprüfung. Bitte drücken Sie die Taste einmal, warten Sie auf die Bestätigung und drücken Sie bei Aufforderung erneut.',
'ac_2': 'Human Challenge ist abgeschlossen. Bitte warten',
// accessibility email based solution translations
'ac_3': 'Zugängliche Herausforderung',
'ac_4': 'Um fortzufahren ist ein temporärer Verifizierungscode erforderlich.',
'ac_5': 'Bitte geben Sie Ihre E-Mail-Adresse ein.',
'ac_6': 'Wir haben Ihnen gerade einen temporären Verifizierungscode gesandt.',
'ac_7': 'Geben Sie unten Ihren Code ein (Suchen Sie in Ihrer Inbox nach einer E-Mail von [from])',
'ac_8': 'E-Mail-Adresse',
'ac_9': 'Sie haben keine E-Mail erhalten?',
'ac_10': 'Wird geladen',
'ac_11': 'Absenden',
'ac_12': 'Verifizierungscode',
'ac_13': 'Kennziffer',
'ac_14': 'Herausforderung zur menschlichen Verifizierung',
'ac_15': 'Zugängliche menschliche Herausforderung',
'ac_16': 'Menschliche Herausforderung',
'ac_17': 'Gültige E-Mail-Adresse ist erforderlich',
'ac_18': 'Bitte warten',
'ac_19': 'Erneut drücken',
// identified problems translations
'al_1': 'Anscheinend gibt ein Verbindungsproblem. Bitte stellen Sie sicher, online zu sein, und aktualisieren Sie dann die Seite',
'al_2': 'Anscheinend gibt es ein Problem mit Ihrem Browser. Bitte aktuaisieren Sie diesen, um PerimeterX Human Challenge zu laden'
},
'nl': {
'btn': 'Ingedrukt houden', // button text
'failed': 'Probeer het opnieuw', // challenge failed message
'ctx_hdr': 'Voordat we verder gaan...', // modal header
'ctx_msg': 'Houd ingedrukt om te bevestigen dat<br>je een mens bent (en geen bot).', //modal main message, supports html tags
'ctx_altmsg': 'Bevestig dat je een mens bent (en geen bot).', // main message for recaptcha (if used)
// feedback form translations
'ctx_frm': 'Heb je een probleem?',
'ctx_rid': 'Referentie-ID',
'frm_hdr': 'Meld een probleem',
'frm_msg': 'Ervaar je problemen met deze pagina? Laat het ons dan weten:',
'frm_rid': 'Je kunt contact met ons opnemen voor hulp. Je moet een Ref ID gebruiken',
'frm_fb': 'Je kunt ons ook je feedback sturen:',
'frm_opt1': 'Ik zie niet waar ik kan bevestigen',
'frm_opt2': 'Ik blijf het bericht "Probeer het opnieuw" ontvangen',
'frm_opt3': 'Anders (hieronder toelichten)',
'frm_inp': 'Heb je andere problemen?',
'frm_cxl': 'Annuleren',
'frm_snd': 'Verzenden',
'frm_thx': 'Bedankt voor de feedback',
// translations for accessible users
'ac_1': 'Human Challenge vereist verificatie. Houd de knop ingedrukt tot je geverifieerd bent',
'ac_1a': 'Human Challenge vereist verificatie. Houd de knop ingedrukt tot je geverifieerd bent, druk op tab voor een toegankelijke versie',
'ac_1b': 'Human Challenge vereist verificatie. Druk één keer op de knop, wacht op bevestiging en druk opnieuw wanneer daarom wordt gevraagd',
'ac_2': 'Human Challenge voltooid, even geduld',
// accessibility email based solution translations
'ac_3': 'Toegankelijke wedstrijd',
'ac_4': 'Je hebt een tijdelijke verificatiecode nodig om door te kunnen gaan.',
'ac_5': 'Voer je e-mailadres in.',
'ac_6': 'We hebben je zojuist een tijdelijke verificatiecode gestuurd.',
'ac_7': 'Voer hieronder je code in (controleer je inbox op een e-mail van [from])',
'ac_8': 'E-mailadres',
'ac_9': 'Geen e-mail ontvangen?',
'ac_10': 'Bezig met laden',
'ac_11': 'Verzenden',
'ac_12': 'Verificatiecode',
'ac_13': 'Codecijfer',
'ac_14': 'Menselijke verificatiewedstrijd',
'ac_15': 'Toegankelijke menselijke wedstrijd',
'ac_16': 'Menselijke wedstrijd',
'ac_17': 'Geldig e-mailadres vereist',
'ac_18': 'Even geduld',
'ac_19': 'Opnieuw indrukken',
// identified problems translations
'al_1': 'Er lijkt een verbindingsprobleem te zijn. Controleer of je online bent en vernieuw dan de pagina',
'al_2': 'Er lijkt een probleem te zijn met je browser. Upgrade om PerimeterX Human Challenge te laden'
}
// ... add more
}
}
};
Translating old challenge Pages
To force a specific locale translation regardless of browser's identified locale, set the following field: window._pxSelectedLocale ='';
For Old block pages this will only automatically translate the challenge itself, you will need to provide the rest of the translations text as detailed below
Old challenge page translations are achieved by:
- Defining translations for the challenge button ( challenge -> translation, on configuration object)
- Defining translations for the rest of the page (translation, on the configuration object).
To define translations for texts for the rest of the page - define the css selector for the element, as well as the translated text (see examples)
Setting default translation example (Old block pages):
window._pxSelectedLocale = 'default';
window['_<APPID>'] = {
challenge: {
translation: {
'default': {
'btn': 'Press & Hold', //button text
'failed': 'Please try again', // challenge failed message
'frm_hdr': 'Report a problem',
'frm_msg': 'Experiencing issues with this page? please let us know:',
'frm_rid': 'You can contact us for assistance. You should use Ref ID',
'frm_fb': 'You can also send us your feedback:',
'frm_opt1': 'I do not see where to confirm',
'frm_opt2': 'I keep getting the "Please try again" message',
'frm_opt3': 'Other (please elaborate below)',
'frm_inp': 'Experiencing other issues?',
'frm_cxl': 'Cancel',
'frm_snd': 'Send',
'frm_thx': 'Thank you for the feedback',
// translations for accessible users
'ac_1': 'Human Challenge requires verification. Please press and hold the button until verified',
'ac_1a': 'Human Challenge requires verification. Please press and hold the button until verified, press tab for an accessible version',
'ac_1b': 'Human Challenge requires verification. Please press the button once, wait for confirmation, and press again when prompted',
'ac_2': 'Human Challenge completed, please wait',
// accessibility email based solution translations
'ac_3': 'Accessible challenge',
'ac_4': 'To continue, you will need a temporary verification code.',
'ac_5': 'Please enter your email address.',
'ac_6': 'We just sent you a temporary verification code.',
'ac_7': 'Enter your code below (Check your inbox for an email from [from])',
'ac_8': 'Email address',
'ac_9': "Didn't receive an email?",
'ac_10': 'Loading',
'ac_11': 'Submit',
'ac_12': 'Verification code',
'ac_13': 'Code digit',
'ac_14': 'Human verification challenge',
'ac_15': 'Accessible human challenge',
'ac_16': 'Human challenge',
'ac_17': 'Valid email required',
'ac_18': 'Please wait',
'ac_19': 'Press again'
}
}
},
translation: {
'default': [
{
'selector': '.page-title h1',
'text': 'Please verify you are a human'
},
{
'selector': '.content-wrapper p:nth-of-type(1)',
'text': 'Access to this page has been denied because we believe you are using automation tools to browse the website.'
},
{
'selector': '.content-wrapper p:nth-of-type(2)',
'text': 'This may happen as a result of the following:'
},
{
'selector': '.content-wrapper li:nth-of-type(1)',
'text': 'Javascript is disabled or blocked by an extension (ad blockers for example)'
},
{
'selector': '.content-wrapper li:nth-of-type(2)',
'text': 'Your browser does not support cookies'
},
{
'selector': '.content-wrapper p:nth-of-type(3)',
'text': 'Please make sure that Javascript and cookies are enabled on your browser and that you are not blocking them from loading.'
},
{
'selector': '#px-block-toggle-button',
'text': 'report a bla'
}
]
}
};
Setting custom language translations example (Old Block pages):
window['_<APPID>'] = {
challenge: {
translation: {
'de': {
'btn': 'Länger gedrückt halten', // button text
'failed': 'Bitte erneut versuchen', // challenge failed message
'frm_hdr': 'Ein Problem melden',
'frm_msg': 'Falls Sie ein Problem mit dieser Seite haben, lassen Sie es uns bitte wissen:',
'frm_rid': 'Sie können uns um Hilfe bitten. Verwenden Sie bitte die Ref-ID',
'frm_fb': 'Sie können uns auch Ihr Feedback schicken:',
'frm_opt1': 'Ich weiß nicht, wo ich bestätigen soll',
'frm_opt2': 'Ich erhalte ständig die Meldung "Bitte erneut versuchen',
'frm_opt3': 'Sonstiges (bitte unten näher erläutern)',
'frm_inp': 'Haben Sie andere Probleme?',
'frm_cxl': 'Abbrechen',
'frm_snd': 'Senden',
'frm_thx': 'Vielen Dank für Ihr Feedback',
// translations for accessible users
'ac_1': 'Human Challenge muss überprüft werden. Bitte den Button länger gedrückt halten, bis die Verifizierung erfolgt',
'ac_1a':
'Human Challenge muss überprüft werden. Bitte den Button länger gedrückt halten, bis die Verifizierung erfolgt. Für eine zugängliche Version auf die Tabulatortaste drücken',
'ac_1b': 'Human Challenge erfordert eine Überprüfung. Bitte drücken Sie die Taste einmal, warten Sie auf die Bestätigung und drücken Sie bei Aufforderung erneut.',
'ac_2': 'Human Challenge ist abgeschlossen. Bitte warten',
// accessibility email based solution translations
'ac_3': 'Zugängliche Herausforderung',
'ac_4': 'Um fortzufahren ist ein temporärer Verifizierungscode erforderlich.',
'ac_5': 'Bitte geben Sie Ihre E-Mail-Adresse ein.',
'ac_6': 'Wir haben Ihnen gerade einen temporären Verifizierungscode gesandt.',
'ac_7': 'Geben Sie unten Ihren Code ein (Suchen Sie in Ihrer Inbox nach einer E-Mail von [from])',
'ac_8': 'E-Mail-Adresse',
'ac_9': 'Sie haben keine E-Mail erhalten?',
'ac_10': 'Wird geladen',
'ac_11': 'Absenden',
'ac_12': 'Verifizierungscode',
'ac_13': 'Kennziffer',
'ac_14': 'Herausforderung zur menschlichen Verifizierung',
'ac_15': 'Zugängliche menschliche Herausforderung',
'ac_16': 'Menschliche Herausforderung',
'ac_17': 'Gültige E-Mail-Adresse ist erforderlich',
'ac_18': 'Bitte warten',
'ac_19': 'Erneut drücken'
}
// add more
}
},
translation: {
'de': [
{
'selector': '.page-title h1',
// Please verify you are a human
'text': 'Bitte vergewissern Sie sich, dass Sie ein Mensch sind'
},
{
'selector': '.content-wrapper p:nth-of-type(1)',
// Access to this page has been denied because we believe you are using automation tools to browse the website.
'text': 'Der Zugriff auf diese Seite wurde verweigert, da wir glauben, dass Sie zum Durchsuchen der Website Automatisierungstools verwenden.'
},
{
'selector': '.content-wrapper p:nth-of-type(2)',
// This may happen as a result of the following:
'text': 'Dies kann folgende Ursachen haben:'
},
{
'selector': '.content-wrapper li:nth-of-type(1)',
// Javascript is disabled or blocked by an extension (ad blockers for example)
'text': 'Javascript ist deaktiviert oder durch eine Erweiterung (z. B. Werbeblocker) blockiert.'
},
{
'selector': '.content-wrapper li:nth-of-type(2)',
// Your browser does not support cookies
'text': 'Ihr Browser unterstützt keine Cookies'
},
{
'selector': '.content-wrapper p:nth-of-type(3)',
// Please make sure that Javascript and cookies are enabled on your browser and that you are not blocking them from loading.
'text': 'Bitte stellen Sie sicher, dass Javascript und Cookies in Ihrem Browser aktiviert sind und dass Sie deren Laden nicht blockieren.'
},
{
'selector': '#px-block-toggle-button',
// report a problem
'text': 'ein Problem melden'
}
]
// add more
}
};
Supported languages:
Human Challenge default language is English (en).
We support the following languages out-of-the-box:
| Language | Value |
|---|---|
| Arabic | ar |
| Bengali | bn |
| Chinese (Simplified) | zh-CN |
| Chinese (Traditional) | zh-TW |
| Danish | da |
| Dutch | nl |
| English | en |
| French | fr |
| German | de |
| Greek | el |
| Gujarati | gu |
| Hebrew | he |
| Hindi | hi |
| Hungarian | hu |
| Indonesian | id |
| Italian | it |
| Japanese | ja |
| Korean | ko |
| Persian | fa |
| Polish | pl |
| Portuguese | pt |
| Romanian | ro |
| Russian | ru |
| Spanish | es |
| Swedish | sv |
| Tamil | ta |
| Thai | th |
| Vietnamese | vi-VN |
For supported reCaptcha languages, see google’s reCaptcha documentation here.
Customizing Human Challenge Look and Feel
Here is an example of the default Challenge page:
Default Context Configuration
The context object defines the look and feel for the button surroundings.
This example demonstrates the default options for the context properties which can be modified.
window['_' + window._pxAppId] = {
challenge: {
context: {
headerText: 'Before we continue...',
headerColor: '#626364',
headerFontSize: '29px',
headerFontFamily: 'Roboto, sans-serif',
headerFontWeight: 500,
messageText: 'Press & Hold to confirm you are<br>a human (and not a bot).',
messageColor: '#626364',
messageFontSize: '18px',
messageFontFamily: 'Roboto, sans-serif',
// default configuration for the “Please try again” message
fontSize: '12px',
color: '#e50e08'
}
}
};
Challenge Button Customization
The view object defines the look and feel for the challenge button
Note
Height, width and sizes are in pixels.
Here is an example showing the default settings for the view object:
window['_' + window._pxAppId] = {
challenge: {
view: {
//Container
width: 253, // 306 in mobile
height: 50, // 62 in mobile
fillColor: '#21b5ea',
backgroundColor: '#FFFFFF',
//Border
borderColor: '#21b5ea',
borderWidth: 1,
borderRadius: 100,
//Text
textColor: '#21b5ea',
texSize: 20, // 22 in mobile
textFont: 'Roboto, sans-serif',
//Animation
animation: true,
checkmarkThickness: '5px', // '6px' in mobile
checkmarkHeight: '30px', // '35px' in mobile
checkmarkWidth: '11px' // '13px' in mobile
}
}
};
Older block pages have the following default configuration for the view object:
window['_' + window._pxAppId] = {
challenge: {
view: {
//Container
width: 310,
height: 100,
fillColor: '#393939',
backgroundColor: '#FFFFFF',
//Border
borderColor: '#393939',
borderWidth: 7,
borderRadius: 100,
//Text
textColor: '#393939',
texSize: 31,
textFont: 'OpenSans, Helvetica, Arial',
textTransform: 'uppercase',
//Animation
animation: true,
checkmarkThickness: '7px',
checkmarkHeight: '40px',
checkmarkWidth: '15px'
}
}
};
Note
Customers who already provide a challenge customization object should note that upgrading to the new enforcer version which supports the updated challenge page may result in different outputs. For the list of supported enforcer versions see below.
More button customization options
In the following example we detail all possible customization properties for the button:
window['_' + window._pxAppId] = {
challenge: {
view: {
preset: <number>, // for customers upgrading their block pages. available options: 0 (classic button), 1 (new design)
width: <number/string>, //e.g: 100, '100%'
height: <number/string>, //e.g: 80, '99%'
padding: <string>, //e.g "5px 1em 0 2em"
margin: <string>, //e.g "1px 1px 0 0"
parts: <number>, //e.g 300 (default - 150)
css: <array:string>, //e.g ["https://fonts.googleapis.com/css?family=Acme&display=swap"]
backgroundColor: <string>,//e.g "#FF0033"
fillColor: <string>,//e.g "#FF0033"
borderColor: <string>,//e.g "#FF0033"
borderWidth: <number>,//e.g 7
borderRadius: <number>,//e.g 10
buttonBorderWidthOnFocus: <number>,//e.g 10
textColor: <string>,//e.g "#FF33DD"
texSize: <number>,//e.g 15
textFont: <string>, // "Acme"
fontWeight: <number/string>, //example: 100, 'bold'
animation: <boolean>, //e.g. true
checkmarkThickness: <string>, //e.g. "4px"
checkmarkHeight: <string>, //e.g. "20px"
checkmarkWidth: <string>, //e.g. "8px"
targetColor: <string>, //e.g. "#FF00FF"
textTransform: <string> //e.g. "none"
}
}
};
Complete examples
Here is a Full configuration example:
challenge: {
translation: { //Change this if you'd like to add custom translations based on locale
"default": { //overriding default translation
btn: 'Push',
btn_done: 'Done', //once you add a finish text, consider disabling animation on view section
failed: 'Try again'
},
"de": {
"btn": "Drücken und halten", // Press and Hold button
"failed": "Bitte versuchen Sie es erneut.", // Message shown in case of failure in previous solve attempt
"ac_1":"Human Challenge erfordert eine Bestätigung. Bitte drücken und halten Sie die Taste bis zur Bestätigung", // Accessibility - Push and Hold for verification
"ac_2":"Human Challenge abgeschlossen, bitte warten", // Accessibility - "Challenge Ended"
"al_1":"Es scheint ein Verbindungsproblem zu geben. Stellen Sie sicher, dass Sie online sind, und aktualisieren Sie die Seite", // Alert on internet connection issue
"al_2":"Es scheint ein Problem mit Ihrem Browser zu geben. Bitte führen Sie ein Upgrade durch, um PerimeterX Human Challenge zu laden", // Alert on browser issue
"btn_done": "Erledigt" //Done
}
},
view: {
preset: <number>, // available options: 0 (classic button), 1 (new design)
width: <number/string>, //e.g: 100, '100%'
height: <number/string>, //e.g: 80, '99%'
padding: <string>, //e.g "5px 1em 0 2em"
margin: <string>, //e.g "1px 1px 0 0"
parts: <number>, //e.g 300 (default - 150)
css: <array:string>, //e.g ["https://fonts.googleapis.com/css?family=Acme&display=swap"]
backgroundColor: <string>,//e.g "#FF0033"
fillColor: <string>,//e.g "#FF0033"
borderColor: <string>,//e.g "#FF0033"
borderWidth: <number>,//e.g 7
borderRadius: <number>,//e.g 10
buttonBorderWidthOnFocus: <number>,//e.g 10
textColor: <string>,//e.g "#FF33DD"
texSize: <number>,//e.g 15
textFont: <string>, // "Acme"
fontWeight: <number/string>, //example: 100, 'bold'
animation: <boolean>, //e.g. true
checkmarkThickness: <string>, //e.g. "4px"
checkmarkHeight: <string>, //e.g. "20px"
checkmarkWidth: <string>, //e.g. "8px"
targetColor: <string>, //e.g. "#FF00FF"
textTransform: <string> //e.g. "none"
},
context: { // mainly relevant for new block page and modal (Auto-ABR)
logoImgSrc: <string>, //e.g: 'https://awsmp-logos.s3.amazonaws.com/22586a6c-27be-426c-b655-bb9783786286/b550252a8d7a14aebef9938beaaccd35.png' - Note: this option replaces the header by default, so if you want both then make sure to explicitly include both the logoImgSrc and headerText options in your customization object.
fontLinks: <array:string>, //e.g: ['https://fonts.googleapis.com/css2?family=Oswald:wght@200;700&display=swap', 'https://fonts.googleapis.com/css2?family=Edu+TAS+Beginner:wght@400;700&display=swap']
headerText: <string>, //e.g: 'Human verification'
headerColor: <string>, //e.g: '#FF0000'
headerFontSize: <string>, //e.g: '30px'
headerFontFamily: <string>, //e.g: 'Oswald',
headerFontWeight: <string>, //e.g: '700',
messageText: <string>, //e.g: 'Please verify you are a human'
messageColor: <string>, //e.g: '#0000FF'
messageFontSize: <string>, //e.g: '20px'
messageFontFamily: <string>, //e.g: 'Edu TAS Beginner',
messageFontWeight: <string>, //e.g: '400',
failed: { // custom options for the “Please try again” message
fontSize: <string>, //e.g: '14px'
color: <string>, //e.g: '#888888'
}
}
}
And here is a custom configuration example (See the result below):
window['_' + window._pxAppId] = {
challenge: {
context: {
logoImgSrc: 'https://www.perimeterx.com/logos/perimeterx.svg',
messageText: 'Please verify you are a human',
messageColor: '#C71028',
messageFontSize: '28px',
},
translation: {
"default": {
btn: 'Press and Hold',
},
},
view: {
fillColor: "#C71028",
backgroundColor: "#EEEEEE",
borderColor: "#000000",
borderRadius: 10,
borderWidth: 2,
css: ["https://fonts.googleapis.com/css?family=Acme&display=swap"],
textFont: "Acme",
textColor: "#000000",
texSize: 22
}
}
};
Which results with:
Behavior Configuration
Callback Function
Add the _pxOnCaptchaSuccess callback function to the window object (mostly used for [Advanced Blocking Response (ABR)](Advanced Blocking Response (ABR) implementation). The function is called when the Challenge 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 }
Note
If you wish to add the callback to a mobile app challenge (for example, React Native webview), use the
_pxOnMobileCaptchaSuccesscallback instead of_pxOnCaptchaSuccess. The callback signature and usage are identical.
Post solve behavior
After a valid Captcha solve, if the callback function is defined, we will simply call it. In case the callback function is not defined, the Captcha will execute its default behavior, which usually means a simple page reload. The only exception is when a "url" query-param is included in the page URL, in which case the page will change its URL instead (relative URL is supported). Note that the value of the "url" param is expected to be in base64 (e.g. "https://www.example.com?url=YWJj" will redirect to "https://www.example.com/abc").
Captcha Feedback Form
The Captcha Feedback form allows your customers to report an issue they are having trouble solving the challenge. The Captcha Feedback form is included in the HUMAN default Block Pages.
To localize the form, refer to the Localizing section.
Enforcers
The updated challenge page is supported on the following enforcer versions:
Updated 12 days ago