Default Mode - Bottom Panel

The simplest integration method, add complete purchase functionality to your website with just one line of code.

What is Default Mode?

Default mode displays a floating panel at the bottom of your website, which users can expand or collapse at any time to conveniently complete purchases.

Live Demo

🎨 默认模式实时演示

查看底部滑动面板的效果

1. Quick Integration

Just add one line of script to your HTML page:

<!-- Include RAKUFUN SDK - It's that simple! -->
<script src="https://sdk.rakufun.com/rakufun-universal.min.js"></script>

That's it! The SDK will automatically initialize and display the floating UI.

2. Set Product Information

Set product data after page load:

// Set product information after SDK loads
rakufun.setUIProductData({
  title: 'iPhone 15 Pro Max',
  price: '189800',
  images: ['https://example.com/iphone.jpg'],
  description: 'Latest flagship model, 256GB',
  url: window.location.href
});

Why Choose Default Mode?

• ✅ Zero Configuration - Use with just one line of code
• ✅ Non-Intrusive - Floating design doesn't affect existing layout
• ✅ Full Features - Includes convenient purchase flow
• ✅ User Friendly - Expandable/collapsible, doesn't block content

Next Steps

• View Button Mode - Embed purchase button at specific location
• View Banner Mode - Display horizontal banner component
• View Custom Mode - Fully customize UI

FAQ

Why is the UI not showing?

Check the following:

1. Confirm SDK script is loaded correctly
2. Check if it's a Japan IP (hidden by default)
3. Open browser console to check for error messages

---

Questions? Contact us: [email protected]