Embedded Service Chat SDK for iOS Developer Guide
j
No Results
Search Tips:
- Please consider misspellings
- Try different search keywords
Show Pre-Chat Fields to User
Before a chat session begins, you can request that the
user enter pre-chat fields that are sent to the agent at the start of the
session.
To create pre-chat fields, add SCSPrechatObject instances to the prechatFields property on the SCSChatConfiguration object.
-
Create an SCSChatConfiguration object.
In Swift:
let config = SCSChatConfiguration(liveAgentPod: "TO_DO_POD_NAME", // e.g. "d.gla5.gus.salesforce.com" orgId: "TO_DO_ORG_ID", // e.g. "00DB00000003Rxz" deploymentId: "TO_DO_DEPLOYMENT_ID", // e.g. "573B00000005KXz" buttonId: "TO_DO_BUTTON_ID") // e.g. "575C00000004h3m"In Objective-C:
SCSChatConfiguration *config = [[SCSChatConfiguration alloc] initWithLiveAgentPod:@"TO_DO_POD_NAME" // e.g. "d.gla5.gus.salesforce.com" orgId:@"TO_DO_ORG_ID" // e.g. "00DB00000003Rxz" deploymentId:@"TO_DO_DEPLOYMENT_ID" // e.g. "573B00000005KXz" buttonId:@"TO_DO_BUTTON_ID"]; // e.g. "575C00000004h3m"See Configure a Chat Session on how to configure a chat session.
-
Create SCSPrechatObject objects for the pre-chat fields you want to specify in your app.
There are several types of pre-chat fields:
- SCSPrechatObject does not require user input and can be used to send custom data directly to the agent.
- SCSPrechatTextInputObject (a subclass of SCSPrechatObject) takes user input from a text field.
- SCSPrechatPickerObject (a subclass of SCSPrechatObject) provides the user with a dropdown list of options.
Each type has different properties you can configure.
-
Create objects that don't require user input using SCSPrechatObject.
In Swift:
let customData = SCSPrechatObject(label: "CustomEmailField", value: "lauren@example.com")In Objective-C:
SCSPrechatObject* customData = [[SCSPrechatObject alloc] initWithLabel:@"CustomEmailField" value:@"lauren@example.com"];When using SCSPrechatObject to send data without user input, specify both the label and the value. The SCSPrechatObject base class contains the following properties:
- label—name of the pre-chat field shown to agent.
- value—value of the pre-chat field; only use this property if you don't intend for the user to fill in this field.
- displayLabel—optional display name of the pre-chat field shown to the user if different than the label.
- transcriptFields—optional array of field identifiers on the LiveAgentChatTranscript object in Salesforce.
- displayToAgent—indicates whether this pre-chat detail is shown to an agent accepting the chat session; defaults to true.
-
Create text input objects using SCSPrechatTextInputObject.
In Swift:
// Create a text field let myPrechatField = SCSPrechatTextInputObject(label: "Full Name")In Objective-C:
// Create a text field SCSPrechatTextInputObject* myPrechatField = [[SCSPrechatTextInputObject alloc] initWithLabel:@"Full Name"];When using a SCSPrechatTextInputObject, you can control several other properties:
- required—indicates whether the field is required.
- keyboardType—provides access to other standard keyboards (such as UIKeyboardTypeEmailAddress).
- autocapitalizationType—controls how text capitalization works.
- autocorrectionType—controls auto-correction behavior.
- maxLength—specifies the maximum length of the field
- displayLabel—optional display name of the pre-chat field shown to the user if different than the label.
- transcriptFields—optional array of field identifiers on the LiveAgentChatTranscript object in Salesforce.
- displayToAgent—indicates whether this pre-chat detail is shown to an agent accepting the chat session; defaults to true.
-
Create dropdown lists using SCSPrechatPickerObject.
In Swift:
// Create dropdown choices let statusOptions = NSMutableArray() statusOptions.add(SCSPrechatPickerOption(label:"New Issue", value:"New")) statusOptions.add(SCSPrechatPickerOption(label:"Fixed Issue", value:"Fixed")) // Create a dropdown list with choices let statusPickerField = SCSPrechatPickerObject( label: "Issue Type", options: statusOptions as! [SCSPrechatPickerOption])In Objective-C:
// Create a dropdown list with two choices NSMutableArray *statusOptions = [[NSMutableArray alloc] init]; [statusOptions addObject: [[SCSPrechatPickerOption alloc] initWithLabel:@"New Issue" value:@"New"]]; [statusOptions addObject: [[SCSPrechatPickerOption alloc] initWithLabel:@"Fixed Issue" value:@"Fixed"]]; // Create a dropdown list with choices SCSPrechatPickerObject *picker = [[SCSPrechatPickerObject alloc] initWithLabel:@"Issue Type" options:statusOptions];When using a SCSPrechatPickerObject, you can access these properties:
- required—indicates whether the field is required.
- options—specifies items in the dropdown list. This property is an array of SCSPrechatPickerOption objects.
- displayLabel—optional display name of the pre-chat field shown to the user if different than the label.
- transcriptFields—optional array of field identifiers on the LiveAgentChatTranscript object in Salesforce.
- displayToAgent—indicates whether this pre-chat detail is shown to an agent accepting the chat session; defaults to true.
-
(Optional) Create SCSPrechatEntity objects to associate pre-chat fields with fields from a record in your
org.
Pre-chat fields are always sent to the agent at the start of the session. But if you want to fill in fields of a particular record, instantiate an SCSPrechatEntity for each Salesforce object (for example, Case or Contact) and instantiate an SCSPrechatEntityField for each field association within that Salesforce object (for example, Subject or LastName). To learn more, see Create or Update Salesforce Records from a Chat Session.
-
Update the config object's prechatFields property with an array of your pre-chat objects.
In Swift:
// Add the array of pre-chat fields to the config object config?.prechatFields = myPrechatFieldsIn Objective-C:
// Add the array of pre-chat fields to the config object config.prechatFields = myPrechatFields; -
Show the pre-chat form and start a chat session by calling showChat(with:showPrechat:) and specify true for whether to show the
pre-chat form.
-
If you want to show the pre-chat form and then send those results to
the agent when starting a session, call showChat(with:showPrechat:).
In Swift:
// Show the pre-chat form and start a session ServiceCloud.shared().chatUI.showChat(with: config, showPrechat: true)In Objective-C:
// Show the pre-chat form and start a session [[SCServiceCloud sharedInstance].chatUI showChatWithConfiguration:config showPrechat: YES]; -
If you want to programmatically change the pre-chat data before passing
it to the org or agent, call the showPrechat(withFields:modal:completion:) method first. From within the completion block of this method, update
the config object's prechatFields property and then call showChat(with:showPrechat:) and specify false for showPrechat.
For example, the following Swift code asks the user for their first and last name. After the user completes the pre-chat form, the code creates a new field by concatenating the two name fields. When we start the chat session, only this new field is sent to the agent.
// Create two text fields let firstNameField = SCSPrechatTextInputObject(label: "First Name") let lastNameField = SCSPrechatTextInputObject(label: "Last Name") let prechatInputFields = [firstNameField, lastNameField] as? [SCSPrechatObject] // Show the pre-chat form... ServiceCloud.shared().chatUI.showPrechat(withFields: prechatInputFields, completion: { (prechatResultFields, completed) in // If the pre-chat form completed successfully... if (completed && prechatResultFields != nil && prechatResultFields!.count >= 2) { // Create the full name from the values of the two pre-chat name fields let fullName = prechatResultFields![0].value + " " + prechatResultFields![1].value // Create a full name field let fullNameField = SCSPrechatObject(label: "Full Name", value: fullName) // Add this new field to the config object // (We DON'T include the original pre-chat fields because we don't need to send them...) config!.prechatFields = [fullNameField] // And now start a chat session (without showing pre-chat) ServiceCloud.shared().chatUI.showChat(with: config!) } else { // TO DO: Handle the scenario where the user cancels out of the pre-chat form } })
-
If you want to show the pre-chat form and then send those results to
the agent when starting a session, call showChat(with:showPrechat:).
Example
This code sample builds a set of pre-chat fields that are shown to the user.
let config = SCSChatConfiguration(liveAgentPod: "YOUR-POD-NAME",
orgId: "YOUR-ORG-ID",
deploymentId: "YOUR-DEPLOYMENT-ID",
buttonId: "YOUR-BUTTON-ID")
// Add some required fields
let firstNameField = SCSPrechatTextInputObject(label: "First Name")
firstNameField!.isRequired = true
let lastNameField = SCSPrechatTextInputObject(label: "Last Name")
lastNameField!.isRequired = true
let emailField = SCSPrechatTextInputObject(label: "Email")
emailField!.isRequired = true
emailField!.keyboardType = .emailAddress
emailField!.autocorrectionType = .no
// Add some optional fields
let originField = SCSPrechatTextInputObject(label: "Where are you from?")
originField!.isRequired = false
let phoneField = SCSPrechatTextInputObject(label: "Phone Number")
phoneField!.isRequired = false
phoneField!.keyboardType = .phonePad
let descriptionField = SCSPrechatTextInputObject(label: "Please describe your problem:")
descriptionField!.isRequired = false
// Add a picklist field
let statusOptions = NSMutableArray()
statusOptions.add(SCSPrechatPickerOption(label:"New Issue", value:"New"))
statusOptions.add(SCSPrechatPickerOption(label:"Fixed Issue", value:"Fixed"))
let statusPickerField = SCSPrechatPickerObject(label: "Status",
options: statusOptions as NSArray as! [SCSPrechatPickerOption])
statusPickerField!.isRequired = false
// Add hidden field containing the subject
let subjectField = SCSPrechatObject(label: "Subject", value: "Chat Session")
// Create an array of all pre-chat fields
let prechatFields: [SCSPrechatObject] = [firstNameField!, lastNameField!, emailField!,
originField!, phoneField!, descriptionField!,
statusPickerField!, subjectField]
// Add the array of pre-chat fields to the config object
config?.prechatFields = prechatFields
// And NOW show the chat UI
ServiceCloud.shared().chatUI.showChat(with: config!, showPrechat: true)With this code, the user sees the following pre-chat UI in their mobile app.
And the agent sees the following UI from the console.
