Localizing Labels in Custom HTML Using Pendo

• 

  Nikolai Tolochnyi

  June 05, 2025 11:03

  I wanted to share a small solution I put together for localizing Pendo guides when using code blocks with custom HTML and JavaScript.

  It uses data-translate-id attributes in the HTML and a simple translation map in JavaScript. The script picks up the user’s language from localStorage (i18nextLng) and replaces the text accordingly. This approach could be helpful for anyone managing multi-language guides manually in code.

  Here’s a simplified example you can copy and adapt:

  HTML

  <li data-translate-id="STEP_4_LIST_LI1">
    In <b>Admin Settings</b>, click the <b>Scorecards</b> tab and then click the <b>+ Create a card</b> button.
  </li>

   

  JS

  (function translateGuide() {
    const container = document.querySelector('.guide-container');
    const lang = localStorage.getItem('i18nextLng');
    const translations = {
      'es-ES': {
        STEP_4_LIST_LI1: 'En <b>Configuración de administrador</b>, haz clic en la pestaña <b>Tarjetas de puntuación</b> y luego en el botón <b>+ Crear tarjeta</b>.'
      }
    };

    if (!container || !translations[lang]) return;

    const allowedTags = ['b', 'i', 'u', 'strong', 'em', 'br'];
    const sanitize = (html) => {
      const temp = document.createElement('div');
      temp.innerHTML = html;
      temp.querySelectorAll('*').forEach(el => {
        if (!allowedTags.includes(el.tagName.toLowerCase())) {
          el.replaceWith(document.createTextNode(el.textContent));
        }
      });
      return temp.innerHTML;
    };

    container.querySelectorAll('[data-translate-id]').forEach(el => {
      const key = el.getAttribute('data-translate-id');
      if (translations[lang][key]) {
        el.innerHTML = sanitize(translations[lang][key]);
      }
    });
  })();

   

   

  0

Please sign in to leave a comment.