A NativeScript plugin implementing the basic Zendesk SDK in TypeScript. It is inspired from nativescript-zendesk
tns plugin add nativescript-zendesk-sdk
Following Zendesk Embeddables Documentation:
export interface InitConfig {
applicationId: string;
zendeskUrl: string;
clientId: string;
userLocale?: string;
/** AnonUserIdentity object or JWT Token string */
identity?: AnonUserIdentity | string;
}
import { ZendeskSdk } from "nativescript-zendesk-sdk";
...
const initConfig = {
...
}
ZendeskSdk.initialize(initConfig);
If identity: null
a new anonymous identity is created, but if identity
is undefined it must be set later, but before launching any Zendesk views/activities.
Note: applicationId
, zendeskUrl
, and clientId
must be specified when initializing the Zendesk, but locale, COPPA-compliance mode, and Identity can be set/changed later.
ZendeskSdk.setAnonymousIdentity();
ZendeskSdk.setAnonymousIdentity({name: "name", email: "email"});
ZendeskSdk.setJwtIdentity("jwtUserIdentifier");
The locale used by the SDK for static strings will match the Android Application Configuration or the iOS NSUserDefaults. (These strings can be overridden or missing languages can be added as described in the links above).
To set the Locale of any dynamic content retrieved from Zendesk:
ZendeskSdk.setUserLocale(localeCode);
Before opening the Help Center or creating a Request you can specify the Request settings:
export interface RequestOptions {
requestId?: string;
requestSubject?: string;
addDeviceInfo?: boolean;
tags?: string[];
files?: File[]; // android only
customFields?: CustomField[];
ticketForm?: {
ticketFormId: string;
customFields: CustomField[]
};
}
ZendeskSdk.showRequestList();
ZendeskSdk.showHelpCenter();
export interface HelpCenterOptions {
/** default: { contactUsButtonVisible: false } */
articleOptions?: ArticleOptions;
/** default: false */
contactUsButtonVisible?: boolean;
/** default: false -- android only */
categoriesCollapsed?: boolean;
/** default: true -- android only */
conversationsMenu?: boolean;
}
ZendeskSdk.showHelpCenter(options);
Per original SDKs, only one filter can be used at a time.
ZendeskSdk.showHelpCenterForCategoryIds(categoryIds, options);
ZendeskSdk.showHelpCenterForLabelNames(labelNames, options);
ZendeskSdk.showHelpCenterForSectionIds(sectionIds, options);
ZendeskSdk.createRequest();
Configured via app/App_Resources/Android/AndroidManifest.xml
as detailed here.
Zendesk offers 3 base themes that can be used or extended:
- ZendeskSdkTheme.Light
- ZendeskSdkTheme.Dark
- ZendeskSdkTheme.Light
app/App_Resources/Android/AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
...>
<application
...>
<activity android:name="com.zendesk.sdk.support.SupportActivity"
android:theme="@style/MyZendeskSdkTheme.DarkActionBar"/>
<activity android:name="com.zendesk.sdk.feedback.ui.ContactZendeskActivity"
android:theme="@style/MyZendeskSdkTheme.DarkActionBar"/>
<activity android:name="com.zendesk.sdk.support.ViewArticleActivity"
android:theme="@style/MyZendeskSdkTheme.DarkActionBar"/>
<activity android:name="com.zendesk.sdk.requests.RequestActivity"
android:theme="@style/MyZendeskSdkTheme.DarkActionBar"/>
<activity android:name="com.zendesk.sdk.requests.ViewRequestActivity"
android:theme="@style/MyZendeskSdkTheme.DarkActionBar"/>
</application>
</manifest>
app/App_Resources/Android/values/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
...
<style name="PnpZendeskSdkTheme.DarkActionBar" parent="ZendeskSdkTheme.Light.DarkActionBar">
<item name="colorPrimary">@color/ns_primary</item>
<item name="colorPrimaryDark">@color/ns_primaryDark</item>
<item name="colorAccent">@color/ns_accent</item>
<item name="android:actionMenuTextColor">@color/ns_blue</item>
</style>
</resources>
<style name="YourLightTheme" parent="ZendeskSdkTheme.Light">
...
</style>
<style name="YourDarkTheme" parent="ZendeskSdkTheme.Dark">
...
</style>
<style name="YourLightTheme.DarkActionBar" parent="ZendeskSdkTheme.Light.DarkActionBar">
...
</style>
import { isIOS } from 'tns-core-modules/platform';
...
if ( isIOS ) {
UINavigationBar.appearance().tintColor = new Color('#00FFFF').ios;
UINavigationBar.appearance().barTintColor = new Color('#FF00FF').ios;
UINavigationBar.appearance().titleTextAttributes =
<NSDictionary<string, any>>NSDictionary.dictionaryWithObjectForKey(
new Color('#FFFF00').ios,
NSForegroundColorAttributeName);
}
const iOSTheme: ZendeskIosThemeSimple = {
primaryColor: '#FF0000',
};
ZendeskSdk.setIosTheme(iOSTheme);
The first 3 colors are used primarily on the ActionBar/StatusBar for the "new ticket" screen, as the Help Center uses the default ActionBar/StatusBar colors from the regular NativeScript setup.
These settings could affect the whole app, but are ignored by the regular NativeScript Views, but could potentially impact other 3rd part views. Likely you will set these to be the same as what is used in the rest of the app.
The settings within the theme object will only affect the Zendesk.
Typings and iOS metadata have been included in the project to allow for easier usage.
Typings were autogenerated using:
https://github.com/NativeScript/android-dts-generator
https://docs.nativescript.org/runtimes/ios/how-to/Use-Native-Libraries