JavaScript API

    Beyond just placing product embed code on a webpage, Inform Player Suite offers the ability to interact with embedded products on a page by...

    • listening for events (and associated data),
    • embedding products even after the page has loaded,
    • and controlling products with a set of available instructions.

    Getting Started

    Before using Inform Player Suite's JavaScript API, ensure that the needed <script> tag to enable use of the Inform Player Suite as described in the implementation guide is included within a webpage's HTML before the JavaScript API is being used.

    Event Listening

    As soon as certain products are embedded on a page, a set of events become available for listening. A product's configurable <div> element's "id" attribute is used in addition to the event's name to describe the event to be handled.

    In the example below, the "id" attribute is "my-inform-product-1", so when listening for the "videoLoad" event for said product, the event is described as "my-inform-product-1/videoLoad" as shown in the example embed code below:

    Reminder: When event listening for a Perfect Pixel placement, the "placementId" config setting becomes the product's configurable <div> element's "id" attribute.

    Events Available
    videoLoad When a video is loaded into a product's video player
    Supported products: Single player, Inline player, Slider
    See demo
    videoPause When video playback is paused within a product's video player
    Supported products: Single player, Inline player
    See demo
    videoEnd When video playback reaches its end within a product's video player
    Supported products: Single player, Inline player
    See demo
    placementUnavailable When a Perfect Pixel placement remains hidden because no placement was available
    Supported products: Perfect Pixel placement
    See demo

    Event listening for all products

    In adddition to listening for events that occur for a particular product, all products on the page may be listened to by using an asterisk (*) instead of a specific product's configurable <div> element's "id" attribute.

    Embed Products After Page Load

    For partners who wish to deliver our embeddable products unconventionally (through a slideshow carousel or some other creative JavaScript widget), the need to dynamically embed our products on a page at any time is often necessary.

    To embed products via JavaScript after page load (or at any time), a product's configurable <div> element simply needs to be added to the page followed by a short line of JavaScript code to begin the embed process of said <div> element added to the page.

    A simple example of this is shown below:

    Controlling Products

    Being able to control products after they have been embedded offers partners flexibility and more control, especially when it comes to embedding our products unconventionally (such as within a modal window, carousel, or a bleeding-edge JavaScript widget).

    When specifying a command to a specific product, that product's configurable <div> element's "id" attribute is used. An example of using the videoPause command is shown below where the product's configurable <div> element's "id" attribute is presumed to be "my-player":

    A limited set of commands are currently supported for embedded products listed below.

    Commands Available
    videoPause Pauses video playback
    Supported products: Single player, Inline player Slider
    See demo