{"_id":"53fe7dcaaddab8973c1af2b4","parentDoc":null,"category":{"_id":"53ffad2e23a37e1d5cebb03c","project":"53fe6dc5addab8973c1af267","version":"53fe6dc5addab8973c1af26a","__v":1,"pages":["53ffad4623a37e1d5cebb03d","53fe7dcaaddab8973c1af2b4","5400f162ec93b29b61d4f7e0"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-08-28T22:29:02.077Z","from_sync":false,"order":4,"slug":"button-reference","title":"Button Reference"},"comments":[],"tags":[],"is_link":false,"user":"53fe6d8baddab8973c1af266","__v":58,"project":"53fe6dc5addab8973c1af267","version":{"_id":"53fe6dc5addab8973c1af26a","__v":19,"project":"53fe6dc5addab8973c1af267","createdAt":"2014-08-27T23:46:13.941Z","releaseDate":"2014-08-27T23:46:13.941Z","categories":["53fe6dc5addab8973c1af26b","53fe71a2addab8973c1af276","53fe7d89addab8973c1af2b0","53fe7d8daddab8973c1af2b1","53fe836faddab8973c1af2ce","53ff9a4823a37e1d5cebafe1","53ff9e3723a37e1d5cebaff7","53ffaca523a37e1d5cebb039","53ffad2e23a37e1d5cebb03c","5400c7d2ec93b29b61d4f7be","5400f0e1ec93b29b61d4f7dd","54d5636323010a0d001aca81","54d565c1276f8e0d00feab54","54ff40532882a10d00546927","556606d25561af0d008208b7","558c91900b236c2500d37c9a","56180a14f8c9632100ac7599","564fb3a59b4fab1700187518","5702e2d2f2d6f336005e901f"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":["54ceddcc9d09bb0d00a179a5","586bb1ba8f1c460f00c165ff","586bb1ea3e3b592f0051404b","586bb28714acae23008a1436","586bb2b2fde5a52f005bd952","586bb39b7e8897190007e6c8"],"next":{"pages":[],"description":""},"createdAt":"2014-08-28T00:54:34.773Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","try":true,"auth":"never","params":[],"url":""},"isReference":false,"order":1,"body":"# Configuring the button\n\nThe Clef button is the entry point into the Clef experience. It handles creating a login button and the initial portion of the authentication flow, your life easier as a developer.\n\nGenerate a button or explore the configuration below to get started.\n[block:html]\n{\n  \"html\": \"<iframe src=\\\"https://dashboard.getclef.com/docs/iframes/button\\\" width=\\\"100%\\\" height=\\\"450px\\\" style=\\\"border:none; overflow:hidden;\\\"></iframe>\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"**Application ID**  \\n*data-app-id*\",\n    \"1-0\": \"**Redirect URL**  \\n*data-redirect-url*\",\n    \"2-0\": \"**State**  \\n*data-state*\",\n    \"1-1\": \"**Required**. The URL in your app where the user will be sent after they approve authentication. This is where you will [complete the OAuth handshake](doc:authenticating-users).\",\n    \"0-1\": \"**Required**. The application ID you received when you [created a Clef application](doc:creating-a-clef-application).\",\n    \"2-1\": \"**Important**. An unguessable random string (commonly called a CSRF token). It is used to protect against cross-site request forgery attacks. Read more [here](doc:verifying-state-parameter).\",\n    \"3-0\": \"**Color**  \\n*data-color*\",\n    \"3-1\": \"The color of the button (\\\"blue\\\" or \\\"white\\\").\",\n    \"4-0\": \"**Style**  \\n*data-style*\",\n    \"4-1\": \"The style of the button (\\\"flat\\\" or \\\"button\\\").\",\n    \"5-0\": \"**Type**  \\n*data-type*\",\n    \"5-1\": \"The phrasing of the button (\\\"login\\\", \\\"register\\\" or \\\"connect\\\")\",\n    \"6-0\": \"**Custom**  \\n*data-custom*\",\n    \"6-1\": \"With this option, we won't generate a button for you, just attach the correct handlers to the element. You can read more about creating a custom button [here](doc:clefjs-and-the-clef-button) .\",\n    \"7-0\": \"**Embed**  \\n*data-embed*\",\n    \"7-1\": \"With this option, we'll show an embedded Wave instead of the button.\"\n  },\n  \"cols\": 2,\n  \"rows\": 8\n}\n[/block]\n\nFor more information on customizing the button, see [our documentation on Clef.js and the Clef button](/v1.0/docs/clefjs-and-the-clef-button).\n\n# Installing the button\n\nWith your code in hand, installation is easy. In any HTML page, simply paste the script tag wherever you want the Clef button to show up. Want to adjust the position? Wrap it in a `<div>` with a class and move that!\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n    <head>\\n    </head>\\n    <body>\\n        <!-- YOUR HTML DOCUMENT -->\\n        <div class=\\\"clef-wrapper\\\">\\n            <!-- SCRIPT TAG HERE -->\\n        </div>\\n    </body>\\n</html>\\n            \",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n# Next up\n\nOnce you've added the button, you'll need to set up your application to handle the [handle the OAuth handshake](doc:authenticating-users).\n[block:html]\n{\n  \"html\": \"<div></div>\\n<a class=\\\"clef-button blue\\\" href=\\\"/v1.0/docs/authenticating-users\\\">Go to the next section</a>\\n<style></style>\"\n}\n[/block]","excerpt":"Once you've created a Clef application, getting the Clef button on your site takes less than 5 minutes.","slug":"adding-the-clef-button","type":"basic","title":"Adding the Clef button"}

Adding the Clef button

Once you've created a Clef application, getting the Clef button on your site takes less than 5 minutes.

# Configuring the button The Clef button is the entry point into the Clef experience. It handles creating a login button and the initial portion of the authentication flow, your life easier as a developer. Generate a button or explore the configuration below to get started. [block:html] { "html": "<iframe src=\"https://dashboard.getclef.com/docs/iframes/button\" width=\"100%\" height=\"450px\" style=\"border:none; overflow:hidden;\"></iframe>" } [/block] [block:parameters] { "data": { "0-0": "**Application ID** \n*data-app-id*", "1-0": "**Redirect URL** \n*data-redirect-url*", "2-0": "**State** \n*data-state*", "1-1": "**Required**. The URL in your app where the user will be sent after they approve authentication. This is where you will [complete the OAuth handshake](doc:authenticating-users).", "0-1": "**Required**. The application ID you received when you [created a Clef application](doc:creating-a-clef-application).", "2-1": "**Important**. An unguessable random string (commonly called a CSRF token). It is used to protect against cross-site request forgery attacks. Read more [here](doc:verifying-state-parameter).", "3-0": "**Color** \n*data-color*", "3-1": "The color of the button (\"blue\" or \"white\").", "4-0": "**Style** \n*data-style*", "4-1": "The style of the button (\"flat\" or \"button\").", "5-0": "**Type** \n*data-type*", "5-1": "The phrasing of the button (\"login\", \"register\" or \"connect\")", "6-0": "**Custom** \n*data-custom*", "6-1": "With this option, we won't generate a button for you, just attach the correct handlers to the element. You can read more about creating a custom button [here](doc:clefjs-and-the-clef-button) .", "7-0": "**Embed** \n*data-embed*", "7-1": "With this option, we'll show an embedded Wave instead of the button." }, "cols": 2, "rows": 8 } [/block] For more information on customizing the button, see [our documentation on Clef.js and the Clef button](/v1.0/docs/clefjs-and-the-clef-button). # Installing the button With your code in hand, installation is easy. In any HTML page, simply paste the script tag wherever you want the Clef button to show up. Want to adjust the position? Wrap it in a `<div>` with a class and move that! [block:code] { "codes": [ { "code": "<html>\n <head>\n </head>\n <body>\n <!-- YOUR HTML DOCUMENT -->\n <div class=\"clef-wrapper\">\n <!-- SCRIPT TAG HERE -->\n </div>\n </body>\n</html>\n ", "language": "html" } ] } [/block] # Next up Once you've added the button, you'll need to set up your application to handle the [handle the OAuth handshake](doc:authenticating-users). [block:html] { "html": "<div></div>\n<a class=\"clef-button blue\" href=\"/v1.0/docs/authenticating-users\">Go to the next section</a>\n<style></style>" } [/block]