[Widget v2][Widgets-Core] Can not change the language after the Widget v2 has been loaded

[Hang_Nguyen]

Hi,

I'm trying to change language of the Widget after the Widget has been loaded.

I set the lang and i18n properties in the window._genesys.widgets.main, then use the setLanguage command, but it doesn't work with me.
I also try to use Common.updateTemplateI18n. For example: Change text for Cancel button

But it has the error: TypeError: t.find is not a function at P (widgets-core.min.js:6 at Object.updateTemplateI18n (widgets-core.min.js:6)

How can I change the text for Cancel button?
Is there any solution to change language of the Widget after the Widget has been loaded?

Regards,

[John_Carnell]

Hi Hang,

I have cross-posted the topic to our Wedige developer room. With this week and next week being the holidays we have limited response times from our development groups. This seems like a bug, but I want to confirm it first with the group.

Thanks,
John Carnell
Manager, Developer Engagement

[Jerome.Saint-Marc]

Hello,

I have tried both methods and could make them work.

App.setLanguage

You can invoke the "App.setLanguage" command to change the language after the widgets is initialized/loaded.
The new labels will appear the next time the WebChat window (Registration form, ...) is opened.
I mean that if you can the "App.setLanguage" command while the WebChat Registration form is already opened, it will not dynamically change all labels to the new language.
If you close and reopen the chat window, the new labels will be there.
So it is better to invoke that command before opening the WebChat window (i.e. before "WebChat.open").

The thing to pay attention to is that the window._genesys.widgets.main.i18n must be configured/initialized with all the languages you plan to use.
English language is "included" in the WebChat libraries.
For other languages, you have to point to a file containing the label translations or set the translations directly in the i18n property.
https://all.docs.genesys.com/WID/Current/Developer/GWCInternat

In my test, I had set my widgets to english by default.
And loaded a file for french (english being already built into the widgets library).

In my widgets configuration:

window._genesys.widgets.main.lang = 'en';
window._genesys.widgets.main.i18n = 'https://apps.mypurecloud.com/widgets/9.0/i18n/widgets-fr.i18n.json';

If you want more than 2 languages, you would have to take the translations for the different languages, copy them into a single json file and point to this file via the i18n property.

Then, after loading/initializing the widgets, and before opening the chat, I have invoked:

CXBus.command('App.setLanguage', {lang: 'fr'});

Then, when I open/start my chat, labels are in french.

Common.updateTemplateI18n

This one is to be used at runtime, while the WebChat window is already opened.

I did a test and the container apparently needs to be a div (I I have tried a reference to the button directly and it didn't update the text).

Assuming you have jquery lib loaded/available in your page, and that the WebChat Registration form is currently displayed.:

I first retrieve a reference to the div containing the StartChat and Cancel buttons (it is necessary to add cx-form class in the jquery selector as there are different buttons/divs with .cx-button-group.cx-buttons-binary - ex: the close chat icon/button).

var myContainer = $(".cx-form .cx-button-group.cx-buttons-binary");

var Common = _genesys.widgets.common;

Common.updateTemplateI18n(myContainer, {ChatFormCancel: 'Annulation', ChatFormSubmit: 'Démarrer'});

Regards,

[Hang_Nguyen]

Hi,

First of all thanks for the reply. I have tried boths methods again and it works like you described.
But there are some problems I'm facing now:

Common.updateTemplateI18n

Though this one is to be used at runtime, while the WebChat window is already opened, but it just works by searching for elements with the CSS classname 'i18n' and reading the custom attribute 'data-message' to match the string name in the language object. I'm facing 2 issues in this method:

1. There are some elements having the custom attribute 'data-message' isn't the translated key, it is the translated value, so I must pass the key like 'Chat Started' to change the language (see the below image). For instance:

     var myContainer = $('.cx-message-group');
     var Common = window._genesys.widgets.common;

     Common.updateTemplateI18n(myContainer, {
       'Chat Started': 'Chat wurde gestartet'
     });

2. There are some elements don't have the 'i18n' class. I went through the function in widgets-core.min.js, so as I understand, there is no way to change language with these cases.
   
   
   
   

=> Could you mind to confirm about these points?

App.setLanguage

Is there any other way to dynamically change all labels to the new language while the WebChat Registration form is already opened?

Regards,

[Jerome.Saint-Marc]

Hello,

Common.updateTemplateI18n:

Yes, according to the description of this command, it looks for components with i18n string elements.
https://all.docs.genesys.com/WID/Current/SDK/Common#Common.updateTemplateI18n.28element.2C_object.29

I don't know if the fact that i18n class is not set in some elements is by design or if it was missed.
Please open a ticket with Genesys Care so they can investigate.

About Genesys Cloud Customer Care - Genesys Cloud Resource Center

App.setLanguage:

No, unfortunately, I am not aware of another method which would work while the WebChat registration form is opened.

Regards,

[Hang_Nguyen]

Hi,

I am appreciated for your support.
Could you mind to check quickly whether you have the same issue about missing 'i18n' class and translated key?
It will be more great if I know we have the clear awareness about this issue

Regards,

[Jerome.Saint-Marc]

Hello,

Yes - I have the same.
I just don't know if all fields/elements were meant to have an i18n class. Genesys Care will be able to check with Product Management/Engineering.

Regards,

[Hang_Nguyen]

Hi,

Many thanks for your support.
I will open the ticket with Genesys Care
Have a good day!

Regards,