API reference

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

JavaScript

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:

JavaScript

{
    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

JavaScript

apiKey: string

Your channel's unique API key.

channelId

JavaScript

channelId: string

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

customDomain

JavaScript

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

JavaScript

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

JavaScript

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

JavaScript

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

JavaScript

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:

JavaScript

{
    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

JavaScript

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:

JavaScript

{
    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

JavaScript

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

JavaScript

height: string

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

width

JavaScript

width: string

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

widgets

JavaScript

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:

JavaScript

{
    [widgetId]: WidgetOptions
}

Properties:

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

open

JavaScript

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:

JavaScript

{
    sessionId: string,
    timeIndex: string
}

Properties

sessionId

JavaScript

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

JavaScript

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

JavaScript

FluxPlayer.close(): void

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

---

minimize

JavaScript

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

JavaScript

FluxPlayer.maximize(): void

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

---

updateLocation

JavaScript

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

JavaScript

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

JavaScript

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:

JavaScript

{
    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

JavaScript

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:

JavaScript

{
    timeIndex: string
}

Properties

timeIndex

JavaScript

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

JavaScript

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

JavaScript

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.