Widget JavaScript API

Last Updated: Oct 06, 2017 03:58PM CEST

In this article

    The Widget JavaScript API allow you to utilize specific functions and attributes available for the widget and the banner itself.
     

    Please note

    Methods and Properties should generally speaking be used within a BannerFlow EventListener to ensure that they are available.
    All Methods and Properties are available on BannerFlow.INIT.

    Events

    When your banner is loaded on a website the widget will be an IFRAME in the banner. When the widget is loaded, an object called “BannerFlow” is accessible and will help you listen to various banner events and information.
     
    Event Triggers when
    CLICK widget is clicked
    FEED_CHANGED feed is changed
    FEED_UPDATED feed is updated
    INIT banner is initiated
    LOOP banner loops
    MOUSE_DOWN mouse is down
    MOUSE_MOVE mouse is moving
    MOUSE_UP mouse is release from down
    PAUSE banner is paused
    PLAY banner is played
    RESIZE widget is resized
    SETTINGS_CHANGED a setting is changed for the widget
    START_ANIMATION everytime the widget is starting based on the timeline
    STOP banner is stopped
    STOP_ANIMATION widget's animation is stopped/ended
    STYLE_CHANGED a style is changed on the widget
    TEXTS_RECEIVED all texts is received/loaded
    TEXT_CHANGED text is changed
    TEXT_UPDATED text is updated

     

    Examples

    
    BannerFlow.addEventListener(BannerFlow.INIT, function(){
        console.log("Everything is initiated")
    })
    
    
    
    BannerFlow.addEventListener(BannerFlow.START_ANIMATION, function(){
        console.log("Widget is now active in the banner timeline")
    })
    
    

    Methods

    There's a set of pre-defined methods which either returns values or executes an event.
    Some of methods are also available as simple properties, see further down below.
     
    Method Action
    addEventListener(event, callback) Listen to BannerFlow Event
    getFeed() Return the feed object
    getHeight() Returns widget height
    getStyle(string) Returns styles applied to the widget
    getText() Returns text given to the widget
    getTextByKey(string) Returns text by the given key
    getWidth() Returns widget width
    nextLoop() Skips to the next loop
    open() Simulates a click on the widget and redirects
    pause() Pauses the banner playback
    play() Plays the banner playback
    prevLoop() Skips to previous loop
    raiseEvent(event string, value mixed) Bind a custom event
    removeEventListener(string) Removes an eventlistener
    sendMessage(string, mixed) Bubbles up a message to the bannerscript
    setFeed(object) Set feed data (this overrides already existing feed data)
    setFeedInterval(integer) Sets the current feed interval
    setTargetUrlByKey(string key, string url) Set the deeplink of a textfield (including widgets) by the given key
    setText(string) Set the text of the widget
    setTextByKey(string key, string value) Set the text of a textfield (including widgets) by the given key

     

    Examples

    
    BannerFlow.addEventListener(BannerFlow.RESIZE, function(){
        var w = BannerFlow.getWidth();
        var h = BannerFlow.getHeight();
    })
    
    

    Properties

    Properties just returns a value
     
    Property Data type
    bannerHeight Integer
    bannerWidth Integer
    defaultTargetUrl String
    duration Float
    editorMode Boolean
    feed Object
    imageGeneratorMode Boolean
    imageGeneratorPosition Float
    initTime Float
    key String
    languageCulture String
    lastText String
    mouseX Integer
    mouseY Integer
    parameters Object
    settings Object
    startingPosition Float
    style Object
    text String
    texts Object

    parameters is populated with all parameters in a banner tag

    Examples

    
    BannerFlow.addEventListener(BannerFlow.SETTINGS_CHANGED, function(){
        var element = document.getElementById("mydiv");
        element.style.fontSize = BannerFlow.settings.textSize;
        element.style.color = BannerFlow.settings.textColor;
    })
    
    
    Previous Article Next Article

    RELATED ARTICLES

    support@bannerflow.com
    https://cdn.desk.com/
    false
    desk
    Loading
    seconds ago
    a minute ago
    minutes ago
    an hour ago
    hours ago
    a day ago
    days ago
    about
    false
    Invalid characters found
    /customer/en/portal/articles/autocomplete