离线宝高级定制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，没有可留空。
- 在商务通对话窗口中添加离线宝的方法
将以下代码通过商务通后台添加到商务通对话窗口中即可实现将离线宝加入商务通对话窗口。 需要将 input id=uid value= 6026803 type=hidden name=uid 中的 6026803 替换为自己的开通了离线宝的百度推广账户ID 复制代码 代码如下: p form id=lxb-data-form inp
随机推荐
- 很炫的商务通效果
很炫的商务通效果 在线演示： 很炫的商务通效果 下载： 很炫的商务通效果 效果截图：
- 离线宝高级定制API使用示例
离线宝高级定制操作说明 自定义API使用示例下载 一.搬 1.1 搬图 将解压后的images文件夹，放在您网站要显示浮窗页面的同级目录下。 1.2 搬代码 1.2.1 浮窗样式。打开解压后的index.html文件，将浮窗样式开始-浮窗样式结束之间的代码添加至您网站要显示浮窗的
- 商务通轨迹代码未加载出来前执行的打开商通对话的函数
医疗网站上的商务通代码在一些情况下可能出现无法加载的情况(常见的有网络速度慢，商务通服务器速度慢，商务通服务器受到攻击等)，导致商务通代码无法执行，访客无法进入商务通进行咨询，这样错失了很多的对话机会，给我们造成很大的损失。 下面医疗模板库为
- 百度离线宝调用接口
医疗模板库(www.120muban.com)收集整理的百度离线宝调用接口，使用方便，可自定义离线宝样式。 //data-lxb-uid 为百度推广账户ID //data-lxb-gid 为离线宝分组ID，没有可留空。
- 在商务通对话窗口中添加离线宝的方法
将以下代码通过商务通后台添加到商务通对话窗口中即可实现将离线宝加入商务通对话窗口。 需要将 input id=uid value= 6026803 type=hidden name=uid 中的 6026803 替换为自己的开通了离线宝的百度推广账户ID 复制代码 代码如下: p form id=lxb-data-form inp