客服接入演示

示例数据

// 这段代码可以直接复制到你的页面里使用
// 1) 引入 SDK（按你的部署路径调整）
// <script src="https://aikefu.le365.com.cn/open/js/mangocsr-jssdk.min.js"></script>

// 2) 打开 / 唤起客服（默认同页面只保留 1 个实例；重复 show 会复用并唤起已有实例）
var kefu = LingRuiKefu.show({
    // 必填：渠道/服务 ID
    service_id: '5016377643348529152',

    // 弹窗配置
    config: {
        position: 'rightBottom', // leftBottom | rightBottom | center
        width: '550px',
        height: '670px',

        // 蒙层：true 时点击蒙层默认最小化（不销毁 iframe）
        mask: true,

        // 最小化消息气泡展示时长(ms)
        bubbleDuration: 2000,

        // 如需允许同页面创建多个实例，显式开启：
        // multiple: true,

        // 最小化图标样式/位置（可选）
        // iconBgColor: 'rgba(24, 144, 255, 0.95)',
        // iconTextColor: '#fff',
        // iconPosition: { right: '20px', bottom: '20px' },
    },

    // 访客信息（可选，不传则后端通常会生成匿名访客）
    visitor: {
        user_id: 'USER_888',
        nickname: '测试用户小王',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        phone: '13900001111',
        email: 'zhangsan@example.com',
        tags: ['VIP', '老客户']
    },

    // 当前浏览商品（可选）
    goods: {
        id: '10001',
        title: '高性能无线降噪耳机 Sony WH-1000XM5',
        price: '2999.00',
        image: 'https://p1.music.126.net/K1Xt-WJ_PZ94iQW9.jpg',
        url: window.location.href
    },

    // 相关订单（可选）
    order: {
        order_no: 'ORD_20231027_00001',
        status: '待发货',
        create_time: '2023-10-27 10:00:00',
        amount: '2999.00',
        url: window.location.href + '?order_id=1'
    },

    // 打开/关闭回调（仅在宿主页面本地执行，不会 postMessage 到 iframe）
    opend: function () {
        console.log('客服已打开');
    },
    closed: function () {
        console.log('客服已关闭');
    }
});

// 3) 业务变化时（例如订单状态变化）可以随时更新给客服页
kefu.setData({
    order: {
        order_no: 'ORD_20231027_00001',
        status: '待发货',
        create_time: '2023-10-27 10:00:00',
        amount: '2999.00',
        url: window.location.href + '?order_id=1'
    }
});
客服接入演示

示例数据

操作
