Log in with Facebook Log in
Log in
Log in with Microsoft

Not registered? Sign up for free »

Thinglink.js Javascript support library#

Setup#

While you may develop your app as a fully standalone Rich Media Tag, we also provide a Javascript library to support your most common usecases.

To load the Thinglink support library, add the following to the header of your application:

<script type="text/javascript" src="//cdn.thinglink.me/jse/thinglink.js"></script>

The thinglink.js file will load jQuery unless it is already loaded, and will then load a modified version of Ben Alman's jQuery PostMessage plug-in.

Receiving notifications#

To receive a notification of when the API is ready, register a callback function as in the below example:

    // When API is ready, do stuff
    thinglink.setOnReadyCallback(function() {
        // Do stuff
    });

If you do not care to receive a notification, you can determine whether the API is ready at any time via examining the value of thinglink.isReady, as below:

    // If API is ready, do stuff
    if (thinglink.isReady) {
        // Do stuff
    }

Resizing your tag#

To resize the current iframe, simply call

    thinglink.resize(width, height) 

The provided values are width and height in pixels.

When resize is called before the API is ready, the call will be sent when jQuery and Postmessaging have been loaded.

To only resize in one dimension, simply omit or set the other dimension to null or undefined or 0, for example thinglink.resize(250) to set iframe width to 250px, or thinglink.resize(null, 250) to set the iframe height to 250px. The other dimension is not changed.

You can also adjust the width or height of a tag automatically to its contents. This can be done by setting the value to "auto". For example, thinglink.resize(null,"auto") keeps the width the same but resizes the height of the tag automatically. To resize automatically in both dimensions, use thinglink.resize("auto","auto").

Please mind that with old browsers such as IE7 the messaging system used by the iframe resize mechanism is based on polling, so you must avoid using resizing excessively, and never fire two resize messages within approximately 100ms. So if you want to resize both width and height, do it in one call rather than two sequential calls. The minimum height/width of a tag is 50 px, and the maximum is 400 px. If you feel that we should relax these limits, please let us know at http://support.thinglink.com/

Creating sticky tags#

Sometimes you'd very much like to have the tag NOT go away when the user moves the mouse out of it. This you can accomplish by calling

    thinglink.setSticky(true);

This creates a close button on the top-right corner, as well as makes the tag sticky: it will not go away until the user explicitly closes it using the button.

You may also make a tag unsticky simply by calling

    thinglink.setSticky(false);

For example, if you have a video player, you could make the tag unsticky again after the video has stopped playing.