AICC - 在线客服渠道接入指南

<script type="text/javascript">
const path = 'https://xxxxx.xx/chat.html';
const accessId = 'd51d8423-**-**-8ced-6bf09b814040';
const visitorId = '0001';
const visitorName = '访客';
const visitorTag = 'tag';
const tel = 'tel-number';
const province = 'province';
const city = 'city';
const replyWelcome = 'replay-welcome-text';
const headerDisplay = '0';
const customerFields = {
  yourNumberCustomerField:0,
  yourStringCustomerField:'stringValue',
  autoUpdate:1,
};
const visitorExtraInfo = {
  yourNumberCustomerField:0,
  yourStringCustomerField:'stringValue',
};
const language = 'zh_CN';
const cno = '0001';
const externalId = 'externalId';

const URL = `${path}?accessId=${accessId}&visitorId=${encodeURIComponent(visitorId)}&visitorName=${encodeURIComponent(visitorName)}&visitorTag=${encodeURIComponent(visitorTag)}&tel=${encodeURIComponent(tel)}&province=${encodeURIComponent(province)}&city=${encodeURIComponent(city)}&replyWelcome=${encodeURIComponent(replyWelcome)}&headerDisplay=${encodeURIComponent(headerDisplay)}&customerFields=${encodeURIComponent(JSON.stringify(customerFields))}&visitorExtraInfo=${encodeURIComponent(JSON.stringify(visitorExtraInfo))}&language=${language}&cno=${cno}&externalId=${encodeURIComponent(externalId)}`;

// URL: https://xxxxx.xx/chat.html?accessId=d51d8423-**-**-8ced-6bf09b814040&visitorId=0001&visitorName=%E8%AE%BF%E5%AE%A2&visitorTag=tag&tel=tel-number&province=province&city=city&replyWelcome=replay-welcome-text&headerDisplay=0&customerFields=%7B%22yourNumberCustomerField%22%3A0%2C%22yourStringCustomerField%22%3A%22stringValue%22%2C%22autoUpdate%22%3A1%7D&visitorExtraInfo=%7B%22yourNumberCustomerField%22%3A0%2C%22yourStringCustomerField%22%3A%22stringValue%22%7D&language=zh_CN&cno=0001&externalId=externalId
</script>

<script>
  // 获取未读消息数，直接返回当前未读消息总数
  ClinkChatWeb.getUnReadNum();
  // 监听未读消息回调，每次有未读消息时，会触发callback
  ClinkChatWeb.registerUnRead(callback)
</script>

<script>
    (function(win, doc, src, opt) {
      win[opt] = win[opt] || function () {
      win[opt].options = arguments[0]};
      var script = doc.createElement("script");
      script.async = 1;
      script.src = src;
      doc.body.appendChild(script);
    })(window, document, "https://xxxx.xx/webchat.js?v="+Date.now(), "clinkWebchatOptions");
      clinkWebchatOptions({
        accessId: "d51d8423-**-**-8ced-6bf09b814040",
        visitorId: "0001",
        visitorName: "访客",
        visitorTag: "tag",
        tel: "tel-number",
        province: "province",
        city: "city",
        replyWelcome: "replay-welcome-text",
        headerDisplay: "0",
        customerFields: {
          yourNumberCustomerField: 0,
          yourStringCustomerField: "stringValue",
          autoUpdate: 1
        },
        visitorExtraInfo: encodeURIComponent(JSON.stringify({
          yourNumberCustomerField: 0,
          yourStringCustomerField: "stringValue",
        })),
        language: "zh_CN",
        cno:"0001",
        externalId:"externalId"
      });
</script>

entry/src/main/ets/
├── pages/
│   ├── HomePage.ets          # 首页，提供 URL 输入和导航
│   └── LiveChatWebPage.ets   # WebView 实现页面
└── common/
    └── utils/
        └── ToastUtil.ets     # 工具类

@Entry
@Component
struct LiveChatWebPage {
  @State url: string = ''
  webController: WebviewController = new webview.WebviewController()

  build() {
    Column() {
      Web({
        src: this.url,
        controller: this.webController
      })
        .javaScriptAccess(true)  // 启用 JavaScript
        .fileAccess(true)        // 启用文件访问
        .onlineImageAccess(true) // 启用在线图片访问
        .domStorageAccess(true)  // 启用 DOM 存储
        .imageAccess(true)       // 启用图片访问
        .zoomAccess(true)        // 启用缩放
        .geolocationAccess(true) // 启用地理位置
        .mixedMode(MixedMode.All)
    }
  }
}

{
  "requestPermissions": [
    {
      "name": "ohos.permission.INTERNET"
    },
    {
      "name": "ohos.permission.MICROPHONE",
      "reason": "$string:permission_MICROPHONE",
      "usedScene": {
        "abilities": ["LiveChatPage"],
        "when": "inuse"
      }
    }
  ]
}

class WebviewApiClass {
  constructor() {}

  // H5 调用鸿蒙 back 方法
  back(): void {
    router.back()
  }

  // H5 调用鸿蒙 redirect 方法
  redirect(cardInfo: string): void {
    ToastUtil.show(cardInfo)
    console.info("receive redirect:" + cardInfo)
  }
}

const JAVA_SCRIPT_PROXY_NAME: string = "tinetWebviewApi"

// 在 WebView 控制器附加时注册
.onControllerAttached(() => {
  this.webController.registerJavaScriptProxy(
    this.webviewApiClass,
    JAVA_SCRIPT_PROXY_NAME,
    ["back", "redirect"]
  );
})

// H5 页面中调用鸿蒙接口
tinetWebviewApi.back();
tinetWebviewApi.redirect('some data');

downloadDelegate: webview.WebDownloadDelegate = new webview.WebDownloadDelegate()

// 配置下载代理
this.downloadDelegate.onBeforeDownload((webDownloadItem: webview.WebDownloadItem) => {
  let localFilePath = getContext(this).cacheDir + "/" + webDownloadItem.getSuggestedFileName()
  webDownloadItem.start(localFilePath);
})

// 监听下载进度
this.downloadDelegate.onDownloadUpdated((webDownloadItem: webview.WebDownloadItem) => {
  console.info("download progress: " + webDownloadItem.getPercentComplete());
})

// 下载完成处理
this.downloadDelegate.onDownloadFinish((webDownloadItem: webview.WebDownloadItem) => {
  this.saveFileToDownload(webDownloadItem.getFullPath(), webDownloadItem.getSuggestedFileName());
})

.onControllerAttached(() => {
  this.webController.setDownloadDelegate(this.downloadDelegate);
})

// 自定义 UserAgent
@State customUserAgent: string = ' native_android native_harmonyos';

// 设置自定义 UserAgent
.onControllerAttached(() => {
  let userAgent = this.webController.getUserAgent() + this.customUserAgent;
  this.webController.setCustomUserAgent(userAgent);
})

onBackPress() {
  if (this.webController.accessStep(-1)) {
    this.webController.backward();
    return true
  } else {
    return false
  }
}

.onPermissionRequest((event) => {
  if (event) {
    let requestResource = event.request.getAccessibleResource();
    for (let i = 0; i < requestResource.length; i++) {
      let request = requestResource[i];
      // 处理麦克风权限
      if (request === 'TYPE_AUDIO_CAPTURE') {
        let atManager = abilityAccessCtrl.createAtManager();
        atManager.requestPermissionsFromUser(getContext(this), ['ohos.permission.MICROPHONE'])
          .then((data) => {
            if (data.authResults.length > 0 && data.authResults[0] == 0) {
              event.request.grant(event.request.getAccessibleResource());
            } else {
              event.request.deny();
            }
          })
      }
    }
  }
})

aboutToDisappear(): void {
  if (this.webController) {
    this.webController.deleteJavaScriptRegister(JAVA_SCRIPT_PROXY_NAME);
  }
}

WebViewDemo/
├── pages/
│   └── index/
│       └── index.vue      # WebView 主页面
├── manifest.json          # 应用配置文件
├── pages.json            # 页面配置文件
└── README.md             # 项目说明文档

<script type="text/javascript">
const path = 'https://xxxxx.xx/chat.html';
const accessId = 'd51d8423-**-**-8ced-6bf09b814040';
const linkCard = {
        "productList": [
          {
            "title": "xxx商品",
            "subtitle": "商品说明",
            "remark": "商品描述",
            "amount": "x5",
            "price": "$2999",
            "img": "https://xxx.com/image/xxx.jpeg",
            "imgTag": "敬请期待",
            "agentNavigateTabName": "预览页面",
            "visitorUrl": "https://xxx.com/",
            "agentUrl": "https://xxx.com/",
            "appId": "3qwrq***o43op",
            "pagePath": "/xxx/path",
            "status": "待收货",
          }
        ]
    };


const URL = `${path}?accessId=${accessId}&linkCard=${encodeURIComponent(JSON.stringify(linkCard))}`
</script>

<script>
    (function(win, doc, src, opt) {
      win[opt] = win[opt] || function () {
      win[opt].options = arguments[0]};
      var script = doc.createElement("script");
      script.async = 1;
      script.src = src;
      doc.body.appendChild(script);
    })(window, document, "https://xxxx.xx/webchat.js?v="+Date.now(), "clinkWebchatOptions");
      clinkWebchatOptions({
        accessId: "d51d8423-**-**-8ced-6bf09b814040",
        linkCard:{
          "productList": [
            {
              "title": "xxx商品",
              "subtitle": "商品说明",
              "remark": "商品描述",
              "amount": "x5",
              "price": "$2999",
              "img": "https://xxx.com/image/xxx.jpeg",
              "imgTag": "敬请期待",
              "agentNavigateTabName": "预览页面",
              "visitorUrl": "https://xxx.com/",
              "agentUrl": "https://xxx.com/",
              "appId": "3qwrq***o43op",
              "pagePath": "/xxx/path",
              "status": "待收货",
            }
          ]
        }
      });
</script>

<!-- 引入AICC在线客服api -->
<script src="https://webchat-bj.clink.cn/clink-chat-api.js"></script>

<!-- 调用发送卡片接口示例（需要在iframe加载完成, onload之后调用） -->
<script>
    ClinkChatApi.setIframeCard("tinet-chat-iframe", {
          "productList": [
            {
              "title": "xxx商品",
              "subtitle": "商品说明",
              "remark": "商品描述",
              "amount": "x5",
              "price": "$2999",
              "img": "https://xxx.com/image/xxx.jpeg",
              "imgTag": "敬请期待",
              "agentNavigateTabName": "预览页面",
              "visitorUrl": "https://xxx.com/",
              "agentUrl": "https://xxx.com/",
              "appId": "3qwrq***o43op",
              "pagePath": "/xxx/path",
              "status": "待收货",
            }
          ]
        }
    );
</script>

<script type="text/javascript">
const path = 'https://xxxxx.xx/chat.html';
const accessId = 'd51d8423-**-**-8ced-6bf09b814040';
const linkCard = {
        "title": "XX专营店",
        "logo": "https://xxx.com/image/xx.jpeg",
        "time": "xx年xx月xx日 00:00:00",
        "number": "1234**2457000",
        "status": "待收货",
        "amount": "x5",
        "price": "$2999",
        "tag": {
          "text": "已发货",
          "style": { "color": "red" },
        },
        "productList": [
          {
            "title": "xxx商品",
            "subtitle": "商品说明",
            "remark": "商品描述",
            "amount": "x5",
            "price": "$2999",
            "img": "https://xxx.com/image/xxx.jpeg",
            "imgTag": "敬请期待",
            "agentNavigateTabName": "预览页面",
            "visitorUrl": "https://xxx.com/",
            "agentUrl": "https://xxx.com/",
            "appId": "3qwrq***o43op",
            "pagePath": "/xxx/path",
            "status": "待收货",
          }
        ]
    };


const URL = `${path}?accessId=${accessId}&linkCard=${encodeURIComponent(JSON.stringify(linkCard))}`
</script>

<script>
    (function(win, doc, src, opt) {
      win[opt] = win[opt] || function () {
      win[opt].options = arguments[0]};
      var script = doc.createElement("script");
      script.async = 1;
      script.src = src;
      doc.body.appendChild(script);
    })(window, document, "https://xxxx.xx/webchat.js?v="+Date.now(), "clinkWebchatOptions");
      clinkWebchatOptions({
        accessId: "d51d8423-**-**-8ced-6bf09b814040",
        linkCard:{
          "title": "XX专营店",
          "logo": "https://xxx.com/image/xx.jpeg",
          "time": "xx年xx月xx日 00:00:00",
          "number": "1234**2457000",
          "status": "待收货",
          "amount": "x5",
          "price": "$2999",
          "tag": {
            "text": "已发货",
            "style": { "color": "red" },
          },
          productList: [
            {
              "title": "xxx商品",
              "subtitle": "商品说明",
              "remark": "商品描述",
              "amount": "x5",
              "price": "$2999",
              "img": "https://xxx.com/image/xxx.jpeg",
              "imgTag": "敬请期待",
              "agentNavigateTabName": "预览页面",
              "visitorUrl": "https://xxx.com/",
              "agentUrl": "https://xxx.com/",
              "appId": "3qwrq***o43op",
              "pagePath": "/xxx/path",
              "status": "待收货",
            }
          ]
        }
      });
</script>

<!-- 引入AICC在线客服api -->
<script src="https://webchat-bj.clink.cn/clink-chat-api.js"></script>

<!-- 调用发送卡片接口示例（需要在iframe加载完成, onload之后调用） -->
<script>
    ClinkChatApi.setIframeCard("tinet-chat-iframe", {
          "title": "XX专营店",
          "logo": "https://xxx.com/image/xx.jpeg",
          "time": "xx年xx月xx日 00:00:00",
          "number": "1234**2457000",
          "status": "待收货",
          "amount": "x5",
          "price": "$2999",
          "tag": {
            "text": "已发货",
            "style": { "color": "red" },
          },
          productList: [
            {
              "title": "xxx商品",
              "subtitle": "商品说明",
              "remark": "商品描述",
              "amount": "x5",
              "price": "$2999",
              "img": "https://xxx.com/image/xxx.jpeg",
              "imgTag": "敬请期待",
              "agentNavigateTabName": "预览页面",
              "visitorUrl": "https://xxx.com/",
              "agentUrl": "https://xxx.com/",
              "appId": "3qwrq***o43op",
              "pagePath": "/xxx/path",
              "status": "待收货",
            }
          ]
        }
    );
</script>

export type ExtraDataType = any[] | null;
export enum ButtonType {
    SEND_CONTENT = 'sendContent',
    SEND_CARD = 'sendCard',
    LINK = 'link',
}
export interface NameValue {
    label: string;
    value: string;
}
export interface StyleType {
    fontWeight?: string; // 字重
    color?: string; //字体颜色 （16进制色值，例如 #000000）
    border?: string; //边框
    background?: string; //背景
}
export interface TagStyleType {
    fontWeight?: string; // 字重
    color?: string; //字体颜色 （16进制色值，例如 #000000）
    border?: string; //边框
}
export interface TagConfig {
    text: string;
    style?: TagStyleType;
}
export interface ButtonConfig {
    type: ButtonType;
    text: string;
    style?: StyleType;
    // ------sendContent类型必要字段----------
    content?: string;
    // ------------link类型字段--------------
    linkUrl?: string;
    target?: string; // a标签跳转的类型
    // link类型需要跳转小程序字段，需要跳转小程序时以下两个字段都必须传
    appId?: string;
    pagePath?: string;
}
export interface Product {
    title: string;
    subtitle?: string;
    remark?: string;
    amount?: string;
    price?: string;
    img: string;
    imgTag?: string;
    imgTagStyle?: StyleType;
    agentNavigateTabName?: string;
    visitorUrl?: string;
    agentUrl?: string;
    appId?: string;
    pagePath?: string;
    status?: string;
    buttonConfigList?: ButtonConfig[];
    extraData?: ExtraDataType;
}

export interface Order {
    title?: string;
    logo?: string;
    time?: string;
    number?: string;
    status?: string;
    buttonConfigList?: ButtonConfig[];
    bottomButtonConfig?: ButtonConfig;
    extraInfoArr?: NameValue[];
    extraData?: ExtraDataType;
    productList: Product[];
}

export type ExtraDataType = string; // json
export enum ButtonType {
    LINK = 'link',
}
export interface NameValue {
    label: string;
    value: string;
}
export interface StyleType {
    fontWeight?: string; // 字重
    color?: string; //字体颜色
    border?: string; //边框
    background?: string; //背景
}
export interface TagStyleType {
    fontWeight?: string; // 字重
    color?: string; //字体颜色
    border?: string; //边框
}
export interface TagConfig {
    text: string;
    style?: TagStyleType;
}
export interface ButtonConfig {
    type: ButtonType;
    text: string;
    style?: StyleType;
    // ------------link类型字段--------------
    linkUrl?: string;
    target?: string; // a标签跳转的类型
    // link类型需要跳转小程序字段，需要跳转小程序时以下两个字段都必须传
    appId?: string;
    pagePath?: string;
}
export interface Product {
    title: string;
    subtitle?: string;
    remark?: string;
    amount?: string;
    price?: string;
    img: string;
    imgTag?: string;
    imgTagStyle?: StyleType;
    agentNavigateTabName?: string;
    visitorUrl?: string;
    agentUrl?: string;
    appId?: string;
    pagePath?: string;
    status?: string;
    extraData?: ExtraDataType;
}

export interface Order {
    title?: string;
    logo?: string;
    time?: string;
    number?: string;
    status?: string;
    bottomButtonConfig?: ButtonConfig;
    extraData?: ExtraDataType;
    productList: Product[];
}

  {
    type: "checklist",
    title: `<div><p>您当前未结清合同总结：<span style="color: orange">*</span>笔</p><p>剩余未还金额为：<span style="color: orange">****元</span></p></div>`,
    subTitle: "请选择订单进行咨询：",
    background: "linear-gradient(210.2deg, #FFF2E7 0%, #FFFFFF 100%);",
    pageSize: 3,
    cardList: [
      {
        number: "1",
        style: "color: red",
        extraData: "",
        infoList: [
          {
            name: "编号",
            value: "BH00xxx01"
          },
          {
            name: "金额",
            value: "xx元"
          },
          {
            name: "日期",
            value: "****年**月*日"
          }
        ]
      },
      {
        number: "2",
        style: "",
        extraData: "",
        infoList: [
          {
            name: "编号",
            value: "BH00xxx02",
          },
          {
            name: "金额",
            value: "xx元"
          },
          {
            name: "日期",
            value: "****年**月*日"
          }
        ]
      }
    ]
  }

{"type":"checklist","title":"<div><p>您当前未结清合同总结：<span style=\"color: orange\">*</span>笔</p><p>剩余未还金额为：<span style=\"color: orange\">****元</span></p></div>","subTitle":"请选择订单进行咨询：","background":"linear-gradient(210.2deg, #FFF2E7 0%, #FFFFFF 100%);","pageSize":3,"cardList":[{"number":"1","style":"color: red","extraData":"","infoList":[{"name":"编号","value":"BH00xxx01"},{"name":"金额","value":"xx元"},{"name":"日期","value":"****年**月*日"}]},{"number":"2","style":"","extraData":"","infoList":[{"name":"编号","value":"BH00xxx02"},{"name":"金额","value":"xx元"},{"name":"日期","value":"****年**月*日"}]}]}