JavaScript API

1 min readUpdated November 9, 2026

Methods on window.CLSPro:

Method	What it does
`CLSPro.open()`	Opens the language window
`CLSPro.close()`	Closes it
`CLSPro.urlFor( 'fr' )`	URL of the current page in a language

document.querySelector( '.my-language-link' ).addEventListener( 'click', function ( e ) {
    e.preventDefault();
    CLSPro.open();
} );

CLSPro.open() needs the language window on the page. It is there whenever the page has a switcher button; otherwise call CLS_Pro::enqueue_modal() in PHP, or simply use a link to #cls-modal, which needs no code at all.

Event: cls_language_switched fires on document when a visitor picks another language, just before the browser leaves the page. It is not fired when they pick the language already showing.

document.addEventListener( 'cls_language_switched', function ( e ) {
    console.log( e.detail.from ); // "en"
    console.log( e.detail.to );   // "fr"
    console.log( e.detail.url );  // "https://example.com/fr/about/"
} );

Page data: window.CLS_PRO_DATA holds the settings the front-end script uses, for example currentLang, defaultLang, langs, activePlugin and isRtl. Treat it as read-only. Add your own keys with the cls_pro_js_data filter.