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:
Brandable Localized Landing Pages
Customize the Language Drop-down Menu
Find Localized Landing Pages
To find localized landing pages, follow the steps below:
- From your KnowBe4 console, go to the Phishing tab.
- Click the Landing Pages subtab.
- Click System Templates.
- In the search bar to the right, type “Translatable” and press enter.
- 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.
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.
- Navigate to your System Landing Pages by clicking Phishing > Landing Pages > System Landing Pages.
- Find the desired localized landing page.
- Click on the landing page's title to open the WYSIWYG editor.
- 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.
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.
- To change the color (#F16725) behind the KnowBe4 hand, change the hex color value here:
.hand-side {min-height:100vh;background: #F16725;overflow: auto;}
- 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;} - 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;} - 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;} - 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;}
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.
- 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">
- 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.
- 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 .
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>
- 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]]"> - Cut (Control+X on Windows, or Command+x on Mac) this piece of code from its current location in the source code.
- 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">
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.
<li><label for="de">German</label></li>
<li><label for="en">English - United States</label></li>
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.
Comments
0 comments
Article is closed for comments.