Customize Challenge look & feel

1
window._PXAPPID = { // replace with your application ID
2
    "challenge": {
3
        "context": {
4
            "logoImgSrc": "LOGO_URL"
5
            "headerText": "Before we continue...",
6
            "headerColor": "#626364",
7
            "headerFontSize": "29px",
8
            "headerFontFamily": 'Roboto, sans-serif',
9
            "headerFontWeight": 500,
10
            "messageText: "Press & Hold to confirm you are<br />a human (and not a bot).",
11
            "messageColor": "#626364",
12
            "messageFontSize": "18px",
13
            "messageFontFamily": "Roboto, sans-serif",
14
            "pageBackground": "#fafbfc", // changes the page background color
15
            "failed": { // properties for “Please try again” message upon Challenge failure
16
                "fontSize": "12px",
17
                "color": "#e50e08"
18
            }
19
        }
20
    }
21
};

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