Fazer upgrade da versão 2 para a versão 3 do SDK da Web

Nesta página, explicamos como fazer upgrade da versão 2 para a versão 3 do SDK da Web. Se você estiver instalando o SDK da Web pela primeira vez, consulte o guia do SDK da Web v3.

Importante: a instalação e o uso do nosso SDK sem interface exigem o suporte da equipe de engenharia da sua organização.

Fazer upgrade para o SDK da Web v3

Primeiro, localize este script no código-fonte:

<script type="module" src="https://websdk.ujet.co/v2/loader.js"></script>

Em seguida, substitua pelo seguinte:

<script type="module" src="https://{your_ccaas_host}/web-sdk/v3/widget.js"></script>

Diferenças significativas

Esta seção descreve as principais diferenças entre as versões 2 e 3 do SDK da Web.

Inicializar

Observação: a V2 usa exatamente a mesma inicialização da v3.

v2

const ccas = new UJET({
  "companyId": "{companyId}",
  "host": "https://{your_ccaas_host}",
  "authenticate": getAuthToken
})

v3

var ccas = new UJET({
  "companyId": "{companyId}",
  "host": "https://{your_ccaas_host}",
  "authenticate": getAuthToken
})

// v3 has a mount point
// ccaas.mount(HTMLElement | string)
ccaas.mount('#ccaas-widget')

Opções

Ao iniciar o SDK da Web, você especifica opções. Nesta seção, descrevemos as diferenças entre as versões 2 e 3 do SDK da Web.

v2

N/A para v2.

v3

Na v3, as opções de inicialização são as mesmas do SDK Headless.

interface ClientOption {
  companyId: string;
  authenticate: () => Promise<TokenResponse>;
  tenant?: string;
  host?: string;
  lang?: string;
  bridge?: string;
  cobrowse?: {
    enabled: boolean;
    template?: string;
    messages?: CobrowseMessages;
    api?: string;
    license?: string;
    trustedOrigins?: string[];
    capabilities?: string[];
    registration?: boolean;
    redactedViews?: string[];
    unredactedViews?: string[];
  };
}

Importante: com o SDK da Web v3, algumas opções da v2, como customData e disableAttachment, agora estão incluídas na opção ccaas.config().

Outras opções podem ser configuradas com o método ccaas.config():

ccaas.config({
  disableAttachment: true
})

Opções de configuração disponíveis:

interface ConfigOptions {
  accent?: AccentColor;
  logo?: string;
  menuKey?: string;
  ticketId?: string;
  preferredChannel?: string;
  disableAttachment?: boolean;
  customData?: string | Record<string, any>;
  messages?: Record<string, unknown>;
  reCaptchaSiteKey?: string;
}

Métodos

Na v2, há alguns métodos extras no carregador, como:

ccaas.createCobrowseCode()
ccaas.fetchWaitTimes({id: 123})

Na v3, a UI do widget usa um cliente headless. Você pode chamar todos os métodos compatíveis com o SDK headless.

const client = ccaas.client
client.getCompany()
client.loadOngoingChat()

Consulte o guia do SDK da Web sem interface gráfica para saber mais.

Eventos

Na v2, é possível detectar eventos com:

ccaas.on('chat:update', (chat) => {
  console.log(chat)
})

Na v3, é possível detectar eventos com o cliente sem interface gráfica:

const client = ccaas.client

client.on('chat.updated', (chat) => {
  console.log(chat)
})

Consulte o guia do SDK da Web sem interface gráfica para saber mais sobre outros eventos.

Personalização de tema

O SDK da Web v3 tem uma abordagem atualizada para a personalização de temas. Para mais informações, consulte Personalização de temas.