Giorgio Gnoli – Consulente CRM e Temporary Manager

Menu
Iscriviti

SFMC Tips #315: Agentforce, chat multilingue in base alla lingua del browser

Di /

In questo articolo spiegherò come rendere la chat multilingue in base alla lingua del browser quando si mostra un Service Agent su un sito web esterno.

In questo modo potrai modificare testi come “Ask Me Anything” in Service Agent Enhanced Chat v2.

Nota: ho confermato con il supporto Salesforce che, al momento, il supporto multilingue per i nomi degli agent non è disponibile. Pertanto, se devi supportare più lingue, probabilmente è più sicuro utilizzare un nome dell’agent in inglese. Ci auguriamo che questa funzionalità venga supportata in una futura release.

Translation Language Settings

1. Cerca “Translation Language Settings” in Setup e attiva la funzionalità se non è già attiva.

2. Aggiungi le lingue.

3. In questo caso creerò inglese, giapponese, coreano, cinese (semplificato) e cinese (tradizionale); quindi prima registra l’inglese, seleziona Active e scegli un utente come traduttore.

*Il traduttore è un utente che può creare e modificare le traduzioni per quella lingua.

4. Configura giapponese, coreano, cinese (semplificato) e cinese (tradizionale) nello stesso modo.

5. Al termine della configurazione delle lingue, vai su Setup > Embedded Service Deployments e clicca su “Custom Labels” in Enhanced Chat v2.

6. Prima di tutto, cambia la lingua in giapponese e seleziona “General” nel gruppo di chat.

7. Seleziona “All” nel gruppo delle display label.

8. Impostando il tipo di display label su Standard, viene mostrato un elenco di label configurabili. Inserisci la display label personalizzata e clicca su Save. Naturalmente, puoi anche lasciare il valore predefinito.

In questo caso, cambierò “Ask Me Anything” in “We will guide you according to your request” (ご用件に合わせてご案内します).

9. Dopo aver modificato tutti i testi, clicca su “Finish”.

10. Configura le altre lingue nello stesso modo.

Modifica dello snippet di codice

1. Ottieni lo snippet di codice da Embedded Service Deployments.

2. Normalmente, il codice ha un aspetto simile al seguente.

<script type='text/javascript'>
 function initEmbeddedMessaging() {
  try {
   embeddedservice_bootstrap.settings.language = 'en_US'; // Ad esempio, inserisci 'en' o 'en-US'

   embeddedservice_bootstrap.init(
    '00Dg7000005ArbF',
    'Service_Agent',
    'https://na1777983780331.my.site.com/ESWServiceAgent1780374048210',
    {
     scrt2URL: 'https://na1777983780331.my.salesforce-scrt.com'
    }
   );
  } catch (err) {
   console.error('Error loading Embedded Messaging: ', err);
  }
 };
</script>
<script type='text/javascript' src='https://na1777983780331.my.site.com/ESWServiceAgent1780374048210/assets/js/bootstrap.min.js' onload='initEmbeddedMessaging()'></script>

3. Modifica il codice come segue.

<script type='text/javascript'>
function initEmbeddedMessaging() {
 try {
  const userLang = (navigator.language || navigator.userLanguage || 'en').toLowerCase();

  let chatLang = 'en_US';

  if (userLang.startsWith('ja')) {
   chatLang = 'ja';
  } else if (userLang.startsWith('ko')) {
   chatLang = 'ko';
  } else if (userLang.startsWith('zh-cn') || userLang.startsWith('zh-sg')) {
   chatLang = 'zh_CN';
  } else if (userLang.startsWith('zh-tw') || userLang.startsWith('zh-hk') || userLang.startsWith('zh-mo')) {
   chatLang = 'zh_TW';
  }

  embeddedservice_bootstrap.settings.language = chatLang;

  embeddedservice_bootstrap.init(
   '00Dg7000005ArbF',
   'Service_Agent',
   'https://na1777983780331.my.site.com/ESWServiceAgent1780374048210',
   {
    scrt2URL: 'https://na1777983780331.my.salesforce-scrt.com'
   }
  );
 } catch (err) {
  console.error('Error loading Embedded Messaging: ', err);
 }
}
</script>

<script type='text/javascript'
 src='https://na1777983780331.my.site.com/ESWServiceAgent1780374048210/assets/js/bootstrap.min.js'
 onload='initEmbeddedMessaging()'>
</script>

4. La parte principale da modificare è la sezione seguente.

Questa sezione ottiene l’impostazione della lingua del browser e cambia la lingua di visualizzazione della chat Agentforce in base a essa.

const userLang = (navigator.language || navigator.userLanguage || 'en').toLowerCase();

let chatLang = 'en_US';

if (userLang.startsWith('ja')) {
    chatLang = 'ja';
} else if (userLang.startsWith('ko')) {
    chatLang = 'ko';
} else if (userLang.startsWith('zh-cn') || userLang.startsWith('zh-sg')) {
    chatLang = 'zh_CN';
} else if (userLang.startsWith('zh-tw') || userLang.startsWith('zh-hk') || userLang.startsWith('zh-mo')) {
    chatLang = 'zh_TW';
}

embeddedservice_bootstrap.settings.language = chatLang;

Per questa sezione, credo sia più rapido chiedere a un’AI generativa di produrla utilizzando l’esempio sopra come riferimento.

Specificando la lingua predefinita e le lingue che desideri utilizzare, il codice dovrebbe essere adattato al tuo ambiente.

Suggerimento: il codice lingua restituito dal browser varia in base all’ambiente.

Ad esempio, anche per il giapponese, può essere restituito sia ja che ja-JP. Per il coreano, può essere restituito sia ko che ko-KR.

Inoltre, per il cinese, semplificato e tradizionale vengono distinti, quindi possono essere restituiti valori come zh-CN (cinese semplificato), zh-TW (cinese tradizionale) e zh-HK (cinese tradizionale – Hong Kong).

Per questo motivo, invece di verificare la corrispondenza esatta con un valore specifico, è consigliabile utilizzare startsWith() per il confronto.

5. Infine, integra il codice modificato nel tuo sito web esterno.

Prova sul campo

Per verificare il comportamento cambiando la lingua del browser, inserisci il seguente URL nella barra degli indirizzi di Google Chrome.

chrome://settings/languages

Quindi cambia la lingua di visualizzazione e verifica se la visualizzazione del pulsante di chat e della finestra di chat cambia.

Se la visualizzazione della chat cambia in base alla lingua del browser come mostrato di seguito, la configurazione ha avuto successo.

Inglese

Giapponese

Coreano

Cinese (semplificato)

Cinese (tradizionale)

Che ne pensate?

Non sono riuscito a trovare facilmente questa informazione tramite ricerche online, quindi ho deciso di lasciarla qui come promemoria.

Quando si offre la chat Agentforce in più lingue, è molto importante cambiare la lingua di visualizzazione in base alla lingua del browser.

In particolare, credo che questa sia una configurazione che le aziende che supportano più lingue, come giapponese, inglese, coreano e cinese, dovrebbero implementare.

Questo è tutto per questa volta.

Nobuyuki Watanabe

https://www.linkedin.com/in/nobuyuki-watanabe/ (+Follow me)

Tradotto e adattato da SFMC Tips #315 : Agentforce: Multilingual Display for Enhanced Chat Based on Browser Language di Nobuyuki Watanabe (@marketingcloudtips), pubblicato su Medium. Traduzione autorizzata dall’autore.

Related Posts:

Torna in alto