Translate integration: WordPress
Welcome to the Translate Integration Guide! This document provides detailed instructions for adding the Translate, an AI-powered sign language player based on WebGL, to your WordPress site. The Sign Language Translate plugin wraps the Vanilla JavaScript SDK, so no theme edits, page builder blocks or code are required — you enter your API key once and the player appears on your site.
Key features
- AI-Driven Sign Language Rendering: Convert text to realistic sign language animations.
- Floating WebGL Window: Integrate sign language playback without disrupting your website's layout, with customizable background color and character cloth color.
- Customizable Characters: Support for multiple characters with potential for further customization.
- Draggable and Toggleable Window: Allow users to reposition and hide the playback window.
- Event-Driven Interaction: Utilize callbacks for seamless integration with your website's logic.
- Text Scrolling Slider: Displays the text that is being signed.
- Character selection: Allow users to change the character that is signing.
- Customizable speed: Control the speed of the sign animation.
- Multi-Language Support: Choose the sign language output (currently supports ASL and DSL).
- Playback Mode: Select between the signing avatar rendered live or a pre-recorded video stream of animations from the server side.
- Customizable Window Size: Set playback window width; height adjusts automatically by aspect ratio.
- Language Selector: Show or hide the language switcher control in the playback window.
- Character Control: Show or hide the character change control in the playback window.
Requirements
- WordPress 5.8 or later
- PHP 7.4 or later
Installation
- Download
sign-language-translate.zipfrom DeafTawk. - In WordPress, go to Plugins → Add New → Upload Plugin, choose the zip and select Install Now. You can also unzip it into
/wp-content/plugins/directly. - Select Activate.
- Go to Settings → Sign Language Translate and enter your API key.
- Save. The player now appears on every front-end page.
Settings
Everything configurable in initWebgl is exposed under Settings → Sign Language Translate: API key, character, playback mode, animation speed, player width, background and cloth colors, the character and language switcher controls, and the signing language. See Vanilla JavaScript for what each option does.
Two settings are specific to the plugin. Show on every page controls whether the player is injected site-wide — turn it off to place it only via shortcode. Select to sign signs any sentence a visitor hovers over for about three seconds, without them clicking anything.
Placing the player
With site-wide display enabled the player loads automatically and no shortcode is needed.
To place it on specific pages instead, use the shortcode:
[translate_avatar]Any setting can be overridden for a single placement:
[translate_avatar width="350" character="1" app_mode="3"]If a page contains the shortcode, that placement wins over the site-wide player for that page — the player is never initialized twice on one page.
To place it from a theme template, wrap it in do_shortcode:
<?php echo do_shortcode('[translate_avatar width="350"]'); ?>Floating window behavior
Same as Vanilla JS, except the plugin pins the player to the viewport rather than the page, so it stays in the bottom-right corner on long pages. See Vanilla JS — Floating Window Behavior.
Uninstalling
Deactivating the plugin removes the player from your site but keeps your settings. Deleting the plugin removes its settings, including the stored API key.