Floating website translator

Ask the Community General Questions
1

Hello Elfsight,

I need floating website translator like this.

image
image1021Ă—790 129 KB

Regards

Hendri

3

Hello there, @Blogger_Blogger :waving_hand:

I see that you’re currently using this layout:

image
image776Ă—111 7.28 KB


Do I get it right that you’d like to display flags vertically and without /?

4

I wish I had a floating vertical flags at the left side, instead of drop down and inline in the current options. It will notice the visitor more (draw more attention), that the website is a multi language one.

5

Got it, thanks!

Please add this code to the Custom CSS field on the Settings tab of your widget’s settings and let me know if it helped :slightly_smiling_face:

[class*='background__Container-sc'] {
  display: grid;
  background-color: transparent;
  box-shadow: none;
}
6

It works. Thanks.

7

Great, you’re always welcome :wink:

8

Hello Max, now I have additional wish. Can it show the name of the language on mouseover?

image
image735Ă—785 62.5 KB

9

Hi there, @Blogger_Blogger :waving_hand:

Sure, we’ve added this script to the Custom JS field on the Settings tab of your widget’s settings:

(function () {
  let tooltip = null;

  function getLabel(el) {
    return el.getAttribute('aria-label').replace(/\s*\([^)]*\)\s*$/, '');
  }

  function ensureTooltip() {
    if (tooltip) return tooltip;
    tooltip = document.createElement('div');
    tooltip.style.position = 'fixed';
    tooltip.style.zIndex = '2147483647';
    tooltip.style.background = 'rgba(0, 0, 0, 0.85)';
    tooltip.style.color = '#fff';
    tooltip.style.padding = '4px 8px';
    tooltip.style.borderRadius = '4px';
    tooltip.style.fontSize = '12px';
    tooltip.style.fontFamily = 'sans-serif';
    tooltip.style.whiteSpace = 'nowrap';
    tooltip.style.pointerEvents = 'none';
    tooltip.style.transform = 'translate(-50%, -100%)';
    tooltip.style.display = 'none';
    document.body.appendChild(tooltip);
    return tooltip;
  }

  function showTooltip(el) {
    const tip = ensureTooltip();
    tip.textContent = getLabel(el);
    const rect = el.getBoundingClientRect();
    tip.style.left = rect.left + rect.width / 2 + 'px';
    tip.style.top = rect.top - 8 + 'px';
    tip.style.display = 'block';
  }

  function hideTooltip() {
    if (tooltip) tooltip.style.display = 'none';
  }

  function findShadowHost() {
    const idMatch = util.getWidgetRoot().className.match(/elfsight-app-([a-f0-9-]+)/);
    if (!idMatch) return null;
    const candidates = document.querySelectorAll(`.eapps-website-translator-${idMatch[1]}-custom-css-root`);
    for (const el of candidates) {
      if (el.shadowRoot) return el;
    }
    return null;
  }

  function bind(shadowRoot) {
    const flags = shadowRoot.querySelectorAll('[role="button"][aria-label]');
    flags.forEach((el) => {
      el.addEventListener('mouseenter', () => showTooltip(el));
      el.addEventListener('mouseleave', hideTooltip);
    });
    return flags.length > 0;
  }

  const host = findShadowHost();
  if (host && bind(host.shadowRoot)) {
  } else {
    const observer = new MutationObserver(() => {
      const lateHost = findShadowHost();
      if (lateHost && bind(lateHost.shadowRoot)) {
        observer.disconnect();
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }
})();

Note: Custom JS doesn’t function in the preview mode, so you can check the result right on your website.

Check it out and let me know how it works on your end :slightly_smiling_face:

10

Works beautifully. Thanks Max.

11

Great. you’re welcome :wink: