RAKUFUN SDK UI Modes

RAKUFUN SDK provides four integration methods, from the simplest one-line code to fully custom, meeting different scenario needs.

Four Integration Methods

1. Default Mode - Bottom Panel

The Simplest! Use with just one line of code, perfect for quick integration.

<script src="https://sdk.rakufun.com/rakufun-universal.min.js"></script>

✅ Zero configuration
✅ Floating design, no impact on page layout
✅ Includes complete purchase flow

View Details →

---

2. Button Mode - Embedded Purchase Button

Embed the purchase button at specific locations on the page, fitting your design.

<div class="rakufun-sdk-embed-button"></div>
<script src="https://sdk.rakufun.com/rakufun-universal.min.js"></script>
<script>
  rakufun.setUIMode('button');
</script>

✅ Flexible positioning
✅ Fits page design
✅ Can be placed in multiple locations

View Details →

---

3. Banner Mode - Horizontal Display Component

Eye-catching horizontal banner to maximize conversion rates.

<div class="rakufun-sdk-embed-banner"></div>
<script src="https://sdk.rakufun.com/rakufun-universal.min.js"></script>
<script>
  rakufun.setUIMode('banner');
</script>

✅ Prominent and eye-catching
✅ Complete information
✅ Mobile friendly

View Details →

---

4. Custom Mode - Fully Independent Design

Completely skip built-in UI, use your own design, only call purchase API.

<button id="my-button">Buy Now</button>
<script src="https://sdk.rakufun.com/rakufun-universal.min.js"></script>
<script>
  document.getElementById('my-button').onclick = async () => {
    await rakufun.quickBuy({
      title: 'Product Name',
      price: '12800',
      url: window.location.href
    });
  };
</script>

✅ Complete control
✅ Seamless integration with existing systems
✅ Maintain brand consistency

View Details →

---

Live Demo

Experience instant switching between three built-in UI modes:

🎨 实时 UI 模式切换演示

在下方选择一个模式，即可实时查看 UI 渲染效果

模式控制：

状态：模式: 未选择 | 已挂载: false

按钮容器

在 button 模式下激活

横幅容器

在 banner 模式下激活

💡 提示：在 default 模式下，底部面板出现在页面底部。 在 button 和 banner 模式下，组件会渲染到上方的容器中。

How to Choose?

Scenario	Recommended Mode
Quick integration, minimal changes	Default Mode
Place button at specific location	Button Mode
Page top/bottom banner	Banner Mode
Deep customization, existing system integration	Custom Mode

Mode Switching

All modes can be switched at any time:

// Switch to default mode
rakufun.setUIMode('default');

// Switch to button mode
rakufun.setUIMode('button');

// Switch to banner mode
rakufun.setUIMode('banner');

Common Settings

All modes support the following configurations:

Set Product Data

rakufun.setUIProductData({
  title: 'iPhone 15 Pro Max',
  price: '189800',
  images: ['https://example.com/image.jpg'],
  description: 'Latest flagship model',
  url: window.location.href
});

Custom Purchase Logic

rakufun.setUICartHandler(async (product) => {
  // Add your custom logic
  console.log('User ready to purchase:', product);
  
  // Return true to continue, false to cancel
  return confirm(`Confirm purchase of ${product.title}?`);
});

---

Questions? Contact us: [email protected]