Change a Visualforce Page by Using the Salesforce Console Integration Toolkit

Each implementation of Salesforce Console Integration Toolkit can look different. This example shows how to change the Salesforce console user interface using the Salesforce Console Integration Toolkit.

Due to third-party cookie restrictions in modern web browsers, Visualforce pages can’t load in Salesforce Classic console apps when third-party cookies are disabled. See Visualforce Limitations in Salesforce Classic When Third-Party Cookies are Blocked.

Note

  1. Create a Visualforce page.
  2. Cut and paste the following sample code into your Visualforce page.

    This code demonstrates various functions of the Salesforce Console Integration Toolkit:

    <apex:page standardController="Case">
    
     <apex:includeScript value="/support/console/63.0/integration.js"/>
     <script type="text/javascript">
            function openPrimaryTab() {
                sforce.console.openPrimaryTab(undefined, 
                   'https://www.example.com', true, 'example');
            }
            
            //The callback function that openSubtab will call once it has the ID for its primary tab
            var callOpenSubtab=function callOpenSubtab(result) {
                sforce.console.openSubtab(result.id, 
                   'https://www.example.com', true, 'example');
            };
            
            function openSubtab() {
                sforce.console.getEnclosingPrimaryTabId(callOpenSubtab);
            }
    
            //Sets the title of the current tab to "Example"
            function setTitle() {
                sforce.console.setTabTitle('Example');
            }
            
            //The callback function that closeTab will call once it has the ID for its tab
            var callCloseTab= function callCloseTab(result) {
                sforce.console.closeTab(result.id);
            }
            
            function closeTab() {
                sforce.console.getEnclosingTabId(callCloseTab);
            }
      </script>
    
       <A HREF="#" onClick="openPrimaryTab();return false">Open A Primary Tab</A> 
       <p/><A HREF="#" onClick="openSubtab();return false">Open A Subtab</A> 
       <p/><A HREF="#" onClick="setTitle();return false">Set Title to Example</A> 
       <p/><A HREF="#" onClick="closeTab();return false">Close This Tab</A> 
    
    </apex:page>
  3. Create a custom link for cases that use your Visualforce page.
  4. Edit the page layout for cases and add your custom link.
  5. Add any domains to the console’s allowlist.

Here’s the sample Visualforce page loaded in the console.

output of sample visualforce page with various functions of the service cloud console integration toolkit