Custom Widget

On paid plans, you are able to use the custom widget feature. A custom widget uses the embedded HTML on your website to act as a widget. Using this feature, you are able to further customize your widget beyond what is available in the settings page.


Setup Procedure

  1. Select your project to go to the page list.
  2. From the Settings tab, select Widget from the left menu and switch the Use My Widget button to ON.
  3. If necessary, you can enable to Hide Widget option to hide the language selection widget when the user’s browser language matches the original website language.
  4. Make sure to embed the custom widget’s HTML into the website translated by WOVN.io (Please check the Custom Widget HTML Specification below for more details.)
  5. CSS can be customized to match your site’s design.

Basic Overview

The following is an example of a basic custom widget.
Insert the following HTML into the web page translated by WOVN.io.

<div id="wovn-languages">
</div>

<div> Tag Parameters

  • wovn-switch-template Class
  • wovn-switch Class
  • data-value Attribute

If no parameters are included, the below HTML will be generated.
In this case, the character string in the <div> tag is ignored and the following HTML is always generated.

<div id="wovn-languages" data-ready="key=?????&ready=true" data-theme="build-in" style="display: block;">
  <ul class="wovn-lang-list">
    <li class="wovn-switch selected" data-value="en">English</li>
    <li class="wovn-switch" data-value="ja">日本語</li>
  </ul>
</div>

After inserting the HTML, the widget will be shown on the web page unless the Hide Widget option is enabled as mentioned above.


WOVN.io Class

Basic Overview Specification,
Here is an overview of different classes to set up in the tag <div id=“wovn-languages”></div>.

“wovn-switch-template” Class

If an HTML tag with class “wovn-switch-template” is located within <div id=”wovn-languages”></div>, the tag will be changed into a custom widget switch.
In that case, describe wovn-lang-name as shown below.
A tag with class “wovn-switch-template” will be copied in relation to the amount of available languages on the page.
These tags will be given a “wovn-switch” class and a “data-value” attribute. The “wovn-lang-name” will be changed into the language it will be representing.

<div id="wovn-languages">
    <ol>
        <li class="wovn-switch-template">wovn-lang-name</li>
    </ol>
</div>

Will be converted to the following HTML.

<div id="wovn-languages">
    <ol>
        <li class="wovn-switch-template wovn-switch" data-value="en">English</li>
        <li class="wovn-switch-template wovn-switch" data-value="ja">日本語</li>
    </ol>
</div>

 

“wovn-switch” Class

If <div id=”wovn-languages”></div> doesn’t contain “wovn-switch-template” classes, but does contain “wovn-switch” classes, WOVN.io will interpret it as if the custom switches exists, and ouput as is into the <div> tag.

This feature can be used for example, when you only want to display a subset of your available languages.
(For example, if on WOVN.io, Japanese, English, Korean, Russian are registered as translation languages, but you do not want to display Russian on one page)

<div id="wovn-languages">
    <span class="wovn-switch" data-value="en">English</span>
    <span class="wovn-switch" data-value="ja">日本語</span>
</div>

Inside the <div> tag will not change.

<div id="wovn-languages">
    <span class="wovn-switch" data-value="en">English</span>
    <span class="wovn-switch" data-value="ja">日本語</span>
</div>

<a> Tag

If <div id=”wovn-languages”></div> doesn’t contain both “wovn-switch-template” classes and “wovn-switch” classes, but does contain an <a> tag, WOVN.io will interpret the <a> tag as a custom switch and assign a “wovn-switch” class to it.

<div id="wovn-languages">
    <a data-value="en">English</a>
    <a data-value="ja">日本語</a>
</div>

HTML is not automatically converted so the [data-value] attribute must be added.

<div id="wovn-languages">
    <a class="wovn-switch" data-value="en">English</a>
    <a class="wovn-switch" data-value="ja">日本語</ja>
</div>

Here are some samples

Sample 1

An example of the translation switches displayed as a horizontal line.

<div id="wovn-languages">
    </div>

<style type="text/css">
#wovn-languages li {
  cursor: default;
  float: left;
  list-style: none;
  padding: 0px 5px;
  text-align: center;
  width: 67px;
}
#wovn-languages li+ li {
  border-left: 1px solid;
}
#wovn-languages li.selected {
  font-weight: bold;
}
#wovn-languages li:hover {
  text-decoration: underline;
}
</style>

Sample 2

An example of fixed translation switches. Even if the amount of languages increase, only Japanese, English and French will be displayed. The widget’s labels are set to be displayed in Japanese.

<div id="wovn-languages">
  <ul>
    <li class="wovn-switch" data-value="ja">日本語</li>
    <li class="wovn-switch" data-value="en">English</li>
    <li class="wovn-switch" data-value="fr">Français</li>
  </ul>
</div>

<style type="text/css">
#wovn-languages {
  display: none;
}
#wovn-languages li {
  cursor: default;
  float: left;
  list-style: none;
  padding: 0px 5px;
  text-align: center;
  width: 80px;
}
#wovn-languages li+ li {
  border-left: 1px solid;
}
#wovn-languages li.selected {
  font-weight: bold;
}
#wovn-languages li.wovn-switch:hover {
  text-decoration: underline;
}
</style>


HTML Customization
We currently do provide widget customization services, users may customize the widget themselves following the instructions on this page.

CSS Customization
We currently do provide widget customization services, users may customize the widget themselves following the instructions on this page.

Plan Options
It is exclusive to WOVN.io PRIME users. (Users of Startup Plan or higher plans you can delete our logo, select the shape and the color of the widget to create original widgets in the former pricing plans.)

alert
Refrain from modifying the default WOVN.io widget. As the widget is subject to change, we cannot guarantee the widget’s functionality if it is modified.