Como gerar seu token de acesso

Passo 1: Acesse o painel administrativo do click.agree com seu login e senha.

Passo 2: No menu lateral à esquerda, clique na seção "Tokens".

Passo 3: Clique em "+Novo", para criar sua chave de acesso.

Passo 4: Com a chave criada, clique em visualizar (ícone do olho), para visualizar sua chave e copie para utilizar.

❗️
Importante
Seu token de acesso é uma informação sensível e deve ser tratada como uma senha.

Não o compartilhe publicamente ou em código-fonte de front-end (visível no navegador).

Armazene-o de forma segura, como uma variável de ambiente no seu servidor.

Se o token for comprometido, revogue-o imediatamente, na área de tokens, e gere um novo.

Exemplos

Exemplo 1: Aceite Simples (Signer)

Este exemplo mostra como coletar o aceite de um único participante para um único conteúdo.

Passo 1: Incluir a Biblioteca no seu HTML

<script src="https://cdn.statically.io/gh/fa2s/simple-signer/main/dist/signer.dev.js"></script>

Passo 2: Preparar o HTML

<div id="signer"></div>
<input id="next" type="button" value="Eu concordo" disabled />

Passo 3: Inicializar e Configurar o Signer

// 1. Crie uma nova instância do Signer com sua chave de API
const signer = new Signer("SUA_API_KEY");

// 2. Defina o ambiente de operação ("staging" para testes)
signer.mode = "staging";

// 3. Defina quem irá dar o aceite (o participante)
signer.set = {
  name: "Nome do participante",
  documents: [
    {
      name: "cpf",
      value: "000.000.000-00",
    },
  ],
  tags: ["customer", "2025"],
};

// 4. Adicione o conteúdo para o qual o aceite será coletado
signer.contents = [
  {
    name: "LGPD",
    url: "https://urlexample.com/pdf/sample.pdf",
    tags: ["lgpd", "2025"],
  },
  {
    name: "Termo de Uso",
    url: "https://www.urlexample.com/images/sample.pdf",
    tags: ["tou", "2025"],
  },
  {
    name: "Contrato de Prestação de Serviço",
    url: "https://www.urlexample.com/pdf/sample.pdf",
    tags: ["contract", "2025"],
  },
];

// 5. Renderize o componente na div #signer
signer.mount("#signer");

// 6. Habilite o botão "Eu concordo" quando o usuário aceitar os termos
const next = document.querySelector("#next");

// Função chamada quando o usuário clicar no checkbox "eu concordo"
signer.toggle = (agreed) => {
  next.disabled = !agreed;
};

// 7. Adicione o evento de clique para formalizar o aceite
next.addEventListener("click", (ev) => {
  ev.preventDefault();
  next.disabled = true;

  // Função que vai ser executada ao confirmar o aceite
  signer
    .agree()
    .then((response) => {
      // Informação gerada que deve ser salva
      response.json().then((data) => {
        alert(`Chave do envelope gerado: ${data.envelope.key}`);
      });
    })
    .catch((response) => {
      // Quando algo der errado
      console.log("failed");
    })
    .finally(() => {
      console.log("always");
      document.querySelector("#signer").remove();
      next.remove();
    });
});

Exemplo 2: Aceite Múltiplo (MultiSigner)

Este exemplo demonstra como coletar o aceite para múltiplos conteúdos, cada um com um participante diferente, em uma única operação.

Passo 1: Incluir a Biblioteca no seu HTML

<script src="https://cdn.statically.io/gh/fa2s/simple-signer/main/dist/signer.dev.js"></script>

Passo 2: Preparar o HTML

<div id="signer-multiplo"></div>
<input id="next-multiplo" type="button" value="Concordo com todos" disabled />

Passo 3: Inicializar e Configurar o MultiSigner

// 1. Crie uma nova instância do MultiSigner com sua chave de API
const signerMultiplo = new MultiSigner("SUA_API_KEY");

// 2. Defina o ambiente de operação
signerMultiplo.mode = "staging";

// 3. Adicione os conteúdos, cada um com seu respectivo participante
signer.set = {
  name: "Nome do participante",
  documents: [
    {
      name: "cpf",
      value: "000.000.000-00",
    },
  ],
  tags: ["saler", "2025"],
};

signer.contents = [
  {
    name: "Contrato de Prestação de Serviço Nº 001",
    key: "25783eb5-0538-414b-87b4-684afc5f3fd9",
  },
  {
    name: "Termo de Uso Nº 001",
    key: "ffe6e132-81d5-4503-a56e-e2219d0cef95",
  },
  {
    name: "Termo de Uso Nº 002",
    key: "ffe6e132-81d5-4503-a56e-e2219d0cef95",
  },
  {
    name: "Termo de Uso Nº 003",
    key: "ffe6e132-81d5-4503-a56e-e2219d0cef95",
  },
  {
    name: "Termo de Uso Nº 004",
    key: "ffe6e132-81d5-4503-a56e-e2219d0cef95",
  },
  {
    name: "Termo de Uso Nº 005",
    key: "ffe6e132-81d5-4503-a56e-e2219d0cef95",
  },
  {
    name: "Termo de Uso Nº 006",
    key: "ffe6e132-81d5-4503-a56e-e2219d0cef95",
  },
];

// 4. Renderize o componente
signerMultiplo.mount("#signer");

// 5. Habilite o botão quando o usuário aceitar os termos
const next = document.querySelector("#next");

// Função chamada quando usuário clicar no checkbox "eu concordo"
signer.toggle = (agreed) => {
  next.disabled = !agreed;
};

// 6. Adicione o evento de clique para formalizar o aceite de todos os itens
next.addEventListener("click", (ev) => {
  ev.preventDefault();
  next.disabled = true;

  // Função que vai ser executada ao confirmar o aceite
  signer
    .agree()
    .then((response) => {
      console.log("success");
      // Informação gerada que deve ser salva
      response.json().then((data) => console.log(data));
    })
    .catch((response) => {
      // Quando algo der errado
      console.log("failed");
    })
    .finally(() => {
      console.log("always");
      next.disabled = false;
      document.querySelector("#signer").remove();
      next.remove();
    });
});

❓Precisa de ajuda? [email protected]

💰Dúvida sobre planos e preços? Veja o comparativo

🔍Não sabe qual versão está usando? Descubra a sua versão

📚Respostas rápidas? Visite nosso FAQ