vue项目使用zendesk

vue + zendesk

初始化，我这边写在app.vue 中

1.将zendesk的js包放到index.html,js包的地址在zendesk的后台：设置->小组件

2.初始化代码写在app.vue

项目的要求是只有到服务tab下，zendesk才能出现，所以我在app.vue中现将zendesk隐藏

zESettings可以设置组件的颜色之类的，具体可以看他们的文档，文档是全英的。

zE('webWidget', 'hide');
window.zESettings = {
                webWidget: {
                    position: { horizontal: 'left', vertical: 'bottom' },
                    color: {  
                        theme: '#0AB781',
                        launcher: '#0AB781',
                        launcherText: '#fff',
                        button: '#0AB781',
                        buttonText: '#fff',
                        resultLists: '#000',
                        header: '#0AB781',
                        articleLinks: '#FF4500'
                    },
                    offset: {
                        horizontal: '0px',
                        vertical: '90px',
                        mobile: {
                            horizontal: '0px',
                            vertical: '90px'
                        }
                    },
                    contactOptions: {
                        enabled: false,
                        chatLabelOnline: { '*': '在线聊天' },
                        chatLabelOffline:{'*':'给我们留言'}
                    },
                    launcher: {
                        chatLabel: {
                            '*': '在线聊天'
                        },
                        mobile: {
                            labelVisible: true
                        },
                        badge: {
                            label: {
                                '*': 'xxx',
                                fr: 'Discute avec nous'
                            },
                            image: 'xxx',
                            layout: 'image_left'
                        }
                    },
                    contactForm: {
                        attachments: false,   //是否允许上传附件
                        fields: [
                            {id: 'email', prefill: {'*': 'My custom field text'}},
                            {id: 'phone', prefill: {'*': 'My custom field text'}},
                            {id: 'mobile', prefill: {'*': 'My custom field text'}}
                        ],
                        subject: true,
//                        ticketForms: [
//                            {id: 'email',prefill: {'*': 'My field text'}}
//                        ],
                        title: {
                            '*': '给我们留言'
                        }
                    },
                    chat: {
                        title: {
                            '*': '在线聊天',  //聊天界面顶部文字
                        },
                        suppress: false,   //控制是否在线聊天
                        tags: ['vip'],
                        notifications: {  //通知是否在引动设备上显示
                            mobile: {
                                disable: false
                            }
                        },
                        hideWhenOffline: false,    //当帐户状态为离线时，隐藏聊天离线表格。
                        menuOptions: {   //控制email是否填写
                            emailTranscript: false,
                            phoneTranscript: true,
                        },
                        prechatForm: {
                            greeting: {
                                '*': 'Please fill out the form below to chat with us',
                                fr: "S'il vous plaît remplir le formulaire ci-dessous pour discuter avec nous"
                            },
                            departmentLabel: {
                                '*': 'Select a department',
                                fr: "S'il vous plaît remplir le formulaire ci-dessous pour discuter avec nous"
                            }
                        },
                        offlineForm: {   //长久客服不回复的提示语
                            greeting: {
                                '*': "We aren't online right now, please leave a message",
                                fr: "Nous ne sommes pas en ligne pour le moment, s'il vous plaît laissez un message"
                            }
                        },
                        profileCard: {
                            avatar: true,
                            rating: false,
                            title: true
                        },
//                        tags: ['loggedin']
//                        concierge: {  //设置客服的头像和名字
//                            avatarPath: '../assets/img/Index_img/icon_people.png',
//                            name: 'Jane Doe',
//                            title: { '*': '铁憨憨' }
//                        }
                    },
                    navigation: {
                        popoutButton: {
                            enabled: true
                        }
                    }
                }
            };

3.service.vue

created() {
            zE('webWidget', 'show');  //进到页面就启动组件
            zE('webWidget', 'setLocale', 'zh-cn'); //设置语言
            zE('webWidget', 'identify', {   //设置默认的信息
                name: '',
                email:'',
                phone: '',
                tel:'',
                organization: 'VIP'
            });
            zE('webWidget', 'prefill', {
                name: {
                    value: '',
                    readOnly: false // optional
                },
                email: {
                    value: 'isamu@xxx.com',
                    readOnly: false // optional
                },
                mobile: {
                    value: '',
                    readOnly: true
                }
            });
        },

4.点击客服打开组件

methods: {
            getZendesk() {
                zE('webWidget', 'open');
            }
        },

5.离开service

destroyed: function () {
            zE('webWidget', 'hide');
        },

来源：CSDN

作者：`俺命shiro

链接：https://blog.csdn.net/weixin_42246483/article/details/104052954