{"__v":25,"_id":"5400f162ec93b29b61d4f7e0","category":{"__v":1,"_id":"53ffad2e23a37e1d5cebb03c","pages":["53ffad4623a37e1d5cebb03d","53fe7dcaaddab8973c1af2b4","5400f162ec93b29b61d4f7e0"],"project":"53fe6dc5addab8973c1af267","version":"53fe6dc5addab8973c1af26a","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-08-28T22:29:02.077Z","from_sync":false,"order":4,"slug":"button-reference","title":"Button Reference"},"is_link":false,"parentDoc":null,"project":"53fe6dc5addab8973c1af267","user":"53fe6d8baddab8973c1af266","version":{"__v":19,"_id":"53fe6dc5addab8973c1af26a","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":["57203b3cc669e80e00c34f7b"],"next":{"pages":[],"description":""},"createdAt":"2014-08-29T21:32:18.409Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","try":true,"auth":"never","params":[],"url":""},"isReference":false,"order":2,"body":"# Using Clef.js\n\nWith Clef.js, you can have the Clef button on your site in 30 seconds. Simply use the generator below to customize the button to your liking, click \"Get Code\" to get the script tag, and drop it into your websites HTML.\n\nWith the Clef.js button, your users experience a cohesive user experience where they never need to leave the page to log in.\n[block:html]\n{\n  \"html\": \"<iframe src=\\\"https://dashboard.getclef.com/docs/iframes/button\\\" width=\\\"100%\\\" height=\\\"500px\\\" style=\\\"border:none;\\\"></iframe>\"\n}\n[/block]\n## Configuration\n\nYou configure the Clef button by adding `data-` attributes to the script tag that includes the Clef JavaScript. There are a few different options.\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    \"3-0\": \"**Color**  \\n*data-color*\",\n    \"4-0\": \"**Style**  \\n*data-style*\",\n    \"5-0\": \"**Type**  \\n*data-type*\",\n    \"6-0\": \"**Custom**  \\n*data-custom*\",\n    \"7-0\": \"**Embed**  \\n*data-embed*\",\n    \"0-1\": \"**Required**. The application ID you received when you [created a Clef application](doc:creating-a-clef-application).\",\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    \"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-1\": \"The color of the button (\\\"blue\\\" or \\\"white\\\").\",\n    \"4-1\": \"The style of the button (\\\"flat\\\" or \\\"button\\\").\",\n    \"5-1\": \"The phrasing of the button (\\\"login\\\", \\\"register\\\" or \\\"connect\\\")\",\n    \"6-1\": \"With this option, we won't generate a button for you, just attach the correct handlers to the element.\",\n    \"7-1\": \"With this option, we'll show an embedded Wave instead of the button. This means that instead of the user having to click the button to expose the Wave, it will always be shown. This is ideal for a dedicated login page.\"\n  },\n  \"cols\": 2,\n  \"rows\": 8\n}\n[/block]\n\nIf you use the button generator above, you shouldn't need to worry about setting the `data-` attributes manually.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Adding multiple buttons on the same page with Clef.js\"\n}\n[/block]\nIf you're adding multiple buttons on the same page, you won't want to include a new `<script>` tag for every button. This will load Clef.js multiple times on your page and can cause problems. Instead, you'll want to add the Clef.js `<script>` tag once at the bottom of the page and then add `<div>` tags where you want the buttons.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n    <head>\\n    </head>\\n    <body>\\n        <!-- DIV for first button -->\\n        <div class=\\\"clef-button\\\" data-app-id=\\\"d81426867b9c6af247410d317c534880\\\" data-color=\\\"blue\\\" data-style=\\\"flat\\\" data-redirect-url=\\\"https://getclef.com/user/sign_in?redirect=manage.new_application\\\"></div>\\n        \\n        <div class=\\\"content\\\">\\n        <!-- YOUR CONTENT-->\\n        </div>\\n        \\n      \\t<!-- DIV for second button -->\\n       \\t<div class=\\\"clef-button\\\" data-app-id=\\\"d81426867b9c6af247410d317c534880\\\" data-color=\\\"blue\\\" data-style=\\\"flat\\\" data-redirect-url=\\\"https://getclef.com/user/sign_in?redirect=manage.new_application\\\"></div>\\n        \\n        <script type=\\\"text/javascript\\\" src=\\\"https://clef.io/v3/clef.js\\\"></script>\\n    </body>\\n</html>\\n            \",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"NOTE: remember to add the clef-button class\",\n  \"body\": \"When you add the `<div>` tags to your page where you want the buttons, ensure that they have the `clef-button` class. Without the `clef-button` class, Clef.js won't know where to add the buttons and nothing will show up.\"\n}\n[/block]\n# Using a custom Clef login button\n\nIf you'd like to use a custom button, simply drop the `<script>` tag at the bottom of the page and add the `data-custom` attribute to the button you'd like to use to begin the login process. Remember to still add the `clef-button` class to the element so we know where to attach the appropriate event handlers!\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n    <head>\\n    </head>\\n    <body>\\n        <!-- element for custom button -->\\n        <a class=\\\"clef-button\\\" data-app-id=\\\"d81426867b9c6af247410d317c534880\\\" data-color=\\\"blue\\\" data-style=\\\"flat\\\" data-redirect-url=\\\"https://getclef.com/user/sign_in?redirect=manage.new_application\\\" data-custom=\\\"true\\\">Log in with Clef (custom)</a>\\n        \\n        <div class=\\\"content\\\">\\n        <!-- YOUR CONTENT-->\\n        </div>\\n        \\n        <script type=\\\"text/javascript\\\" src=\\\"https://clef.io/v3/clef.js\\\"></script>\\n    </body>\\n</html>\\n          \",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]","excerpt":"Clef.js is the easiest, but not the only, way to add Clef to your site. In this doc, you'll learn about the alternative.","slug":"clefjs-and-the-clef-button","type":"basic","title":"Customizing the Clef button"}

Customizing the Clef button

Clef.js is the easiest, but not the only, way to add Clef to your site. In this doc, you'll learn about the alternative.

# Using Clef.js With Clef.js, you can have the Clef button on your site in 30 seconds. Simply use the generator below to customize the button to your liking, click "Get Code" to get the script tag, and drop it into your websites HTML. With the Clef.js button, your users experience a cohesive user experience where they never need to leave the page to log in. [block:html] { "html": "<iframe src=\"https://dashboard.getclef.com/docs/iframes/button\" width=\"100%\" height=\"500px\" style=\"border:none;\"></iframe>" } [/block] ## Configuration You configure the Clef button by adding `data-` attributes to the script tag that includes the Clef JavaScript. There are a few different options. [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*", "3-0": "**Color** \n*data-color*", "4-0": "**Style** \n*data-style*", "5-0": "**Type** \n*data-type*", "6-0": "**Custom** \n*data-custom*", "7-0": "**Embed** \n*data-embed*", "0-1": "**Required**. The application ID you received when you [created a Clef application](doc:creating-a-clef-application).", "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).", "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-1": "The color of the button (\"blue\" or \"white\").", "4-1": "The style of the button (\"flat\" or \"button\").", "5-1": "The phrasing of the button (\"login\", \"register\" or \"connect\")", "6-1": "With this option, we won't generate a button for you, just attach the correct handlers to the element.", "7-1": "With this option, we'll show an embedded Wave instead of the button. This means that instead of the user having to click the button to expose the Wave, it will always be shown. This is ideal for a dedicated login page." }, "cols": 2, "rows": 8 } [/block] If you use the button generator above, you shouldn't need to worry about setting the `data-` attributes manually. [block:api-header] { "type": "basic", "title": "Adding multiple buttons on the same page with Clef.js" } [/block] If you're adding multiple buttons on the same page, you won't want to include a new `<script>` tag for every button. This will load Clef.js multiple times on your page and can cause problems. Instead, you'll want to add the Clef.js `<script>` tag once at the bottom of the page and then add `<div>` tags where you want the buttons. [block:code] { "codes": [ { "code": "<html>\n <head>\n </head>\n <body>\n <!-- DIV for first button -->\n <div class=\"clef-button\" data-app-id=\"d81426867b9c6af247410d317c534880\" data-color=\"blue\" data-style=\"flat\" data-redirect-url=\"https://getclef.com/user/sign_in?redirect=manage.new_application\"></div>\n \n <div class=\"content\">\n <!-- YOUR CONTENT-->\n </div>\n \n \t<!-- DIV for second button -->\n \t<div class=\"clef-button\" data-app-id=\"d81426867b9c6af247410d317c534880\" data-color=\"blue\" data-style=\"flat\" data-redirect-url=\"https://getclef.com/user/sign_in?redirect=manage.new_application\"></div>\n \n <script type=\"text/javascript\" src=\"https://clef.io/v3/clef.js\"></script>\n </body>\n</html>\n ", "language": "html" } ] } [/block] [block:callout] { "type": "info", "title": "NOTE: remember to add the clef-button class", "body": "When you add the `<div>` tags to your page where you want the buttons, ensure that they have the `clef-button` class. Without the `clef-button` class, Clef.js won't know where to add the buttons and nothing will show up." } [/block] # Using a custom Clef login button If you'd like to use a custom button, simply drop the `<script>` tag at the bottom of the page and add the `data-custom` attribute to the button you'd like to use to begin the login process. Remember to still add the `clef-button` class to the element so we know where to attach the appropriate event handlers! [block:code] { "codes": [ { "code": "<html>\n <head>\n </head>\n <body>\n <!-- element for custom button -->\n <a class=\"clef-button\" data-app-id=\"d81426867b9c6af247410d317c534880\" data-color=\"blue\" data-style=\"flat\" data-redirect-url=\"https://getclef.com/user/sign_in?redirect=manage.new_application\" data-custom=\"true\">Log in with Clef (custom)</a>\n \n <div class=\"content\">\n <!-- YOUR CONTENT-->\n </div>\n \n <script type=\"text/javascript\" src=\"https://clef.io/v3/clef.js\"></script>\n </body>\n</html>\n ", "language": "html" } ] } [/block]