One on one calls

Widget ID: calls

Allow the website users to call users in the your channel directly from the website.

The widget options for this widgets has the following structure:

{
    renderTo: string,
    strings?: LocalizationObject;
    whitelist?: string[],
    async onBeforeRender(callAgents: CallAgent[]): function
}

Properties

renderTo

renderTo: string

CSS selector of the placeholder element where this widget will be rendered (depending on the type of the CSS selector you can render the same widget in more than one place in the page).

strings

strings?: LocalizationObject

An object which allows overriding the strings used to render the call widget.

The LocalizationObject object has the following structure:

{
    title: string,
    text: string
}

Properties:

• title- Title of the call widget
• text - Text of the call widget, it supports the placeholder {{name}} which will render call agent's name anywhere in the text string

whitelist

whitelist?: string[]

An object which allows overriding the strings used to render the call widget.

onBeforeRender

A callback function which is called before the widget is rendered on the page in order to specify which call agent will be called when the call is initiated. This callback function has only one argument which is the list of available call agents in the channel ready to accept the call (call agents whose online status is set to `online).

The CallAgent object has the following structure:

{
    id: string,
    name: string,
    status: Enum<string>['online', 'offline'],
    tags: string[],
    profile_photo_url: string

Properties:

• id - ID of the call agent
• name - Name of the call agent
• status - Online status of the call agent which is configurable from call agent's account settings page
• tags - An arbitrary array of tags assignable to the call agent in order to ease the call routing logic
• profile_photo_url - An URL to call agent's profile photo

It is expected for this function to return an object with the following structure:

{
    callAgentId: string,
    productIds?: string[]
}

Properties:

• callAgentId - An ID of the call agent to which the call will be routed based on the business logic
• productIds - An array of product IDs (SKUs or external IDs) which will be automatically added to the call

Namespace

Calls

The Calls namespace allows programmatically initiating calls.

Methods

startCall

async FluxPlayer.Widgets.Calls.startCall(): void

Calling this method will start the call flow programmatically.

Examples

Rendering the call widget on the page load

The following code snippet will render the call widget in the HTML document with the class name my-cool-call-widget on all pages on the website whose URL ends with /product/123.
The call will be routed to the first call agent who has the tag fashion-support attached to them and once the call is initiated, two products with the SKU or external ID equal to ITM-BLUE-SHIRT and EXT-RED-PANTS will be added to the call.

FluxPlayer.init({
    ...
    widgets: {
        calls: {
            renderTo: '.my-cool-call-widget',
            strings: {
                title: 'Call us now',
                text: 'Your call agent for today is {{name}}'
            },
            whitelist: [
                /\/product\/123$/m
            ],
            onBeforeRender: (callAgents) => {
                const callAgent = callAgents.find((callAgent) => callAgent.tags.includes('fashion-support'));

                return {
                    callAgentId: callAgent.id,
                    productIds: ['ITM-BLUE-SHIRT', 'EXT-RED-PANTS']
                }
            }
        }
    }

Launching the call flow programmatically

The following code snipped will initiate the call programmatically.

await FluxPlayer.Widgets.Calls.startCall();