Button Mode - Embedded Purchase Button

Embed a styled purchase button precisely at any location you want, seamlessly integrating with your page design.

What is Button Mode?

Button mode allows you to display a purchase button at specific locations on the page (such as below product details, next to price, etc.). Users click and are redirected directly to RAKUFUN to complete the purchase.

Live Demo

🎨 按钮模式实时演示

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

按钮容器

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

Quick Integration

Step 1: Add Container

Add a container where you want to display the button:

<div class="product-info">
  <h1>Sony WH-1000XM5 Wireless Headphones</h1>
  <p class="price">¥54,800</p>
  
  <!-- Purchase button will render here -->
  <div class="rakufun-sdk-embed-button"></div>
</div>

Step 2: Include SDK and Set Mode

<script src="https://sdk.rakufun.com/rakufun-universal.min.js"></script>
<script>
  // Switch to button mode
  rakufun.setUIMode('button');
  
  // Set product information
  rakufun.setUIProductData({
    title: 'Sony WH-1000XM5 Wireless Headphones',
    price: '54800',
    images: ['https://example.com/headphones.jpg'],
    description: 'Industry-leading noise cancellation technology',
    url: window.location.href
  });
</script>

Button Styling

Button styling is automatically managed by the SDK, ensuring:

• Responsive design, mobile-friendly
• Hover effects and click feedback
• Loading state display
• Consistent with RAKUFUN brand

Why Choose Button Mode?

• ✅ Flexible Positioning - Precise control over button location
• ✅ Design Integration - Naturally combines with page layout
• ✅ Clear and Concise - Direct purchase entry point
• ✅ Multiple Uses - Can be embedded multiple times on the same page

Next Steps

• View Default Mode - Use bottom panel
• View Banner Mode - Display horizontal banner
• View Custom Mode - Fully customize UI

FAQ

Why is the button not showing?

1. Confirm container class name is correct: rakufun-sdk-embed-button
2. Confirm setUIMode('button') has been called
3. Check if SDK is loaded correctly

---

Questions? Contact us: [email protected]