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
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});

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales