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.
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.
|videoLoad||When a video is loaded into a product's video player See demo|
|videoPause||When video playback is paused within a product's video player See demo|
|videoEnd||When video playback reaches its end within a product's video player See demo|
When a Perfect Pixel placement remains hidden because no placement was available
Supported products: Perfect Pixel placementSee 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
A simple example of this is shown below:
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.
|videoPause||Pauses video playback See demo|