NativeScript-Zendesk
用于集成 Zendesk 的 NativeScript 模块
npm i --save nativescript-zendesk

Zendesk 框架插件

设置

  • 在 Zendesk 中创建您的移动 SDK 账户
  • https://domain.zendesk.com/agent/admin/mobile_sdk
  • 注意您的 appid、url 和 clientid 以备后用
  • 确保在 MobileSDK->定制屏幕中激活您的帮助中心(如果您需要的话)

添加插件

var zendeskModule = require("nativescript-zendesk");
var zendesk = null; // Place to store the activated object

//Somewhere on load
zendesk = zendeskModule.init({
appId: "", //required
url: "", //required
clientId: "", //required
additionalInfo: "Some extra details", //(optional)
ticketSubject: "Special Ticket Subject", //(optional: Only works on android)
enableLogging: true, //(optional), bool
locale: "en-us" //(optional), string
});

打开帮助中心

//Loads the main all category view
zendesk.openHelpCenter();

//Loads up a specific category
zendesk.openHelpCenter({
type: "Category",
id: 202551987,//CategoryID: Must be a number, not a string
name: "My Sample Category" //(Optional, sets the titlebar), only used on iOS
});

//Loads up a specific section
zendesk.openHelpCenter({
type: "Section",
id: 203791988, //SectionID: Must be a number, not a string
name: "Some Section" //(Optional, sets the titlebar), only used on iOS
});

打开请求联系人列表,显示之前的对话和创建新请求的能力

zendesk.openContactList();

打开创建新请求屏幕

zendesk.createContactRequest();

选项

设置识别用户

    zendesk.identifyUser("users id", "some user name", "[email protected]"); //Optional, defaults to anon if not set

zendesk.createContactRequest();

iOS 主题

文档


//Create the theme
//All of these properties are optional...and it's all grey, so dont use colors verbatim :)
var myTheme = {
ZDKSupportView: {
viewBackgroundColor: "#E0E0E0",
tableBackgroundColor: "#E0E0E0",
separatorColor: "#E0E0E0",

//0 = light, 1=dark
searchBarStyle: 0,

noResults: {
foundLabelColor: "#E0E0E0",
foundLabelBackground: "#E0E0E0",
contactButtonBackground: "#E0E0E0",
contactButtonTitleColorNormal: "#E0E0E0",
contactButtonTitleColorHighlighted: "#E0E0E0",
contactButtonTitleColorDisabled: "#E0E0E0",
contactButtonBorderColor: "#E0E0E0",
foundLabelFont: UIFont.fontWithNameSize("Lato", 16),
contactButtonBorderWidth: 1.0,
contactButtonCornerRadius: 4.0
}
},
ZDKSupportTableViewCell: {
viewBackgroundColor: "#E0E0E0",
titleLabelBackground: "#E0E0E0",
titleLabelColor: "#E0E0E0",
titleLabelFont: UIFont.fontWithNameSize("Lato", 16)
},
ZDKSupportArticleTableViewCell: {
viewBackgroundColor: "#E0E0E0",
parentsLabelColor: "#E0E0E0",
parnetsLabelBackground: "#E0E0E0",
titleLabelColor: "#E0E0E0",
labelBackground: "#E0E0E0",
titleLabelFont: UIFont.fontWithNameSize("Lato", 16),
articleParentsLabelFont: UIFont.fontWithNameSize("Lato", 16)
},
ZDKSupportAttachmentCell: {
backgroundColor: "#E0E0E0",
titleLabelBackground: "#E0E0E0",
titleLabelColor: "#E0E0E0",
fileSizeLabelBackground: "#E0E0E0",
fileSizeLabelColor: "#E0E0E0",
titleLabelFont: UIFont.fontWithNameSize("Lato", 16),
fileSizeLabelFont: UIFont.fontWithNameSize("Lato", 16)
},
ZDKNavigationBar: {
tintColor: "#E0E0E0",
barTintColor: "#E0E0E0",
titleColor: "#E0E0E0",
}
};

//Load the theme
zendesk.setTheme(myTheme);

Android 主题

Android 上的 iOS 方法都不起作用,样式在 Manifest/Style 文件中完成(请参阅插件目录中的示例)

示例:默认情况下,Zendesk 活动使用 Theme.AppCompact.Light。如果您想自定义此主题,您必须将 android:theme="@style/Theme.AppCompat.Light" 改为其他样式

<activity android:name="com.zendesk.sdk.support.SupportActivity" android:theme="@style/@style/ZendeskTheme"/>

并将您自定义的主题添加到 App_resources/Android/values/styles.xml

<style name="ZendeskTheme" parent="Theme.AppCompat.Light">
<!-- THIS is where you can set the accent color -->
<item name="colorAccent">@color/ns_accent</item>
<item name="actionBarTheme">@style/MyApp.ActionBarTheme</item>
</style>

<style name="MyApp.ActionBarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
<!-- THIS is where you can color the back arrow! -->
<item name="colorControlNormal">@color/ns_accent</item>
</style>

Zendesk 文档是

文档

其他备注