介绍/功能
来自旧金山的客服服务/支持管理软件。立两年以来，Zendesk已经成功获得了多家知名的客户，包括Groupon、 Twitter 、 Yammer 、索尼音乐、TriptIt、Lonely Planet、 Foursquare 和 MSNBC 。Zendesk每天的新增客户数量达20家，不久前使用Zendesk客服支持平台的客户数量达到5000家。
编译项目
pod 添加 ZendeskChat
# 客服：线上版本为09/28/2017且无法找到ZendeskCoreSDK，demo版本为06/12/2018，使用demo版本手动添加
# ZendeskSDK：技术支持、工单提交
# ZDCChat：即时在线客服
#pod 'ZendeskSDK'
#pod 'ZendeskCoreSDK'
#pod 'ZDCChat'
启动客服
1、在Appdelegate中初始化配置
[ZDCChat initializeWithAccountKey:@"key"];
[ZDCLog enable:YES];
[ZDCLog setLogLevel:ZDCLogLevelWarn];
[[[ZDCChat instance] overlay] setEnabled:NO];
2、使用默认UI启动客服
[ZDCChat startChat:^(ZDCConfig *config) {
config.preChatDataRequirements.email = ZDCPreChatDataOptionalEditable;
config.preChatDataRequirements.department = ZDCPreChatDataOptionalEditable;
config.preChatDataRequirements.message = ZDCPreChatDataOptionalEditable;
}];
在block中可以配置开始客服前的表格选项config，如：
config.preChatDataRequirements.email = ZDCPreChatDataOptionalEditable;
设置此项，在前置表格中会显示email的输入控件。
其中ZDCPreChatDataOptionalEditable选项为非必填选项，API中的枚举还包括：
/// Data is not required.
ZDCPreChatDataNotRequired
/// Data should be requested if not known but is not required.
/// Once this data is known it will not be presented for editing by the user.
ZDCPreChatDataOptional
/// Data must be complete to start a chat.
/// Once this data is known it will not be presented for editing by the user.
ZDCPreChatDataRequired
/// Data should be requested if not known but is not required.
/// The user will be offered the opportunity to edit this data each time they start a chat.
ZDCPreChatDataOptionalEditable
/// Data must be complete to start a chat.
/// The user will be offered the opportunity to edit this data each time they start a chat.
ZDCPreChatDataRequiredEditable
自定义UI
轻度自定义
ZDC自带的API可以对界面进行一些简单的修改，比如圆角、颜色、字体等。建议自定义一个ZDCChatStyling类对其进行封装，在APPDelegate配置ZDC时一并进行设置
+ (void)applyStyling {
UIEdgeInsets insets;
insets = UIEdgeInsetsMake(10.0f, 15.0f, 10.0f, 15.0f);
[[ZDCFormCellMessage appearance] setTextFrameInsets:[NSValue valueWithUIEdgeInsets:insets]];
insets = UIEdgeInsetsMake(5.0f, 10.0f, 5.0f, 10.0f);
[[ZDCFormCellMessage appearance] setTextInsets:[NSValue valueWithUIEdgeInsets:insets]];
[[ZDCFormCellMessage appearance] setTextFrameBorderColor:[UIColor colorWithWhite:0.9f alpha:1.0f]];
[[ZDCFormCellMessage appearance] setTextFrameBackgroundColor:[UIColor whiteColor]];
[[ZDCFormCellMessage appearance] setTextFrameCornerRadius:@(3.0f)];
[[ZDCFormCellMessage appearance] setTextFont:[UIFont systemFontOfSize:13.0f]];
[[ZDCFormCellMessage appearance] setTextColor:[UIColor colorWithWhite:0.2f alpha:1.0f]];
// 加载界面时状态通知
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(chatLoaded:) name:ZDC_CHAT_UI_DID_LOAD object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(chatLayout:) name:ZDC_CHAT_UI_DID_LAYOUT object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(chatUnloaded:) name:ZDC_CHAT_UI_WILL_UNLOAD object:nil];
}
+ (void) chatLoaded:(NSNotification*)notification {
/////////////////////////////////////////////////////////////////////////////////// /////////////
// Set a custom chat background (runtime image)
////////////////////////////////////////////////////////////////////////////////////////////////
// Those attributes controllable by UIAppearance should still be controlled via the standard appearance
// invocations. For a chat-wide background image to work you will need to also uncomment the background
// color apperance settings above
ZDCChatUI *chatUI = notification.object;
}
+ (void) chatLayout:(NSNotification*)notification {
/*
Customise the layout of any part of the chat UI here, this notification is received after
the standard/appearance configured layout has been applied
*/
ZDCChatUI *chatUI = notification.object;
//chatUI.formView...
//chatUI.chatView...
}
+ (void) chatUnloaded:(NSNotification*)notification {
// The Chat UI has been dismissed
}
深度自定义
创建一个继承 ZDCChatViewController 的控制器，查找父类的API我们会找到一个代理方法
- (void)stateTransitionTo:(ZDCChatUIState)state
这个方法可以监听客服的状态，加载、连接、表单等
这里我自定义的方法比较简单粗暴，直接创建view根据状态的变化，添加相对应的自定义视图。
- (void)stateTransitionTo:(ZDCChatUIState)state {
ZDCChatUI *chatUI = self.chatUI;
[super stateTransitionTo:state];
switch (state) {
case ZDCChatUIStateLoading:
{
NSLog(@"🌹正在加载");
FWZDCCustomLoadingView *customLoadingView = [[FWZDCCustomLoadingView alloc] initWithFrame:CGRectMake(0, 0, kScreenW, kScreenH)];
[chatUI.loadingView addSubview:customLoadingView];
}
break;
case ZDCChatUIStateNoConnection:
{
NSLog(@"🌹无连接");
FWZDCCustomErrorView *errorView = [[FWZDCCustomErrorView alloc] initWithFrame:CGRectMake(0, 0, kScreenW, kScreenH)];
[chatUI.loadingErrorView addSubview:errorView];
}
break;
case ZDCChatUIStateCouldNotConnect:
{
NSLog(@"🌹无法连接");
FWZDCCustomErrorView *errorView = [[FWZDCCustomErrorView alloc] initWithFrame:CGRectMake(0, 0, kScreenW, kScreenH)];
[chatUI.loadingErrorView addSubview:errorView];
}
break;
case ZDCChatUIStateNoAgents:
{
NSLog(@"🌹暂无客服");
FWZDCCustomOfflineErrorView *errorView = [[FWZDCCustomOfflineErrorView alloc] initWithFrame:CGRectMake(0, 0, kScreenW, kScreenH)];
[chatUI addSubview:errorView];
}
break;
case ZDCChatUIStateOfflineForm:
{
NSLog(@"🌹离线表单");
FWZDCCustomPreFormView *myFormView = [[FWZDCCustomPreFormView alloc] initWithFrame:CGRectMake(0, 0, kScreenW, kScreenH)];
myFormView.finishBlock = ^{
};
myFormView.chatBlock = ^{
};
myFormView.type = FWZDCCustomOfflineFormType;
[chatUI.formView addSubview:myFormView];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"" style:UIBarButtonItemStyleDone target:nil action:nil];
}
break;
case ZDCChatUIStatePreChatForm:
{
NSLog(@"🌹表单");
FWWeakify(self)
FWZDCCustomPreFormView *myFormView = [[FWZDCCustomPreFormView alloc] initWithFrame:CGRectMake(0, 0, kScreenW, kScreenH)];
myFormView.finishBlock = ^{
};
myFormView.chatBlock = ^{
FWStrongify(self)
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:kCustomStr(@"zdc_end") style:UIBarButtonItemStyleDone target:self action:@selector(endChatAction)];
};
myFormView.type = FWZDCCustomOnlineFormType;
[chatUI.formView addSubview:myFormView];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"" style:UIBarButtonItemStyleDone target:nil action:nil];
}
break;
case ZDCChatUIStateChat:
{
NSLog(@"🌹聊天");
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:kCustomStr(@"zdc_end") style:UIBarButtonItemStyleDone target:self action:@selector(endChatAction)];
}
break;
case ZDCChatUIStateChatTimedOut:
{
NSLog(@"🌹超时");
FWZDCCustomErrorView *errorView = [[FWZDCCustomErrorView alloc] initWithFrame:CGRectMake(0, 0, kScreenW, kScreenH)];
[chatUI.loadingErrorView addSubview:errorView];
}
break;
default:
break;
}
}
