Instalação do Widget Embedded

❗️
Essa documentação é compatível para API REST versão 1 (Sem Envelope)
Caso esteja utilizando a API REST versão 3 (Envelope), siga as instruções no link: Instalação do Widget Embedded v2

Para instalação do Widget Embedded, execute os seguintes passos:

Inclua a biblioteca javascript no body da página.

<script src="https://cdn-public-library.clicksign.com/embedded/embedded.min-1.0.0.js" type="text/javascript"></script>

Crie um elemento div para que o Widget Embedded seja montado dentro dele.

<div id='container'></div>

Para carregar o Widget Embedded, execute a chamada javascript abaixo. Ela deverá ser executada após a biblioteca JS ter sido carregada.

❗️
Parâmetro para carregar o documento
Encontre o atributo request_signature_key no JSON do documento recebido através da API em Adicionar signatário a documento.

👍
Assinatura em lote
Para assinar documentos em lote, após a criação do lote, utilize o atributo request_signature_key retornado na criação do lote ao carregar o Widget.

// Carrega o widget embedded com a request_signature_key
var widget = new Clicksign('e8f349ae-83b6-33f6-31ff-4d364f61d900');

// Define o endpoint https://sandbox.clicksign.com ou https://app.clicksign.com
widget.endpoint = 'https://sandbox.clicksign.com';

// Define a URL de origem (parametro necessário para utilizar através de WebView)
widget.origin = ''; // <endereço do seu site>

// Monta o widget no div
widget.mount('container');

Callback javascript: Quando um documento for carregado, estiver nas etapas de credenciamento ou for assinado, a função callback registrada é chamada. Através dela você pode manipular a sua aplicação conforme necessário.

// Callback que será disparado quando o documento for carregado
widget.on('loaded', function(ev) {
  console.log('loaded!');
});

// Callback que será disparado quando o documento for assinado
widget.on('signed', function(ev) { 
  console.log('signed!'); 
  return location.assign("http://www.example.com");
});

/* Callback que será disparado nas etapas de informar dados do signatário
e token, retornando a altura (height) dessas páginas para ajuste do container
onde o iframe se encontra. */
widget.on('resized', function(height) {
  console.log('resized!');
  document.getElementById('container').style.height = height+'px';
});

❗️
Segurança: nunca confie nos callbacks javascript
Por segurança, confie nas informações recebidas através dos Webhooks. Como o callback do Widget Embedded é javascript rodando no browser do usuário, é fácil de ser manipulado de forma indevida.

Para remover o Widget Embedded da DOM, basta executar o código abaixo:

widget.unmount();

Exemplo completo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simple widget usage</title>
    <script src="https://cdn-public-library.clicksign.com/embedded/embedded.min-1.0.0.js" type="text/javascript"></script>
  </head>

  <body>
    <input id='request_signature_key' />
    <input type='button' value='Load' onclick='run()'/>
    <div id='container' style='height: 600px'></div>

    <script type='text/javascript'>
      var widget,
          input = document.getElementById('request_signature_key');

      function run () {
        var request_signature_key = input.value;

        if(widget) { widget.unmount(); }

        widget = new Clicksign(request_signature_key);

        widget.endpoint = 'https://sandbox.clicksign.com';
        widget.origin = window.origin;
        widget.mount('container');

        widget.on('loaded', function(ev) { console.log('loaded!'); });
        widget.on('signed', function(ev) { console.log('signed!'); });
        widget.on('resized', function(height) {
          console.log('resized!');
          document.getElementById('container').style.height = height+'px';
        });
      };
    </script>
  </body>
</html>

Boas práticas para o funcionamento

Protocolo Seguro: sempre renderize o Widget através de um servidor, utilizando o protocolo HTTP ou HTTPS no ambiente Sandbox e exclusivamente HTTPS no ambiente de Produção. Isso garante a segurança do Widget e previne erros de autenticação.
Uso em Aplicativos: se o Widget estiver sendo implementado em um aplicativo, recomendamos usar um asterisco (*) no atributo widget.origin para garantir que os callbacks sejam recebidos adequadamente.
Recebimento de Callbacks: para que os callbacks funcionem corretamente, é necessário que seu site ou web app esteja hospedado em um servidor web, seguindo as instruções de Protocolo Seguro.