Settings

The HTApi class is the main entry point for configuring the library. Through the class constructor, you can provide all the necessary initial configuration.

A complete configuration example can be as follows:

new window.HTApi({
	token: "YOUR TOKEN",
	avatar: "HUGO",
	language: "ptBR",
	signLanguage: "ptBR-bzs",
	parentElementSelector: "body",
	enableComponents: {
		caption: true,
		changeSpeedButton: true,
		header: true,
		pauseAnimationButton: true,
		rateAnimationButton: true,
		repeatAnimationButton: true,
		stopAnimationButton: true,
		widget: true,
		zoom: true,
		rotate: true,
	},
	theme: {
		widget: {
			background: "#EDEDED",
			border: {
				color: "#BDBDBD",
				radius: "12px",
				style: "solid",
				width: "1px",
			},
			option: {
				foreground: "#2E2E2E",
				hoverBackground: "#e1e1e1",
				activeBackground: "#c9c9c9",
				focusRingColor: "#C64F01",
			},
			closeButton: {
				foreground: "#C22929",
				hoverBackground: "#e1e1e1",
				activeBackground: "#c9c9c9",
				focusRingColor: "#C64F01",
			},
			shadow: [
				{
					offsetX: "0px",
					offsetY: "2px",
					blur: "6px",
					spread: "2px",
					color: "rgba(0, 0, 0, 0.15)",
					inset: false,
				},
				{
					offsetX: "0px",
					offsetY: "1px",
					blur: "2px",
					spread: "0px",
					color: "rgba(0, 0, 0, 0.08)",
					inset: false,
				},
			],
		},
		translationWindow: {
			layout: "fixed",
			draggable: true,
			position: {
				preset: "topRight",
				bottom: "",
				left: "",
				right: "",
				top: "",
			},
			background: "#EDEDED",
			border: {
				width: "1px",
				color: "#BDBDBD",
				style: "solid",
				radius: "16px",
			},
			height: "310px",
			width: "200px",
			shadow: [
				{
					offsetX: "0px",
					offsetY: "2px",
					blur: "6px",
					spread: "2px",
					color: "rgba(0, 0, 0, 0.15)",
					inset: false,
				},
				{
					offsetX: "0px",
					offsetY: "1px",
					blur: "2px",
					spread: "0px",
					color: "rgba(0, 0, 0, 0.08)",
					inset: false,
				},
			],
		},
		rateWindow: {
			background: "#FFFFFF",
			foreground: "#2E2E2E",
			titleFontSize: "12px",
			descriptionFontSize: "12px",
			border: {
				radius: "16px 16px 0 0",
				color: "#000",
				style: "solid",
				width: "0",
			},
			shadow: [
				{
					offsetX: "0px",
					offsetY: "2px",
					blur: "6px",
					spread: "2px",
					color: "rgba(0, 0, 0, 0.15)",
					inset: false,
				},
				{
					offsetX: "0px",
					offsetY: "1px",
					blur: "2px",
					spread: "0px",
					color: "rgba(0, 0, 0, 0.08)",
					inset: false,
				},
			],
		},
		loading: {
			external: {
				color: "#c64f01",
			},
			internal: {
				color: "#FFFFFF",
				background: "#333333d9",
				border: {
					color: "#FFFFFF",
					width: "0.75px",
					radius: "10px",
					style: "solid",
				},
			},
		},
		caption: { color: "#2E2E2E2E", fontSize: "14px" },
		iconButtonContainer: {
			background: "#FFFFFF",
			border: {
				color: "transparent",
				radius: "12px",
				style: "solid",
				width: "0",
			},
			shadow: [
				{
					offsetX: "0px",
					offsetY: "2px",
					blur: "6px",
					spread: "2px",
					color: "rgba(0, 0, 0, 0.15)",
					inset: false,
				},
				{
					offsetX: "0px",
					offsetY: "1px",
					blur: "2px",
					spread: "0px",
					color: "rgba(0, 0, 0, 0.08)",
					inset: false,
				},
			],
		},
		header: {
			background: "#FFFFFF",
			foreground: "#2E2E2E",
			border: {
				color: "transparent",
				radius: "0px",
				style: "solid",
				width: "0",
			},
			shadow: [
				{
					offsetX: "0px",
					offsetY: "2px",
					blur: "6px",
					spread: "2px",
					color: "rgba(0, 0, 0, 0.15)",
					inset: false,
				},
				{
					offsetX: "0px",
					offsetY: "1px",
					blur: "2px",
					spread: "0px",
					color: "rgba(0, 0, 0, 0.08)",
					inset: false,
				},
			],
		},
		button: {
			background: "#c64f01",
			foreground: "#FFFFFF",
			hoverBackground: "#b24701",
			activeBackground: "#9e3f01",
			focusRingColor: "#c64f01",
			border: {
				color: "transparent",
				radius: "12px",
				style: "solid",
				width: "0",
			},
			shadow: [],
		},
		rateButton: {
			foreground: "#2E2E2E",
			hoverBackground: "#e1e1e1",
			activeBackground: "#c9c9c9",
			focusRingColor: "#C64F01",
		},
		iconButton: {
			foreground: "#2E2E2E",
			hoverBackground: "#e1e1e1",
			activeBackground: "#c9c9c9",
			focusRingColor: "#C64F01",
			border: {
				radius: "12px",
			},
		},
		errorMessage: {
			background: "#FFF1C5",
			foreground: "#472201",
			titleFontSize: "14px",
			descriptionFontSize: "12px",
			iconColor: "#BA6A03",
			shadow: [],
			border: {
				color: "#BA6A03",
				radius: "8px",
				style: "solid",
				width: "1px",
			},
		},
	},
});

With the exception of the token field, all other fields have a default value.

token

• type: string

This field holds the access key received during the contract with Hand Talk S.A. It allows the library to authenticate requests and ensure access to its resources.

ATTENTION

Whenever switching the release channel between beta and latest, the token field must be updated, as these two channels use different tokens for authentication. Failing to make this change will result in denied translation requests.

The latest and fixed version channels use the same token.

See more information at Release Channels

avatar

• type: string
• default: HUGO
• options: HUGO, MAYA

This field accepts two values: HUGO or MAYA, and it determines which 3D character will appear during translations.

language

• type: string
• default: ptBR
• options: ptBR, enUS, esES

This field defines the application language. It translates texts, aria attributes, and other textual elements into the selected language.

ATTENTION

This field does not change the sign language that the library will translate into. It is only used for internal component and HTML element internationalization. To change the sign language, use the signLanguage field.

signLanguage

• type: string
• default: ptBR-bzs
• options: ptBR-bzs, en-ase

This field defines which sign language will be used to translate the provided texts.

parentElementSelector

• type: string
• default: body

A string containing a selector for a DOM element where the application will be allocated. By default, it uses the HTML body, but it can be modified at runtime. If the selector is invalid or the element is not found, the HTML body is used instead.

enableComponents

A property that enables or disables SDK features, whether they have a visual interface or not.

Learn more at Enable/Disable Components.

theme

A property that allows deep customization of the SDK's theme at a high level.

Learn more at Theme.