A seguir serão apresentados alguns exemplos de utilização do Widget NuVidio. Para qualquer dúvida entre em contato conosco através do e-mail [email protected]. Acesso o nosso repositório de exemplos caso precise de mais informações https://github.com/NuVidio/examples.

HTML com botão flutuante

<head>
  <script>
    window.NuVidioId = "identifier";
    window.NuVidioConfigs = {
      fabButton: true,
      fabButtonContent: "Clique aqui",
    }
  </script>
  <script src="https://widget.nuvidio.com/init.js" type="text/javascript" async></script>
</head>
<body>
  <button id="nuvidio-widget-button">botão</button>
</body>

HTML sem botão flutuante

<head>
  <script>
    window.NuVidioId = "identifier";
    window.NuVidioConfigs = {
      fabButton: false,
    }
  </script>
  <script src="https://widget.nuvidio.com/init.js" type="text/javascript" async></script>
</head>
<body>
  <button id="nuvidio-widget-button">botão</button>
</body>

HTML solicitar dados do cliente antes de abrir o widget

Caso seja necessário solicitar os dados do cliente antes de abrir o widget os dados devem ser enviados através do método NuVidioWidget.init que tem como parâmetros o identificador do departamento e o e-mail (pode ser substituído por outro dado único como telefone por exemplo) e nome do cliente conforme o exemplo abaixo. Se desejar que o cliente já seja enviado para a fila sem a necessidade de confirmar os dados envie a flag pushToQueue. (mais detalhes sobre as opções podem ser encontrados na seção Biblioteca Javascript e no tópico Como usar).

CAUTION
É importante que a flag open esteja configurada para true para que o widget seja aberto assim que o init seja realizado.

<html lang="pt-br">
  <head>
    <script>
      window.onload = () => {
        const form = document.getElementById('dados-cliente');
        form.addEventListener('submit', (e) => {
          e.preventDefault();
          const formData = new FormData(form);
          window.NuVidioWidget.init('identifier', {
            clientData: {
              email: formData.get('email'),
              name: formData.get('name'),
              pushToQueue: true,
            },
            open: true,
          });
        })
      }
    </script>
    <script src="https://widget.nuvidio.com/init.js" type="text/javascript" async></script>
    <title>NuVidio Widget</title>
  </head>
  <body>
    <form id="dados-cliente">
      <label for="name">Nome</label>
      <input type="text" id="name" name="name"/> <!-- Input de nome -->
      <label for="email">Email</label>
      <input type="email" id="email" name="email"/> <!-- Input de email -->
      <button type="submit">Botao</button> <!-- Botão de submit do formulário -->
    </form>
  </body>
</html>

Pacote NPM com botão flutuante (utilizando React, mas se aplica a outros frameworks javascript)

NOTE
O modelo para remover o botão flutuante é semelhante ao do Código HTML e basta alterar o valor da flag fabButton.

import React, { useEffect } from 'react';
import NuVidioWidget from 'nuvidio-widget-js';

const NuVidio = () => {
 // Utilizado para importar o script no startup do componente. Semelhante ao ngOnInit, ComponentDidMount, created.
  useEffect(() => {
    NuVidioWidget.importScripts();
    NuVidioWidget.setDepartment('identifier', {
      fabButton: true,
      fabButtonContent: "Clique aqui",
    });
    return () => {
      // É recomendado remover o widget caso ele não seja utilizado em outros componentes
      NuVidioWidget.removeWidget();
    }
  }, []);

  return (<button id="nuvidio-widget-button">botão</button>);
};

export default NuVidio;

Acesso através da URL enviando parâmetros de busca

Seguindo o modelo da URL a seguir é possível enviar o nome e tel do cliente através do próprio link de acesso à fila de espera de um departamento. A flag push configurada para “true” força o cliente a ser automaticamente enviado para fila de espera quando acessa a página, para isso os campos nome e tel (ou email) precisam estar preenchidos.

https://nuvidio.com/call/:identificador?name=Nome+Cliente&tel=31999999999&push=true