OmniMeetingSDK
O OmniMeetingSDK é uma lib que integra o atendimento de vídeo meeting em qualquer operadora. Apenas importando o script js com poucas linhas é possível utilizar o modal de atendimento.
- 1.1 Conhecendo o funcionamento básico do SDK
- 1.2 Informações
- 1.2.1 AVISOS
- 1.2.2 CRITÉRIOS DE PREENCHIMENTO
- 1.3 Funções disponíveis pelo SDK
- 1.3.1 Função config(object)
- 1.3.2 Função open(object)
- 1.3.3 Função isOpen()
- 1.3.4 Função on(event, callback)
- 1.3.5 Função close()
- 1.4 Eventos disponíveis
- 2 Widgets
- 2.1 Estrutura de configuração do widget
- 2.1.1 Variação text
- 2.1.2 Variação badge
- 2.1.3 Variação button
- 2.1.4 Variação label
- 2.1 Estrutura de configuração do widget
Conhecendo o funcionamento básico do SDK
Abaixo um código de como usar o SDK no HTML:
<html>
<head>..</head>
<body>
<div class="omni-meeting-room" data-id="idMeeting" data-variant="button" data-text="Iniciar chamada"></div>
<script src="https://meeting-testing.sandbox.mosiaomnichannel.com.br/cdn/sdk.js"></script>
<script>
OmniMeeting.config({
token: 'token_temporario',
applicationInstance: '1|2',
responsavelAtendimento: {
codigo: 'identificacaoUnicaAtendente',
nome: 'Dr. Pedro Paulo',
descricao: 'Teleconsulta - Cardiologista',
avatar: 'https://img.freepik.com/vetores-premium/medico-icone-ou-avatar-em-branco_136162-58.jpg?w=826'
}
})
</script>
</body>
</html>
No código acima vemos:
Linha 04. Uma div com a class “omni-meeting-room“, é um widget que vai ser renderizado de acordo com a variação passada no atributo “data-variation“, mais na frente teremos um tópico destinado a falar apenas sobre os widgets e todos os atributos de cada variação.
Linha 05. Após o widget, importamos o arquivo sdk que contém todo o código que carregará os widgets e o modal de atendimento.
Linha 07. Após importar o sdk acionamos a função config() passando as configurações de autenticação e dados para o atendimento, essa função sempre deve carregar somente após os widgets.
Informações
AVISOS
O campo "Obrigatório" esclarece quais regras / validações serão aplicadas ou quais os conteúdos serão permitidos ou rejeitados. As ações descritas aqui devem ser implementadas, evitando que os conteúdos inválidos sejam criticados pelo SDK.
CRITÉRIOS DE PREENCHIMENTO
Abreviação | Nome | Descrição |
---|---|---|
M | Mandatório | O preenchimento do atributo é obrigatório. Caso o atributo esteja nulo ou em branco, seu "response" será rejeitado. |
C | Condicional | O atributo pode tornar-se obrigatório quando um ou mais atributos auxiliares for preenchido / atualizado. |
OP | Opcional | Seu preenchimento não é obrigatório. |
Funções disponíveis pelo SDK
Function | Descrição |
---|---|
config | Função para configurar (ou reconfigurar) a inicialização dos widgets, conexão com websocket e etc. |
open | Função para abrir o modal de atendimento. |
isOpen | Função que retorna se o modal está aberto com um valor boleano true ou false. |
on | Função para inscrever e receber eventos enviados pelo embed do modal de atendimento. |
close | Função para enviar um comando para o modal de vídeo atendimento. |
Função config(object)
Função para configurar (ou reconfigurar) a inicialização dos widgets, conexão com websocket e etc.
Parâmetro | Obrigatório | Tipo | Descrição |
---|---|---|---|
token | M | string | Token de autenticação |
applicationInstance | M | number | A instância da aplicação. Ex: |
responsavelAtendimento | OP | object | Dados do atendente que será exibido ao ligar para o aplicativo. |
Objeto responsavelAtendimento
Parâmetro | Obrigatório | Tipo | Descrição |
---|---|---|---|
nome | M | string | Nome do responsável pelo atendimento |
descricao | M | string | Descrição livre que fica abaixo do nome na ligação. |
avatar | OP | string | URL da foto do responsável |
codigo | M | string | Código único do responsável pelo atendimento |
Em uma lista dinâmica (em AJAX) de widgets, onde os widgets são atualizados sem atualização da página, essa função deve ser acionada sempre que a listagem atualizar. Dessa maneira o SDK será capaz de atualizar as salas das meetings no websocket.
Exemplo de uso no código:
OmniMeeting.config({
token: 'token_temporario',
applicationInstance: '1|2',
responsavelAtendimento: {
codigo: 'identificacaoUnicaAtendente',
nome: 'Dr. Pedro Paulo',
descricao: 'Teleconsulta - Cardiologista',
avatar: 'https://img.freepik.com/vetores-premium/medico-icone-ou-avatar-em-branco_136162-58.jpg?w=826'
}
})
Função open(object)
Função para abrir o modal de atendimento.
Parâmetro | Obrigatório | Tipo | Descrição |
---|---|---|---|
meetingId | M | string | Token de autenticação |
responsavelAtendimento | C | object | Dados do atendente que será exibido ao ligar para o aplicativo. O campo é obrigatório somente quando não é informado na função config() |
Objeto responsavelAtendimento
Parâmetro | Obrigatório | Tipo | Descrição |
---|---|---|---|
nome | M | string | Nome do responsável pelo atendimento |
descricao | M | string | Descrição livre que fica abaixo do nome na ligação. |
avatar | M | string | URL da foto do responsável |
codigo | M | string | Código único do responsável pelo atendimento |
Essa função só deve ser acionada após a função config()
Exemplo de uso no código:
<button onClick="javascript:OmniMeeting.open({meetingId: '7bd87bf1-9980-4410-8db1-878dd59bc045'})">Iniciar atendimento</button>
Função isOpen()
Função que retorna se o modal está aberto com um valor boleano true ou false.
Função on(event, callback)
Função para inscrever e receber eventos enviados pelo embed do modal de atendimento.
Função close()
Função para enviar um comando para o modal de vídeo atendimento.
Exemplo de uso no código:
Parâmetro | Obrigatório | Tipo | Descrição |
---|---|---|---|
event | M | string | Evento que deseja ouvir atualizações |
callback | M | function | Função que será acionada quando o evento acontecer |
Eventos disponíveis
Evento | Descrição |
---|---|
Esse evento é acionado sempre que o modal abre. | |
Esse evento é acionado sempre que o modal é fechado (não necessariamente por encerramento por parte do atendente). | |
Esse evento é acionado sempre que o atendimento é encerrado. | |
Esse evento é acionado quando o token informado é autenticado com sucesso no realtime. | |
Esse evento é acionado quando ocorre algum erro no realtime ou no sdk que impede o funcionamento do mesmo. |
Callback do evento openModal(object)
Callback do evento exit(object)
Callback do evento finish(object)
Callback do evento ready()
Esse evento apenas sinaliza que o sdk carregou sem erros, não possui nenhum parâmetro com informações adicionais.
Callback do evento waitingRoom(object)
Callback do evento error(object)
Códigos de erros:
Código | Descrição |
---|---|
UNAUTHORIZED | Erro de autenticação, o token informado é inválido. |
Essa função só deve ser acionada após a função config()
Exemplo de uso no código:
Widgets
Os widgets são elementos que são renderizados pelo SDK a partir das configurações passadas pela propriedade da tag <div>.
Os widgets possuem 3 variações, badge, button e text. Para definir uma variação, basta passar o atributo data-variation.
Exemplo:
Estrutura de configuração do widget
Para renderizar um widget é necessário que a class “omni-meeting-room“ seja sempre informada, seguida pelo data-id. Os principais atributos do widget são esses:
Atributo | Obrigatório | Tipo | Descrição |
---|---|---|---|
class | M | string | A class que usaremos para buscar e renderizar os widgets. Sempre informar: |
data-id | M | string | O id da meeting para entrar na sala do websocket. |
data-variant | OP | string | Variação do widget. Por padrão é renderizado a variação “text“. Variações disponíveis:
|
Variação text
A variação text será renderizado apenas um texto por padrão ON|OFF, ON para sinalizar que beneficiário está na sala de espera e OFF para sinalizar que não está na sala de espera.
Atributos de configuração disponíveis para essa variação:
Atributo | Obrigatório | Tipo | Descrição |
---|---|---|---|
data-text-waiting-room-on | OP | string | Descrição do botão quando beneficiário está na sala de espera. |
data-text-waiting-room-off | OP | string | Descrição do botão quando beneficiário não está na sala de espera. |
Exemplo:
Variação badge
A variação badge será renderizado um badge, que fica cinza quando o beneficiário não está na sala de espera e verde quando está.
Atributos de configuração disponíveis para essa variação:
Atributo | Obrigatório | Tipo | Descrição |
---|---|---|---|
data-badge-text | OP | string | Descrição do botão padrão. |
data-badge-text-waiting-room-on | OP | string | Descrição do botão quando beneficiário está na sala de espera. |
data-badge-text-waiting-room-off | OP | string | Descrição do botão quando beneficiário não está na sala de espera. |
data-badge-color-on | OP | string | Cor (HEX) do badge quando o beneficiário está na sala de espera. Padrão: #28b543 |
data-badge-color-off | OP | string | Cor (HEX) do badge quando o beneficiário não está na sala de espera. Padrão: #BBBBBB |
Exemplo:
Variação button
A variação button será renderizado um botão com um badge da sala de espera ao lado, ao clicar nesse botão será aberto o modal de atendimento, ao usar esse widget não é necessário usar a função OmniMeeting.open({meetingId}).
Atributos de configuração disponíveis para essa variação:
Atributo | Obrigatório | Tipo | Descrição |
---|---|---|---|
data-button-text | OP | string | Descrição do botão padrão. |
data-button-text-waiting-room-on | OP | string | Descrição do botão quando beneficiário está na sala de espera. |
data-button-text-waiting-room-off | OP | string | Descrição do botão quando beneficiário não está na sala de espera. |
data-badge-color-on | OP | string | Cor (HEX) do badge quando o beneficiário está na sala de espera. Padrão: #28b543 |
data-badge-color-off | OP | string | Cor (HEX) do badge quando o beneficiário não está na sala de espera. Padrão: #BBBBBB |
data-button-text-color | OP | string | Cor do texto do botão em hexadecimal; |
data-button-bg-color | OP | string | Cor de fundo do botão em hexadecimal. |
data-button-border-color | OP | string | Cor da borda do botão em hexadecimal. |
data-button-border-width | OP | number | Tamanho da borda do botão em pixels. Padrão: 1px |
data-button-radius | OP | number | Tamanho do arredondamento do botão em pixels. Padrão: 0 |
data-nome-responsavel-atendimento | C | string | Nome do responsável do atendimento. Obrigatório quando não é informado na função config() |
data-descricao-responsavel-atendimento | C | string | Descrição do responsável do atendimento. Obrigatório quando não é informado na função config() |
data-avatar-responsavel-atendimento | C | string | URL do avatar do responsável do atendimento. Obrigatório quando não é informado na função config() |
Exemplo:
Variação label
A variação label será renderizado uma etiqueta que mostra “SALA DE ESPERA“ quando o beneficiário acessa a sala de espera.
Atributos de configuração disponíveis para essa variação:
Atributo | Obrigatório | Tipo | Descrição |
---|---|---|---|
data-label-text-waiting-room-on | OP | string | Descrição do botão quando beneficiário está na sala de espera. |
data-label-text-waiting-room-off | OP | string | Descrição do botão quando beneficiário não está na sala de espera. |
data-label-bg-color-on | OP | string | Cor (HEX) de fundo da label quando o beneficiário está na sala de espera. Padrão: #18AD2C |
data-label-bg-color-off | OP | string | Cor (HEX) de fundo da label quando o beneficiário não está na sala de espera. |
data-label-radius | OP | string | Tamanho do arredondamento do botão. Padrão: 15px |
data-label-color-on | OP | string | Cor do texto quando o beneficiário está na sala de espera. Padrão: #fff |
data-label-color-off | OP | string | Cor do texto quando o beneficiário não está na sala de espera. |
data-label-padding | OP | string | Padding (espaçamento interno) da label para o texto. Padrão: 5px 15px |
data-label-font-size | OP | number | Tamanho do texto. Padrão: 11px |
Exemplo:
Mobile Saúde - Mosia Omnichannel