ZDCChat 客服

介绍/功能

来自旧金山的客服服务/支持管理软件。立两年以来，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;
    }
}