WordPress博客添加BotUI聊天机器人智能客服系统

为您的博客添加聊天机器人，是提升用户体验、增强互动性的绝佳方式。聊天机器人不仅能够即时响应用户咨询，解答常见问题，还能根据用户的兴趣和行为提供个性化推荐，从而加深用户与博客内容的连接。

想象一下，当访客浏览您的博客时，一个友好而智能的聊天窗口悄然出现，它不仅能够引导新用户了解博客特色、热门文章或即将举行的活动，还能为老读者提供专属的订阅优惠、最新更新通知等个性化服务。通过自然语言处理技术，聊天机器人能够理解并回应复杂的查询，甚至进行有趣的对话，让博客的访问过程变得更加生动有趣。

此外，聊天机器人还能帮助您收集宝贵的用户反馈，了解读者的需求和偏好，为您优化博客内容、提升服务质量提供有力支持。您可以根据聊天机器人的数据分析结果，调整文章主题、发布时间或推广策略，以更好地满足读者的期待。

优化：

众所周知，既然我分享了，那就肯定是和别人发出来不一样的。

增加：

• 消息提示音（类似于老版本IPhone弹出消息的声音，当然这个声音可以自定义）
• 将JS引用库的一些东西本地化，如Vue和fontAwesome.js等等

部署：

1.在文章界面插入代码：

[content_hide]

<meta charset="UTF-8"> 
  <title>派克资源智能客服</title> 
  <link href="Bot/css/botui-theme.css" rel="stylesheet">
  <link href="Bot/css/botui.min.css" rel="stylesheet">
  
  
  <div id="content" class="site-content"> 
   <audio id="sound" preload="auto">
     <source src="Bot/sound.mp3" type="audio/mpeg">
   </audio>
   <div class="entry-content"> 
    <div class="popcontainer" id="juanyi-bot" style="min-height:300px; padding:2px 6px 4px 6px; background-color: rgba(242, 242, 242,0.5); border-radius: 10px; 2px solid"> 
     <center> 
     <h6>新认识の好友</h6> 
      <h4>与  派克资源  对话中...</h4> 
     </center> 
     <bot-ui> 
      <center> 
       <div style=" background-image: url(Bot/loading.svg);background-repeat: no-repeat;background-size: 10em;background-position: center;height: 10em;"></div> 
       <p>Loading</p> 
      </center> 
     </bot-ui> 
    </div> 
   </div> 
  </div>  
  <script src="Bot/js/vue.min.js"></script>
  
  <script src="Bot/js/bot.js"></script>
  <script src="Bot/js/juanyi.js"></script>

[/content_hide]

2.将文件内容解压并放到你的博客根目录下

底部下载

3.编辑Bot/js/juanyi.js 文件

[content_hide]

var botui = new BotUI('juanyi-bot'), //juanyi-bot对应HTML中的div id
    address = 'www.pknn.net'; //改成自己的网站地址即可

botui.message.bot({
   delay: 200,  //延迟200ms显示消息， 1s = 1000ms
   loading: true,  //在加载的时候就显示
   content: "Hi，小伙伴👋👋👋" //内容
}).then(function() { 
   return botui.message.bot({
       delay: 1000,
       loading: true,
       content: "这里是派克资源！"
   })
}).then(function() {
   return botui.message.bot({
       delay: 1400,
       loading: true,
       content: "一个会爱好码代码的医生！"
   })
})

[/content_hide]

4.其他：

• Bot/loading.svg 对应加载图片
• Bot/sound.mp3 对应消息提示音

演示地址：https://www.pknn.net/smart