Once FluxPanda is successfully embedded into you website, it exposes a global object via FluxPlayer variable which allows you to interact with the widget player to suit your needs. You can find the description of this object below.

Methods

init

FluxPlayer.init(config: InitOptions): void

It is mandatory to call this function first in order to be able to integrate and use the widget player on your website. This method accepts only one argument which is the configuration object.

The config object has the following structure:

{
    apiKey: string,
    channelId?: string,
    customDomain?: string,
    initialPosition?: string,
    language?: string,
    spa?: boolean,
    user?: UserObject,
    onCheckout?: function,
    onEvent?: function,
    height?: string,
    width?: string,
    widgets?: WidgetsObject
}

Properties

apiKey
apiKey: string

Your channel's unique API key.

channelId
channelId: string

ID of your channel. See the note for the customDomain property below.

customDomain
customDomain: string

If you're using a custom domain plugin in FluxPanda then you need to specify your custom domain here and it has to match the domain name which was set in the custom domain plugin.

initialPosition
initialPosition: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'

The initial position of the minimized player. You can specify which corner of the page you want the widget player to be minimized. By default, the initial position is bottom-right.

lang
language: string

The language used in the widget player. The language property accepts a two-letter language code (ISO 639-1).
Currently, FluxPanda supports the following languages:

ISO 639-1

Language

ar

العربية

bs

Bosanski

de

Deutsch

en

English

es

Español

pt

Português

da

Dansk

fi

Suomi

fr

Français

is

Icelandic

ru

Русский

sv

Swedish

zh-cn

中文

If an unsupported language is provided on initialization, the language set through the channel admin dashboard is used.

spa
spa: boolean

If you're integrating widget player into your Shopify website then it is mandatory to set this property to true, otherwise you can omit it.

user
user: UserObject

Some functionalities of the FluxPanda such as being able to chat on the channel or ordering products are available to users only after they successfully sign in. In order for your users to have seamless user experience and in case they're already authenticated on your website you can pass in the user object through which we can temporarily enable those features requiring authentication on FluxPanda without users having to actually go through the authentication process.

The user object has the following structure:

{
    id: string,
    name: string
}

Properties:

  • id- User ID coming from your system (if user is authenticated on your website, optional)
  • name - User's publicly visible name
onCheckout
onCheckout(data: OnCheckoutData): function

The callback function which is called each time user clicks the checkout button in the widget player. Depending on your channel settings, this callback function might be called if certain conditions are met in the external checkout configuration. For more information see the External checkout section.

The data object has the following structure:

{
    checkout_type: 'standard' | 'redirection',
    currency_code: string,
    items: CheckoutItem[],
    session_id: string,
    time_index: string
}

Properties:

  • session_id this is the session from which the checkout button was clicked. This is useful if you have multiple live streams at the same time, or you want to relaunch a session inside the widget, in the event the user is coming from the external standalone player.
  • currency_code - three-letter ISO-4217 ID of the currency code of your channel.
  • items - an array of checkout items with the following structure:
    • external_id - product's unique external ID
    • sku - product's SKU
    • quantity - quantity of the product
  • checkout_type: If the user clicked on the checkout button inside the widget this value will be standard, if they clicked on the checkout button in the standalone player it will be redirection. Use this to know if a user is coming from the standalone version, and relaunch the widget on your website for the same session. This creates a seamless transition from other platforms back to your website.
  • time_index: The specific video time index when this method is called. Only applicable for recorded video playback. You can use this to continue the video playback at the same time when the user has left the external standalone player, creating a seamless transition from external platforms (i.e. social media, email, app etc.) back to your e-commerce store.

If onCheckout function is not provided on FluxPlayer initialization, the widget player uses the regular FluxPanda checkout flow.

onEvent
onEvent(eventName: FluxEvent, eventData: FluxEventData): function

The callback function which is called every time a FluxEvent occurs.

Arguments:

  • FluxEvent: a string as the name of the event.
  • FluxEventData: an object containing details of the event, depending on where the event has occurred.

FluxEvent

Description

Event occurs in

FluxEventData

go-live

Whenever a session goes live.

session

An object containing details of the session.

go-offline

Whenever a session goes offline.

session

An object containing details of the session.

product-card-click

If the channel is configured for product link checkout, clicking the product card will raise this event

session

An object containing all the details of the selected product

video-finished

Triggered when the video playback has reached the end of the video

session

An object containing details of the session.

{
    session: Session
}

video-paused

Triggered when the video playback has been paused

session

An object containing details of the session and the time index at which video was paused.

{ session: Session, timeIndex: Number }

video-playing

Triggered when the video playback has started

session

An object containing details of the session and the time index at which video was played.

{ session: Session, timeIndex: Number }

video-stopped

Triggered when the video playback has stopped

session

An object containing details of the session.

{
    session: Session
}
height
height: string

The height of the widget player can be changed by passing custom value.

width
width: string

The width of the widget player can be changed by passing custom value.

widgets
widgets: WidgetsObject

The functionality of the Embedded SDK is extensible in the form of widgets which can be activated as per business requirements. For more information see the Widgets section.

The widgets object has the following structure:

{
    [widgetId]: WidgetOptions
}

Properties:

  • [widgetId]- ID of the widget
  • WidgetOptions - Options passed to the widget (options vary based on the widget)

open

FluxPlayer.open(options: PlayOptions): void

Calling this method will open the widget player in an overlay modal. Once widget player is initialized, it's up to you to decide when to call this method, it can be when the page is loaded or when a specific button is clicked.

The options object has the following structure:

{
    sessionId: string,
    timeIndex: string
}

Properties

sessionId
sessionId: string

ID of the session for which the widget player will open. You can find these IDs by inspecting the URL in the address bar of your browser when you switch between session in the session selection drop down in the header of your channel's admin panel.

timeIndex
timeIndex: string

If you wish the video recording to start playing at specific time index when this method is called, you can pass the time index (in seconds) from the beginning of the video. If you wish for the video recording to start playing from 25th second and onward then then value of this property should be set to 25. Otherwise, if you omit this property then the video recording will start playing from the beginning.


close

FluxPlayer.close(): void

Calling this method will close the widget player if it's already opened or do nothing if's not.


minimize

FluxPlayer.minimize(): void

Calling this method will minimize the widget player if it's already shown in the overlay modal or do nothing if's not.


maximize

FluxPlayer.maximize(): void

Calling this method will maximize the widget player if it's already shown minimized or do nothing if's not.


updateLocation

FluxPlayer.updateLocation(path: string): void

Calling this method with a relative path will navigate to that URL in your website, without refreshing the entire page and widget player.


clearShoppingCart

FluxPlayer.clearShoppingCart(): void

Calling this method will clear the shopping cart in FluxPanda. This is useful when user completes the transaction within the session and in case user decides to buy again in the same session then previously bought items will be removed from FluxPanda's shopping cart.


getSessions

FluxPlayer.getSessions(channelId?: string): Session[]

By default, calling this method returns the array of sessions in the current channel. If channelId is passed, it returns the sessions of that particular channel

The session object has the following structure:

{
    event_date: string, 
    id: string,
    name: string | null,
    status: 'live' | 'published' | 'draft',
    cover_image: string | null
}

Namespaces

Video

The Video namespace allows manipulation of the video playback for sessions which have video recordings.

Methods

play
FluxPlayer.Video.play(options: PlayOptions): void

Calling this method will play the video recording in the session, optionally starting with time index specified in timeIndex. Note that calling this function will play the video in an infinite loop.

The options object has the following structure:

{
    timeIndex: string
}
Properties
timeIndex
timeIndex: string

If you wish the video recording to start playing at specific time index when this method is called, you can pass the time index (in seconds) from the beginning of the video. If you wish for the video recording to start playing from 25th second and onward then then value of this property should be set to 25. Otherwise, if you omit this property then the video recording will start playing from the beginning.

pause
FluxPlayer.Video.pause(): void

Calling this method will pause the video recording in the session. The paused video can be resumed from the stopped time index by calling the FluxPlayer.Video.play() method.

stop
FluxPlayer.Video.stop(): void

Calling this method will stop the video and reset the time index to 0. The stopped video will be played from the beginning after calling the FluxPlayer.Video.play() method.

Widgets

The Widgets namespace allows manipulation of the enabled widgets. For more information see the Widgets section.