QiscusMultichannelWidget 2.4.0

QiscusMultichannelWidget 2.4.0

×

由 Qiscus，Arief Nur Putranto 维护。

 
依赖关系
Alamofire>= 0
AlamofireImage>= 0
SwiftyJSON>= 0
QiscusCore= 3.0.0-beta.17
SDWebImage>= 0
SDWebImageWebPCoder>= 0
 

QiscusMultichannelWidget 2.4.0

[Widget] iOS 文档

要求

  • iOS 10.0+
  • 最低 Xcode 11.4
  • Swift 5

依赖关系

  • Alamofire
  • AlamofireImage
  • SwiftyJSON
  • QiscusCoreAPI
  • SDWebImage

安装

CocoaPods

CocoaPods 是 Cocoa 项目的依赖管理器。有关使用和安装说明，请访问他们的网站。要使用 CocoaPods 将 QiscusMultichannelWidget 集成到您的 Xcode 项目中，请在其 Podfile 中指定它

pod 'QiscusMultichannelWidget', '~> 2.2.1'

如何使用

初始化

为了使用 QiscusMultichannelWidge，您需要使用您的 AppID（YOUR_APP_ID）进行初始化。有关获取 AppID 的信息，请访问 Qiscus Multichannel Chat 页面

let qiscusWidget = QiscusMultichannelWidget(appID: YOUR_APP_ID)

初始化之后，您就可以访问所有的小部件功能。

设置用户

在开始聊天之前，请设置 UserId，这是必需的。

qiscusWidget.setUser(id: "UserId", displayName: "Cus Tom R", avatarUrl: "[https://customer.avatar-url.com](https://customer.avatar-url.com/)")

如果你想要设置用户属性，你可以使用这个函数来设置，例如：

let userProp = [["key":"job","value":"development"],["key":"Location","value":"Yogyakarta"]]

qiscusWidget.setUser(id: "UserId", displayName: "Cus Tom R", avatarUrl: "[https://customer.avatar-url.com](https://customer.avatar-url.com/)", userProperties : userProp)

获取登录状态

使用该函数来检查用户是否已经登录。

qiscusWidget.isLoggedIn()

开始聊天

使用此函数来开始聊天。

qiscusWidget.initiateChat()
    .setRoomTitle(title: "TITLE".localized())
    .setRoomSubTitle(enableSubtitle: RoomSubtitle.enable, subTitle: "SUBTITLE".localized())
    .startChat { (chatViewController) in
        viewController.navigationController?.setViewControllers([viewController, chatViewController], animated: true)
}

打开聊天时自动发送消息和手动发送消息

// 1
qiscusWidget.automaticSendMessage(textMessage: "testing automatic")
     
        
//2
let messageModel = QMessage()
messageModel.message = "testing automatic"
        
qiscusWidget.automaticSendMessage(qMessage: messageModel)
        
        
//3
qiscusWidget.manualSendMessage(textMessage: "testing manual")

清除用户

使用此函数来清除已登录的用户。

qiscusWidget.clearUser()

隐藏系统消息

通过调用setShowSystemMessage(isShowing: Bool)来配置系统消息的可见性。

qiscusWidget.initiateChat()
            ...
            .setShowSystemMessage(isShowing: false)
            ...
            .startChat { (chatViewController) in
                 viewController.navigationController?.setViewControllers([viewController, chatViewController], animated: true)
            }

自定义

我们提供了一些功能来自定义用户界面。

配置

使用此方法配置小部件属性。频道ID是每个小部件频道的标识符。如果您想将特定的小部件频道集成到移动应用内的小部件中，您可以在initiateChat时添加您的channel_id。

标题 描述
setRoomTitle 基于客户姓名或静态默认值设置房间名称。
setRoomSubTitle
setRoomSubTitle(RoomSubtitle.Enabled)
setRoomSubTitle(RoomSubtitle.Disabled)
setRoomSubTitle(RoomSubtitle.Editable, "自定义副标题")
setHideUIEvent 显示/隐藏系统事件。
setAvatar
setAvatar(Avatar.Enable)
setAvatar(Avatar Disabled)
setEnableNotification 设置启用应用通知。
setChannelId(channelId: channel_id) 使用此功能设置您的widget频道Id

颜色

否 标题 描述
1 setNavigationColor 设置导航颜色。
2 setSendContainerColor 设置图标发送边框颜色。
3 setFieldChatBorderColor 设置聊天字段边框颜色。
4 setSendContainerBackgroundColor 设置发送容器背景颜色。
5 setNavigationTitleColor 设置房间标题、房间副标题和后退按钮的边框颜色。
6 setSystemEventTextColor 设置系统事件文本和边框颜色。
7 setLeftBubbleColor 设置左侧气泡聊天颜色（管理员、负责人、代理）。
8 setRightBubbleColor 设置右侧气泡聊天颜色（客户）。
9 setLeftBubbleTextColor 设置左侧气泡文本颜色（管理员、负责人、代理）。
10 setRightBubbleTextColor 设置右侧气泡文本颜色（客户）。
11 setTimeLabelTextColor 设置时间文本颜色。
12 setTimeBackgroundColor 设置时间背景颜色。
13 setBaseColor 设置聊天室背景颜色。
14 setEmptyTextColor 设置空状态文本颜色。
15 setEmptyBackgroundColor 设置空状态背景颜色。

Color Customization Image

推送通知

按照以下步骤在您的应用程序中设置推送通知

  1. 创建证书签名请求 (CSR)
  • 在您的 Mac 上打开 钥匙串访问（应用程序 -> 工具 -> 钥匙串访问）
  • 选择 从证书颁发机构请求证书

Push Notification Image

  • 填写 用户电子邮件地址、常见名称（示例：John Doe Dev Key），并在 请求是 组中选择 保存到磁盘

Push Notification Image

  1. 在 Apple 开发者网站上创建推送通知 SSL 证书

Push Notification Image

  • 选择 Apple 推送通知服务 SSL（沙盒 & 生产）并继续

Push Notification Image

  • 选择 AppID，然后继续
  • 上传 CSR 文件（步骤 1）以完成此过程
  • 下载 SSL 证书
  • 双击文件并将其注册到您的登录钥匙串
  1. 将 p12 文件上传到 Qiscus 仪表板
  • 从左侧菜单中选择 钥匙串访问 下的 证书 分类
  • 选择之前已注册的推送 SSL 证书
  • 右键单击证书

Push Notification Image

  • 选择导出以将文件保存到您的磁盘

Push Notification Image

  • 请访问 Qiscus 帮助页面 提交您的请求
  • 按要求填写以下内容
    • Email、主题和描述
    • 在“相关产品”中选中 *多渠道客户服务聊天 *
    • 在“查询类别”中选中 多渠道客户服务聊天
    • 在应用程序 ID 中填写 YOUR_APP_ID
  • 单击提交

Push Notification Image

注意：此示例是生产推送通知证书。您需要创建开发推送通知证书和 p12 文件，然后将其作为附件提交给 Xcode 用户。

  1. 将设备令牌注册到多渠道小部件。
  • 创建一个类来保存小部件。在本例中，我们将使用名为 ChatManager 的 Singleton 对象类，该类将包装 QiscusMultichannelWidget 功能。在此步骤中，我们将突出显示设备令牌注册和通知点击处理。
final  class  ChatManager {

    static let shared: ChatManager = ChatManager()

    lazy  var  qiscusWidget: QiscusMultichannelWidget = {
        return QiscusMultichannelWidget(appID: "YOUR_APP_ID")
    }()
    
    ...
    
    func register(deviceToken: Data?) {

        if let deviceToken = deviceToken {
            var tokenString: String = ""
            for i in 0..<deviceToken.count {
                tokenString += String(format: "%02.2hhx", deviceToken[i] as CVarArg)
            }
             //isDevelopment = true : for development or running from XCode
            //isDevelopment = false : release mode TestFlight or appStore
            self.qiscusWidget.register(deviceToken: tokenString, isDevelopment: false, onSuccess: { (response) in
                print("Multichannel widget success to register device token")
            }) { (error) in
                print("Multichannel widget failed to register device token")
            }
        }

    }

    func userTapNotification(userInfo : [AnyHashable : Any]) {

        self.qiscusWidget.tapNotification(userInfo: userInfo)
    }

    ...
}
  • 在您的应用程序的 AppDelegate 中，将您的设备令牌存储为变量。
import  UserNotifications

@UIApplicationMain
class  AppDelegate:  UIResponder,  UIApplicationDelegate {

    func  application(_  application:  UIApplication, didFinishLaunchingWithOptions  launchOptions [UIApplication.LaunchOptionsKey:  Any]?) ->  Bool {
    
        // MARK : Setup Push Notification
        if  #available(iOS 10.0,  *) {
            // For iOS 10 display notification (sent via APNS)
            UNUserNotificationCenter.current().delegate  =  self
            let  authOptions:  UNAuthorizationOptions  = [.alert, .badge, .sound]
            UNUserNotificationCenter.current().requestAuthorization(
                options:  authOptions,
                completionHandler: {_,  _  in })
        } else {
            let  settings:  UIUserNotificationSettings  =
            UIUserNotificationSettings(types: [.alert, .badge, .sound],  categories:  nil)
            application.registerUserNotificationSettings(settings)
        }
          
        // MARK : register the app for remote notifications
        application.registerForRemoteNotifications()

        return  true
    }
 
    func  application(_  application:  UIApplication,  didRegisterForRemoteNotificationsWithDeviceToken  deviceToken:  Data) {

        ChatManager.shared.register(deviceToken:  deviceToken)
    }

    func  application(_  application:  UIApplication,  didReceiveRemoteNotification  userInfo: [AnyHashable  :  Any]) {
    
        ChatManager.shared.userTapNotification(userInfo: userInfo)
    } 
}

// [START ios_10_message_handling]
@available(iOS  10,  *)
extension  AppDelegate  :  UNUserNotificationCenterDelegate {
  
    // Receive displayed notifications for iOS 10 devices.
    func  userNotificationCenter(_  center:  UNUserNotificationCenter, willPresent  notification:  UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) ->  Void) {

        completionHandler([.alert, .sound])
    }

    func  userNotificationCenter(_  center:  UNUserNotificationCenter, didReceive  response:  UNNotificationResponse, withCompletionHandler  completionHandler: @escaping () ->  Void) {
    
        let  userInfo  =  response.notification.request.content.userInfo
        ChatManager.shared.userTapNotification(userInfo:  userInfo)
        completionHandler()
    }
}
// [END ios_10_message_handling]
  1. 测试第三方推送通知

使用 Easy APNs Provider 工具

Push Notification Image

注意

按照工具的步骤 1 - 5 测试推送通知。我们使用 Apple 开发者 iOS 推送服务进行测试

如何运行示例

  1. 获取您 APPID
  • 转到 Qiscus 多渠道聊天页面 注册您的电子邮件
  • 使用您的电子邮件和密码登录Qiscus多通道聊天
  • 在左侧栏中转到“设置”菜单
  • 查找“应用信息”
  • 您可以在应用信息中找到APPID
  1. 激活Qiscus小部件集成
  • 转到左侧栏的“集成”菜单
  • 查找“Qiscus小部件”
  • 滑动开关以激活Qiscus小部件
  1. 运行pod install

在克隆示例后，您需要运行此代码以安装示例所需的所有Cocoapods依赖项

pod install
  1. 在示例中设置YOUR_APP_ID
  • 打开Example/ChatManager.swift
  • 将第21行的appId替换为YOUR_APP_ID（步骤1）
lazy  var  qiscusWidget: QiscusMultichannelWidget = {
    return  QiscusMultichannelWidget(appID: "YOUR_APP_ID")
}()
  1. 开始聊天

示例已准备好使用。您可以从Qiscus多通道聊天仪表板开始与您的代理聊天。