cordova-plugin-salesforce-snapins v1.0.4

cordova-plugin-salesforce-snapins

Cordova plugin to integrate Salesforce Snap-ins SDK for iOS and Android on a Cordova project.

For more information about Salesforce SDK look at:

• Salesforce iOS SDK
• Salesforce Android SDK

Installation

cordova plugin add cordova-plugin-salesforce-snapins

Supported platforms

• Android
• iOS

Usage

var SalesforceSnapIns = window.cordova.plugins.SalesforceSnapIns;

SalesforceSnapIns.initialize({
	colors: { // iOS only
		brandPrimary: "#007F7F"
	},
	liveAgent: {
		liveAgentPod: '...',
		orgId: '...',
		deploymentId: '...',
		buttonId: '...'
	}
});

// Optional, if you don't need to change pre-chat fields you can omit this line
SalesforceSnapIns.clearPrechatFields();

SalesforceSnapIns.addPrechatField({
	type: 'hidden', // could be: text, hidden, picker
	label: 'Subject',
	value: 'Live Agent Chat support',
	transcriptField: 'subject__c',
	required: true
});

SalesforceSnapIns.addPrechatField({
	type: 'text',
	label: 'Name',
	required: true
});

SalesforceSnapIns.addPrechatField({
	type: 'text',
	label: 'Email',
	required: true,
	keyboardType: SalesforceSnapIns.KEYBOARD_TYPE_EMAIL_ADDRESS,
	autocorrectionType: SalesforceSnapIns.AUTOCORRECTION_TYPE_NO
});

SalesforceSnapIns.addPrechatField({
	type: 'picker',
	label: 'Argomento',
	required: true,
	values: [
		{ label: 'Reso',   value: 'reso' },
		{ label: 'Ordine', value: 'ordine' }
	]
});

// Optional, if you don't need to change pre-chat entities you can omit this line
SalesforceSnapIns.clearPrechatEntities();

var accountEntity = {
	name: "Account",
	linkToEntityName: "Account",
	linkToEntityField: "AccountId",
	saveToTranscript: "AccountId",
	showOnCreate: true,
	fieldMap: [
		{
			fieldName: "Name__c",
			label: "Name",
			isExactMatch: true,
			doCreate: true,
			doFind: false
		},
		{
			fieldName: "Email__c",
			label: "Email",
			isExactMatch: true,
			doCreate: true,
			doFind: true
		}
	]
};
SalesforceSnapIns.addPrechatEntity(accountEntity);

var caseEntity = {
	name: "Case",
	linkToEntityName: "Account",
	linkToEntityField: "AccountId",
	saveToTranscript: "AccountId",
	showOnCreate: true,
	fieldMap: [
		{
			fieldName: "Subject",
			label: "Subject",
			doCreate: true
		}
	]
};
SalesforceSnapIns.addPrechatEntity(caseEntity);

SalesforceSnapIns.determineAvailability(function (available) {
	if (available) {
		SalesforceSnapIns.openLiveAgentChat(function() {
			console.log('Chat opened');
		}, function () {
			console.error('Unable to open chat');
		});
	}
}, function (err) {
	console.error(err);
});

initialize(options, success, error)

cordova.plugins.SalesforceSnapIns.initialize({
	liveAgent: {
		liveAgentPod: '...',
		orgId: '...',
		deploymentId: '...',
		buttonId: '...'
	}
});

determineAvailability(success, error)

cordova.plugins.SalesforceSnapIns.determineAvailability(function (available) {
	if (available) {
		// Open chat with cordova.plugins.SalesforceSnapIns.openLiveAgentChat
	} else {
		// No agents available
	}
}, function (err) {
	// An error occurred
});

openLiveAgentChat(success, error)

It's suggested to call determineAvailability() before openLiveAgentChat().

cordova.plugins.SalesforceSnapIns.openLiveAgentChat(function () {
	// Chat opened
}, function (err) {
	// An error occurred
});

addPrechatField(field, success, error)

cordova.plugins.SalesforceSnapIns.addPrechatField({
	type: 'hidden', // could be: text, hidden, picker
	label: 'Subject',
	value: 'Live Agent Chat support',
	transcriptField: 'subject__c',
	required: true
});

cordova.plugins.SalesforceSnapIns.addPrechatField({
	type: 'text',
	label: 'Name',
	required: true
});

cordova.plugins.SalesforceSnapIns.addPrechatField({
	type: 'text',
	label: 'Email',
	required: true,
	keyboardType: cordova.plugins.SalesforceSnapIns.KEYBOARD_TYPE_EMAIL_ADDRESS,
	autocorrectionType: cordova.plugins.SalesforceSnapIns.AUTOCORRECTION_TYPE_NO
});

cordova.plugins.SalesforceSnapIns.addPrechatField({
	type: 'picker',
	label: 'Argomento',
	required: true,
	values: [
		{ label: 'Reso',   value: 'reso' },
		{ label: 'Ordine', value: 'ordine' }
	]
});

clearPrechatFields(success, error)

// Optional, if you don't need to change pre-chat fields you can omit this line
cordova.plugins.SalesforceSnapIns.clearPrechatFields();

addPrechatEntity(entities, success, error)

var accountEntity = {
	name: "Account",
	linkToEntityName: "Account",
	linkToEntityField: "AccountId",
	saveToTranscript: "AccountId",
	showOnCreate: true,
	fieldMap: [
		{
			fieldName: "Name__c",
			label: "Name",
			isExactMatch: true,
			doCreate: true,
			doFind: false
		},
		{
			fieldName: "Email__c",
			label: "Email",
			isExactMatch: true,
			doCreate: true,
			doFind: true
		}
	]
};
SalesforceSnapIns.addPrechatEntity(accountEntity);

clearPrechatEntities(success, error)

// Optional, if you don't need to change pre-chat entities you can omit this line
cordova.plugins.SalesforceSnapIns.clearPrechatEntities();

Color customization

See official customization page for iOS and Android to learn more about color customization.

Constants available are:

iOS

window.plugins.SalesforceSnapIns.initialize({
	// ...
	colors: {
		navbarBackground: "#FAFAFA",
		navbarInverted: "#010101",
		brandPrimary: "#007F7F",
		brandSecondary: "#2872CC",
		brandPrimaryInverted: "#FBFBFB",
		brandSecondaryInverted: "#FCFCFC",
		contrastPrimary: "#000000",
		contrastSecondary: "#767676",
		contrastTertiary: "#BABABA",
		contrastQuaternary: "#F1F1F1",
		contrastInverted: "#FFFFFF",
		feedbackPrimary: "#E74C3C",
		feedbackSecondary: "#2ECC71",
		feedbackTertiary: "#F5A623",
		overlay: "#000000"
	},
	// ...
});

Android

<!-- config.xml -->
<platform name="android">
	<config-file parent="/resources" target="app/src/main/res/values/colors.xml">
		<color name="salesforce_toolbar">#FAFAFA</color>
		<color name="salesforce_toolbar_inverted">#010101</color>
		<color name="salesforce_brand_primary">#007F7F</color>
		<color name="salesforce_brand_secondary">#2872CC</color>
		<color name="salesforce_brand_contrast">#FCFCFC</color>
		<color name="salesforce_contrast_primary">#000000</color>
		<color name="salesforce_contrast_secondary">#767676</color>
		<color name="salesforce_contrast_tertiary">#BABABA</color>
		<color name="salesforce_contrast_quaternary">#F1F1F1</color>
		<color name="salesforce_contrast_inverted">#FFFFFF</color>
		<color name="salesforce_feedback_primary">#E74C3C</color>
		<color name="salesforce_feedback_secondary">#2ECC71</color>
		<color name="salesforce_feedback_tertiary">#F5A623</color>
		<color name="salesforce_title_color">#FBFBFB</color>
		<color name="salesforce_overlay">#000000</color>
	</config-file>
</platform>

Attention! after cordova prepare android the color configuration will be cached into android/android.json file. If you want to remove, add or change any color after the first prepare be sure to clean android.json. Alternatively you can type your color directly into app/src/main/res/values/colors.xml with the drawback that you will lose them renewing the platform.

Prepare for submission (iOS)

As documented on Salesforce documentation on XCode project:

• select Build Phases
• create Run script
• paste this line of code $PODS_ROOT/ServiceSDK/Frameworks/ServiceCore.framework/prepare-framework

TODO

• Add Case management support
• Add SOS support
• Enhance color customization for Android

LICENSE

MIT