Getting Started

This Integration Library works with Lightning Web Components. If you are not familiar with Lightning Web Component development, review the following resources before proceeding:

1. Build Lightning Web Components Trail
2. Lightning Web Components Dev Guide

Enable Lightning Web Security

To communicate with the b+s Connector, your LWC must load a component from the installed package "{productName}". To load components from other namespaces, Lightning Web Security must be enabled. See how to Enable Lightning Web Security in an Org.

Using the test page

The package includes a test page as a Lightning Web Component called integrationLibraryTestpage. You can add it anywhere in the Salesforce app. The test page displays the last payload of each event and has controls for sending requests.

Create a new Integration

Step 1: Create a new Lightning Web Component

Step 2: Import the connectsIntegrationLibrary service component in the JavaScript file

import ConnectsIntegrationLibrary from 'cnxscv/connectsIntegrationLibrary';

Step 3: Initialize the integration library. The imported library must be initialized before use. Use the returned reference to subscribe to events and dispatch requests.

cil = new ConnectsIntegrationLibrary();

Step 4: Salesforce executes connectedCallback once the component is created. At that point, call initIntegration on the library reference. This notifies the b+s Connector that the integration is fully loaded and ready to connect. Once the b+s Connector is also ready and logged in, the callback passed to initIntegration is executed.

Important!

Only subscribe to events and dispatch requests after the initIntegration callback has been called; otherwise, they are ignored.

connectedCallback() {
  this.cil.initIntegration(() => {
    console.info(`message: initIntegration ready`);
    this.cil.onAgentStateChange((data) => console.info(`message: onAgentStateChange, data: ${JSON.stringify(data)}`));
    this.cil.onWorkitemCreate((data) => console.info(`message: onWorkitemCreate, data: ${JSON.stringify(data)}`));
    this.cil.onWorkitemConnect((data) => console.info(`message: onWorkitemConnect, data: ${JSON.stringify(data)}`));
    this.cil.onWorkitemPause((data) => console.info(`message: onWorkitemPause, data: ${JSON.stringify(data)}`));
    this.cil.onWorkitemResume((data) => console.info(`message: onWorkitemResume, data: ${JSON.stringify(data)}`));
    this.cil.onWorkitemEnd((data) => console.info(`message: onWorkitemEnd, data: ${JSON.stringify(data)}`));
    this.cil.onWorkitemWrapup((data) => console.info(`message: onWorkitemWrapup, data: ${JSON.stringify(data)}`));
    this.cil.onWrapupDataChanged((data) => console.info(`message: onWrapupDataChanged, data: ${JSON.stringify(data)}`));
    this.cil.onCallVariableChanged((data) => console.info(`message: onCallVariableChanged, data: ${JSON.stringify(data)}`));
    this.cil.onError((error) => console.info(`message: onError data: ${JSON.stringify(error)}`));
  });
}

Step 5: All request functions return a promise that resolves once the response from the b+s Connector is received. You can handle these promises with either promise chains or async functions.

async getChannel() {
  const result = await this.cil.getChannel('voice');
  console.info(result);
  console.info(`message: getChannel result ${JSON.stringify(result)}`);
  return result;
}

async getReasonCodeList(type) {
  const channel = await this.getChannel();
  console.info(channel);
  const response = await this.cil.getReasonCodeList(channel.response.channel.id, type);
  console.info(`message: getReasonCodeList ${JSON.stringify(response)}`);
}

async setAgentState(newState, reasonCode, requestId) {
  const channel = await this.getChannel();
  console.info(channel);
  const response = await this.cil.setAgentState(channel.response.channel.id, newState, reasonCode, requestId);
  console.info(`message: setAgentState ${JSON.stringify(response)}`);
}

dialOrConsult(phonenumber, requestId) {
  this.cil.dialOrConsult(
    'voice',
    phonenumber,
    requestId
  ).then((data) => {
    console.info(`message: dial ${JSON.stringify(data)}`);
  });
}

async isUpdateWorkitemDataEnabled(channelId, workitemId, requestId) {
  const response = await this.cil.isUpdateWorkitemDataEnabled(channelId, workitemId, requestId);
  console.info(`message: isUpdateWorkitemDataEnabled ${JSON.stringify(response)}`);
  return response;
}

async updateWorkitemData(workitemId, updatedData, requestId) {
  const channel = await this.getChannel();
  console.info(channel);

  const isUpdateEnabled = await this.isUpdateWorkitemDataEnabled(channel.response.channel.id, workitemId, requestId);
  if (!isUpdateEnabled || !isUpdateEnabled.response) {
    console.info("Workitem data cannot be changed");
    return;
  }

  const updatedWorkitemData = JSON.parse(updatedData);
  const response = await this.cil.updateWorkitemData(channel.response.channel.id, workitemId, updatedWorkitemData, requestId);
  console.info(`message: updateWorkitemData ${JSON.stringify(response)}`);
}

async setWrapupReason(workitemId, wrapupReason, requestId) {
  const channel = await this.getChannel();
  console.info(channel);

  const response = await this.cil.setWrapupReason(channel.response.channel.id, workitemId, wrapupReason, requestId);
  console.info(`message: setWrapupReason ${JSON.stringify(response)}`);
}

async createCallback(
  customerNumber, customerName, queueId, scheduleDate, startTime, endTime,
  timezone, workitemId, agentId, callbackReason, requestId
) {
  const channel = await this.getChannel();
  console.info(channel);

  const response = await this.cil.createCallback({
    channelId: channel.response.channel.id, customerNumber, customerName, queueId, scheduleDate, startTime, endTime,
    timezone, workitemId, agentId, callbackReason, requestId
  });
  console.info(`message: createCallback ${JSON.stringify(response)}`);
}

Full code example

The following snippet can be used as a starting point to create your own integration.

import { LightningElement } from 'lwc';
import ConnectsIntegrationLibrary from 'cnxscv/connectsIntegrationLibrary';
export default class MyIntegration extends LightningElement {
  cil = new ConnectsIntegrationLibrary();

  connectedCallback() {
    this.cil.initIntegration(() => {
      console.info(`message: initIntegration ready`);
      this.cil.onAgentStateChange((data) => console.info(`message: onAgentStateChange, data: ${JSON.stringify(data)}`));
      this.cil.onWorkitemCreate((data) => console.info(`message: onWorkitemCreate, data: ${JSON.stringify(data)}`));
      this.cil.onWorkitemConnect((data) => console.info(`message: onWorkitemConnect, data: ${JSON.stringify(data)}`));
      this.cil.onWorkitemPause((data) => console.info(`message: onWorkitemPause, data: ${JSON.stringify(data)}`));
      this.cil.onWorkitemResume((data) => console.info(`message: onWorkitemResume, data: ${JSON.stringify(data)}`));
      this.cil.onWorkitemEnd((data) => console.info(`message: onWorkitemEnd, data: ${JSON.stringify(data)}`));
      this.cil.onWorkitemWrapup((data) => console.info(`message: onWorkitemWrapup, data: ${JSON.stringify(data)}`));
      this.cil.onWrapupDataChanged((data) => console.info(`message: onWrapupDataChanged, data: ${JSON.stringify(data)}`));
      this.cil.onCallVariableChanged((data) => console.info(`message: onCallVariableChanged, data: ${JSON.stringify(data)}`));
      this.cil.onError((error) => console.info(`message: onError data: ${JSON.stringify(error)}`));
    });
  }

  async getChannel() {
    const result = await this.cil.getChannel('voice');
    console.info(result);
    console.info(`message: getChannel result ${JSON.stringify(result)}`);
    return result;
  }

  async getReasonCodeList(type) {
    const channel = await this.getChannel();
    console.info(channel);
    const response = await this.cil.getReasonCodeList(channel.response.channel.id, type);
    console.info(`message: getReasonCodeList ${JSON.stringify(response)}`);
  }

  async setAgentState(newState, reasonCode, requestId) {
    const channel = await this.getChannel();
    console.info(channel);
    const response = await this.cil.setAgentState(channel.response.channel.id, newState, reasonCode, requestId);
    console.info(`message: setAgentState ${JSON.stringify(response)}`);
  }

  dialOrConsult(phonenumber, requestId) {
    this.cil.dialOrConsult(
      'voice',
      phonenumber,
      requestId
    ).then((data) => {
      console.info(`message: dial ${JSON.stringify(data)}`);
    });
  }

  async isUpdateWorkitemDataEnabled(channelId, workitemId, requestId) {
    const response = await this.cil.isUpdateWorkitemDataEnabled(channelId, workitemId, requestId);
    console.info(`message: isUpdateWorkitemDataEnabled ${JSON.stringify(response)}`);
    return response;
  }

  async updateWorkitemData(workitemId, updatedData, requestId) {
    const channel = await this.getChannel();
    console.info(channel);

    const isUpdateEnabled = await this.isUpdateWorkitemDataEnabled(channel.response.channel.id, workitemId, requestId);
    if (!isUpdateEnabled || !isUpdateEnabled.response) {
      console.info("Workitem data cannot be changed");
      return;
    }

    const updatedWorkitemData = JSON.parse(updatedData);
    const response = await this.cil.updateWorkitemData(channel.response.channel.id, workitemId, updatedWorkitemData, requestId);
    console.info(`message: updateWorkitemData ${JSON.stringify(response)}`);
  }

  async setWrapupReason(workitemId, wrapupReason, requestId) {
    const channel = await this.getChannel();
    console.info(channel);

    const response = await this.cil.setWrapupReason(channel.response.channel.id, workitemId, wrapupReason, requestId);
    console.info(`message: setWrapupReason ${JSON.stringify(response)}`);
  }

  async createCallback(
    customerNumber, customerName, queueId, scheduleDate, startTime, endTime,
    timezone, workitemId, agentId, callbackReason, requestId
  ) {
    const channel = await this.getChannel();
    console.info(channel);

    const response = await this.cil.createCallback({
      channelId: channel.response.channel.id, customerNumber, customerName, queueId, scheduleDate, startTime, endTime,
      timezone, workitemId, agentId, callbackReason, requestId
    });
    console.info(`message: createCallback ${JSON.stringify(response)}`);
  }
}