前言： 近期客戶要求百度商橋留言板直接代替企業(yè)網(wǎng)站自帶的留言板，這樣不容易漏單，簡(jiǎn)便，但是經(jīng)過(guò)研究，商橋本身不支持這個(gè)功能，只能自己diy一下下了。
先看下效果：
制作步驟：
1. 下載下面附件 ： 
fujian1.zip
esl.js上傳到 /skin/js/
main.css 上傳到 /skin/css
2.在需要引入留言板的地方加入如下代碼：
<div class="header">
<h1>
請(qǐng)您留言</h1>
</div>
<div class="section">
<div class="company_info">
<div class="company_name">
嘉聰?shù)匕甯?lt;/div>
<div class="company_phone_no">
</div>
</div>
<hr class="split" />
<form action="http://p.qiao.baidu.com/cps/bookmanage/newBook.action?userId=2485673" autocomplete="off" id="mess-form" method="post">
<input name="siteid" type="hidden" value="12442130" /> <input id="referrer" name="referrer" type="hidden" value="" /> <input id="bid" name="bid" type="hidden" value="4669892100012442130" /> <input id="client-info" name="client" type="hidden" value="" />
<div class="item-container textarea-container" id="content-wrapper">
<textarea data-ph="請(qǐng)?jiān)诖溯斎肓粞詢?nèi)容，我們會(huì)盡快與您聯(lián)系。(必填)" id="content" maxlength="400" name="content" placeholder="" spellcheck="false"></textarea></div>
<div class="item-container" id="visitorName-wrapper">
<div class="ctrl_wrap">
<div class="ipt_wrap">
<input data-ph="姓名(必填)" id="visitorName" maxlength="100" name="visitorName" placeholder="" spellcheck="false" type="text" /></div>
</div>
</div>
<div class="item-container" id="visitorPhone-wrapper">
<div class="ctrl_wrap">
<div class="ipt_wrap">
<input data-ph="電話(必填)" id="visitorPhone" maxlength="100" name="visitorPhone" placeholder="" spellcheck="false" type="text" /></div>
</div>
</div>
<div class="custom-items-container">
</div>
<input id="origin" name="origin" type="text" /> <input name="appId" type="hidden" value="" /><button class="mess_send" type="submit">發(fā)送</button></form>
<div class="brand">
</div>
</div>
<script>
require([‘message/main’], function (main) {
main.init({
language: 0,
siteid: '12442130',
bid: '4669892100012442130',
session: {"displayName":"p**7","headUrl":"https://ss0.bdstatic.com/7Ls0a8Sm1A5BphGlnYG/sys/portraitn/item/a9917070706f6f6f313337c802.jpg","status":0,"uid":0,"uname":""},
items: [
{name: 'visitorName', required: 1, isShow: 1}
, {name: 'visitorPhone', required: 1, isShow: 1}
, {name: 'visitorEmail', required: 0, isShow: 0}
, {name: 'visitorAddress', required: 0, isShow: 0}
],
itemsExt: [
]
});
});
</script>
備注：上面的紅色部分，改成你的商橋代碼即可。
3. 需要添加商橋留言板的頁(yè)面在<head></head>之間加入如下代碼：
<link href="/skin/css/main.css" rel="stylesheet">
<script src="/skin/js/esl.js"></script>
<script type="text/javascript">
require.config({
'baseUrl': 'https://sgoutong.baidu.com/webim//1536750628/asset/',
'packages': [{
'name': 'im-lib',
'location': '../dep/im-lib/0.1.0/asset/pc',
'main': 'main'
}]
});
</script>
備注：上面紅色的 https 你網(wǎng)站如果開(kāi)啟了https那么這里也用https上面代碼不用修改，如果你網(wǎng)站沒(méi)有開(kāi)啟https，那么這里就改成http
