How to Use and Customize Localized Landing Pages

We offer a number of localized landing pages so that users who click on a phishing test link can view the page in their preferred language. When viewing a localized landing page, users can change the language from the default using the drop-down menu in the top-right corner.

If you're looking for Browser Language Detecting landing pages, please see our Landing Page Category Glossary.

This article outlines how to set a different default language for a localized landing page and how to customize select localized landing pages to match your organization's brand. 

Use the links below to learn more about our standard localized landing pages. 

Jump to:

Find Localized Landing Pages

Editing System Landing Pages

Brandable Localized Landing Pages

Change the Default Language

Customize the Language Drop-Down Menu

Find Localized Landing Pages

To find localized landing pages, follow the steps below:

1. From your KMSAT console, go to the Phishing tab.
2. Click the Landing Pages subtab.
3. Click System Landing Pages. 
4. In the search bar to the right, enter “Translatable” and click the magnifying glass icon.
   The search results will display all of our localized landing pages. 

For a complete list of our localized landing pages and the languages they are available in, see the tables below:

Back to top

Editing System Landing Pages

You can edit the majority of our built-in system landing pages. When you save any edits to a built-in landing page, this customized copy will be saved under the My Landing Pages area of the Landing Pages tab. Follow the steps below to edit a system landing page:

1. Navigate to Phishing > Landing Pages > System Landing Pages.
2. Find the desired localized landing page.
3. Click the landing page's title to open the What You See Is What You Get (WYSIWYG) editor.
4. Click the Source button at the top-left of the WYSIWYG editor to view the source code. The two modifications explained below will be made in the landing page's source code.

Continue these steps in the sections below.

Back to top

Brandable Localized Landing Pages

The localized landing pages that can be branded are listed below: 

• Basic "Oops!" Landing Page (Translatable)
• Basic "Oops!" Landing Page (Translatable) (Branded)
• SEI Landing Page (Translatable) (Platinum/Diamond Only)
• SEI Landing Page (Translatable) (Branded) (Platinum/Diamond Only)
• SEI Landing Page with 'Rules to Stay Safe Online' (Translatable) (Platinum/Diamond Only)
• SEI Landing Page with 'Rules to Stay Safe Online' (Translatable) (Branded) (Platinum/Diamond Only)

Follow the steps below to customize these localized landing pages:

1. To change the color (#F16725) around the KnowBe4 hand, change the hex color value here:
   

   .hand-side {min-height:100vh;background: #F16725;overflow: auto;}

2. To change the main color (#FFFFFF) and outline color (#666666) of the KnowBe4 hand, change the hex color values here:
   

   .outer-stroke {fill:#666666;}
   .hand-fill {fill:#FFFFFF;}
   .inner-stroke {fill:none;stroke:#666666;stroke-width:20.654;}

3. To change the color (#F16725) and font (Open Sans) of the rule numbers, change the hex color values and font-family here:
   

   .rule-number-1 {font-size: 1.75em;font-family: 'Open Sans', sans-serif;font-weight: 300;text-align: center;color: #F16725;}
   .rule-number-2 {font-size: 1.75em;font-family: 'Open Sans', sans-serif;font-weight: 300;text-align: center;color: #F16725;}
   .rule-number-3 {font-size: 1.75em;font-family: 'Open Sans', sans-serif;font-weight: 300;text-align: center;color: #F16725;}

4. To change the background color (#F16725) and the text color (#ffffff) of the rules when hovered over, change the hex color values here:
   

   .rule-container:hover {box-shadow: inset 0 0 0 3px #F16725;transition: 300ms;border: 0px; background: #F16725; color: #ffffff;}
   .rule-container:hover .rule-text {color: #ffffff;}
   .rule-container:hover .rule-number-1 {color: #ffffff;}
   .rule-container:hover .rule-number-2 {color: #ffffff;}
   .rule-container:hover .rule-number-3 {color: #ffffff;}

5. To change the background color (#676767) of the disclaimer message, change the hex color value here:
   

   .disclaimer {font-family: 'Open Sans', sans-serif;font-weight: normal;font-size: .60em;color: #ffffff;background: #676767;left: 0;bottom: 0;right: 0;width: 100%;padding: 8px 18px;height: auto;position:fixed;overflow: hidden;}

Back to top

Change the Default Language

There is a section in the source code that lists an input tag for each supported language. Here, you can modify the input tag of two languages: the English - United States language option and the language you would like to set as your default language option.

Inside of the English - United States input tag, remove the checked attribute.

1. Use your system's Find command, which is Control+F on Windows or Command+F on MacBook, to locate the following string in the landing page's source code:
   <input class="invis" id="en" name="opts" type="radio">
2. Use the table below to find the language code for your desired default language. The table lists all of the languages available for landing page translations and their respective language codes.
3. Add the checked HTML attribute to the input tag of your desired language option. For an example of this attribute, see the code below:
   <input class="invis" id="en" name="opts" type="radio" checked="checked">
   The following languages are supported:

If you would like the newly selected default language to display at the top of the drop-down menu, continue to the next section of the article.

Back to top

Customize the Language Drop-Down Menu

Now that you've changed the default language of the landing page, you may want to modify the drop-down menu to display the same language as the first option on the drop-down menu. 

Each language in the drop-down menu has a corresponding section of code. The code for the English language is shown as an example below: 

<li><label for="en">English - United States</label></li>

To customize the language drop-down menu, follow the steps below:

1. Locate this section of code for the language you've determined as your new default.
   
   Tip: Use your Find command, which is Control+F on Windows or Command+F on MacBook, to search for <li><label for="[[lanuage code]]">.
2. Use your Cut command, which is Control+X on Windows or Command+x on MacBook, on this piece of code from its current location in the source code.
3. Use your Paste command, which is Control+V on Windows or Command+V on MacBook, the code before the English (en) code. See the example code shown above these steps.
   For example, if you would like to make German the default language of your landing page, you would cut and then paste the code in red between the black segments of code, as shown below:
   <ul class="select-options">
<li><label for="de">German</label></li>
<li><label for="en">English - United States</label></li>

   Note: Pasting this code before the English portion places your default language at the top of the drop-down menu list. The order of these code segments determines the order of the options in the drop-down menu. 
4. Click Update.
5. If you want to preview your landing page to ensure the desired language displays as the default, click the eye icon under the Actions column.

Be sure to add your custom landing page to a category in order to use it in phishing campaigns. 

Back to top