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 dropdown 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 KnowBe4 console, go to the Phishing tab.
2. Click the Landing Pages subtab.
3. Click System Templates. 
4. In the search bar to the right, type “Translatable” and press enter.
5. The search results will display all of our localized landing pages. 

Click here for a complete list of our localized landing pages and the languages they are available in.

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 your System Landing Pages by clicking Phishing > Landing Pages > System Landing Pages.
2. Find the desired localized landing page.
3. Click on the landing page's title to open the WYSIWYG editor.
4. The two modifications explained below will be made in the landing page's source code. Click the Source button at the top-left of the WYSIWYG editor to view the 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: 

• 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)

Use the directions below to customize these localized landing pages.

1. To change the color (#F16725) behind 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

In the source code is a section that lists an input tag for each supported language. Here, you will modify the input tag of two languages:

• The English - United States language option.
• The language you would like to set as your default language option.

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

5. Use your system's Find command (Control+F on Windows, or Command+F on Mac) to locate the following string in the landing page's source code:
   <input class="invis" id="en" name="opts" type="radio">
6. The following table lists all of the languages available for landing page translations and their respective language codes. Use the table to find the language code for your desired default language.
7. Add the HTML attribute (checked="checked", as shown below) to the input tag of your desired default language option.
   <input class="invis" id="en" name="opts" type="radio" checked="checked">
   The following languages are supported:
   

   Language	Language Code
   English	en
   Arabic	sa
   Burmese	mm
   Chinese	cn
   Czech	cz
   Danish	dk
   Dutch	nl
   Finnish	fi
   French - France	fr
   French - Canada	ca
   German	de
   Greek	gr
   Hindi	in
   Hungarian	hu
   Indonesian	id
   Italian	it
   Japanese	jp
   Korean	kr
   Malay	my
   Norwegian	no
   Polish	pl
   Portuguese - Portugal	pt
   Russian	ru
   Spanish - European	es
   Spanish - Latin America	mx
   Swedish	se
   Thai	th
   Turkish	tr
   Ukrainian	ua
   Vietnamese	vn

If you would like the newly selected default language to display at the top of the drop-down, continue to modification 2 .

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 list. 

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>

8. Locate this section of code for the language you've determined as your new default.
   TIP: Use your Find command (Control+F on Windows, or Command+F on Mac) to search for <li><label for="[[lanuage code]]">
9. Cut (Control+X on Windows, or Command+x on Mac) this piece of code from its current location in the source code.
10. Paste (Control+V on Windows, or Command+V on Mac) the code before the English (en) code (shown in the example above).
    For example, if you're making German the default language of your landing page, you will 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>
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. 

Save your changes and preview your landing page to ensure the desired language displays as the default. Be sure to add your custom landing page to a category in order to use it in phishing campaigns. 

Back to Top