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

将样式化的购买按钮精确嵌入到您想要的任何位置，完美融入您的页面设计。

什么是按钮模式？

按钮模式让您可以在页面的特定位置（如商品详情下方、价格旁边等）显示一个购买按钮，用户点击后直接跳转到 RAKUFUN 完成购买。

实时演示

🎨 按钮模式实时演示

查看购买按钮如何渲染到容器中

按钮容器

SDK 会在此容器中渲染购买按钮

快速集成

步骤 1：添加容器

在您想要显示按钮的位置添加一个容器：

<div class="product-info">
  <h1>Sony WH-1000XM5 无线耳机</h1>
  <p class="price">¥54,800</p>
  
  <!-- 购买按钮会渲染到这里 -->
  <div class="rakufun-sdk-embed-button"></div>
</div>

步骤 2：引入 SDK 并设置模式

<script src="https://sdk.rakufun.com/rakufun-universal.min.js"></script>
<script>
  // 切换到按钮模式
  rakufun.setUIMode('button');
  
  // 设置商品信息
  rakufun.setUIProductData({
    title: 'Sony WH-1000XM5 无线耳机',
    price: '54800',
    images: ['https://example.com/headphones.jpg'],
    description: '业界领先的降噪技术',
    url: window.location.href
  });
</script>

按钮样式

按钮样式由 SDK 自动管理，确保：

• 响应式设计，适配移动端
• 悬停效果和点击反馈
• 加载状态显示
• 与 RAKUFUN 品牌一致

为什么选择按钮模式？

• ✅ 灵活定位 - 精确控制按钮位置
• ✅ 融入设计 - 与页面布局自然结合
• ✅ 简洁明了 - 直接的购买入口
• ✅ 多次使用 - 可在同一页面多次嵌入

下一步

• 查看 默认模式 - 使用底部面板
• 查看 横幅模式 - 显示横向横幅
• 查看 自定义模式 - 完全自定义 UI

常见问题

按钮不显示怎么办？

1. 确认容器类名正确：rakufun-sdk-embed-button
2. 确认已调用 setUIMode('button')
3. 检查 SDK 是否正确加载

---

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