Edição de Envelope

É possível criar uma página de edição do envelope, que permite algumas alterações no envelope:

Alterar o nome, expiração e ordem das assinaturas do envelope;
Alterar as informações de um signatário;
Adicionar e/ou remover signatários;
Enviar novamente as notificações para os signatários;
Alterar as posições de assinatura dos signatários;
Iniciar um envelope que está no estado DRAFT;

Somente uma página de edição pode ser acessada e enquanto ela está sendo utilizada os signatários não podem realizar assinaturas no envelope;

Para liberar as assinaturas é necessário finalizar a página de edição, escolhendo entre as opções para notificar os signatários ou sair. A liberação também ocorre automáticamente após um período sem o uso da página;

Integração utilizando IFrame

É possível carregar a tela de edição dentro da própria aplicação. Para isso, o link de acesso a tela deve ser gerado e carregado dentro de um iframe.

O exemplo abaixo pode ser utilizado, substituindo a variável URL_PARA_PAGINA_DE_EDICAO pelo valor do link de acesso a tela de edição.

<!DOCTYPE html>
<html>
  <!-- Estilização CSS opcional para fazer o iframe ocupar 100% do body da sua aplicação -->
  <style>
    #easySignIframe {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }
  </style>

  <!-- Div necessária para criação do <iframe/> -->
  <body>
    <div id="edit-div"></div>
  </body>
  <script>
    // const editLink = Este link referencia a página que será carregada para realizar a edição do envelope.
    const editLink = "{URL_PARA_PAGINA_DE_EDICAO}";

    // Constantes para setar a largura e altura do <iframe/> na sua aplicação
    const width = "1025";
    const height = "500";

    // Gera o iframe
    iframe = document.createElement("iframe");
    iframe.setAttribute("src", editLink);
    iframe.setAttribute("id", "easySignIframe");

    // Estilização do iframe
    iframe.setAttribute("width", width);
    iframe.setAttribute("height", height);
    iframe.style.border = 0;

    // Insere o iframe na página
    const container = "edit-div";
    const cont = document.getElementById(container);
    if (cont) {
      cont.appendChild(iframe);
    }
    
    // Função de callback para receber os eventos de finalização do processo de edição. Os eventos contém uma string informando o tipo de evento que ocorreu:
    // - "easy.edit.finished": Edição foi encerrada com sucesso e os signatários foram notificados sobre a assinatura (caso tenham notificação configurada);
    // - "easy.edit.exit": Edição foi encerrada com sucesso;
    // - "easy.edit.expired": Link de acesso a página de edição está expirado;
    // Neste exemplo é emitido apenas um alert (pop-up padrão do Javascript).
    // Você pode tratar este evento da maneira que desejar na sua aplicação (redirecionamento do usuário, exibição de mensagens de sucesso, dentre outros)
    window.addEventListener(
      "message",
      (event) => {
        if (event.data === "easy.edit.finished") {
          alert("Edição finalizada e notificações enviadas para os signatários");
        } else if (event.data === "easy.edit.exit") {
          alert("Edição finalizada");
        } else if (event.data === "easy.edit.expired") {
          alert("Link de edição expirado. Gere um novo link para continuar com a edição.");
        }
      },
      false
    );
  </script>
</html>