Human Challenge Customizations and Configurations

1
window['_<YOUR_APPID>'] = {
2
    challenge: {
3
        context: {
4
            // customization options for the look and feel of the button surroundings (Logo, Header etc)
5
        },
6
        translation: {
7
            // translation\localization customization
8
        },
9
        view: {
10
            // challenge button options for look and feel (colors, fonts etc)
11
        }
12
    }
13
};

1
window._pxSelectedLocale = '<languageCode>';

1
window['_<APPID>'] = {
2
    challenge: {
3
        translation: {
4
            'default': {
5
                'btn': 'Press & Hold', //button text
6
                'failed': 'Please try again', // challenge failed message
7
                'ctx_hdr': 'Before we continue...', // modal header
8
                'ctx_msg': 'Press & Hold to confirm you are<br />a human (and not a bot).', //modal main message, supports html tags
9
                'ctx_rid': 'Reference ID',
10
                // translations for accessible users
11
                'ac_1': 'Human Challenge requires verification. Please press and hold the button until verified',
12
                'ac_1a': 'Human Challenge requires verification. Please press and hold the button until verified, press tab for an accessible version',
13
                'ac_1b': 'Human Challenge requires verification. Please press the button once, wait for confirmation, and press again when prompted',
14
                'ac_2': 'Human Challenge completed, please wait',
15
                // accessibility email based solution translations
16
                'ac_3': 'Accessible challenge',
17
                'ac_4': 'To continue, you will need a temporary verification code.',
18
                'ac_5': 'Please enter your email address.',
19
                'ac_6': 'We just sent you a temporary verification code.',
20
                'ac_7': 'Enter your code below (Check your inbox for an email from [from])',
21
                'ac_8': 'Email address',
22
                'ac_9': "Didn't receive an email?",
23
                'ac_10': 'Loading',
24
                'ac_11': 'Submit',
25
                'ac_12': 'Verification code',
26
                'ac_13': 'Code digit',
27
                'ac_14': 'Human verification challenge',
28
                'ac_15': 'Accessible human challenge',
29
                'ac_16': 'Human challenge',
30
                'ac_17': 'Valid email required',
31
                'ac_18': 'Please wait',
32
                'ac_19': 'Press again',
33
                // identified problems translations
34
                'al_1': "There seems to be a connection issue. Please make sure you're online, and then refresh the page",
35
                'al_2': 'There seems to be a problem with your browser. Please upgrade to load PerimeterX Human Challenge'
36
            }
37
        }
38
    }
39
};

1
window['_<APPID>'] = {
2
    challenge: {
3
        translation: {
4
            'de': {
5
                'btn': 'Länger gedrückt halten', // button text
6
                'failed': 'Bitte erneut versuchen', // challenge failed message
7
                'ctx_hdr': 'Bevor wir fortfahren ...', // modal header
8
                '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
9
                'ctx_rid': 'Referenz-ID',
10
                // translations for accessible users
11
                'ac_1': 'Human Challenge muss überprüft werden. Bitte den Button länger gedrückt halten, bis die Verifizierung erfolgt',
12
                'ac_1a':
13
                    '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',
14
                '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.',
15
                'ac_2': 'Human Challenge ist abgeschlossen. Bitte warten',
16
                // accessibility email based solution translations
17
                'ac_3': 'Zugängliche Herausforderung',
18
                'ac_4': 'Um fortzufahren ist ein temporärer Verifizierungscode erforderlich.',
19
                'ac_5': 'Bitte geben Sie Ihre E-Mail-Adresse ein.',
20
                'ac_6': 'Wir haben Ihnen gerade einen temporären Verifizierungscode gesandt.',
21
                'ac_7': 'Geben Sie unten Ihren Code ein (Suchen Sie in Ihrer Inbox nach einer E-Mail von [from])',
22
                'ac_8': 'E-Mail-Adresse',
23
                'ac_9': 'Sie haben keine E-Mail erhalten?',
24
                'ac_10': 'Wird geladen',
25
                'ac_11': 'Absenden',
26
                'ac_12': 'Verifizierungscode',
27
                'ac_13': 'Kennziffer',
28
                'ac_14': 'Herausforderung zur menschlichen Verifizierung',
29
                'ac_15': 'Zugängliche menschliche Herausforderung',
30
                'ac_16': 'Menschliche Herausforderung',
31
                'ac_17': 'Gültige E-Mail-Adresse ist erforderlich',
32
                'ac_18': 'Bitte warten',
33
                'ac_19': 'Erneut drücken',
34
                // identified problems translations
35
                'al_1': 'Anscheinend gibt ein Verbindungsproblem. Bitte stellen Sie sicher, online zu sein, und aktualisieren Sie dann die Seite',
36
                'al_2': 'Anscheinend gibt es ein Problem mit Ihrem Browser. Bitte aktuaisieren Sie diesen, um PerimeterX Human Challenge zu laden'
37
            },
38
            'nl': {
39
                'btn': 'Ingedrukt houden', // button text
40
                'failed': 'Probeer het opnieuw', // challenge failed message
41
                'ctx_hdr': 'Voordat we verder gaan...', // modal header
42
                'ctx_msg': 'Houd ingedrukt om te bevestigen dat<br />je een mens bent (en geen bot).', //modal main message, supports html tags
43
                'ctx_rid': 'Referentie-ID',
44
                // translations for accessible users
45
                'ac_1': 'Human Challenge vereist verificatie. Houd de knop ingedrukt tot je geverifieerd bent',
46
                'ac_1a': 'Human Challenge vereist verificatie. Houd de knop ingedrukt tot je geverifieerd bent, druk op tab voor een toegankelijke versie',
47
                'ac_1b': 'Human Challenge vereist verificatie. Druk één keer op de knop, wacht op bevestiging en druk opnieuw wanneer daarom wordt gevraagd',
48
                'ac_2': 'Human Challenge voltooid, even geduld',
49
                // accessibility email based solution translations
50
                'ac_3': 'Toegankelijke wedstrijd',
51
                'ac_4': 'Je hebt een tijdelijke verificatiecode nodig om door te kunnen gaan.',
52
                'ac_5': 'Voer je e-mailadres in.',
53
                'ac_6': 'We hebben je zojuist een tijdelijke verificatiecode gestuurd.',
54
                'ac_7': 'Voer hieronder je code in (controleer je inbox op een e-mail van [from])',
55
                'ac_8': 'E-mailadres',
56
                'ac_9': 'Geen e-mail ontvangen?',
57
                'ac_10': 'Bezig met laden',
58
                'ac_11': 'Verzenden',
59
                'ac_12': 'Verificatiecode',
60
                'ac_13': 'Codecijfer',
61
                'ac_14': 'Menselijke verificatiewedstrijd',
62
                'ac_15': 'Toegankelijke menselijke wedstrijd',
63
                'ac_16': 'Menselijke wedstrijd',
64
                'ac_17': 'Geldig e-mailadres vereist',
65
                'ac_18': 'Even geduld',
66
                'ac_19': 'Opnieuw indrukken',
67
                // identified problems translations
68
                'al_1': 'Er lijkt een verbindingsprobleem te zijn. Controleer of je online bent en vernieuw dan de pagina',
69
                'al_2': 'Er lijkt een probleem te zijn met je browser. Upgrade om PerimeterX Human Challenge te laden'
70
            }
71
            // ... add more
72
        }
73
    }
74
};

1
window._pxSelectedLocale = 'default';
2
window['_<APPID>'] = {
3
    challenge: {
4
        translation: {
5
            'default': {
6
                'btn': 'Press & Hold', //button text
7
                'failed': 'Please try again', // challenge failed message
8
                // translations for accessible users
9
                'ac_1': 'Human Challenge requires verification. Please press and hold the button until verified',
10
                'ac_1a': 'Human Challenge requires verification. Please press and hold the button until verified, press tab for an accessible version',
11
                'ac_1b': 'Human Challenge requires verification. Please press the button once, wait for confirmation, and press again when prompted',
12
                'ac_2': 'Human Challenge completed, please wait',
13
                // accessibility email based solution translations
14
                'ac_3': 'Accessible challenge',
15
                'ac_4': 'To continue, you will need a temporary verification code.',
16
                'ac_5': 'Please enter your email address.',
17
                'ac_6': 'We just sent you a temporary verification code.',
18
                'ac_7': 'Enter your code below (Check your inbox for an email from [from])',
19
                'ac_8': 'Email address',
20
                'ac_9': "Didn't receive an email?",
21
                'ac_10': 'Loading',
22
                'ac_11': 'Submit',
23
                'ac_12': 'Verification code',
24
                'ac_13': 'Code digit',
25
                'ac_14': 'Human verification challenge',
26
                'ac_15': 'Accessible human challenge',
27
                'ac_16': 'Human challenge',
28
                'ac_17': 'Valid email required',
29
                'ac_18': 'Please wait',
30
                'ac_19': 'Press again'
31
            }
32
        }
33
    },
34
    translation: {
35
        'default': [
36
            {
37
                'selector': '.page-title h1',
38
                'text': 'Please verify you are a human'
39
            },
40
            {
41
                'selector': '.content-wrapper p:nth-of-type(1)',
42
                'text': 'Access to this page has been denied because we believe you are using automation tools to browse the website.'
43
            },
44
            {
45
                'selector': '.content-wrapper p:nth-of-type(2)',
46
                'text': 'This may happen as a result of the following:'
47
            },
48
            {
49
                'selector': '.content-wrapper li:nth-of-type(1)',
50
                'text': 'Javascript is disabled or blocked by an extension (ad blockers for example)'
51
            },
52
            {
53
                'selector': '.content-wrapper li:nth-of-type(2)',
54
                'text': 'Your browser does not support cookies'
55
            },
56
            {
57
                'selector': '.content-wrapper p:nth-of-type(3)',
58
                'text': 'Please make sure that Javascript and cookies are enabled on your browser and that you are not blocking them from loading.'
59
            }
60
        ]
61
    }
62
};

1
window['_<APPID>'] = {
2
    challenge: {
3
        translation: {
4
            'de': {
5
                'btn': 'Länger gedrückt halten', // button text
6
                'failed': 'Bitte erneut versuchen', // challenge failed message
7
                // translations for accessible users
8
                'ac_1': 'Human Challenge muss überprüft werden. Bitte den Button länger gedrückt halten, bis die Verifizierung erfolgt',
9
                'ac_1a':
10
                    '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',
11
                '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.',
12
                'ac_2': 'Human Challenge ist abgeschlossen. Bitte warten',
13
                // accessibility email based solution translations
14
                'ac_3': 'Zugängliche Herausforderung',
15
                'ac_4': 'Um fortzufahren ist ein temporärer Verifizierungscode erforderlich.',
16
                'ac_5': 'Bitte geben Sie Ihre E-Mail-Adresse ein.',
17
                'ac_6': 'Wir haben Ihnen gerade einen temporären Verifizierungscode gesandt.',
18
                'ac_7': 'Geben Sie unten Ihren Code ein (Suchen Sie in Ihrer Inbox nach einer E-Mail von [from])',
19
                'ac_8': 'E-Mail-Adresse',
20
                'ac_9': 'Sie haben keine E-Mail erhalten?',
21
                'ac_10': 'Wird geladen',
22
                'ac_11': 'Absenden',
23
                'ac_12': 'Verifizierungscode',
24
                'ac_13': 'Kennziffer',
25
                'ac_14': 'Herausforderung zur menschlichen Verifizierung',
26
                'ac_15': 'Zugängliche menschliche Herausforderung',
27
                'ac_16': 'Menschliche Herausforderung',
28
                'ac_17': 'Gültige E-Mail-Adresse ist erforderlich',
29
                'ac_18': 'Bitte warten',
30
                'ac_19': 'Erneut drücken'
31
            }
32
            // add more
33
        }
34
    },
35
    translation: {
36
        'de': [
37
            {
38
                'selector': '.page-title h1',
39
                // Please verify you are a human
40
                'text': 'Bitte vergewissern Sie sich, dass Sie ein Mensch sind'
41
            },
42
            {
43
                'selector': '.content-wrapper p:nth-of-type(1)',
44
                // Access to this page has been denied because we believe you are using automation tools to browse the website.
45
                'text': 'Der Zugriff auf diese Seite wurde verweigert, da wir glauben, dass Sie zum Durchsuchen der Website Automatisierungstools verwenden.'
46
            },
47
            {
48
                'selector': '.content-wrapper p:nth-of-type(2)',
49
                // This may happen as a result of the following:
50
                'text': 'Dies kann folgende Ursachen haben:'
51
            },
52
            {
53
                'selector': '.content-wrapper li:nth-of-type(1)',
54
                // Javascript is disabled or blocked by an extension (ad blockers for example)
55
                'text': 'Javascript ist deaktiviert oder durch eine Erweiterung (z. B. Werbeblocker) blockiert.'
56
            },
57
            {
58
                'selector': '.content-wrapper li:nth-of-type(2)',
59
                // Your browser does not support cookies
60
                'text': 'Ihr Browser unterstützt keine Cookies'
61
            },
62
            {
63
                'selector': '.content-wrapper p:nth-of-type(3)',
64
                // Please make sure that Javascript and cookies are enabled on your browser and that you are not blocking them from loading.
65
                'text': 'Bitte stellen Sie sicher, dass Javascript und Cookies in Ihrem Browser aktiviert sind und dass Sie deren Laden nicht blockieren.'
66
            }
67
        ]
68
        // add more
69
    }
70
};

1
window['_' + window._pxAppId] = {
2
   challenge: {
3
      context: {
4
          headerText: 'Before we continue...',
5
          headerColor: '#626364',
6
          headerFontSize: '29px',
7
          headerFontFamily: 'Roboto, sans-serif',
8
          headerFontWeight: 500,
9
          messageText: 'Press & Hold to confirm you are<br />a human (and not a bot).',
10
          messageColor: '#626364',
11
          messageFontSize: '18px',
12
          messageFontFamily: 'Roboto, sans-serif',
13
          pageBackground: '#fafbfc', // relevant to the block page
14
          failed: { // relevant to the “Please try again” message
15
             fontSize: '12px',
16
             color: '#e50e08'
17
          }
18
      }
19
   }
20
};

1
window['_' + window._pxAppId] = {
2
   challenge: {
3
      view: {
4
          //Container
5
          width: 253, // 306 in mobile
6
          height: 50, // 62 in mobile
7
          fillColor: '#21b5ea',
8
          backgroundColor: '#FFFFFF',
9
          //Border
10
          borderColor: '#21b5ea',
11
          borderWidth: 1,
12
          borderRadius: 100,
13
          focusRingColor: '#6283FE',
14
          //Text
15
          textColor: '#21b5ea',
16
          texSize: 20, // 22 in mobile
17
          textFont: 'Roboto, sans-serif',
18
          //Animation
19
          animation: true,
20
          checkmarkThickness: '5px', // '6px' in mobile
21
          checkmarkHeight: '30px', // '35px' in mobile
22
          checkmarkWidth: '11px' // '13px' in mobile
23
      }
24
   }
25
};

1
window['_' + window._pxAppId] = {
2
   challenge: {
3
      view: {
4
          //Container
5
          width: 310,
6
          height: 100,
7
          fillColor: '#393939',
8
          backgroundColor: '#FFFFFF',
9
          //Border
10
          borderColor: '#393939',
11
          borderWidth: 7,
12
          borderRadius: 100,
13
          focusRingColor: '#6283FE',
14
          //Text
15
          textColor: '#393939',
16
          texSize: 31,
17
          textFont: 'OpenSans, Helvetica, Arial',
18
          textTransform: 'uppercase',
19
          //Animation
20
          animation: true,
21
          checkmarkThickness: '7px',
22
          checkmarkHeight: '40px',
23
          checkmarkWidth: '15px'
24
      }
25
   }
26
};

1
window['_' + window._pxAppId] = {
2
   challenge: {
3
      view: {
4
          preset: <number>, // for customers upgrading their block pages. available options: 0 (classic button), 1 (new design)
5
          width: <number/string>, //e.g. 100, '100%'
6
          height: <number/string>, //e.g. 80, '99%'
7
          padding: <string>, //e.g. "5px 1em 0 2em"
8
          margin: <string>, //e.g. "1px 1px 0 0"
9
          parts: <number>, //e.g. 300 (default - 150)
10
          css: <array:string>, //e.g. ["https://fonts.googleapis.com/css?family=Acme&display=swap"]
11
          backgroundColor: <string>, //e.g. "#FF0033"
12
          fillColor: <string>, //e.g. "#FF0033"
13
          borderColor: <string>, //e.g. "#FF0033"
14
          borderWidth: <number>, //e.g. 7
15
          borderRadius: <number>, //e.g. 10
16
          focusRingColor: <string>, //e.g. "#FF0033"
17
          buttonBorderWidthOnFocus: <number>, //e.g. 10
18
          textColor: <string>, //e.g. "#FF33DD"
19
          texSize: <number>, //e.g. 15
20
          textFont: <string>, //e.g. "Acme"
21
          fontWeight: <number/string>, //e.g. 100, 'bold'
22
          animation: <boolean>, //e.g. true
23
          checkmarkThickness: <string>, //e.g. "4px"
24
          checkmarkHeight: <string>, //e.g. "20px"
25
          checkmarkWidth: <string>, //e.g. "8px"
26
          targetColor: <string>, //e.g. "#FF00FF"
27
          textTransform: <string> //e.g. "none"
28
      }
29
   }
30
};

1
challenge: {
2
    translation: { //Change this if you'd like to add custom translations based on locale
3
        "default": { //overriding default translation
4
            btn: 'Push',
5
            btn_done: 'Done', //once you add a finish text, consider disabling animation on view section
6
            failed: 'Try again'
7
        },
8
        "de": {
9
            "btn": "Drücken und halten", // Press and Hold button
10
            "failed": "Bitte versuchen Sie es erneut.", // Message shown in case of failure in previous solve attempt
11
            "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
12
            "ac_2":"Human Challenge abgeschlossen, bitte warten", // Accessibility - "Challenge Ended"
13
            "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
14
            "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
15
            "btn_done": "Erledigt" //Done
16
         }
17
     },
18
     view: {
19
          preset: <number>, // available options: 0 (classic button), 1 (new design)
20
          width: <number/string>, //e.g. 100, '100%'
21
          height: <number/string>, //e.g. 80, '99%'
22
          padding: <string>, //e.g. "5px 1em 0 2em"
23
          margin: <string>, //e.g. "1px 1px 0 0"
24
          parts: <number>, //e.g. 300 (default - 150)
25
          css: <array:string>, //e.g. ["https://fonts.googleapis.com/css?family=Acme&display=swap"]
26
          backgroundColor: <string>, //e.g. "#FF0033"
27
          fillColor: <string>, //e.g. "#FF0033"
28
          borderColor: <string>, //e.g. "#FF0033"
29
          borderWidth: <number>, //e.g. 7
30
          borderRadius: <number>, //e.g. 10
31
          focusRingColor: <string>, //e.g. "#FF0033"
32
          buttonBorderWidthOnFocus: <number>, //e.g. 10
33
          textColor: <string>, //e.g. "#FF33DD"
34
          texSize: <number>, //e.g. 15
35
          textFont: <string>, //e.g. "Acme"
36
          fontWeight: <number/string>, //e.g. 100, 'bold'
37
          animation: <boolean>, //e.g. true
38
          checkmarkThickness: <string>, //e.g. "4px"
39
          checkmarkHeight: <string>, //e.g. "20px"
40
          checkmarkWidth: <string>, //e.g. "8px"
41
          targetColor: <string>, //e.g. "#FF00FF"
42
          textTransform: <string> //e.g. "none"
43
     },
44
     context: { // mainly relevant for the block page and modal (Auto-ABR)
45
          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.
46
          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']
47
          headerText: <string>, //e.g. 'Human verification'
48
          headerColor: <string>, //e.g. '#FF0000'
49
          headerFontSize: <string>, //e.g. '30px'
50
          headerFontFamily: <string>, //e.g. 'Oswald'
51
          headerFontWeight: <string>, //e.g. '700'
52
          messageText: <string>, //e.g. 'Please verify you are a human'
53
          messageColor: <string>, //e.g. '#0000FF'
54
          messageFontSize: <string>, //e.g. '20px'
55
          messageFontFamily: <string>, //e.g. 'Edu TAS Beginner'
56
          messageFontWeight: <string>, //e.g. '400'
57
          pageBackground: <string>, //e.g. 'linear-gradient(to bottom, #185d91, #2d3480)'
58
          modalBackgroundColor: <string>, //e.g. '#1e3a6d'
59
          failed: { // custom options for the “Please try again” message
60
              fontSize: <string>, //e.g. '14px'
61
              color: <string>, //e.g. '#888888'
62
          }
63
     }
64
}

1
window['_' + window._pxAppId] = {
2
   challenge: {
3
      context: {
4
         logoImgSrc: 'https://www.perimeterx.com/logos/perimeterx.svg',
5
         messageText: 'Please verify you are a human',
6
         messageColor: '#C71028',
7
         messageFontSize: '28px',
8
      },
9
      translation: {
10
         "default": {
11
            btn: 'Press and Hold',
12
         },
13
      },
14
      view: {
15
         fillColor: "#C71028",
16
         backgroundColor: "#EEEEEE",
17
         borderColor: "#000000",
18
         borderRadius: 10,
19
         borderWidth: 2,
20
         css: ["https://fonts.googleapis.com/css?family=Acme&display=swap"],
21
         textFont: "Acme",
22
         textColor: "#000000",
23
         texSize: 22
24
      }
25
   }
26
};

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