Javascript Events

Bablic triggers various events on the localized web page. You can receive those events using Javascript on real-time.

Register to event using JS API

Use the bablic.on function to register to any event.

bablic.on('locale',function() { console.log(bablic.getLocale()); });

Register to document events

Bablic events are also fired on the document object with the prefix "bablic".
This is very useful if you're not sure whether Bablic library code was loaded yet in the document, in case you have a code that runs before Bablic Snippet or you are using async version of snippet.
Any data that was sent with the event is available on the event object, on the "detail" property (If the browser supports custom events). It's is not possible to return any value when using this method.

document.addEventListener('bablicload',function() { bablic.languages.hide('it'); });

Bablic Events

load, done, translated, error, locale, beforeLocaleChange, afterWidgetRender, beforeChange


Bablic Library code is loaded to window

document.addEventListener('bablicload',function() { bablic.languages.hide('it'); });


Web page was successfully localized on initial page load

bablic.on("done",function(){ console.log('done'); });


Web page was successfully localized, on page load or after language is switched

bablic.on("translated",function(){ console.log('page translated'); });


Error in web page localization

bablic.on("error",function(err){ console.error(err); });


Language was determined (or after changed by user)

bablic.on("locale",function(){ console.log(bablic.getLocale()); });


Before language is changed. Return false to prevent the language change

bablic.on("beforeLocaleChange",function(){ if(DontAllowChange) return false; });


Widget was rendered.

bablic.on("afterWidgetRender",function(element){; });


Bablic is about to process a root element. Return false to prevent the processing.

// do something with element