<!-- 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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.