Create click-to-dial on custom Visualforce pages

Note: This article applies to Genesys Cloud for Salesforce.

The integration enables click-to-dial functionality on default Salesforce pages, such as contact or account pages. When an agent clicks a phone number on default Salesforce pages, the client either automatically dials the phone number or auto-populates the Name or Number box. (The click-to-dial behavior depends on the agent’s selection under Queue settings. For more information, see Configure click-to-dial.) The client populates the Name and Related To boxes with the relevant objects from these Salesforce pages. 

You can also provide click-to-dial functionality on custom Visualforce pages by adding the click-to-dial component to these pages. 

Tip: If you create Visualforce pages in development mode, after creating the pages, exit development mode. Click-to-dial events do not work with development mode enabled.

The following is an example that uses the click-to-dial component on a Visualforce page and pulls data from Salesforce using an Apex controller. For more information, see support:clickToDial and Getting Started with Apex JSON in the Salesforce documentation.

Click-to-dial component

The click-to-dial component adds the click-to-dial functionality to a custom Visualforce page and allows you to assign values for the entityId and params attributes. These two attributes pull data from the Apex controller to populate the Name and Related To boxes in the client. The entityId and params attributes also auto-associate the Name and Related To boxes with an activity on a Salesforce page. 

Attribute Required/optional Description Notes
number Required Number to be dialed.
entityId Optional ID of a relevant object such as a contact or an account to auto-associate with an activity.  The entityId attribute is only for a single record. To add additional records to Name and Related To in the interaction logs, use the associations property in the params object.
params Optional JSON string for additional data for click-to-dial. See params object. 
<apex:page standardController="Account" extensions="CustomClickToDialController" showHeader="true">
   <support:clickToDial number="3172222222" entityId="{!id}" params="{!json}"/>
</apex:page>

params object

Property Data type Description Notes
autoPlace Boolean If true or not set, the integration automatically places a call. If false, the integration populates the Name or Number box with the phone number.
callerId String Phone number displayed to recipients of your phone calls. Telco support for callerId varies.
callerIdName String Name displayed to recipients of your phone calls. Telco support for callerIdName varies.
interactionAttributes Object Key-value pairs of attributes to add to the interaction.
interactionType String Type of interaction.

Values: call, sms.

If no interactionType is provided, defaults to call.
queueId String ID of the queue to make a call or send an SMS message on behalf of.
associations Object Single object or an array of objects to auto-associate with an activity.

Use the following format for the params object. The Salesforce JSON.serialize API uses this format for associations to serialize objects such as contact and account.

{
    autoPlace: true,
    callerId: '317-555-0123',
    callerIdName: 'Some Name Here',
    interactionAttributes: {
        CustomAttribute: 'Data here'
    },
    interactionType: 'call',
    queueId: 'Queue id GUID',
    associations: [
        {
            Id: '00000000000',
            Name: 'AccountName',
            attributes: {
                type: 'Account'
            }
        },
        {
            Id: '11111111111',
            Name: 'John Smith',
            attributes: {
                type: 'Contact'
            }
        }
    ]
}

For more information about this component, see support:clickToDial in the Salesforce documentation.

Apex controller

The Apex controller performs the following actions:

  • Retrieves backend data from Salesforce.
  • Generates JSON strings using the Salesforce JSON.serialize API.
  • Adds this data as the values for the entityId and params attributes in the click-to-dial component on custom Visualforce pages.
  • Returns Who/What records.
public class CustomClickToDialController {

   public CustomClickToDialController(ApexPages.StandardController stdController){}

    // Returns an ID of a Who/What record (for the entityId attribute).
    public String getId(){
       Contact contact = [SELECT id, name FROM Contact LIMIT 1];
       return contact.id;
    }

    // Returns a JSON string representation of Who/What record(s) (for the params attribute).
    // It could be a single Who/What record or a list of Who/What records.
public String getJson(){
        List accountList = [Select id, name FROM Account LIMIT 1];
        String accounts = JSON.serialize(accountList);
        
        JSONGenerator gen = JSON.createGenerator(false);
        
        gen.writeStartObject();
        gen.writeStringField('associations', accounts);
        gen.writeStringField('callerId', '317-555-0123');
        gen.writeStringField('callerIdName', 'Some Name Here');
        gen.writeStringField('interactionType', 'call');
        gen.writeBooleanField('autoPlace', true);
        gen.writeStringField('queueId', 'Queue id GUID);
        gen.writeFieldName('interactionAttributes');
        gen.writeStartObject();
        gen.writeStringField('CustomAttribute', 'Data here');
        gen.writeEndObject();
        gen.writeEndObject();
        
        return gen.getAsString();
    }
}

All returned Who records appear in the Name list in the interaction log. If only one Who record is returned, the record is auto-associated with the Name box in the interaction log.

All returned What records appear in the Related To list in the interaction log. If only one What record is returned, the record is auto-associated with the Related To box in the interaction log.

Auto associations in Name and Related To boxes

For more information, see Click-to-dial and Configure click-to-dial.

For more information about the integration, see About Genesys Cloud for Salesforce.