{"_id":"5400c910ec93b29b61d4f7c3","__v":3,"parentDoc":null,"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"},"user":"53fe6d8baddab8973c1af266","category":{"_id":"5400c7d2ec93b29b61d4f7be","version":"53fe6dc5addab8973c1af26a","__v":2,"project":"53fe6dc5addab8973c1af267","pages":["5400c85aec93b29b61d4f7bf","5400c910ec93b29b61d4f7c3"],"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-08-29T18:34:58.870Z","from_sync":false,"order":8,"slug":"plugin-creation","title":"Plugin creation"},"is_link":false,"project":"53fe6dc5addab8973c1af267","updates":[],"next":{"pages":[],"description":""},"createdAt":"2014-08-29T18:40:16.201Z","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":"Anyone can use the easy-embed Clef application creation iframe to allow users of their plugin to quickly create a Clef application for their site without leaving the plugin environment.\n\n# Embeding the iframe\n\nWhen you embed the iframe, you must provide a variety of variables, which allow Clef to customize the experience for the user. Each of these variables must be passed as a URL parameter with a URL encoded value.\n\n* `domain` — The domain that the website is hosted on. In WordPress, we get this value by accessing `urlencode(get_option('site_url'))`.\n\n* `name` - The name of the application that will be created. In WordPress we get this value by accessing `urlencode(get_option('blogname'))`.\n\n* `logout_hook` - A logout hook for the application that will be created.\n\n* `source` — A source ID that you've agreed on with the Clef team. For WordPress, this is just wordpress. For Joomla, this will be joomla. For Magento, this will be magento. This allows the iframe to do the requisite customizing for the platform.\n\n\n\nThe iframe is optimized to be displayed with a height of `415px` and a width of `225px`, but it should expand or shrink as necessary to acommodate your layout. \n\nHere is an example iframe embed tag:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<iframe \\n  src=\\\"https://clef.io/iframes/application/create/v2?domain=SITE_DOMAIN&name=SITE_NAME&source=wordpress&affiliate_id=12345\\\" \\n  width=\\\"525\\\" \\n  height=\\\"350\\\">\\n</iframe>\\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n# Listening for the `keys` event\n\nWhen the user successfully creates an application, the iframe emits an event, which allows you to auto fill the necessary settings form fields in your plugin.\n\nTo listen to this event, auto fill the form fields, and auto submit the form, add the following snippet of Javascript to the page with the iframe with the correct variables.\n[block:callout]\n{\n  \"type\": \"success\",\n  \"title\": \"NEW: Clef ID in the keys event\",\n  \"body\": \"In addition to the App ID and App Secret, this event will provide a `clef_id` for the user who just set up the application. You should connect this `clef_id` to the user, so that they do not need to manually connect their account later.\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"(function($) {\\n  window.addEventListener('message', function(e) {\\n    if (!(/https:\\\\/\\\\/clef.io/.test(e.origin))){\\n      return;\\n    }\\n    \\n    if (e.data && e.data.type === \\\"keys\\\") {\\n        saveSettings({\\n          appID: e.data.appID,\\n          appSecret: e.data.appSecret,\\n          clefID: e.data.clefID\\n      }\\n    }\\n  });\\n{).call(this, jQuery);\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]","excerpt":"Embed a Clef application creation iframe in your site for a seamless setup experience","slug":"embedded-application-creation","type":"basic","title":"Embedded application creation"}

Embedded application creation

Embed a Clef application creation iframe in your site for a seamless setup experience

Anyone can use the easy-embed Clef application creation iframe to allow users of their plugin to quickly create a Clef application for their site without leaving the plugin environment. # Embeding the iframe When you embed the iframe, you must provide a variety of variables, which allow Clef to customize the experience for the user. Each of these variables must be passed as a URL parameter with a URL encoded value. * `domain` — The domain that the website is hosted on. In WordPress, we get this value by accessing `urlencode(get_option('site_url'))`. * `name` - The name of the application that will be created. In WordPress we get this value by accessing `urlencode(get_option('blogname'))`. * `logout_hook` - A logout hook for the application that will be created. * `source` — A source ID that you've agreed on with the Clef team. For WordPress, this is just wordpress. For Joomla, this will be joomla. For Magento, this will be magento. This allows the iframe to do the requisite customizing for the platform. The iframe is optimized to be displayed with a height of `415px` and a width of `225px`, but it should expand or shrink as necessary to acommodate your layout. Here is an example iframe embed tag: [block:code] { "codes": [ { "code": "<iframe \n src=\"https://clef.io/iframes/application/create/v2?domain=SITE_DOMAIN&name=SITE_NAME&source=wordpress&affiliate_id=12345\" \n width=\"525\" \n height=\"350\">\n</iframe>\n", "language": "html" } ] } [/block] # Listening for the `keys` event When the user successfully creates an application, the iframe emits an event, which allows you to auto fill the necessary settings form fields in your plugin. To listen to this event, auto fill the form fields, and auto submit the form, add the following snippet of Javascript to the page with the iframe with the correct variables. [block:callout] { "type": "success", "title": "NEW: Clef ID in the keys event", "body": "In addition to the App ID and App Secret, this event will provide a `clef_id` for the user who just set up the application. You should connect this `clef_id` to the user, so that they do not need to manually connect their account later." } [/block] [block:code] { "codes": [ { "code": "(function($) {\n window.addEventListener('message', function(e) {\n if (!(/https:\\/\\/clef.io/.test(e.origin))){\n return;\n }\n \n if (e.data && e.data.type === \"keys\") {\n saveSettings({\n appID: e.data.appID,\n appSecret: e.data.appSecret,\n clefID: e.data.clefID\n }\n }\n });\n{).call(this, jQuery);", "language": "text" } ] } [/block]