Embed do OmniMeetingSDK

Índice

1 Índice
2 Etapa 1: Gerar token de autenticação temporária
3 Etapa 2: Realizar o embed do OmniMeetingSDK:
4 Etapa 3: Adicionar widget para iniciar o atendimento
5 Exemplo de uso completo no HTML

Guia básico para uma configuração rápida do embed do OmniMeetingSDK.

Etapa 1: Gerar token de autenticação temporária

Siga o guia de como gerar o token temporário Api clientes - Autenticação

Geração de token temporário

Etapa 2: Realizar o embed do OmniMeetingSDK:

Importar o script do sdk.

<script src="https://meeting-staging.sandbox.mosiaomnichannel.com.br/cdn/sdk.js"></script>

Configurar a inicialização do embed.

<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>

Em “temp-authorization”, adicionar o token temporário da etapa 1.

Em “responsavelAtendimento”, preencha com os dados do médico.

Etapa 3: Adicionar widget para iniciar o atendimento

Para cada consulta, é necessário adicionar um novo elemento no html com as configurações do widget que deseja utilizar.

Você pode configurar 3 tipos de widgets diferentes:
Botão

<div class="omni-meeting-room" data-id="idMeeting" data-variant="button" data-text="Iniciar chamada"></div>

Badge

<div class="omni-meeting-room" data-id="idMeeting" data-variant="badge"></div>

Texto

<div class="omni-meeting-room" data-id="idMeeting" data-variant="text"></div>

Exemplo de uso completo 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-staging.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>

Exemplo de como o widget do exemplo acima será exibido caso a configuração esteja correta.

Mosia Omnichannel