Pular para conteúdo
Postman

Widget Web

Guia de integração do Widget MediQuo para aplicações web.

Importante: Cadastro de Pacientes

O cadastro de pacientes deve ser feito através da API ID MediQuo (nosso portal de gestão de licenças). O Widget é exclusivamente para integração frontend após o paciente já estar cadastrado.

Consulte: Pacientes - ID MediQuo

Tipos de Sessão

Tipo Quando usar Requisito
Com sessão Usuários autenticados no seu sistema accessToken obtido via POST /patients/authenticate
Sem sessão Landing pages, campanhas sem login Apenas apiKey — o widget exibe formulário de cadastro temporário

Instalação

Adicione o script antes do fechamento do </body>:

HTML
<script type="text/javascript" src="https://widget.mediquo.com/js/1.0.0/mediquo.js"></script>

Inicialização

Com Sessão (Recomendado)

Para usuários já autenticados. Histórico e conversas são preservados entre sessões e plataformas (web, Android, iOS).

JavaScript
window.onload = () => {
  MediquoWidget.init({
    apiKey: "sua_api_key",
    accessToken: "access_token_do_paciente",
    adapter: "web",
    environment: "production",
    theme: {
      launcher: "base",
      position: "right",
      locale: "pt",
      colors: {
        primary: "#a91e90",
        primaryContrast: "#ffffff",
        secondary: "#3c50ec",
        accent: "#42cece",
        messageTextOutgoing: "#201552",
        messageTextIncoming: "#201552",
        bubbleBackgroundOutgoing: "#eceff1",
        bubbleBackgroundIncoming: "#e7e3f1",
        alertText: "#201552",
        alertBackground: "#e7e3f1"
      }
    }
  });
};

Sem Sessão

O widget exibe um formulário de cadastro temporário. Os dados não são persistidos entre sessões.

JavaScript
window.onload = () => {
  MediquoWidget.init({
    apiKey: "sua_api_key",
    adapter: "web",
    environment: "production",
    theme: {
      launcher: "base",
      position: "right",
      locale: "pt"
    },
    terms_link: "https://seusite.com/termos",
    privacy_link: "https://seusite.com/privacidade"
  });
};

terms_link e privacy_link definem as URLs dos documentos exibidos nos checkboxes de consentimento do formulário de cadastro temporário (Termos e Condições e Política de Privacidade).

Parâmetros de Configuração

Parâmetro Tipo Obrigatório Descrição
apiKey string sim API Key do parceiro
adapter string sim "web" para aplicações web. Use "cordova" para apps híbridos
accessToken string não* Token do paciente obtido via /patients/authenticate. Se omitido, exibe formulário de sessão temporária
environment string não "production" ou "sandbox". Padrão: "production"
show string não Visibilidade do widget. Padrão: "always"
mute boolean não Inicia com áudio mutado
isMobileView boolean não Abre o widget em tela cheia. Padrão: false (responsivo)
showInitialMessage boolean não Exibe mensagem automática 2 segundos após a inicialização (sessão temporária)
terms_link string não URL dos Termos e Condições (exibida no formulário de sessão temporária)
privacy_link string não URL da Política de Privacidade (exibida no formulário de sessão temporária)

*Obrigatório para sessão permanente.

Visibilidade (show)

Valor Comportamento
"always" Sempre visível (padrão)
"withActiveSession" Visível apenas quando há accessToken válido

Tema (theme)

Parâmetro Tipo Descrição
launcher string Estilo do botão flutuante. Ex: "base"
position string Posição na tela: "right" ou "left"
locale string Idioma: "pt", "es" ou "en"
colors.primary string Cor primária (hex)
colors.primaryContrast string Contraste da cor primária (hex)
colors.secondary string Cor secundária (hex)
colors.accent string Cor de destaque (hex)
colors.messageTextOutgoing string Cor do texto das mensagens enviadas
colors.messageTextIncoming string Cor do texto das mensagens recebidas
colors.messageTextSystem string Cor do texto de mensagens de sistema
colors.bubbleBackgroundOutgoing string Fundo do balão de mensagem enviada
colors.bubbleBackgroundIncoming string Fundo do balão de mensagem recebida
colors.bubbleBackgroundSystem string Fundo do balão de mensagem de sistema
colors.alertText string Cor do texto de alertas
colors.alertBackground string Fundo dos alertas
hideCloseButton string Oculta o botão X da barra de navegação. Valores: "true" ou "false". Padrão: "false"

Textos (text)

Parâmetro Tipo Descrição
text.launcher string Texto do botão flutuante
text.title string Título exibido no cabeçalho do widget
text.welcome_title string Título da tela de boas-vindas (sessão temporária)
text.welcome_text string Texto descritivo da tela de boas-vindas (sessão temporária)
text.welcome_button string Texto do botão de ação da tela de boas-vindas (sessão temporária)
text.medical_consent_disclaimer string Texto do aviso de consentimento médico exibido na sala de chat
text.offline_professional_disclaimer string Texto exibido quando o profissional está offline
text.terms string Texto (aceita HTML) para o label do checkbox de Termos no formulário de cadastro
text.privacy string Texto (aceita HTML) para o label do checkbox de Privacidade no formulário de cadastro
text.initial_message string Texto da mensagem automática inicial (requer showInitialMessage: true)

Métodos

JavaScript
// Abre o widget
MediquoWidget.open();

// Fecha o widget
MediquoWidget.close();

// Encerra a sessão do usuário e invalida o access_token
// Um novo access_token é necessário para exibir o widget novamente
MediquoWidget.logout();

// Remove o widget completamente do DOM (executa logout + remove elementos)
// Pode chamar init() novamente após destroy para reexibir
MediquoWidget.destroy();

Próximos Passos