Customize Challenge look & feel

Suggest Edits

You can customize how the Human Challenge looks and behaves from the Challenge Look & Feel settings. This lets you update the Challenge to match your organization’s branding, adjust the Challenge’s configurations, and adapt the Challenge to your business’ needs.

You can learn more about the available customizations in this article.

Configuration from the Challenge Editor

You can do basic customization and configuration directly from the Challenge Editor. This lets you select each component you want to edit and adjust them with a live preview.

Navigate to Sightline Cyberfraud Defense > Settings > Mitigation > Challenge Settings.
Click the Challenge Look & Feel tab.
Click Open Challenge Editor.
Click each component you want to make changes to.
Make your changes. You can see a preview of your changes in the Challenge Design area. See the sections below for details on how to update each component.
After you make all of your changes, click Save Changes.
Copy the Challenge JavaScript, insert it into the px_js_ref configuration in your Enforcer, and deploy your Enforcer. See your Enforcer’s specific configuration documentation for more information.

Below are all the design changes you can make to the Challenge. You can always reset to the default design with the Revert to Default button.

Logo

You can add a logo URL to show the image on the Challenge. The URL must be 1000 characters or less. The image will be resized to be 40px tall, but it will keep its original aspect ratio.

Main header

This customizes the header text at the top of the Challenge. This is the “Before we continue…” text by default. You can customize the text style, such as the font or text color, or the text itself to say something different.

You can also toggle off the main header. However, if you do, you must provide a logo.

Message

This customizes the instruction text. This is the “Press & Hold to confirm you are a human (and not a bot).” text by default. You can customize the text style, such as the font or text color, or the text itself to say something different.

Challenge button

This customizes the “Press & Hold” Challenge button. You can customize the size, shape, position, and color of the button as well as the text styling and text of the message in the button.

Custom web fonts

If your preferred font is not supported by the Editor by default, you can add your own web font by clicking . This lets you link to a Google font family or a CSS file that defines the custom font family.

Challenge JavaScript configurations

If you need more advanced customization, you can configure the Challenge JavaScript directly to update each component. You must upload this JavaScript into your Enforcer’s px_js_ref configuration and redeploy it for your changes to take effect.

You can view available configurations below.

Logo, header, and message properties

The context object properties determine the look and content of the Challenge logo, header, and messages. The following are all the available properties with their default values.

window._PXAPPID = { // replace with your application ID
    "challenge": {
        "context": {
            "logoImgSrc": "LOGO_URL"
            "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",
            "pageBackground": "#fafbfc", // changes the page background color
            "failed": { // properties for “Please try again” message upon Challenge failure
                "fontSize": "12px",
                "color": "#e50e08"
            }
        }
    }
};

Challenge button properties

The view object properties determine the look and content of the Challenge button itself. The following are all the available properties with their default values.

window._PXAPPID = { // replace with your application ID
    "challenge": {
        "view": {
            //Container
            "width": 253, // 306 in mobile
            "height": 50, // 62 in mobile
            "fillColor": "#21b5ea",
            "backgroundColor": "#FFFFFF",
            //Border
            "borderColor": "#21b5ea",
            "borderWidth": 1,
            "borderRadius": 100,
            "focusRingColor": "#6283FE",
            //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
        }
    }
};

Translation properties

The Human Challenge automatically localizes the text based on the user’s browser. However, you can force a specific language using the translation object. You have a couple of options here:

You can define the default object, which forces the translation across all text regardless of the browser locale
Redefine some or all of the locale translations

📘
Note
When configuring custom translations, we recommend using ctx_hdr instead of headerText. headerText will override other translations and should only be used when other translations are not applied.

The following are all the available properties with the English defaults (the default object) and an example with German (country code de).

window._PXAPPID = {
    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_rid': 'Reference ID',
                // 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'
            }
        }
    }
};

window._PXAPPID = {
    "challenge": {
        "translation": {
            'de': { // set language to German
                '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_rid': 'Referenz-ID',
                // 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_rid': 'Referentie-ID',
                // 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
        }
    }
};

Supported languages

The Human Challenge supports the following languages.

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`

Full configuration example

window._PXAPPID = {
    "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
            "focusRingColor": <string>, //e.g. "#FF0033"
            "buttonBorderWidthOnFocus": <number>, //e.g. 10
            "textColor": <string>, //e.g. "#FF33DD"
            "texSize": <number>, //e.g. 15
            "textFont": <string>, //e.g. "Acme"
            "fontWeight": <number/string>, //e.g. 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 the 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'
            "pageBackground": <string>, //e.g. 'linear-gradient(to bottom, #185d91, #2d3480)'
            "modalBackgroundColor": <string>, //e.g. '#1e3a6d'
            "failed": { // custom options for the “Please try again” message
                "fontSize": <string>, //e.g. '14px'
                "color": <string>, //e.g. '#888888'
            }
        }
    }
}

Updated 9 days ago

Configuration from the Challenge Editor

Logo

Main header

Message

Challenge button

Custom web fonts

Challenge JavaScript configurations

Logo, header, and message properties

Challenge button properties

Translation properties

📘Note

Supported languages

Full configuration example

📘
Note