前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >多语言支持-唯一客服系统文档中心

多语言支持-唯一客服系统文档中心

作者头像
唯一Chat
发布2023-05-12 08:26:47
3840
发布2023-05-12 08:26:47
举报
文章被收录于专栏:陶士涵的菜地陶士涵的菜地

客服系统支持多语种展示,比如:中文,英文,繁体,日语,韩语,俄语等,并且可以扩展各种小语种

语种展示的优先级

首先,按照url参数中指定的lang参数

其次,查询localStorge里的lang参数

最后,查询浏览器的语种标识 navigator.language

默认,cn中文

访客聊天界面,会按照以上顺序,查找语种标识,展示对应语言包文案

扩充语种

具体实现代码 static/js/functions.js ,想要扩充语种的,需要先修改该函数的语种标识

代码语言:javascript
复制
function checkLang(){
    var langs=["cn","en","jp","tw","kr","hk","ru"];
    var lang=getQuery("lang");
    if(lang!=""&&langs.indexOf(lang) > 0 ){
        return lang;
    }
    var lang=getLocalStorage("lang");
    if(lang){
        return lang;
    }
    var navLang = navigator.language
    switch (navLang) {
        case "en-US":
            return "en";
            break;
        case "zh-TW":
            return "tw";
            break;
        default:
            return "cn";
    }

    return "cn";
}

然后增加语言包  static/js/front-lang.js  例如:

代码语言:javascript
复制
    //台湾繁体
    tw:{
        connecting:"正在連接...",
        refresh:"請重新整理頁面!",
        connectok:"為您服務!",
        wechatNotice:"訊息已推送到客服微信",
        freqLimit:"操作頻率過快",
        uploadSuccess:"上傳成功",
        uploadFailed:"上傳失敗",
        moremessage:" 點擊載入更多紀錄",
        videoAudio:"請確認已安裝麥克風或攝影機,繼續實時通話?",
        loading:"載入中",
        tips:"提示",
        map:"地圖",
        language:"語言",
        audio:"語音",
        video:"視頻",
        expand:"全螢幕",
        more:"更多",
        cutpic:"截圖",
        read:"已讀",
        unread:"未讀",
        invalidParam:"無效參數",
        guess:"我猜您想問?",
        huanyihuan:"換一換",
        agent: "客服",
        me: "我",
        emotions:"表情",
        file: "檔案",
        photo: "圖片",
        sent: "發送",
        recoder:"錄音",
        cancel: "取消",
        hotQuestionTitle:"熱門問題",
        visitorCommentTitle:"請您對服務進行評價",
        textarea:"請輸入內容",
        socketclose:"連接關閉,請點擊重新建立會話",
        closemes:"聊天連接關閉或在別處開啟",
        forceclosemes:"客服關閉連接!請重新開啟頁面",
        autoclosemes:"長時間未回應關閉連接!請重新整理頁面",
        offline:"客服全部離線,您可能無法及時獲得回覆。",
    },

前端展示逻辑

首先需要调用 var LANG=checkLang(); 获取到语种标识

然后,需要引入front-lang.js 

代码语言:javascript
复制
<script src="/static/js/front-lang.js"></script>

vue代码中增加以下data属性

代码语言:javascript
复制
        data: {
            flyLang:KEFU_LANG[LANG],
        }

然后文案部分按照语种标识,展示语言包key

代码语言:javascript
复制
<{flyLang.sent}>

原则上,按照上面的过程,后台界面也可以增加为多语言界面。但是,考虑到后台文案太多,暂时我没有去加上。如果有需要,可以自行修改为多语种界面。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-05-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 语种展示的优先级
  • 扩充语种
  • 前端展示逻辑
相关产品与服务
腾讯企点客服
腾讯企点客服(Tencent QiDian Customer Service)是为销售和客服提供多渠道商机转化与客户服务的智能客服平台。基于腾讯云的即时通讯、音视频、人工智能、大数据、云呼叫中心等技术,以个性化服务和精准客户洞察撬动销售转化与复购增购。企点客服全面覆盖了从销售到服务的全链路业务场景,帮助企业构建一体化的客户运营体系,极大提升了企业获客、待客、留客的效率。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档