Add a Partner Settings UI to Omni-Channel

This Lightning web component (LWC) can show any available LWC elements, such as radio boxes, checkboxes, comboboxes, input boxes.

To make this feature available, Partners have to provide the fully qualified name of the Lightning component from within Conversation Vendor Info, along with the LWC component in the published package. Salesforce reads the component name from the Conversation Vendor Info and displays the partner component from within the Omni-Channel widget.

To fully integrate the LWC component, partners must provide the mandatory hooks for Save and Cancel. The following diagram illustrates how the LWC component interacts with other components.

In Conversation Vendor Info, set the TelephonySettingsComponent field to {namespace}:{componentName}.

Sample agentConfig.html:

<template>
  <div class="slds-p-left_large slds-p-right_large">
    <lightning-input type="text" label="Caller Id" onchange={onCallerIdChange} value={callerId} placeholder="Enter your caller ID">
    </lightning-input>
    <lightning-input type="text" label="Queue Id" onchange={onQueueIdChange} value={queueId} placeholder="Enter your Queue ID">
    </lightning-input>
  </div>
</template>

Sample agentConfig.js:

import { LightningElement, track, api } from 'lwc';
export default class AgentConfig extends LightningElement {
    @track queueId;
    @track callerId;
    _settings = {};

    onQueueIdChange(event) {
        this.queueId = event.detail.value;
    }

    onCallerIdChange(event) {
        this.callerId = event.detail.value;
    }

    @api
    save() {
        this._settings = {
            queueId: this.queueId,
            callerId: this.callerId
        };
    }

    @api
    cancel() {
        this.queueId = this._settings.queueId;
        this.callerId = this._settings.callerId;
    }
}