Best Practices

This page provides recommended practices for integrating the TwoCoin widget to ensure a secure, reliable, and user-friendly experience for your users.

Widget Placement

Where you place the widget on your website can significantly impact user experience and conversion rates:

Performance Optimization

Optimize the loading and performance of the widget to provide a smooth user experience:

<!-- Lazy loading iframe example -->
<div class="widget-container">
  <div class="loading-placeholder" id="widget-loading">
    Loading cryptocurrency exchange...
  </div>
  <iframe 
    id="widget-iframe"
    loading="lazy"
    src="https://your-widget-domain.com/widget"
    width="100%" 
    height="800px"
    frameBorder="0"
    onload="document.getElementById('widget-loading').style.display='none'">
  </iframe>
</div>

Mobile Optimization

Ensure your widget integration works well on mobile devices:

• •
  Test the widget on a variety of mobile devices and screen sizes
• •
  Set the widget's width to 100% for mobile responsiveness
• •
  Ensure sufficient padding around the widget on mobile
• •
  Check that form inputs work properly on touch devices
• •
  Optimize for both portrait and landscape orientations

User Experience Best Practices

Create a smooth and intuitive user experience:

Default Values

Set sensible default values by pre-configuring the widget URL to make it easier for users to get started:

<!-- Pre-configure common values for your audience -->
<iframe 
  src="https://your-widget-domain.com/widget?fromCurrency=USD&toCurrency=BTC"
  width="100%" 
  height="800px"
  frameBorder="0">
</iframe>

Error Handling

Implement robust error handling to guide users when things go wrong:

// Custom error handling
TwoCoin.on('error', function(error) {
  console.error('Widget error:', error);

  // Show a user-friendly error message
  if (error.code === 'network_error') {
    showErrorMessage('Connection issue detected. Please check your internet connection and try again.');
  } else if (error.code === 'validation_error') {
    showErrorMessage('Please check your input and try again.');
  } else {
    showErrorMessage('Something went wrong. Please try again or contact support.');
  }

  // Log error for monitoring
  logErrorToMonitoring(error);
});

Security Best Practices

Protect your users and your business with these security practices:

Monitoring and Analytics

Track the performance of your integration:

• •
  Implement conversion tracking for widget interactions
• •
  Monitor order completion rates and drop-offs
• •
  Set up alerts for unusual error rates or failed transactions
• •
  Analyze user behavior to identify points of friction

// Example: Tracking widget events with Google Analytics
TwoCoin.on('orderCreated', function(order) {
  if (typeof gtag === 'function') {
    gtag('event', 'order_created', {
      'event_category': 'TwoCoin Widget',
      'event_label': order.orderId,
      'value': order.sourceAmount
    });
  }
});

TwoCoin.on('orderCompleted', function(order) {
  if (typeof gtag === 'function') {
    gtag('event', 'order_completed', {
      'event_category': 'TwoCoin Widget',
      'event_label': order.orderId,
      'value': order.sourceAmount
    });
  }
});

Testing Recommendations

Ensure a robust testing process before going live:

• •
  Test the widget in all browsers your users commonly use
• •
  Verify webhook handling with test endpoints
• •
  Test the complete order flow, including error cases
• •
  Conduct user testing to identify any usability issues
• •
  Test with realistic network conditions (slow connections, timeouts)

Next Steps