横幅模式 - 横向展示组件
在页面顶部或底部显示醒目的横向横幅，展示商品信息和购买入口，最大化转化率。
什么是横幅模式？
横幅模式会渲染一个横向的展示区域，通常包含商品缩略图、标题、价格和购买按钮，适合放置在页面顶部、内容区域上方或底部。
实时演示
🎨 横幅模式实时演示
查看横向横幅如何渲染到容器中
横幅容器
SDK 会在此容器中渲染横向横幅
快速集成
步骤 1：添加容器
在您想要显示横幅的位置添加容器：
html
<!DOCTYPE html>
<html>
<body>
<!-- 页面顶部横幅 -->
<div class="rakufun-sdk-embed-banner"></div>
<div class="main-content">
<h1>商品详情</h1>
<!-- 您的页面内容 -->
</div>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
步骤 2：引入 SDK 并配置
html
<script src="https://sdk.rakufun.com/rakufun-universal.min.js"></script>
<script>
// 切换到横幅模式
rakufun.setUIMode('banner');
// 设置商品信息
rakufun.setUIProductData({
title: 'PlayStation 5 数字版',
price: '49980',
images: ['https://example.com/ps5.jpg'],
description: '次世代游戏主机，超快加载速度',
url: window.location.href
});
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
响应式设计
横幅会自动适配不同屏幕尺寸：
- 桌面端：横向展示，充分利用宽度
- 移动端：纵向堆叠，优化触摸体验
为什么选择横幅模式？
- ✅ 显眼醒目 - 横向布局吸引注意力
- ✅ 信息完整 - 同时展示图片、标题、价格
- ✅ 多点触达 - 可在页面多处放置
- ✅ 移动友好 - 自动适配移动设备
下一步
常见问题
横幅不显示怎么办？
- 确认容器类名正确：
rakufun-sdk-embed-banner - 确认已调用
setUIMode('banner') - 检查是否为日本 IP（默认隐藏）
横幅高度是多少？
横幅高度自动调整，桌面端约 120-150px，移动端根据内容自适应。
有疑问？联系我们：[email protected]