Set up the embedded experience in Salesforce

Open the Salesforce Service console, and then select the Setup (gear) icon in the top-right corner.

In the search field, type call center, and then in the search results, select Call Centers.

If you're setting up this widget for the first time, you might see a page with a message that says, Say Hello to Salesforce Call Center.

Select Continue.

Open a text editor, and then copy the following XML code into it and save it locally as CopilotForServiceConfig.xml.

  <callCenter>
  <section sortOrder="0" name="reqGeneralInfo" label="General Information">
  <item sortOrder="0" name="reqInternalName" label="InternalName">CopilotForService</item>
  <item sortOrder="1" name="reqDisplayName" label="Display Name">Copilot For Service</item>
  <item sortOrder="2" name="reqAdapterUrl" label="CTI Adapter URL">https://TobeUpdated.ms</item>
  <item sortOrder="3" name="reqUseApi" label="Use CTI API">true</item>
  <item sortOrder="4" name="reqSoftphoneHeight" label="Softphone Height">600</item>
  <item sortOrder="5" name="reqSoftphoneWidth" label="Softphone Width">450</item>
  <item sortOrder="6" name="reqSalesforceCompatibilityMode" label="Salesforce Compatibility Mode">Classic_and_Lightning</item>
  </section>
 </callCenter>

Select Import > Choose File, and then navigate to and select the CopilotForServiceConfig.xml file you saved in step 4.

Select Import.

Select Edit, and then in the CTI Adapter URL field, paste the URL for the Copilot for Service widget URL you saved in Step 1.

Select Save.

Perform the following steps to add Salesforce users:

1. In the Salesforce Service console, select Manage Call Center Users > Add more users.
2. Add each Salesforce user you want to access the Copilot for Service widget.

Perform the following steps to add the softphone utility:

1. Select Setup, and then search for and select App Manager.
2. Find the Service Console app, select the upside-down triangle on the same row, and then select Edit.
3. Select Utility Items > Add Utility Item.
4. Search for and select Open CTI Softphone.
5. Type a name for your widget, such as "Microsoft Copilot for Service."
6. Set the width to 450 and height to 600.
7. Select Save.

Perform the following steps to enable popups:

1. In Salesforce, go to the service console from the Apps page.
2. Enable popups by selecting Always allow pop-ups and redirects from <url>.
3. Select Done.
4. Refresh your browser. The Copilot for Service add-on should now be available on the toolbar of your agent console.

1. Open the Salesforce Service console and select the Gear icon.

2. Select the Developer Console from the dropdown. If it doesn't load, copy the URL from the pop-up window and open it in a new tab.

3. In the Developer Console, select File > New > Apex class. Specify the name as ObjectService and select Create, and then paste the following code into the editor:

   public class ObjectService {
     @AuraEnabled
     public static String getObjectType(String objectId) {
       Id conId = objectId;
       return String.valueOf(conId.getSobjectType());
     }
   }
   

4. Perform the following steps to create a lightning component:

   1. Select File > New > Lightning component.
   2. Specify a name for the component. For example, CopilotForService.
   3. Select Controller from the bundle panel that displays when the component is created, and then paste the following code:

   ({
     onTabFocused : function(component, event, helper) {
       var currentTabId = event.getParam('currentTabId');
       var previousTabId = event.getParam('previousTabId');
       var workspaceAPI = component.find("workspace");
       if(currentTabId) {       
         workspaceAPI.getTabInfo({
           tabId : currentTabId
         }).then(function(response) {
           var action = component.get("c.getObjectType");
           var recordId = response.recordId;
           action.setParams({"objectId": recordId});
           action.setCallback(this, function(response) {
             var state = response.getState();
             if(state === "SUCCESS") {
               component.set("v.objectType",response.getReturnValue());
               var type = response.getReturnValue();          
               console.log("Object details:", recordId, type);
               var objectType = 0;
               if (type == 'Case') {
                 objectType = 1;
               } else if (type == 'EmailMessage') {
                 objectType = 2;
               } else if (type == "LiveChatTranscript") {
                 objectType = 8;
               }
   
               console.log("iframe: ", document.querySelector('iframe.CFSLightning'));
               // Invoke adapter to navigate based on objectid and objecttype
               document.querySelector('iframe.CFSLightning').contentWindow.postMessage({
                 messageType: "onPageNavigateFromSFLightningComponent",
                 messageData: JSON.stringify({
                   value: JSON.stringify({
                     objectId: recordId,
                     objectType: objectType,
                     sourceId: "b54abfa8-3d78-4aa0-ae3f-1e2ffbc56850"
                   })
                 })
               }, "*");
             } else {
               console.log('Problem updating the case, response state: ' + state);
             }
           });
           $A.enqueueAction(action);
         });
       } else {
         // When user navigates to the entity list page, switch to global session
         console.log("global!");
         document.querySelector('iframe.CFSLightning').contentWindow.postMessage({
           messageType: "onPageNavigateFromSFLightningComponent",
           messageData: JSON.stringify({
             value: JSON.stringify({
               objectId: "",
               objectType: 0,
               sourceId: "b54abfa8-3d78-4aa0-ae3f-1e2ffbc56850"
             })
           })
         }, "*");
       }
     }
   })
   

   1. Select Save.
   2. Select Component, and then copy the following code:

   <aura:component controller="ObjectService" implements="force:lightningQuickAction,force:hasRecordId,flexipage:availableForAllPageTypes" access="global">
     <aura:attribute name="recordId" type="Id" />
     <aura:attribute name="objectType" type="String" />
     <lightning:workspaceAPI aura:id="workspace" />        
     <aura:handler event="lightning:tabFocused" action="{! c.onTabFocused }"/>
     <iframe class="CFSLightning" src="{! '{CFS_WIDGET_URL}'}" width="100%" height="100%" />   
   </aura:component>
   

   1. Update the {CFS_WIDGET_URL} to the URL for the Copilot for Service widget URL you saved in the previous step.

1. Select Setup, and then search for and select App Manager.
2. Search for and then select Service Console app. Select Edit.
3. Select Utility Items > Add Utility Item.
4. Search for and select the custom lightening component in Custom, CopilotForService in our example.
5. Specify a name for the widget. For example, Microsoft Copilot for Service.
6. Set the width to 450 and height to 600.
7. Select Save.

1. In Salesforce, go to the service console from the Apps page.
2. Enable popups by selecting Always allow pop-ups and redirects from <url>.
3. Select Done.
4. Refresh your browser. The Copilot for Service add-on should now be available on the toolbar of your agent console.

1. Search for Trusted URLs in the search box in Setup, and then select Trusted URLs.
2. Select New Trusted URL to add a new trusted URL.
   • Specify CopilotforService as the API name and URL as "*.azureedge.net"
3. Select all the checkboxes in CSP Directives, and then select Save.