Quick Start

1. Injecting the script

To install the library, you need to add a script tag at the end of your HTML file using one of the distribution channels. There are two main ways to do this:

1. Directly in the HTML:

<!-- Add inside the body after all the code -->
<script src="https://api-cdn.handtalk.me/sdk/beta/ht-api-sdk.min.js"></script>

2. Using JavaScript:

const script = document.createElement("script");

script.src = "https://api-cdn.handtalk.me/sdk/beta/ht-api-sdk.min.js";

document.body.appendChild(script);

Regardless of the method, once the script is loaded, the HTApi class will be available in the global window object.

Tip: Waiting for the script to load

If you try to instantiate the HTApi class immediately after inserting the script tag, you may get an error stating that the class is not available. This happens because script loading is not synchronous. To fix this, we recommend using the second script injection method and the onload function to wait for the script to finish loading, ensuring that the HTApi class is available.

const script = document.createElement("script");

script.src = "https://api-cdn.handtalk.me/sdk/beta/ht-api-sdk.min.js";

document.body.appendChild(script);

script.onload = () => {
	// Initialize the library here
};

2. Instantiating the class

Now that the library has been loaded into your code, the next step is to instantiate the HTApi class and use its methods. In the example below, we instantiate HTApi with the minimum required information, initialize the library, and perform a simple translation:

const htapi = new window.HTApi({ token: "YOUR TOKEN" });

htapi.active();

// Simulates a library loading time
setTimeout(() => {
	htapi.translate("Hello world!");
}, 2000);

3. Complete example

Combining all the code snippets, we get something similar to the example below:

const script = document.createElement("script");

script.src = "https://api-cdn.handtalk.me/sdk/beta/ht-api-sdk.min.js";

document.body.appendChild(script);

script.onload = () => {
	const htapi = new window.HTApi({ token: "YOUR TOKEN" });

	htapi.active();

	// Simulates a library loading time
	setTimeout(() => {
		htapi.translate("Hello world!");
	}, 2000);
};