How to Create Language Toggle Buttons in SharePoint Using Theme Builder

With ShortPoint Theme Builder, you can easily add language toggle buttons across your SharePoint Site Collection. Follow the steps below to get started.

NOTEFor this guide, we used the Elfsight translator widget.

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Part 1: Copy the Div Class of the Translator Widget
    • Step 1: Choose a Template
    • Step 2: Customize the Template
    • Step 3: Copy Div Class
  • Part 2: Add the Translator Widget
    • Step 1: Copy and Modify the JavaScript Code
    • Step 2: Open Theme Builder
    • Step 3: Paste and Apply the Modified JavaScript Code
    • Step 4: Publish

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.

Step-by-step Tutorial

The steps have been divided into two parts. Follow along closely to successfully add your translator widget:

Part 1: Copy the Div Class of the Translator Widget

To display the toggle buttons, we will be using a translator widget. You can use one that you prefer, but for our example, we will be using Elfsight. 

Here, we will demonstrate how to create a translator widget using Elfsight and obtain its div class.

Step 1: Choose a Template

Go to Elfsight and select Create Widget for Free:

Select the [1] template you wish to use and click [2] Continue with this template:

Then, click Add to website for free:

Step 2: Customize the Template

You will be redirected to the editor. Customize your selected template according to your preferences:

Once satisfied, click Publish:

Then, close the editor:

Step 3: Copy Div Class

Click Install:

Copy the string of numbers and letters inside div class=” “. Take note of this as you will need it in part 2.

NOTEFor this guide, the translator widget will be added across your site collection. However, if you wish to only have the widget in a single SharePoint page, you can copy the whole embed code above and paste it in the HTML field of the Code Design Element:

That’s it! You now have your Div Class. Proceed to part 2 to learn how to add it to your SharePoint pages.

Part 2: Add the Translator Widget

This section demonstrates how you can add the translator widget across your site collection.

Step 1: Copy and Modify the JavaScript Code

Copy the JavaScript below:

function addCustomStylesToHead() {
  const css = `
    div[class^="name__NameContainer"] {
      color: white !important;
    }

    div[class^="Icon__IconContainer"] {
      filter: invert(1) !important;
    }

    div[class^="Icon__IconContainer"][class*="flag__StyledIcon"] {
      filter: invert(0) !important;
    }

    .es-popout-content div[class^="name__NameContainer"] {
      color: black !important;
    }

    .es-popout-content div[class^="Icon__IconContainer"] {
      filter: invert(0) !important;
    }
  `;

  const style = document.createElement("style");
  style.textContent = css;
  document.head.appendChild(style);
}

addCustomStylesToHead();

function embedElfsightWidget() {
    const widgetDiv = document.createElement("div");
    widgetDiv.className = "paste-div-class-here";
    widgetDiv.setAttribute("data-elfsight-app-lazy", "");
    // widgetDiv.style.backgroundColor = "#C9C9C9";
    widgetDiv.style.maxWidth = "fit-content";
    widgetDiv.style.position = "fixed";
    widgetDiv.style.left = "170px";
    widgetDiv.style.top = "13px";

    const myInterval1 = setInterval(function () {
        const elem = document.querySelector("#O365_SearchBoxContainer_container");
        if (elem) {
            elem.appendChild(widgetDiv);
            if (elem) {
                elem.appendChild(widgetDiv);
                clearInterval(myInterval1);

                const myInterval2 = setInterval(function () {
                    const elem2 = document.querySelector("#O365_SearchBoxContainer_container > div.paste-div-class-here > div > a");        
                    if (elem2) {
                        elem2.remove();
                        clearInterval(myInterval2);
                    }
                }, 3000);

                const scriptSrc = "https://static.elfsight.com/platform/platform.js";
                if (!document.querySelector('div[data-script-ran="true"]')) {
                    const elfsightScript = document.createElement("script");
                    elfsightScript.src = scriptSrc;
                    elfsightScript.async = true;
                    document.querySelector("#O365_SearchBoxContainer_container").appendChild(elfsightScript);
                    document.querySelector("div[data-elfsight-app-lazy").setAttribute("data-script-ran", "true");
                }
            }
        }
    }, 3000);
}

if (!document.querySelector('div[data-script-ran="true"]')) {
    embedElfsightWidget();
}

Do the same with const elem2 = and replace paste-div-class-here with the Div Class you copied in Part 1:

NOTEIf you wish to use this translator widget across your entire SharePoint tenant, you can use ShortPoint’s Global Scripts and Styles. Simply follow the steps in How to Use ShortPoint's Global Scripts and Styles to learn how.

Step 2: Open Theme Builder

Click the ShortPoint icon:

Select Theme Builder:

Step 3: Paste and Apply the Modified JavaScript Code

Go to Utilities:

Select Custom JavaScript:

Paste the modified JavaScript code in the field provided:

Click Apply:

Step 4: Publish

Once satisfied, publish your changes:

Congratulations! You now have a translator widget on your SharePoint pages:

NOTEIf you're using an Elfsight widget, make sure to log out of it before testing. Otherwise, you will see a black notification that will prompt you to edit the widget.

Related articles:

• How to Customize Your SharePoint Site Header Using ShortPoint Theme Builder
• How to Extract Colors from a Theme Builder Customized Site
• How to Export a Theme Builder Theme with Colors