页面的head部分，需要引入多个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/demo.css">
<link type="text/css" rel="stylesheet" href="dist/botui.min.css">
<link type="text/css" rel="stylesheet" href="dist/botui-theme-default.css">

页面的body部分，结构比较简单，设置好聊天机器人的对话容器即可，代码如下：

<div class="htmleaf-container">
	<div class="htmleaf-content">
		<div class="botui-app-container" id="home-demo">
		      <bot-ui></bot-ui>
		</div>
	</div>
</div>

页面的底部，需远程调用vue.js文件，这里强调一下，不能用高版本的vue，否则回复图片无效，接着引入一个botui插件，启用插件并设置好预回复的内容等等，代码如下：

<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.0.5/vue.min.js"></script>
<script type="text/javascript" src="dist/botui.min.js"></script>
<script type="text/javascript">
	var botui = BotUI('home-demo');

	botui.message.add({
	  content: '大家好，我是千颂伊！'
	}).then(function () {
	  return botui.message.add({
	    delay: 1500,
	    content: '![千颂伊](http://img3.duitang.com/uploads/blog/201402/15/20140215120608_BzmRN.gif)'
	  });
	}).then(function () {
	  return botui.action.button({
	    delay: 1000,
	    action: [{
	      text: '继续聊