###我的需求

我现在使用的是你们的商城系统，使用了hubilderX工具编译了h5版本的,商城里面有一个配置客服的链接,我试过，可以使用，但不满足我的需求,

我的需求是在h5版本商城的个人中心有一个联系客服，用户点击联系客服可以将用户的信息带过去,所以我使用了客服系统 的定制开发的方法

### 该问题是怎么引起的？

我的前端工程就是你们的商城APP工程,我在App.vue里面加入了这个

```

<script>

(function() {

var hm = document.createElement("script");

hm.src = "http://113.141.88.28:88/customerServer.js";

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(hm, s);

})()

</script>

```

然后在用户点击联系客服这个按钮的时候触发kefuClick()方法,这个方法代码如下:

```

var option = {

openUrl: "http://113.141.88.28:88", // 打开客服聊天框的地址，即：部署后台管理系统的地址，若未填写，则自动获取当前服务器的地址

token: "bd7b5f4e067a0096879428c5ca70b007", // token,与后台交互的凭证

kefuid:'',//默认为空自动对接客服，可填写指定客服ID

isShowTip: true, // 初始化成功后，界面右下角会自动创建 “联系客服按钮”， 如无需默认展示，则填写false即可,默认为true

mobileIcon: '', // 手机端悬浮客服图片

pcIcon: '', // pc端悬浮客服图片

windowStyle:'center',//默认空 右下角小弹窗， center 普通中间弹窗样式

domId: 'customerServerTip',//展示在页面右下角联系客服的dom的id，可根据id获取到dom后自行修改样式, 默认为customerServerTip

insertDomNode: '.getCode_container', // SPA应用必填，html文件单独引入选填，表示插入客服弹窗的 dom节点，一般为当前界面的根节点，默认为body

//设置客户信息

sendUserData: {

uid: '1', // 用户id

nickName: '', // 用户昵称

phone: '15873875037', // 用户联系方式

sex: '1', // 用户性别

avatar: '', // 用户头像 URL地址

openid: ''//微信openid

},

//设置默认打开推送产品

productInfo: {

store_name: '蒙奇 D 路飞',

stock: '库存',

sales: '122', // 销量

ficti: '10', // 赠送

price: '100',

image: '',//产品图片

proUrl:''//产品链接

}

};

var canCustomerServer = new initCustomerServer(option);

//实例化加载客服组建

canCustomerServer.init();

//样式设置说明

canCustomerServer.setStyleOfCustomerServer(this.canCustomerServer.connentServerDom,{

bottom:'300px',

left:'50%'

});

// 调用打开客服弹窗的方法，如果isShowTip为false，就使用这个函数，当然也可以使用A链接

canCustomerServer.getCustomeServer();

```

### 重现步骤

### 报错信息

这是报错信息

```

customerServer.js:193 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'appendChild')

at initCustomerServer.createCustomerServerContainer (customerServer.js:193:18)

at initCustomerServer.runInit (customerServer.js:432:10)

at customerServer.js:456:14

```

```

[system] TypeError: Cannot read properties of undefined (reading 'connentServerDom')

at VueComponent.kefuClick (index.vue:293:1)

at click (pages-user-index.js:624:49)

at invokeWithErrorHandling (chunk-vendors.js:4423:26)

at HTMLElement.invoker (chunk-vendors.js:4748:14)

at original._wrapper (chunk-vendors.js:9632:25)

```

```

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'connentServerDom')"

found in

---> at pages/user/index.vue

```

我跟踪了一下，具体是 customerServer.js 这个文件 的 192行代码:

```

this.createCustomerServerContainer = () => {

let iframeHtml = `<iframe src="${this.settingObj.openUrl}" frameborder="0" class="iframe_contanier" style="width:100%; height:100%;"></iframe>`;

var app = document.createElement('div');

this.appDom = app;

app.setAttribute('id', 'chat-app');

if (this.settingObj.deviceType == 'Mobile') {

// 联系客服按钮dom结构 移动端悬浮按钮样式

let kefuMobilehtml = `

<div class="customerServer_container_mobile" id="${this.settingObj.domId}">

<img class="customerServer_container_mobile_image" src="${this.settingObj.mobileIcon}"></img>

<div class="connent_count"></div>

</div>

`;

app.innerHTML = kefuMobilehtml;

console.log(this.settingObj.insertDomNode);

192 this.body = document.querySelector(this.settingObj.insertDomNode);

193 this.body.appendChild(app);

```

这里的body 元素为null,导致193行报错，使用 null.appendChild,麻烦帮帮忙看看