Clef application iframe guide

Create_Clef_Application.md

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:

<iframe 
  src="https://clef.io/iframes/application/create/v2?domain=SITE_DOMAIN&name=SITE_NAME&source=wordpress&affiliate_id=12345" 
  width="525" 
  height="350">
</iframe>

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.

NEW: 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 conenct their account later.

(function($) {
  window.addEventListener('message', function(e) {
    if (!(/https:\/\/clef.io/.test(e.origin))){
      return;
    }
    
    if (e.data && e.data.type === "keys") {
        saveSettings({
          appID: e.data.appID,
          appSecret: e.data.appSecret,
          clefID: e.data.clefID
      }
    }
  });
{).call(this, jQuery);

Help

If you have any problems with setting this up, please email [email protected] or join our public chat room here.