RAKUFUN SDK UI 模式

RAKUFUN SDK 提供四种集成方式，从最简单的一行代码到完全自定义，满足不同场景需求。

四种集成方式

1. 默认模式 - 底部面板

最简单！ 一行代码即可使用，适合快速集成。

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

✅ 零配置
✅ 浮动设计，不影响页面布局
✅ 包含完整购买流程

查看详情 →

---

2. 按钮模式 - 嵌入式购买按钮

将购买按钮嵌入页面指定位置，融入您的设计。

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

✅ 灵活定位
✅ 融入页面设计
✅ 可多处放置

查看详情 →

---

3. 横幅模式 - 横向展示组件

显眼的横向横幅，最大化转化率。

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

✅ 醒目显眼
✅ 信息完整
✅ 移动友好

查看详情 →

---

4. 自定义模式 - 完全自主设计

完全跳过内置 UI，使用自己的设计，仅调用购买 API。

<button id="my-button">立即购买</button>
<script src="https://sdk.rakufun.com/rakufun-universal.min.js"></script>
<script>
  document.getElementById('my-button').onclick = async () => {
    await rakufun.quickBuy({
      title: '商品名称',
      price: '12800',
      url: window.location.href
    });
  };
</script>

✅ 完全控制
✅ 无缝集成现有系统
✅ 保持品牌一致性

查看详情 →

---

实时演示

体验三种内置 UI 模式的即时切换：

🎨 实时 UI 模式切换演示

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

模式控制：

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

按钮容器

在 button 模式下激活

横幅容器

在 banner 模式下激活

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

如何选择？

场景	推荐模式
快速集成，最小改动	默认模式
将按钮放在特定位置	按钮模式
页面顶部/底部横幅	横幅模式
深度定制，现有系统集成	自定义模式

模式切换

所有模式可以随时切换：

// 切换到默认模式
rakufun.setUIMode('default');

// 切换到按钮模式
rakufun.setUIMode('button');

// 切换到横幅模式
rakufun.setUIMode('banner');

通用设置

所有模式都支持以下配置：

设置商品数据

rakufun.setUIProductData({
  title: 'iPhone 15 Pro Max',
  price: '189800',
  images: ['https://example.com/image.jpg'],
  description: '最新旗舰机型',
  url: window.location.href
});

自定义购买逻辑

rakufun.setUICartHandler(async (product) => {
  // 添加您的自定义逻辑
  console.log('用户准备购买:', product);
  
  // 返回 true 继续，false 取消
  return confirm(`确认购买 ${product.title}?`);
});

---

有疑问？联系我们：[email protected]