{"_id":"54dd190f08f6b61700a69206","__v":99,"parentDoc":null,"user":"54da5cb85b80b62300dadc4b","category":{"_id":"54db48cd7dadb32300511364","project":"54da5d2f5b80b62300dadc4e","version":"54da5d305b80b62300dadc51","__v":5,"pages":["54dd180908f6b61700a69203","54dd1866ca1e5219007e9db6","54dd18bbca1e5219007e9db8","54dd190f08f6b61700a69206","54dd1d26ca1e5219007e9dba"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-02-11T12:19:25.480Z","from_sync":false,"order":2,"slug":"widget","title":"Widget"},"project":"54da5d2f5b80b62300dadc4e","githubsync":"","version":{"_id":"54da5d305b80b62300dadc51","project":"54da5d2f5b80b62300dadc4e","__v":7,"createdAt":"2015-02-10T19:34:08.062Z","releaseDate":"2015-02-10T19:34:08.062Z","categories":["54da5d305b80b62300dadc52","54da704b11dfeb1900430309","54da705c44b1090d00072b34","54db48c86db3861700c840c5","54db48cd7dadb32300511364","54dbaa0c7dadb3230051143b","572b89f0b352ab0e003daca2"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"v1.0","version_clean":"1.0.0","version":"1"},"metadata":{"title":"","description":"","image":[]},"updates":["54dde22a45aa9e170051e65f","54ddf8853a91410d001b1688"],"next":{"pages":[],"description":""},"createdAt":"2015-02-12T21:20:15.734Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"Sugerimos que você utilize a nova plataforma da Clicksign. Consulte a documentação da API em https://developers.clicksign.com. \\n\\nEsta documentação é referente à API da plataforma Clicksign Classic.\",\n  \"title\": \"Utilize a nova plataforma de assinatura\"\n}\n[/block]\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"O upload de documento e a criação de lista de assinatura via **Rest API** são requisitos para a utilização do widget. Não se esqueça de setar o parâmentro `skip_email=true`.\",\n  \"title\": \"Rest API: necessária para o setup do widget\"\n}\n[/block]\nRequisitos para instalação do widget na página:\n  1. Carregar a biblioteca javascript da Clicksign na página.\n  2. Disponibilizar um elemento HTML, por exemplo um `div`, dentro do qual será montado o widget.\n  3. Chamar a função javascript para montagem do widget.\n  4. Ter uma função de callback para interagir com o widget.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Biblioteca javascript\"\n}\n[/block]\nA biblioteca _javascript_ da Clicksign precisa ser incluída no corpo da página. O arquivo deve ser copiado para seu próprio site. A última versão da biblioteca pode ser encontrada em https://raw.githubusercontent.com/clicksign/widget/master/dist/clicksign.js.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Atualização de versões\",\n  \"body\": \"Melhorias nas funcionalidades e correções, assim como o lançamento de novas versões do widget, serão comunicados através de e-mail para todos que estiverem inscritos no canal com desenvolvedores. Inscreva-se enviando um e-mail para [clicksign-dev+subscribe:::at:::googlegroups.com](mailto:clicksign-dev+subscribe@googlegroups.com).\"\n}\n[/block]\nExemplo de como a biblioteca deve ser carregada:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src='/javascripts/clicksign.js' type='text/javascript'></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Elemento para montagem do widget\"\n}\n[/block]\nO widget necessita de um elemento `container` na DOM no qual ele será inserido.\n\nSugerimos que seja um `div`, como no exemplo abaixo:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div id='signature-box'></div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Função javascript\"\n}\n[/block]\nPara a montagem do widget, é necessário chamar a função javascript `clicksign.configure`. \n\nAbaixo os parâmetros que devem ser configurados:\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"`container`\",\n    \"h-0\": \"Propriedade\",\n    \"h-1\": \"Opções\",\n    \"h-2\": \"Descrição\",\n    \"1-0\": \"`key`\",\n    \"2-0\": \"`signer.email`\",\n    \"3-0\": \"`signer.display_name`\",\n    \"4-0\": \"`signer.documentation`\",\n    \"6-0\": \"`callback`\",\n    \"7-0\": \"`protocol`\",\n    \"8-0\": \"`host`\",\n    \"9-0\": \"`width`\",\n    \"10-0\": \"`height`\",\n    \"0-2\": \"ID na DOM do elemento no qual o iframe será inserido.\",\n    \"1-2\": \"Chave do **documento** ou do **lote** a ser assinado.\",\n    \"2-2\": \"E-mail do signatário.\",\n    \"3-2\": \"Nome signatário para o campo vir pré-preenchido.\\nParâmetro ignorado quando signatário já tiver conta na Clicksign ou quando dado for enviado pela API para utilização do widget como *read-only*.\",\n    \"4-2\": \"CPF do signatário para o campo vir pré-preenchido.\\nParâmetro ignorado quando signatário já tiver conta na Clicksign ou quando dado for enviado pela API para utilização do widget como *read-only*.\",\n    \"6-2\": \"Função que será chamada quando ocorrer algum evento no widget.\",\n    \"7-2\": \"Protocolo a ser utilizado na montagem do iframe.\",\n    \"8-2\": \"Host a ser utilizado na montagem do iframe .\\n\\n[Confira aqui os ambientes da Clicksign](/docs/notas-da-api#ambientes--hosts)\",\n    \"9-2\": \"Largura em pixels do iframe.\",\n    \"10-2\": \"Altura em pixels do iframe.\",\n    \"0-1\": \"(obrigatório)\",\n    \"1-1\": \"(obrigatório)\",\n    \"2-1\": \"se não for informado, não haverá o botão para realizar a assinatura\",\n    \"6-1\": \"function() {}\",\n    \"7-1\": \"`HTTP` ou `HTTPS` (padrão)\",\n    \"8-1\": \"Domínio:\\n\\n`widget.clicksign.com`\\n\\n`widget.clicksign-demo.com`\",\n    \"9-1\": \"Mínimo: 600\\n\\nPadrão: 800\",\n    \"10-1\": \"Mínimo: 500\\n\\nPadrão: 600\",\n    \"5-0\": \"`signer.birthday`\",\n    \"5-2\": \"Data de nascimento para o campo vir pré-preenchido.\\nParâmetro ignorado quando signatário já tiver conta na Clicksign ou quando dado for enviado pela API para utilização do widget como *read-only*.\",\n    \"5-1\": \"Formato: `1980-12-31`\"\n  },\n  \"cols\": 3,\n  \"rows\": 11\n}\n[/block]\nExemplo de configuração para montar um widget dentro do elemento do DOM ID ``signature-box`` para o usuário com e-mail ``john.dow@example.com`` assinar no ambiente de demonstração ``widget.clicksign-demo.com`` com largura de ``900`` _pixels_ e altura de ``1000`` _pixels_.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"clicksign.configure({\\n    container: \\\"signature-box\\\",\\n    key: \\\"5daf0a8c-ce44-431f-930f-2f9ccaaf8453\\\",\\n    protocol: \\\"https\\\",\\n    host: \\\"widget.clicksign-demo.com\\\",\\n    signer: {\\n        email: \\\"john.doe@example.com\\\",\\n        display_name: \\\"John Doe\\\",\\n        documentation: \\\"123.321.123-40\\\",\\n      \\tbirthday: \\\"1980-01-10\\\"\\n    },\\n    width: 900,\\n    height: 1000,\\n    callback: function(event) {\\n      if (event.data === \\\"signed\\\") {\\n        return location.assign(\\\"http://www.example.com\\\");\\n      }\\n    }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Callback javascript\"\n}\n[/block]\nQuando um documento for carregado ou assinado, a função callback passada como parâmetro na configuração do widget é chamada. Através dela você pode manipular a sua aplicação conforme necessário.\n\nEsta função é executada no contexto da aplicação que utiliza o widget; desta forma você pode manipular sua DOM ou executar outras funções javascript. O único parâmetro que a função recebe é uma **string** com o nome do evento.  Os eventos possíveis são:\n- **requested**: Disparado quando o widget é carregado. \n- **signed**: Disparado quando signatário efetua a assinatura.\n\nExemplo de função **callback**:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"callback = function(event) {\\n    if (event.data === \\\"signed\\\") {\\n      return location.assign(\\\"/assinado-com-sucesso\\\");\\n    }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"instalacao-widget","type":"basic","title":"Instalação"}
[block:callout] { "type": "danger", "body": "Sugerimos que você utilize a nova plataforma da Clicksign. Consulte a documentação da API em https://developers.clicksign.com. \n\nEsta documentação é referente à API da plataforma Clicksign Classic.", "title": "Utilize a nova plataforma de assinatura" } [/block] [block:callout] { "type": "info", "body": "O upload de documento e a criação de lista de assinatura via **Rest API** são requisitos para a utilização do widget. Não se esqueça de setar o parâmentro `skip_email=true`.", "title": "Rest API: necessária para o setup do widget" } [/block] Requisitos para instalação do widget na página: 1. Carregar a biblioteca javascript da Clicksign na página. 2. Disponibilizar um elemento HTML, por exemplo um `div`, dentro do qual será montado o widget. 3. Chamar a função javascript para montagem do widget. 4. Ter uma função de callback para interagir com o widget. [block:api-header] { "type": "basic", "title": "Biblioteca javascript" } [/block] A biblioteca _javascript_ da Clicksign precisa ser incluída no corpo da página. O arquivo deve ser copiado para seu próprio site. A última versão da biblioteca pode ser encontrada em https://raw.githubusercontent.com/clicksign/widget/master/dist/clicksign.js. [block:callout] { "type": "warning", "title": "Atualização de versões", "body": "Melhorias nas funcionalidades e correções, assim como o lançamento de novas versões do widget, serão comunicados através de e-mail para todos que estiverem inscritos no canal com desenvolvedores. Inscreva-se enviando um e-mail para [clicksign-dev+subscribe@googlegroups.com](mailto:clicksign-dev+subscribe@googlegroups.com)." } [/block] Exemplo de como a biblioteca deve ser carregada: [block:code] { "codes": [ { "code": "<script src='/javascripts/clicksign.js' type='text/javascript'></script>", "language": "html" } ] } [/block] [block:api-header] { "type": "basic", "title": "Elemento para montagem do widget" } [/block] O widget necessita de um elemento `container` na DOM no qual ele será inserido. Sugerimos que seja um `div`, como no exemplo abaixo: [block:code] { "codes": [ { "code": "<div id='signature-box'></div>", "language": "html" } ] } [/block] [block:api-header] { "type": "basic", "title": "Função javascript" } [/block] Para a montagem do widget, é necessário chamar a função javascript `clicksign.configure`. Abaixo os parâmetros que devem ser configurados: [block:parameters] { "data": { "0-0": "`container`", "h-0": "Propriedade", "h-1": "Opções", "h-2": "Descrição", "1-0": "`key`", "2-0": "`signer.email`", "3-0": "`signer.display_name`", "4-0": "`signer.documentation`", "6-0": "`callback`", "7-0": "`protocol`", "8-0": "`host`", "9-0": "`width`", "10-0": "`height`", "0-2": "ID na DOM do elemento no qual o iframe será inserido.", "1-2": "Chave do **documento** ou do **lote** a ser assinado.", "2-2": "E-mail do signatário.", "3-2": "Nome signatário para o campo vir pré-preenchido.\nParâmetro ignorado quando signatário já tiver conta na Clicksign ou quando dado for enviado pela API para utilização do widget como *read-only*.", "4-2": "CPF do signatário para o campo vir pré-preenchido.\nParâmetro ignorado quando signatário já tiver conta na Clicksign ou quando dado for enviado pela API para utilização do widget como *read-only*.", "6-2": "Função que será chamada quando ocorrer algum evento no widget.", "7-2": "Protocolo a ser utilizado na montagem do iframe.", "8-2": "Host a ser utilizado na montagem do iframe .\n\n[Confira aqui os ambientes da Clicksign](/docs/notas-da-api#ambientes--hosts)", "9-2": "Largura em pixels do iframe.", "10-2": "Altura em pixels do iframe.", "0-1": "(obrigatório)", "1-1": "(obrigatório)", "2-1": "se não for informado, não haverá o botão para realizar a assinatura", "6-1": "function() {}", "7-1": "`HTTP` ou `HTTPS` (padrão)", "8-1": "Domínio:\n\n`widget.clicksign.com`\n\n`widget.clicksign-demo.com`", "9-1": "Mínimo: 600\n\nPadrão: 800", "10-1": "Mínimo: 500\n\nPadrão: 600", "5-0": "`signer.birthday`", "5-2": "Data de nascimento para o campo vir pré-preenchido.\nParâmetro ignorado quando signatário já tiver conta na Clicksign ou quando dado for enviado pela API para utilização do widget como *read-only*.", "5-1": "Formato: `1980-12-31`" }, "cols": 3, "rows": 11 } [/block] Exemplo de configuração para montar um widget dentro do elemento do DOM ID ``signature-box`` para o usuário com e-mail ``john.dow@example.com`` assinar no ambiente de demonstração ``widget.clicksign-demo.com`` com largura de ``900`` _pixels_ e altura de ``1000`` _pixels_. [block:code] { "codes": [ { "code": "clicksign.configure({\n container: \"signature-box\",\n key: \"5daf0a8c-ce44-431f-930f-2f9ccaaf8453\",\n protocol: \"https\",\n host: \"widget.clicksign-demo.com\",\n signer: {\n email: \"john.doe@example.com\",\n display_name: \"John Doe\",\n documentation: \"123.321.123-40\",\n \tbirthday: \"1980-01-10\"\n },\n width: 900,\n height: 1000,\n callback: function(event) {\n if (event.data === \"signed\") {\n return location.assign(\"http://www.example.com\");\n }\n }\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Callback javascript" } [/block] Quando um documento for carregado ou assinado, a função callback passada como parâmetro na configuração do widget é chamada. Através dela você pode manipular a sua aplicação conforme necessário. Esta função é executada no contexto da aplicação que utiliza o widget; desta forma você pode manipular sua DOM ou executar outras funções javascript. O único parâmetro que a função recebe é uma **string** com o nome do evento. Os eventos possíveis são: - **requested**: Disparado quando o widget é carregado. - **signed**: Disparado quando signatário efetua a assinatura. Exemplo de função **callback**: [block:code] { "codes": [ { "code": "callback = function(event) {\n if (event.data === \"signed\") {\n return location.assign(\"/assinado-com-sucesso\");\n }\n}", "language": "javascript" } ] } [/block]