Add language localization capabilities to the viewer by switching currently supported languages or adding your own.
This demo allows you to:
To add language localization to WebViewer UI:
Step 1: Get started with WebViewer in your preferred web stack
Step 2: Add the ES6 JavaScript sample code provided in this guide
Once you generate your license key, it will automatically be included in your sample code below.
Apryse collects some data regarding your usage of the SDK for product improvement.
The data that Apryse collects include:
For clarity, no other data is collected by the SDK and Apryse has no access to the contents of your documents.
If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.
1// ES6 Compliant Syntax
2// GitHub Copilot (VS Code Extension) - GPT-4 model - July 29, 2025
3// File name: index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7function initializeWebViewer() {
8 WebViewer(
9 {
10 path: '/lib',
11 initialDoc: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
12 enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
13 licenseKey: 'YOUR_LICENSE_KEY', // Replace with your license key
14 },
15 document.getElementById('viewer')
16 ).then((instance) => {
17 // Default to the first language in the languages list (English).
18 UIElements.selectedLanguage = UIElements.languages[0];
19
20 // Customize the webviewer left panel
21 UIElements.customizeUI(instance);
22
23 instance.UI.openElements(['menuOverlay']);
24
25 // Listen for language change events
26 instance.UI.addEventListener('languageChanged', e => {
27 instance.UI.openElements(['menuOverlay']);
28 // Log the previous and new language codes to the console
29 // console.log(e.detail.prev);
30 // console.log(e.detail.next);
31 });
32
33 console.log('WebViewer loaded successfully.');
34 }).catch((error) => {
35 console.error('Failed to initialize WebViewer:', error);
36 });
37};
38
39// Function to handle language selection
40window.SelectLanguage = (instance, language, matchingButton) => {
41 UIElements.languages.forEach((lang) => lang.button.style.backgroundColor = 'blue');
42
43 // Set the selected language and load the corresponding document
44 matchingButton.style.backgroundColor = 'darkblue';
45 UIElements.selectedLanguage = language;
46 instance.UI.setLanguage(UIElements.selectedLanguage.id);
47};
48
49//helper function to load the ui-elements.js script
50function loadUIElementsScript() {
51 return new Promise((resolve, reject) => {
52 if (window.UIElements) {
53 console.log('UIElements already loaded');
54 resolve();
55 return;
56 }
57 const script = document.createElement('script');
58 script.src = '/showcase-demos/language-switcher/ui-elements.js';
59 script.onload = function () {
60 console.log('✅ UIElements script loaded successfully');
61 resolve();
62 };
63 script.onerror = function () {
64 console.error('Failed to load UIElements script');
65 reject(new Error('Failed to load ui-elements.js'));
66 };
67 document.head.appendChild(script);
68 });
69}
70
71// Load UIElements script first, then initialize WebViewer
72loadUIElementsScript().then(() => {
73 initializeWebViewer();
74}).catch((error) => {
75 console.error('Failed to load UIElements:', error);
76});
1// ES6 Compliant Syntax
2// Copilot name: GitHub Copilot, version: 1.0.0, model: GPT-4, version: 2024-06, date: 2025-10-23
3// File: showcase-demos/language-switcher/ui-elements.js
4
5// Class with static UI elements and related functions for the language switcher demo
6
7class UIElements {
8
9 // The list of registered panels in the webviewer
10 static viewerPanels = null;
11
12 // The tab panel, representing the webviewer left panel
13 static tabPanel = {
14 handle: null,
15 dataElement: 'tabPanel'
16 };
17
18 // The language support sub-panel to be registered
19 static languagePanel = {
20 handle: null,
21 dataElement: 'languagePanel',
22 render: null,
23 };
24
25 static languages = [
26 {
27 name: 'English',
28 id: 'en',
29 englishName: 'English',
30 },
31 {
32 name: 'Français',
33 id: 'fr',
34 englishName: 'French',
35 },
36 {
37 name: '简体中文',
38 id: 'zh_cn',
39 englishName: 'Simplified Chinese',
40 },
41 {
42 name: '繁體中文',
43 id: 'zh_tw',
44 englishName: 'Traditional Chinese',
45 },
46 {
47 name: 'Deutsch',
48 id: 'de',
49 englishName: 'German',
50 },
51 {
52 name: 'Nederlands',
53 id: 'nl',
54 englishName: 'Dutch',
55 },
56 {
57 name: 'Pусский',
58 id: 'ru',
59 englishName: 'Russian',
60 },
61 {
62 name: 'Español',
63 id: 'es',
64 englishName: 'Spanish',
65 },
66 {
67 name: 'Italiano',
68 id: 'it',
69 englishName: 'Italian',
70 },
71 {
72 name: '日本語',
73 id: 'ja',
74 englishName: 'Japanese',
75 },
76 {
77 name: '한국어',
78 id: 'ko',
79 englishName: 'Korean',
80 },
81 {
82 name: 'Português',
83 id: 'pt_br',
84 englishName: 'Portuguese',
85 },
86 {
87 name: 'česky, čeština',
88 id: 'cs',
89 englishName: 'Czech',
90 },
91 {
92 name: 'Ελληνικά',
93 id: 'el',
94 englishName: 'Greek',
95 },
96 {
97 name: 'Magyar',
98 id: 'hu',
99 englishName: 'Hungarian',
100 },
101 {
102 name: 'Polski',
103 id: 'pl',
104 englishName: 'Polish',
105 },
106 {
107 name: 'українська',
108 id: 'uk',
109 englishName: 'Ukrainian',
110 },
111 {
112 name: 'Romanian',
113 id: 'ro',
114 englishName: 'Romanian',
115 },
116 {
117 name: 'Svenska',
118 id: 'sv',
119 englishName: 'Swedish',
120 },
121 {
122 name: 'Türk',
123 id: 'tr',
124 englishName: 'Turkish',
125 },
126 {
127 name: 'ไทย',
128 id: 'th',
129 englishName: 'Thai',
130 },
131 {
132 name: 'Tiếng Việt',
133 id: 'vi',
134 englishName: 'Vietnamese',
135 },
136 {
137 name: 'Bahasa Indonesia',
138 id: 'id',
139 englishName: 'Indonesian',
140 },
141 {
142 name: 'Melayu',
143 id: 'ms',
144 englishName: 'Malay',
145 },
146 {
147 name: 'हिन्दी',
148 id: 'hi',
149 englishName: 'Hindi',
150 },
151 {
152 name: 'বাংলা',
153 id: 'bn',
154 englishName: 'Bengali',
155 },
156 {
157 name: 'العربية',
158 id: 'ar',
159 englishName: 'Arabic',
160 },
161 {
162 name: 'עברית',
163 id: 'he',
164 englishName: 'Hebrew',
165 },
166 {
167 name: 'فارسی',
168 id: 'fa',
169 englishName: 'Persian',
170 },
171 {
172 name: 'اردو',
173 id: 'ur',
174 englishName: 'Urdu',
175 },
176 ];
177
178 // The currently selected language.
179 static selectedLanguage = null;
180
181 // Customize the webviewer left panel
182 static customizeUI = (instance) => {
183 const { UI } = instance;
184
185 // Set the toolbar group to the Annotations tools
186 UI.setToolbarGroup('toolbarGroup-Annotate');
187
188 // Close the tab panel (if it's open) for refreshment.
189 UI.closeElements([UIElements.tabPanel.dataElement]);
190
191 // Get the list of registered panels in the webviewer
192 UIElements.viewerPanels = UI.getPanels();
193
194 // Find the Tab Panel to modify. The language sub-panel will be added to this Tab panel.
195 UIElements.tabPanel.handle = UIElements.viewerPanels.find((panel) => panel.dataElement === UIElements.tabPanel.dataElement);
196
197 // Register the language sub-panel
198 UIElements.RegisterLanguagePanel(instance);
199
200 // Add the new language sub-panel to list of sub-panels under the Tab Panel
201 UIElements.languagePanel.handle = { render: UIElements.languagePanel.dataElement };
202 UIElements.tabPanel.handle.panelsList = [UIElements.languagePanel.handle, ...UIElements.tabPanel.handle.panelsList];
203
204 UI.openElements([UIElements.tabPanel.dataElement]);
205 };
206
207 // Register the language sub-panel
208 static RegisterLanguagePanel = (instance) => {
209 UIElements.languagePanel.render = UIElements.createLanguagePanelElements(instance);
210 instance.UI.addPanel({
211 dataElement: UIElements.languagePanel.dataElement,
212 location: 'left',
213 icon: '<svg fill="#000000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="796 796 200 200" enable-background="new 796 796 200 200" xml:space="preserve"><g><path d="M973.166,818.5H818.833c-12.591,0-22.833,10.243-22.833,22.833v109.333c0,12.59,10.243,22.833,22.833,22.833h154.333 c12.59,0,22.834-10.243,22.834-22.833V841.333C996,828.743,985.756,818.5,973.166,818.5z M896,961.5h-77.167 c-5.973,0-10.833-4.859-10.833-10.833V841.333c0-5.974,4.86-10.833,10.833-10.833H896V961.5z M978.58,872.129 c-0.547,9.145-5.668,27.261-20.869,39.845c4.615,1.022,9.629,1.573,14.92,1.573v12c-10.551,0-20.238-1.919-28.469-5.325 c-7.689,3.301-16.969,5.325-28.125,5.325v-12c5.132,0,9.924-0.501,14.366-1.498c-8.412-7.016-13.382-16.311-13.382-26.78h11.999 c0,8.857,5.66,16.517,14.884,21.623c4.641-2.66,8.702-6.112,12.164-10.351c5.628-6.886,8.502-14.521,9.754-20.042h-49.785v-12 h22.297v-11.986h12V864.5h21.055c1.986,0,3.902,0.831,5.258,2.28C977.986,868.199,978.697,870.155,978.58,872.129z"/><g><g><path d="M839.035,914.262l-4.45,11.258h-15.971l26.355-61.09h15.971l25.746,61.09h-16.583l-4.363-11.258H839.035zM852.475,879.876l-8.902,22.604h17.629L852.475,879.876z"/></g></g></g></svg>',
214 title: 'Languages',
215 render: () => UIElements.languagePanel.render,
216 });
217 };
218
219 // Create the language panel elements.
220 static createLanguagePanelElements = (instance) => {
221 let panelDiv = document.createElement('div');
222 panelDiv.id = 'languagePanel';
223
224 let paragraph = document.createTextNode('Utilize WebViewer\'s localization capabilities by switching between currently supported languages, or easily adding your own!');
225 panelDiv.appendChild(paragraph);
226
227 let dividerDiv = document.createElement('div');
228 dividerDiv.style.borderTop = '1px solid #ccc';
229 dividerDiv.style.margin = '10px 0';
230 panelDiv.appendChild(dividerDiv);
231
232 // Languages division title
233 let languagesTitle = document.createElement("h3");
234 languagesTitle.textContent = "Languages";
235 panelDiv.appendChild(languagesTitle);
236
237 // Create a button for each supported language
238 UIElements.languages.forEach((language) => {
239 let button = UIElements.createButton(instance, language);
240 language.button = button;
241 panelDiv.appendChild(document.createElement("p"));
242 panelDiv.appendChild(button);
243 });
244
245 panelDiv.appendChild(dividerDiv.cloneNode());
246
247 // Select the first language by default
248 UIElements.selectedLanguage.button.click();
249
250 return panelDiv;
251 };
252
253 // Create a button for the given language.
254 static createButton = (instance, language) => {
255 let button = document.createElement("button");
256 button.id = `${language.id}Btn`;
257 button.textContent = `${language.name} (${language.englishName})`;
258 button.style.width = '100%';
259 button.style.backgroundColor = 'blue';
260 button.style.color = 'white';
261 button.style.border = 'none';
262 button.style.padding = '10px 15px';
263 button.style.borderRadius = '12px';
264 button.onmouseover = () => button.style.opacity = '0.8';
265 button.onmouseout = () => button.style.opacity = '1.0';
266 button.style.cursor = 'pointer';
267 button.onclick = () => window.SelectLanguage(instance, language, button);
268
269 return button;
270 };
271}
Did you find this helpful?
Trial setup questions?
Ask experts on DiscordNeed other help?
Contact SupportPricing or product questions?
Contact Sales