Language Switching

The Embed SDK supports multiple languages, with both an initial language at creation time and dynamic switching at runtime.

Supported Languages

en — English (default)
ko — Korean (한국어)
ja — Japanese (日本語)
ru — Russian (Русский)
es — Spanish (Español)

Unsupported language codes fall back to en.

Initial Language

Set the language option when creating the instance:


import { TaskOnEmbed } from "@taskon/embed";
 
const embed = new TaskOnEmbed({
  baseUrl: "https://your_embed_domain.com",
  containerElement: "#taskon-embed",
  language: "ko", // start in Korean
});
 
await embed.init();

See Configuration for all options.

Switch at Runtime

Call setLanguage() after init():


await embed.setLanguage("ja"); // Japanese
await embed.setLanguage("es"); // Spanish
await embed.setLanguage("fr"); // unsupported → falls back to "en"

Persist the User’s Choice


const switchLanguage = async (language: string) => {
  try {
    await embed.setLanguage(language);
    localStorage.setItem("preferred-language", language);
  } catch (error) {
    console.error("Failed to switch language:", error);
  }
};

On next load, read the stored value and pass it as the initial language.

React Integration


import { useState, useEffect, useRef } from "react";
import { TaskOnEmbed } from "@taskon/embed";
 
export function TaskOnEmbedView() {
  const containerRef = useRef<HTMLDivElement>(null);
  const embedRef = useRef<TaskOnEmbed | null>(null);
  const [language, setLanguage] = useState("en");
 
  useEffect(() => {
    if (!containerRef.current) return;
 
    const embed = new TaskOnEmbed({
      baseUrl: "https://your_embed_domain.com",
      containerElement: containerRef.current,
      language,
    });
    embed.init().then(() => {
      embedRef.current = embed;
    });
 
    return () => embed.destroy();
  }, []); // create once; use setLanguage() for changes
 
  const changeLanguage = async (lang: string) => {
    await embedRef.current?.setLanguage(lang);
    setLanguage(lang);
  };
 
  return (
    <div>
      <button onClick={() => changeLanguage("ko")}>한국어</button>
      <button onClick={() => changeLanguage("ja")}>日本語</button>
      <div ref={containerRef} style={{ width: "100%", height: "600px" }} />
    </div>
  );
}

Vue Integration


<template>
  <div>
    <button @click="changeLanguage('ko')">한국어</button>
    <button @click="changeLanguage('ja')">日本語</button>
    <div ref="containerRef" class="taskon-container" />
  </div>
</template>
 
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { TaskOnEmbed } from "@taskon/embed";
 
const containerRef = ref<HTMLDivElement>();
const embedRef = ref<TaskOnEmbed | null>(null);
 
onMounted(async () => {
  if (!containerRef.value) return;
  const embed = new TaskOnEmbed({
    baseUrl: "https://your_embed_domain.com",
    containerElement: containerRef.value,
    language: "en",
  });
  await embed.init();
  embedRef.value = embed;
});
 
onUnmounted(() => embedRef.value?.destroy());
 
const changeLanguage = async (lang: string) => {
  await embedRef.value?.setLanguage(lang);
};
</script>
 
<style scoped>
.taskon-container {
  width: 100%;
  height: 600px;
}
</style>

Next Steps

Configuration — all instance options
Methods — setLanguage() and other runtime APIs
Authentication — handle user login