Interaction of data between salesforce to web portal and vice versa

Purpose

As part of the improved user experience web portal and Salesforce front-ends need a way to communicate to synchronize business context. e.g. when a user search a account in portal, Salesforce should be updated to display this account’s CRM information. in the other direction, if an action button can be use in Salesforce in order to automatically navigate in Web portal to a specific contextual page.

Technical View

Salesforce allows front-end communication through its OpenCTI API. It is originally designed to integrate Telephony Systems, but can be used for other systems as well. It enables placing a softphone iframe on Salesforce. The iframe can then communicate with the rest of the Salesforce page through a JavaScript API. Since the web portal and this iframe are hosted on the same domain, they can communicate with the Broadcast Chanel API. The complete communication is drawn below.

In this scenario, the communication between web portal and Salesforce can be described as follows:

From Web Portal to Salesforce:

• Web Portal sends an event through the broadcast channel to the softphone iframe
• The softphone iframe receives the event and uses the OpenCTI API to send a message to the SF front-end

From Salesforce to Web Portal:

• Salesforce sends an event through the Lightning Messaging Channel to the softphone iframe
• The softphone iframe receives the event and uses the broadcast channel to send a message to the Web Portal.

Detailed Description

From Web Portal to Salesforce:

The Broadcast Channel API allows simple communication between browsing contexts (that is windows, tabs, frames, or iframes) with the same origin 

The softphone page and the portal are both hosted on the same origin

A call center is configured in Salesforce in order to point to the softphone page, that contains the proper JavaScript to interact with the Portal through the Broadcast Channel API

This softphone page is surfaced in Salesforce in an iFrame.

The softphone integrate with Salesforce through the Open CTI API

The Open CTI API build and integrate third-party computer-telephony integration (CTI) systems with Salesforce Call Center using a browser-based JavaScript API.

The Open CTI API is used to interact with Salesforce . Following methods from the OpenCTI Framework are used:

·       runApex : execute apex methods

·       screenPop : open a tab in Salesforce console

These commands can be triggered from the Softphone page and will trigger actions in Salesforce.

Interaction flow 

The figure below show the interaction between portal, Softphone, Salesforce

Web Portal : 

·       the Agent clicks open an account in Salesforce

·       setContext message is sent to the softphone through the Broadcast Channel API with the account number 

Softphone: 

·       in the softphone page, the same Broadcast Channel is created. An event listener on that channel is enabled in the Softphone page.

·       the setContext message is received. This triggers the switch(data.messageType) → Case 'setContext'

·       the Open CTI runApex method is called against the OpenCTI_API_IntegrationService class in order to search for the account id using the account number 

Salesforce :

·       the result of the Open CTI runApex call is returned to the Softphone page

Softphone : 

·       if the account id is found the Open CTI screenPop is called to open the account in a console sub tab 

·       result message is sent to the Web Portal through the Broadcast Channel API with the errors if there is any

Error Handling

Errors are handled in the Softphone pane 

The softphone shows the error

Demo Screenshot:

Search the Account with Account Name ‘Burlington’ in web portal simulator.

In Salesforce corresponding record having Account Name ‘Burlington Textiles Corp of America’ open automatically in real time.

From Salesforce to Web Portal:

Communicate Across the DOM with Lightning Message Service

Use Lightning message service to communicate across the DOM within a Lightning page. Communicate between Visualforce pages embedded in the same Lightning page, Aura components, and Lightning web components, including components in a utility bar and pop-out utilities. Choose whether a component subscribes to messages from the entire application, or from only the active area.

Publish on a Message Channel

To publish messages on a message channel from a Lightning web component, include the @salesforce/messageChannel scoped module in your component's JavaScript file and call the Lightning message service’s publish() function.

Subscribe and Unsubscribe from a Message Channel

To subscribe and unsubscribe from messages on a message channel, import the message channel from the @salesforce/messageChannel scoped module into your Lightning web component. Call the Lightning message service’s subscribe() and unsubscribe() functions.

The Open CTI API build and integrate third-party computer-telephony integration (CTI) systems with Salesforce Call Center using a browser-based JavaScript API.

Once Lightning message channel publish the message and softphone recive the message as subscription is already done for the channel then web portal use Broadcast Channel API to perform the operation using postMessage and onMessage method.

Interaction flow 

The figure below show the interaction between portal, Softphone, Salesforce

Salesforce : 

·       the Agent clicks on button “Open Account In Web” in Salesforce

·       Lighting Message Channel publish the message and subscribed listener receive the same.

Softphone: 

·       in the softphone page, the Broadcast Channel is created to post the message.

Web Portal : 

·       Broadcast Channel onMessage listener then listen the posted message and perform the desired action based on the data in the message.

Demo Screenshot:

In Salesforce from opportunity object clicked on the button ‘Open Account In Web’ button and in the background salesforce sends the associated account number or account name if account number is blank.

In Web Portal simulator Account Number get copied in the External Id automatically.

Implementation:

https://github.com/abhinav4804/salesforce-web-portal-integration

https://github.com/abhinav4804/SalesforceOpenCTI

?Tools & APIs Used

1. ·      Open CTI APIs
2. ·      Broadcast channel APIs
3. ·      JavaScript
4. ·      Lightning Web Component
5. ·      Lightning Message Channel
6. ·      Call Center configuration