> For the complete documentation index, see [llms.txt](https://deaftawk.gitbook.io/deaftawk-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://deaftawk.gitbook.io/deaftawk-docs/getting-started/quickstart.md).
# Translate Integration Guide: Vanilla JS
Welcome to the Translate Integration Guide! This document provides detailed instructions for embedding the Translate, an AI-powered sign language player based on WebGL, into your website using Vanilla JavaScript. The Translate enables you to seamlessly render sign language animations within a floating window, enhancing accessibility and user engagement.
**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 like 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 server side
* **Customizable Window Size:** Set playback window width and height adjusts automatically by aspect ratio
* **Language Selector:** Show or hide language switcher control in the playback window
* **Character Control:** Show or hide character change control in the playback window
## Deployment:
The Translate library is hosted on a CDN for easy integration:
HTML
```html
```
Place this tag within the \ or \ of your HTML document.
## Initialization:
Before using the Translate, you must initialize it with your API key.
JavaScript
```javascript
initWebgl({
key: 'YOUR_API_KEY',
character: 0, // Optional: Initial character index (default: 0)
backgroundColor: '#FFFFFF', // Optional: Background color of the WebGL canvas
characterClothColor: '#808080', // Optional: Character cloth color
speed: 0.025, // Optional: Animation speed (default: 0.025)
chanageCharacter: true, //Optional: Show or hide character change buttons (default: true)
appMode: ‘4’ // Optional: Live rendered avatar
showLanguageChangeOptions: false // Optional: Show language change control
width: ‘275’ // Optional: Width of the playback window
language: ‘en’ // Optional: Signing language
});
```
* **key (string, required):** Your unique API key provided by Deaftawk.
* **character (number, optional):** The initial character index to display (0-based). Defaults to 0. Possible values can be 0, 1 and 2.
* **backgroundColor (string, optional):** Sets the background color of the WebGL canvas. Accepts valid CSS color values. Defaults to #F5F5F5.
* **characterClothColor (string, optional):** Sets the character's cloth color. Accepts valid CSS color values. Defaults to #000000.
* **speed (number, optional):** Adjusts the animation speed. Lower values result in faster animations. Defaults to 0.025. Possible values range from 1 (slowest) to 0.00833 (fastest).
* **chanageCharacter (boolean, optional):** enable or disable the character change buttons. Defaults to true.
* **appMode (string, optional):** Sets the app mode to live avatar rendering ‘4’ or pre-recorded video animations ‘3’, default is ‘4’.
* **showLanguageChangeOptions (boolean, optional):** Show or hide the language change control on the floating window. Default is false.
* **width (string, optional):** Sets the window width and height will automatically be adjusted according to the width passed. Values range from 275 to 500. Default is 275.
* **language (string, optional):** Sets the language for the signing. Supported value for ASL is ‘en’ and for DSL it is ‘da’. Default value is ‘en’.
**Important:** The initWebgl function downloads the WebGL build and caches it in the browser. This process may take time depending on network conditions.
## Methods:
**1. playPose(data, callback):**
* Plays a sign language pose for the provided text in the floating WebGL window
* data (object, required):
* text (string, required): The text to be translated into sign language
* callback (function, optional): A function to be executed when the pose animation starts or if an error occurs
* Pass empty string in text to reset avatar to default position
Example:
JavaScript
```javascript
playPose({ text: 'Hello, world!' }, function(error) {
if(error){
console.error('Pose playback error:', error);
} else {
console.log('Pose playback started.');
}
});
```
2. **toggleWebgl():**
* Toggles the visibility of the floating playback WebGL window.
Example:
JavaScript
```javascript
toggleWebgl(); // Toggles the window's visibility
```
**Floating Window Behavior:**
* The floating window appears after initWebgl is successfully executed
* Users can drag the playback window to reposition it
* The toggleWebgl function controls the window's visibility
* When the mouse hovers over the Webgl container; the close and character selection buttons are displayed
* A text scrolling slider appears at the bottom of the window when the animation starts
* A loader screen is displayed while the Webgl build is loading and while the pose is being generated
* A small button appears on bottom right of the page when the Webgl container is hidden, that allows the user to show the Webgl container again.
## Example Integration
HTML
```html
Translate Integration
Hello!
How are you?
```
## Live Demo
{% embed url="" %}