Section:

Language Switcher Showcase Demo Code Sample

Requirements
View Demo
Web SDK

Add language localization capabilities to the viewer by switching currently supported languages or adding your own.

This demo allows you to:

  • Define localized language
  • Use a pre-defined language collection on a custom ribbon
  • Update toolbar language

Implementation steps

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.

License Key

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
7const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';
8
9function initializeWebViewer() {
10  WebViewer(
11    {
12      path: '/lib',
13      initialDoc: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
14      enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
15      licenseKey: licenseKey, // Replace with your license key
16    },
17    document.getElementById('viewer')
18  ).then((instance) => {
19    // Default to the first language in the languages list (English).
20    UIElements.selectedLanguage = UIElements.languages[0];
21
22    // Customize the webviewer left panel
23    UIElements.customizeUI(instance);
24
25    instance.UI.openElements(['menuOverlay']);
26
27    // Listen for language change events
28    instance.UI.addEventListener('languageChanged', e => {
29      instance.UI.openElements(['menuOverlay']);
30      // Log the previous and new language codes to the console
31      // console.log(e.detail.prev);
32      // console.log(e.detail.next);
33    });
34
35    console.log('WebViewer loaded successfully.');
36  }).catch((error) => {
37    console.error('Failed to initialize WebViewer:', error);
38  });
39};
40
41// Function to handle language selection
42window.SelectLanguage = (instance, language, matchingButton) => {
43  UIElements.languages.forEach((lang) => lang.button.style.backgroundColor = 'blue');
44
45  // Set the selected language and load the corresponding document
46  matchingButton.style.backgroundColor = 'darkblue';
47  UIElements.selectedLanguage = language;
48  instance.UI.setLanguage(UIElements.selectedLanguage.id);
49};
50
51//helper function to load the ui-elements.js script
52function loadUIElementsScript() {
53  return new Promise((resolve, reject) => {
54    if (window.UIElements) {
55      console.log('UIElements already loaded');
56      resolve();
57      return;
58    }
59    const script = document.createElement('script');
60    script.src = '/showcase-demos/language-switcher/ui-elements.js';
61    script.onload = function () {
62      console.log('✅ UIElements script loaded successfully');
63      resolve();
64    };
65    script.onerror = function () {
66      console.error('Failed to load UIElements script');
67      reject(new Error('Failed to load ui-elements.js'));
68    };
69    document.head.appendChild(script);
70  });
71}
72
73// Load UIElements script first, then initialize WebViewer
74loadUIElementsScript().then(() => {
75  initializeWebViewer();
76}).catch((error) => {
77  console.error('Failed to load UIElements:', error);
78});

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales