Skip to navigation

Integração em três blocos

O restante é interface, construída pelo parceiro.

A superfície de contato com o SDK é pequena. Estes três blocos cobrem autenticação, inicialização e consumo de estado; tudo além disso é a interface que a aplicação parceira já sabe construir.

1

No servidor: trocar a chave por um token

// roda no backend do parceiro — a chave nunca sai daqui
const callix = new CallixServerSdk(dominio, process.env.CALLIX_API_KEY);
const sessao = await callix.createUserSessionForClientSdk(loginDoAgente);
// devolve para a tela apenas isto:
return { userSessionToken: sessao.userSessionToken };

A autenticação do usuário da aplicação acontece antes desta linha, e é ela que determina qual login Callix pode ser operado.

2

Na tela: ligar o SDK

<CallixClientProvider domain={dominio} userSessionToken={token}>
<TelaDeAtendimento />
</CallixClientProvider>

A partir daqui, qualquer componente dentro dessa árvore enxerga o operador.

3

Em qualquer componente: ler estado e comandar

const estado = useCallOperatorState(); // { state: 'callInProgress', call }
const { makeManualCall } = useCallOperatorControls();
const info = useCallOperatorCurrentCallInfo(); // campanha, lista, contato
// telefone, rótulo e os campos do contato vêm daqui, não de call.data — chega logo após callRinging
// campaignContact.fields: cada campo com code, name, type (FieldType), value, requiredOnCall e label
if (info?.type === 'campaign') return <FichaDoCliente contato={info.info.campaignContact} />;

São 17 hooks no total, cobrindo estado, controles da chamada, áudio, pausas e qualificações. Nenhum deles exige conhecimento de WebRTC.