给你的博客添加聊天机器人

介绍:

BotUI是一个有趣的聊天 JS 框架,界面样式像是一个对话聊天界面,使用者可以创建一个对话内容与访客进行互动,可自定义程度高,使用难度也不高。下面我就针对 WordPress博客进行部署演示,其他博客部署也是一样的。

Origin:https://github.com/botui/botui

图片[1]-给你的博客添加聊天机器人-倦意博客

优化:

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

增加:

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

部署:

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

<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>与&nbsp;&nbsp;倦意&nbsp;&nbsp;对话中...</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>

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

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

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

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: "一个会爱好码代码的医生!"
   })
})

4.其他:

  • Bot/loading.svg 对应加载图片
  • Bot/sound.mp3 对应消息提示音
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 共29条

请登录后发表评论

    • 头像16225964120
    • 头像Pinpe0
    • 头像pony0
    • 头像李こういち(李幸一)0
    • 头像Toserk0
    • 头像zhecydn0
    • 头像Yish_0
    • 头像zhecydn0
    • 头像Sakura0