第一步：设计前的准备，首先要在ps中设计自定义客服模块样式，这里就以上面这个为例，具体制作过程这里就跳过了，唯一需要注意的，就是设计时尽量规范，有条理，方便下面操作。
第二步：我们将设计图中的旺旺图层隐藏，然后输出保存为背景，并上传到空间。
第三步：这时候前期的准备工作就完成了，下面就要使用?Dreamweaver 来做具体的代码客服木块代码，打开Dreamweaver，插入一个表格，表格宽度950px ，这个根据实际设计的而定，我设计的是950px*60px；从上面设计图中可以看出，表格由1行，9列，其他为0：
第四部：为表格添加背景和高度，背景代码放在最前<table>内
background="第二步上传空间的地址"
"高度"?
此时右侧设计视窗现实内容：
第五步：接下来，就血药调整一下表格单元格的尺寸，单击右侧设计视窗单元格，在最下面的属性面板里修改单元格大小，具体根据设计时候的尺寸修改：
一次修改调整尺寸，布局完成。
第六步：加入旺旺代码：
阿里旺旺-网旺遍下，选择自己的风格，填入旺旺名称以及提示内容，生成代码，然后复制：
回到?Dreamweaver 中，把代码复制到单元格中：
最后完成效果图：
这样，就完成了自定义的旺旺客服模块制作了。
添加在线的旺旺客服，图文教程： ? ?
首先进入阿里旺旺的官方首页，地址栏输入：im.alisoft/info.html?flag=3，在“功能介绍”栏目中，找到“旺遍天下”按钮。
这时在页面的左侧下面位置我们可以看到“旺遍天下” 点击进入可以看到淘宝旺旺在线客服添加代码的步骤。
输入想生成的淘宝旺旺在线客服生成代码后，点击“复制代码”，完成代码复制。
生成了淘宝旺旺在线客服代码点击-复制代码-OK
现在只要在网站上自己想添加旺旺客服的位置，添加这段代码，即可显示客服按钮。