Configurações

A classe HTApi é a entrada principal para toda a configuração da biblioteca, através do construtor da classe, é possível dar toda a configuração inicial necessária.

Um exemplo de configuração total pode ser o seguinte:

new window.HTApi({
	token: "SEU 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",
			},
		},
	},
});

Com exceção do campo token, todos os outros campos possuem um valor padrão.

token

• type: string

Esse campo recebe a chave de acesso recebida durante a contratação com a Hand Talk S.A. Com ele, a biblioteca consegue autenticar suas requisições e garantir acesso a seus recursos.

ATENÇÃO

Sempre que alterar o canal de lançamento entre beta e latest, o campo token deve ser alterado, pois esses dois canais utilizam tokens diferentes para se autenticar. Não realizar essa mudança, vai acarretar na negação de solicitações de tradução.

O canal latest e versão fixa utilizam o mesmo token.

Veja mais informações em Canais de lançamento

avatar

• tipo: string
• padrão: HUGO
• opções: HUGO, MAYA

Esse campo pode receber dois valores: HUGO ou MAYA e serve para determinar qual personagem 3D vai aparecer durante as traduções.

language

• tipo: string
• padrão: ptBR
• opções: ptBR, enUS, esES

Campo que define o idioma da aplicação. Ele traduz textos, arias e outros elementos textuais para o idioma escolhido.

ATENÇÃO

Esse campo não muda a língua de sinais que a biblioteca vai traduzir, servindo apenas para internacionalização dos componentes internos e elementos HTML. Para mudar a língua de sinais, use o campo signLanguage.

signLanguage

• tipo: string
• padrão: ptBR-bzs
• opções: ptBR-bzs, en-ase

Campo que define qual língua de sinais será utilizada para traduzir os textos passados.

parentElementSelector

• tipo: string
• padrão: body

Uma string com o seletor para um elemento na DOM a onde a aplicação vai ser alocada. Por padrão, usamos o body do HTML, porém, pode ser modificado em tempo de execução. Caso o seletor seja inválido ou o elemento não seja encontrado, o body do HTML é usado no lugar.

enableComponents

Propriedade que serve para habilitar ou desabilitar recursos da SDK, seja eles com interface visual associada ou não.

Veja mais a fundo em Habilitar/Desabilitar Componentes.

theme

Propriedade que serve para alterar o tema da SDK com alto nível de personalização e de maneira profunda.

Veja mais a fundo em Tema.