介紹/功能

來自舊金山的客服服務(wù)/支持管理軟件。立兩年以來，Zendesk已經(jīng)成功獲得了多家知名的客戶，包括Groupon、 Twitter 、 Yammer 、索尼音樂、TriptIt、Lonely Planet、 Foursquare 和 MSNBC 。Zendesk每天的新增客戶數(shù)量達20家，不久前使用Zendesk客服支持平臺的客戶數(shù)量達到5000家。

編譯項目

pod 添加 ZendeskChat

# 客服：線上版本為09/28/2017且無法找到ZendeskCoreSDK，demo版本為06/12/2018，使用demo版本手動添加
# ZendeskSDK：技術(shù)支持、工單提交
# 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;

設(shè)置此項，在前置表格中會顯示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時一并進行設(shè)置

+ (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]];

// 加載界面時狀態(tài)通知
    [[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
}

深度自定義

創(chuàng)建一個繼承 ZDCChatViewController 的控制器，查找父類的API我們會找到一個代理方法

- (void)stateTransitionTo:(ZDCChatUIState)state

這個方法可以監(jiān)聽客服的狀態(tài)，加載、連接、表單等

這里我自定義的方法比較簡單粗暴，直接創(chuàng)建view根據(jù)狀態(tài)的變化，添加相對應(yīng)的自定義視圖。

- (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;
    }
}