Using the Clearspring In-Widget API: Quick Steps

Clearspring_logo
There seems to be a lot of confusion about how to get Clearspring integrated into your widget using the In-Widget API model (which is the only way to go if you developing a 'professional widget'). I decided to outline the basic steps involved

Adding a Widget:
First you will need to create a Clearspring widget (this assumes you have already created your Clearspring account).

  1. Click Add Widget.
  2. You will be given 3 options: In My Widget, On My Webpage and Using the In-Widget API. Select Using the In-Widget API.
  3. Enter the informaton for your widget including its name, code type, sharing menu type, colors, sizes and other options.
  4. For Share menu you want to choose Default Menu or Just Tracking
  5. Under What Do you Want to Share enter the embed HTML for your widget
  6. Next, Clearspring will provide you with some sample code for your widget (under Grab your Launchpad advanced code!). The sample code isn't the most intuitive but its a good start. I will try and share some "actual" code you can use in a future post.

Editing A Widget:
Now you can further customize/edit your widget. The primary tabs you'll work with are:

  1. Template Content
    This allows you to modify the HTML embed content that is generated when user's share your widget. This is the same content you entered above in the What Do you Want to Share section.
  2. Library Code
    This is were you can get the code (AS3, AS2 or Javascript) for your widget. This should be the same code generate at the end of the Adding a Widget process.
  3. The rest of the tabs can generally be safetly ignored unless you want your widget to appear/live on the Clearspring site.

Modifying for Flash/Action Script Code:
There are 4 steps involved in actually implement Clearspring sharing and tracking within your widget.

  1. Imports
    You need to make sure you have correct imports at the top of your code. Common mistake is to forget this step.
  2. Initialization
    You need to initialize the Clearspring Flash API before you can do anything with it. Go head and initialize it in your Flash code. Hopefully you can figure out how to do this using the sample code.
  3. Share Menu
    To call the share menu, you'll need to create a share button, attach a click event to it, and add a click function that looks something like this:

    function on_share_click(event:MouseEvent):void
    {
    kernel.menu.show();
    kernel.track.event('ClearSpring Share'); // custom event
    };
  4. Tracking
    When ever you need to track something simple use: kernel.track.event(YOUR_EVENT_NAME_HERE);

Easier said than done but hopefully this provides a good start and helps you avoid some of the common mistakes (choosing the wrong model, working in the wrong tabs, missing a key step) that many of the folks we do Clearspring widget consulting run into!