Banner Mode - Horizontal Display Component
Display an eye-catching horizontal banner at the top or bottom of the page, showcasing product information and purchase entry point to maximize conversion rates.
What is Banner Mode?
Banner mode renders a horizontal display area, typically including product thumbnail, title, price, and purchase button, suitable for placement at the page top, above content area, or at the bottom.
Live Demo
🎨 横幅模式实时演示
查看横向横幅如何渲染到容器中
横幅容器
SDK 会在此容器中渲染横向横幅
Quick Integration
Step 1: Add Container
Add a container where you want to display the banner:
html
<!DOCTYPE html>
<html>
<body>
<!-- Banner at page top -->
<div class="rakufun-sdk-embed-banner"></div>
<div class="main-content">
<h1>Product Details</h1>
<!-- Your page content -->
</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
Step 2: Include SDK and Configure
html
<script src="https://sdk.rakufun.com/rakufun-universal.min.js"></script>
<script>
// Switch to banner mode
rakufun.setUIMode('banner');
// Set product information
rakufun.setUIProductData({
title: 'PlayStation 5 Digital Edition',
price: '49980',
images: ['https://example.com/ps5.jpg'],
description: 'Next-gen gaming console with ultra-fast loading',
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
Responsive Design
The banner automatically adapts to different screen sizes:
- Desktop: Horizontal display, full width utilization
- Mobile: Vertical stacking, optimized touch experience
Why Choose Banner Mode?
- ✅ Eye-Catching - Horizontal layout attracts attention
- ✅ Complete Information - Displays image, title, and price simultaneously
- ✅ Multiple Touchpoints - Can be placed in multiple locations on the page
- ✅ Mobile Friendly - Automatically adapts to mobile devices
Next Steps
- View Default Mode - Use bottom panel
- View Button Mode - Embed purchase button
- View Custom Mode - Fully customize UI
FAQ
Why is the banner not showing?
- Confirm container class name is correct:
rakufun-sdk-embed-banner - Confirm
setUIMode('banner')has been called - Check if it's a Japan IP (hidden by default)
What is the banner height?
The banner height automatically adjusts, approximately 120-150px on desktop, mobile adapts based on content.
Questions? Contact us: [email protected]