离线宝高级定制API使用示例
模板网 2014-09-17
离线宝高级定制操作说明
一.搬
1.1 搬图
将解压后的images文件夹，放在您网站要显示浮窗页面的同级目录下。
1.2 搬代码
1.2.1 浮窗样式。打开解压后的index.html文件，将"浮窗样式开始"-"浮窗样式结束"之间的代码添加至您网站要显示浮窗的页面，放在该页面的顶部</head>标签之前，紧邻</head>标签。
1.2.2 浮窗功能。打开解压后的index.html文件，将"浮窗代码开始" - "浮窗代码结束"之间的代码添加至您网站要显示浮窗的页面，放在该页面最底端的</body>标签前，紧邻</body>标签。
二.改
2.1 改代码（必须）
修改为自己的代码。从离线宝后台获取API分组代码，替换步骤1.2.2拷贝的代码中"此段代码从离线宝后台获取开始" - "此段代码从离线宝后台获取结束"之间的代码段。获取代码方式：登录离线宝->站点与样式—>选择站点—>样式设置—>api自定义—>复制“选定分组”部分的代码。
2.2 改样式（可选）
2.2.1 代码。您可以定制浮窗上需要显示的元素并修改这些元素的外观。在步骤1.2.2中的拷贝的浮窗代码是按照明文字、背景图、400号码、外链、离线宝回呼5个模块组织的，通过调整代码（参照说明），您可以改变这些模块的显示顺序、隐藏/增加某个模块、改变模块里显示的元素、元素的外观（大小、位置、颜色...）等。
2.2.2 图。您可以通过制作图片来增加更多的个性化效果，如背景图、按钮图。将做好的图片放在image文件夹中，并修改浮窗代码中引用的图片名。
核心关键代码：
复制代码 代码如下:
<script>
document.getElementById("callBtn").onclick = function () {
lxb.call(document.getElementById("telInput"));
};
</script>
<!--此段代码从离线宝后台获取开始-->
<script>
document.write('<script type="text/javascript" data-lxb-uid="请在此填入您的推广账号id" data-lxb-gid="请在此填入分组id" src="http://lxbjs.baidu.com/api/asset/api.js?t=' + new Date().getTime() + '" charset="utf-8"><\/script>' );
</script>
<!--此段代码从离线宝后台获取结束-->
效果截图:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自定义API使用示例</title>
<!--浮窗样式开始-->
<style type="text/css">
#API-FLOAT-CONTAINER,
#API-FLOAT-CONTAINER ins,
#API-FLOAT-CONTAINER em,
#API-FLOAT-CONTAINER a,
#API-FLOAT-CONTAINER input
{
width: auto;
height: auto;
margin: 0;
padding: 0;
background-color: transparent;
background-position: 0% 0%;
background-size: auto;
background-repeat: repeat;
background-origin: padding-box;
background-clip: border-box;
background-attachment: scroll;
background-image: none;
border: none;
outline: invert none medium;
color: black;
direction: ltr;
letter-spacing: normal;
line-height: normal;
text-align: left;
text-decoration: none;
text-indent: 0;
text-transform: none;
white-space: normal;
word-spacing: normal;
font-size: 12px;
font-family: Tahoma,"宋体",Helvetica,sans-serif;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
visibility: visible;
overflow: visible;
list-style: none;
float: none;
clear: none;
display: block;
position: static;
top: auto;
left: auto;
vertical-align: baseline;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}
/*fixed for IE6*/
*html,
*html body {
background-image:url(about:blank);
background-attachment:fixed
}
/*数值用来控制浮窗位置*/
.api-float-pos-fixed {
_position:absolute;
_left:expression(eval(document.documentElement.scrollLeft+0));
_top:expression(eval(document.documentElement.scrollTop+50))
}
/*浮窗容器*/
#API-FLOAT-CONTAINER,
#API-FLOAT-CONTAINER * {
padding: 0;
margin: 0;
}
#API-FLOAT-CONTAINER {
position: fixed;
z-index: 1000;
}
/*说明文字*/
#API-FLOAT-CONTAINER .api-info {
margin:20px auto 0;
}
#API-FLOAT-CONTAINER .api-info em {
text-align:center;
line-height: 100%;
text-align: center;
}
/*浮窗背景图片*/
#API-FLOAT-CONTAINER .api-bg-img {
margin:10px auto 0;
text-align: center;
}
/*400电话*/
#API-FLOAT-CONTAINER .api-phone {
margin:10px auto 0;
}
#API-FLOAT-CONTAINER .api-phone em {
text-align:center;
line-height: 100%;
}
/*其他链接的按钮区域*/
#API-FLOAT-CONTAINER .api-link-btn-con {
margin:10px auto 0;
text-align:center;
}
#API-FLOAT-CONTAINER .api-link-btn-con a {
height:26px;
line-height:26px;
display:inline-block;
*display:inline;
*zoom:1;
margin-bottom:10px;
font-size:14px;
font-family: 'Microsoft Yahei';
vertical-align:middle;
text-align:center;
text-decoration:none;
}
/*离线宝回呼区域*/
#API-FLOAT-CONTAINER .api-lxb-cb-con {
margin:10px auto 20px;
text-align:center;
}
#API-FLOAT-CONTAINER input.api-lxb-cb-input {
height: 25px;
line-height: 25px;
margin: 0 auto 10px;
}
#API-FLOAT-CONTAINER input.api-lxb-cb-btn {
height: 28px;
line-height: 26px;
font-size: 14px;
font-family: 'Microsoft Yahei';
text-align: center;
margin: 0 auto 10px;
white-space: pre;
border: none;
cursor: pointer;
background: url(http://www.120muban.com/demo/20140917/001/images/api_lxb_cb_btn_bg.png) 5px 3px no-repeat;
border-bottom: 2px solid #25a6e9;
}
</style>
<!--浮窗样式结束-->
<style>
/*demo页样式*/
body { margin: 0; padding: 0; background: #ffffff url(http://www.120muban.com/demo/20140917/001/images/bodybg.jpg) repeat left top; }
.red { color: #f00;}
.black {color: #000;}
.inner { width: 960px; margin: 0 auto; }
#header { background: #f6fafd; border-bottom: 1px solid #f6fafd; }
#header .inner { background: #f6fafd; overflow: hidden; height: 36px; line-height: 36px; }
#header h3{ margin: 0 ; padding: 0; color: #8296ab; font-size: 14px; line-height: 36px; text-align: center;}
#content { background: url(http://www.120muban.com/demo/20140917/001/images/skybg.png) repeat-x 0 0; padding-top: 20px; }
#content .inner{ background: #fff;overflow: hidden; height: 1000px; }
.title{ height: 36px; line-height: 36px; margin-bottom: 10px; background: #f9f9f9; border-bottom: 3px solid #ddd; overflow: hidden; }
.title h4{ margin: 0; margin-left: 20px; padding: 0;}
#content h3 {font-size: 14px;margin: 0 auto; width: 850px;}
#content dl { width: 850px; margin: 10px auto; text-indent:2em;}
#content dt { font-size: 14px; margin-top: 10px; line-height: 20px; color: #333333; text-indent:2em;}
#content dd { margin-top: 10px; font-size: 13px; color: #666; text-indent:2em;}
#content .emphasis { font-weight: bold;}
</style>
</head>
<body>
<div id="header">
<div class="inner">
<h3>自定义API使用示例</h3>
</div>
</div>
<div id="content">
<div class="inner">
<div class="title">
<h4>操作说明</h4>
</div>
<h3>一.搬</h3>
<dl>
<dt>1.1 搬图</dt>
<dd>将解压后的<span class="emphasis black">images</span>文件夹，放在您网站要显示浮窗页面的同级目录下。</dd>
<dt>1.2 搬代码</dt>
<dd>1.2.1 浮窗样式。打开解压后的<span class="emphasis black">index.html</span>文件，将<span class="emphasis black">"浮窗样式开始"-"浮窗样式结束"</span>之间的代码添加至您网站要显示浮窗的页面，放在该页面的顶部</head>标签之前，紧邻</head>标签。</dd>
<dd>1.2.2 浮窗功能。打开解压后的<span class="emphasis black">index.html</span>文件，将<span class="emphasis black">"浮窗代码开始" - "浮窗代码结束"</span>之间的代码添加至您网站要显示浮窗的页面，放在该页面最底端的</body>标签前，紧邻</body>标签。</dd>
</dl>
<h3>二.改</h3>
<dl>
<dt>2.1 改代码<span class="emphasis red">（必须）</span></dt>
<dd>修改为自己的代码。从离线宝后台获取API分组代码，替换步骤1.2.2拷贝的代码中<span class="emphasis black">"此段代码从离线宝后台获取开始" - "此段代码从离线宝后台获取结束"</span>之间的代码段。获取代码方式：登录离线宝->站点与样式—>选择站点—>样式设置—>api自定义—>复制“选定分组”部分的代码。</dd>
<dt>2.2 改样式（可选）</dt>
<dd>2.2.1 代码。您可以定制浮窗上需要显示的元素并修改这些元素的外观。在步骤1.2.2中的拷贝的浮窗代码是按照明文字、背景图、400号码、外链、离线宝回呼5个模块组织的，通过调整代码（参照说明），您可以改变这些模块的显示顺序、隐藏/增加某个模块、改变模块里显示的元素、元素的外观（大小、位置、颜色...）等。</dd>
<dd>2.2.2 图。您可以通过制作图片来增加更多的个性化效果，如背景图、按钮图。将做好的图片放在image文件夹中，并修改浮窗代码中引用的图片名。</dd>
</dl>
</div>
</div>
<!-- 浮窗代码开始-->
<!-- 设置浮窗的背景色，宽度，位置（上：top，下：bottom；左：left；右：right） -->
<ins id="API-FLOAT-CONTAINER" style="background:#37bbff; width:140px; left:0px;top:88px;">
<!-- 说明文字（该模块可删除） -->
<ins class="api-info">
<!-- 设置文字的颜色，字号，字体 -->
<em style="color: #ffffff; font-size:22px; font-family: 'Microsoft Yahei';">欢迎咨询</em>
</ins>
<!-- 背景图片（该模块可删除） -->
<ins class="api-bg-img">
<!-- 设置背景图，大小 -->
<img src="http://www.120muban.com/demo/20140917/001/images/api_bg_img.png" width="98" height="99"/>
</ins>
<!-- 400号码（该模块可删除） -->
<ins class="api-phone">
<!-- 设置文字的颜色，字号，字体 -->
<em style="color: #ffffff; font-size:18px; font-family: 'Arial';">400-888-8888</em>
</ins>
<!-- 嵌入外链（该模块可删除） -->
<ins class="api-link-btn-con">
<!-- 设置按钮的宽度，背景色，文字颜色 -->
<a style="width:104px; background:#03159b; color: #ffffff;" href="http:www.baidu.com" target="_blank">在线咨询一</a>
<a style="width:104px; background:#03159b; color: #ffffff;" href="http:www.baidu.com" target="_blank">在线咨询二</a>
<a style="width:104px; background:#03159b; color: #ffffff;" href="http:www.baidu.com" target="_blank">在线咨询三</a>
</ins>
<!-- 离线宝回呼 -->
<ins class="api-lxb-cb-con">
<!-- 回呼输入框:id为"telInput"，设置宽度，背景色，边框颜色 -->
<input type="text" name="telInput" class="api-lxb-cb-input" style="width: 132px;background: #ffffff;border: 1px solid #1ba6d4;" id="telInput" value="" placeholder="请输入电话号码"/>
<!-- 回呼按钮:id为"callBtn"，设置宽度，文字颜色，背景色 -->
<input type="button" class="api-lxb-cb-btn" style="color: #ffffff; width: 132px;background-color: #ffb119; " id="callBtn" name="callBtn" value=" 立即免费通话"/>
</ins>
</ins>
<script>
document.getElementById("callBtn").onclick = function () {
lxb.call(document.getElementById("telInput"));
};
</script>
<!--此段代码从离线宝后台获取开始-->
<script>
document.write('<script type="text/javascript" data-lxb-uid="请在此填入您的推广账号id" data-lxb-gid="请在此填入分组id" src="http://lxbjs.baidu.com/api/asset/api.js?t=' + new Date().getTime() + '" charset="utf-8"><\/script>' );
</script>
<!--此段代码从离线宝后台获取结束-->
<!-- 浮窗代码结束-->
</body>
</html>相关文章
- 很好看的手机站底部
很好看的手机站底部，每个按钮宽度都是自适应的，适合不同屏幕分辨率的手机。代码整理格式化，去除无用代码，方便使用与修改。 效果截图: 打包下载: 很好看的手机站底部
- 离线宝高级定制API使用示例
离线宝高级定制操作说明 自定义API使用示例下载 一.搬 1.1 搬图 将解压后的images文件夹，放在您网站要显示浮窗页面的同级目录下。 1.2 搬代码 1.2.1 浮窗样式。打开解压后的index.html文件，将浮窗样式开始-浮窗样式结束之间的代码添加至您网站要显示浮窗的
- 百度离线宝调用接口
医疗模板库(www.120muban.com)收集整理的百度离线宝调用接口，使用方便，可自定义离线宝样式。 //data-lxb-uid 为百度推广账户ID //data-lxb-gid 为离线宝分组ID，没有可留空。
- 表单提交到商务通后台 中文说明加换行的实现方法
实现将表单中的数据提交到商务通后台的效果，中文说明并且实现换行显示。 代码简单容易理解，这里就不多解释了。 要点：1、使用escape函数对中文进行编码；2、使用br标签进行换行。 效果如下图： 前台界面 提交到商务通后台的结果 提交到商务通后台的结果
- 网站商务通高级定制教程(1)
网站商务通高级定制教程(1)，今天为大家介绍一下商务通的高级定制方面的知识，利用到了之前和大家说过的 商务通核心函数库解密格式化后的代码 中的一个函数。 实现功能： 邀请框二次弹出、自定义快速邀请框内容、邀请后浏览器标题显示新信息闪烁和一个使最小
随机推荐
- 很好看的手机站底部
很好看的手机站底部，每个按钮宽度都是自适应的，适合不同屏幕分辨率的手机。代码整理格式化，去除无用代码，方便使用与修改。 效果截图: 打包下载: 很好看的手机站底部
- 离线宝高级定制API使用示例
离线宝高级定制操作说明 自定义API使用示例下载 一.搬 1.1 搬图 将解压后的images文件夹，放在您网站要显示浮窗页面的同级目录下。 1.2 搬代码 1.2.1 浮窗样式。打开解压后的index.html文件，将浮窗样式开始-浮窗样式结束之间的代码添加至您网站要显示浮窗的
- 百度离线宝调用接口
医疗模板库(www.120muban.com)收集整理的百度离线宝调用接口，使用方便，可自定义离线宝样式。 //data-lxb-uid 为百度推广账户ID //data-lxb-gid 为离线宝分组ID，没有可留空。
- 表单提交到商务通后台 中文说明加换行的实现方法
实现将表单中的数据提交到商务通后台的效果，中文说明并且实现换行显示。 代码简单容易理解，这里就不多解释了。 要点：1、使用escape函数对中文进行编码；2、使用br标签进行换行。 效果如下图： 前台界面 提交到商务通后台的结果 提交到商务通后台的结果
- 网站商务通高级定制教程(1)
网站商务通高级定制教程(1)，今天为大家介绍一下商务通的高级定制方面的知识，利用到了之前和大家说过的 商务通核心函数库解密格式化后的代码 中的一个函数。 实现功能： 邀请框二次弹出、自定义快速邀请框内容、邀请后浏览器标题显示新信息闪烁和一个使最小