“See Translation” option

Overview

Usually, only one language can be displayed on a page with WOVN.io.
On a SaaS page or a page with a recommendation system, there might be several langauges displayed at the same time.

For that type of page, you can utilize the “See Translation” option and have only a certain part of a page translated.


Characteristics

  • If a page’s display language is mixed with other languages in some parts of a page(, and if those parts can be speficied in advance), you can place the translation button there and a user can see translation in those specific parts.
  • The language displayed by clickling “See Translation” is the same as the display language that is currently selected on the page.
  • You can customize the shape and color of the “See Translation” button.
  • When you switch languages, or reload the page, translation displayed by the button will disappear. If you want to get it traslated again, click on “See Translation”.

alert
Please contact us here If you would like to use this feature. Only modifying source code in the steps above is not enough to actually install the “See Translation” button.It is required for WOVN.io to do some set-up as well.


Setup Procedure

  1. Please contact and tell our support team here that you would like to utilize this feature. We will set up and activate this option for your project. When you contact us, please include the following information.・Email address of your account
    ・Project name for which you wish to activate “See Translation”
  2. Open the source code of a page.
  3. Add ‘class=”event-description” wovn-on-demand-source’ into the tag which embeds a part you want translated. pages.
    Example:
    <div class=”event-description” wovn-on-demand-source>
    This part will be translated if you click the button.
    </div>
  4. Placing the button that translates the part selected in ③ above:
    Set up a button or a text that is embedded by the tag including “wovn-on-demand-trigger”.

    Example:
    <div wovn-on-demand-trigger>
    <a>See Translation</a>
    </div>
  5. Specify where the translation, which has been selected in ③, is displayed.
    The translation will show up in the part that is embedded by the tag including ”wovn-on-demand-trigger”.

    Example:
    <div style="display: none;" wovn-on-demand-result>
    Translation will be displayed here
    </div>

Here sample

Example 1 : Using the text version of “See Translation”

<section wovn-on-demand>
<div class="event-description" wovn-on-demand-source>
<p>ハロー! ワールド! ハロー! ドリー!</p>
</div>
<div wovn-on-demand-trigger>
<a>"See Translation"</a>
</div>
<div style="display: none;" wovn-on-demand-result></div>
</section>

Example 2 : Using the button version of “See Translation”

<section wovn-on-demand>
<div class="event-description" wovn-on-demand-source>
<p>初めて開催するイベント!楽しみですね!</p>
</div>
<div wovn-on-demand-trigger>
<input type="button" value="See Translation" onclick="">
</div>
<div style="display: none;" wovn-on-demand-result></div>
</section>

Example 3 : Changing the button name and its place

<section wovn-on-demand>
<div class="event-description" wovn-on-demand-source>
<p>初めて開催するイベント!楽しみですね!</p>
</div>
↓Click the button below!
<div wovn-on-demand-trigger>
<input type="button" value="Open up the space and see the translation" onclick="">
</div>
↓if you click the button, translation will be displayed below.
<pre style="display: none;" wovn-on-demand-result style=""></pre>