<!-- Insert WOVN Snippet with your token -->
<script src="https://j.wovn.io/1" data-wovnio="key=ZITIE-" async></script>

<!-- Implement your favorite html for language switch -->
<div class="wovn-languages">
  <div class="wovn-switch" data-value="ja">Japanese</div>
  <div class="wovn-switch" data-value="en">English</div>
  <div class="wovn-switch" data-value="ko">Korean</div>
</div>

<!-- Your contents -->
<div>
  <h1>👋 Hello!</h1>
</div>
.wovn-languages {
  border: 1px solid gray;
  border-radius: 3px;
  padding: 4px 8px;
  width: 80px;
  text-align: center;
  font-family: "Arial"
}
.wovn-languages .wovn-switch {
  line-heiht: 20px;
  font-size: 18px;
}
.wovn-languages :not(.wovn-switch.selected) {
  height: 0;
  opacity: 0;
  transition: all 0.5s ease-out;
}
.wovn-languages:hover .wovn-switch {
  height: 20px;
  opacity: 1;
  transition: all 0.5s ease-out;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.