Vue项目接入网易七鱼在线客服

步骤一推荐NPM引入

其实就是一个key引入一个js就可以了很简单

Npm安装JSDK

npm install @neysf/qiyu-web-sdk --save

步骤二

进入七鱼后台获取你的KEY

YSF.init('xxxxxxxxxxxx你的KEY')

步骤三

Vue通用这里v3介绍可使用Ts

完整代码

<template>
    <div>
        <button @click="openCustomerService">打开客服</button>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import YSF from '@neysf/qiyu-web-sdk';

function openCustomerService() {
    ysf('open');
}
function onlineCustomerServiceMount() {
    YSF.init('xxxxxxxxxxxx你的KEY').then(ysf => {
        ysf('open');
    }).catch(error => {
        console.log('sdk加载失败---', error);
    });
}
onMounted(() => {
    onlineCustomerServiceMount()
})
</script>