Getting Started

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

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

Enable Lightning Web Security

In order to communicate with the b+s Connector your LWC has to load an Component from the installed package "{productName}". To be able to load components from other namespaces Lightning Web Security has to be enabled. Check this to know 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. It can be added 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. In order for the imported library to work it has to be initialized. Use the returned reference to subscribe to events and dispatch requests.

cil = new ConnectsIntegrationLibrary();

Step 4: The connectedCallback is executed by Salesforce once the component is created. At that point we want to call the initIntegration function on the library reference. This will notify the b+s Connector that the integration is fully loaded and ready to connect. Once the b+s Connector is also ready the callback passed to the initIntegration will be executed.

note

Only subscribe to events and dispatch requests after the initIntegration callback has been called, otherwise they will be 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 will be resolved once the response from the b+s Connector is received. Those promises can either be handled with promise chains or with 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)}`);
}

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)}`);
  }
}