Localization

Standard english translations are provided by default. However, you can add more languages or change the english translations for a fully localized experience.

info

This interactive example demonstrates the concept using React. If you're using a different framework, adapt the core concepts to your preferred technology.

Result

Live Editor

function Example() {
  useLayoutEffect(() => {
    const viewer = document.querySelector("cylindo-viewer");
    viewer.locales = {
      // Concat default translations
      ...viewer.locales,
      da: {
        fullScreen: "Fuldskærm",
        exitFullScreen: "Afslut fuldskærm",
        next: "Næste",
        previous: "Forrige",
        zoomIn: "Zoom ind",
        zoomOut: "Zoom ud",
        viewInAR: "Se i AR",
        show360: "Se i 360°",
        show3D: "3D-model",
        "qr.alt": "QR kode",
        "qr.usage": "Brug din mobiltelefon til at se dette produkt i AR.",
        "qr.requirements.key": "Mindste Krav",
        "qr.requirements.value": "En mobiltelefon med kamera og gyroskop",
      },
    };
  }, []);

  return <cylindo-viewer customer-id="5025" code="SOF0716-AMICOM" lang="da" />;
}

Try changing the translations in the example, or change the lang between en and da to switch the language entirely.

Translation keys

The following keys are available for translation:

Key	Default value (en)	Description
fullScreen	Full screen	Full screen button tooltip
exitFullScreen	Exit full screen	Exit full screen button tooltip
zoomIn	Zoom in	Zoom in button tooltip
zoomOut	Zoom out	Zoom out button tooltip
viewInAR	View in AR	View in AR button label
show360	Show 360°	Show 360° button label
show3D	3D Model	Show 3D model button label
qr.alt	QR code	QR code image alt text
qr.usage	Point your smartphone or tablet's camera to scan the QR code and see this product in your environment.	QR code usage text
qr.requirements.key	Minimum requirements	QR code scanning device requirements key
qr.requirements.value	iOS 13, iPadOS 13 or Android with AR Core 1.9 or higher	QR code scanning device requirements value

caveats

It is your responsibility to ensure that the translations are correct and that they fit the space available.

The viewer and its inner elements are responsive by default, but adding extensively long labels to elements that are not designed for it may result in a bad user experience.

Translation keys​

Translation keys