Meld Checkout Customization & Advanced Configuration

Customize your Meld Checkout Integration appearance, behavior, and user experience through dashboard settings and advanced configuration options.

Meld Support Required

Contact Meld for these advanced customizations:

Account Logo

Update your account logo in the top-left corner of the UI. Process: Send your logo file (PNG/SVG preferred) to Meld support with specifications:

Size: 200x60px recommended
Format: PNG with transparent background or SVG
Colors: Optimized for both light and dark themes

Flow Management

Control which transaction types are available:

Disable Buy Flow - Show only sell/offramp functionality
Disable Sell Flow - Show only buy/onramp functionality

Quote Management

Customize provider quote display:

Quote limits - Cap the number of quotes returned to the checkout. Applied when quotes are generated, so the cap holds for every Meld Checkout embed on the account.

Quotes are ordered by Ramp Intelligence rampScore, best first, and the quote limit keeps the top-scoring entries. Ordering is not configurable per account.

Default Settings

Set account-wide defaults:

Default redirect URL - Fallback URL used when an embed does not pass its own redirectUrl. Applied when the provider session is created, so it covers every Meld Checkout embed on the account.

Full-screen layout is a per-URL setting, not an account preference. Pass fullScreen=true on each Meld Checkout URL. See URL parameters → fullScreen.

Not Currently Available

Provider prioritization - Promoting specific providers to the top of the list. Quote order is set by rampScore and cannot be overridden per account.
Custom Flow Logic - Advanced routing based on user profile
Token Restrictions - Chain-specific tokens, a curated token list, or highlighting partner tokens
Custom provider branding - Special provider highlighting
Theme defaults - Account-wide light/dark mode preference

Dashboard Customization

Access these options in the Meld Dashboard → Developer Tab → Preferences:

Visual Branding

Button Color

Customize the primary Buy or Sell CTA button color at the bottom of the UI.

/* Example color values */
Button Color: #3498db    /* Blue */
Button Color: #e74c3c    /* Red */  
Button Color: #2ecc71    /* Green */
Button Color: #9b59b6    /* Purple */

Button Text Color

Set the text color inside the CTA button for optimal contrast.

/* Common combinations */
Button Color: #3498db, Text Color: #ffffff    /* Blue background, white text */
Button Color: #ffffff, Text Color: #333333    /* White background, dark text */
Button Color: #2c3e50, Text Color: #ecf0f1    /* Dark background, light text */

Reset Option: Use the Reset button to restore default values at any time.

Theme Configuration

Light/Dark Mode Implementation

Control the UI appearance with the theme parameter:

// Light theme (default)
const lightThemeUrl = `https://meldcrypto.com/?publicKey=${publicKey}&theme=lightMode`;

// Dark theme
const darkThemeUrl = `https://meldcrypto.com/?publicKey=${publicKey}&theme=darkMode`;

// Dynamic theme based on user preference
const userTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'darkMode' : 'lightMode';
const dynamicUrl = `https://meldcrypto.com/?publicKey=${publicKey}&theme=${userTheme}`;

Mobile Optimization

Deep Link Configuration

Seamlessly return users to your mobile app after transactions:

// iOS Deep Link
const iosUrl = `https://meldcrypto.com/?publicKey=${publicKey}&redirectUrl=myapp://crypto-success`;

// Android Deep Link  
const androidUrl = `https://meldcrypto.com/?publicKey=${publicKey}&redirectUrl=myapp://crypto-success`;

// Universal Link
const universalUrl = `https://meldcrypto.com/?publicKey=${publicKey}&redirectUrl=https://myapp.com/crypto-success`;

Responsive Implementation

Optimize the UI display for different screen sizes:

// Mobile-first approach
function getMobileOptimizedUrl() {
  const isMobile = window.innerWidth <= 768;
  const baseUrl = `https://meldcrypto.com/?publicKey=${publicKey}`;
  
  if (isMobile) {
    // Full screen redirect for mobile
    return `${baseUrl}&redirectUrl=myapp://success`;
  } else {
    // Iframe embedding for desktop
    return baseUrl;
  }
}

Mobile iframe Considerations

<!-- Default fixed-height card (745px–790px) -->
<iframe 
  src="https://meldcrypto.com/?publicKey=YOUR_KEY"
  style="width: 100%; max-width: 450px; height: 790px; border: none;"
  allow="camera; microphone; payment; encrypted-media">
</iframe>

For full-viewport embeds, add fullScreen=true and size the iframe to the viewport height:

<iframe
  src="https://meldcrypto.com/?publicKey=YOUR_KEY&fullScreen=true"
  style="width: 100%; max-width: 450px; height: 100vh; border: none;"
  allow="camera; microphone; payment; encrypted-media">
</iframe>

See URL parameters → fullScreen for accepted values and account-level configuration.

Analytics & Tracking

Customer Identification Strategy

Track users across sessions for analytics:

// Use external customer ID for consistent tracking
const analyticsUrl = `https://meldcrypto.com/?publicKey=${publicKey}` +
  `&externalCustomerId=${userId}` +
  `&externalSessionId=${sessionId}`;

// Example: E-commerce integration
function trackCryptoTransaction(userId, orderId) {
  const trackingUrl = `https://meldcrypto.com/?publicKey=${publicKey}` +
    `&externalCustomerId=${userId}` +
    `&externalSessionId=order_${orderId}` +
    `&redirectUrl=https://shop.com/order-complete?id=${orderId}`;
  
  window.location.href = trackingUrl;
}

Conversion Optimization

Pre-fill known information to improve conversion rates:

// Optimize for returning customers
function getOptimizedCheckoutUrl(userProfile) {
  let url = `https://meldcrypto.com/?publicKey=${publicKey}`;
  
  // Only override country if specifically needed (auto-detection usually works)
  if (userProfile.Country) {
    url += `&countryCode=${userProfile.Country}`;
  }
  
  if (userProfile.preferredCrypto) {
    url += `&destinationCurrencyCode=${userProfile.preferredCrypto}`;
  }
  
  if (userProfile.wallet) {
    url += `&walletAddress=${userProfile.wallet}&walletAddressLocked=true`;
  }
  
  return url;
}

Advanced Use Cases

Marketplace Integration

Configure the Meld Checkout for NFT marketplace or token sales:

// Token sale configuration
function createTokenSaleCheckout(tokenInfo) {
  return `https://meldcrypto.com/?publicKey=${publicKey}` +
    `&destinationCurrencyCode=${tokenInfo.currency}` +
    `&destinationCurrencyCodeLocked=true` +
    `&sourceAmount=${tokenInfo.price}` +
    `&sourceAmountLocked=true` +
    `&theme=darkMode` +
    `&redirectUrl=https://marketplace.com/purchase-complete`;
}

// Usage
const nftSaleUrl = createTokenSaleCheckout({
  currency: 'ETH',
  price: 150
});

Multi-Currency Support

Offer multiple cryptocurrency options:

// Dynamic currency selection
function createCurrencyCheckout(selectedCrypto) {
  const cryptoOptions = {
    'bitcoin': 'BTC',
    'ethereum': 'ETH', 
    'usdc': 'USDC',
    'solana': 'SOL'
  };
  
  return `https://meldcrypto.com/?publicKey=${publicKey}` +
    `&destinationCurrencyCode=${cryptoOptions[selectedCrypto]}` +
    `&theme=lightMode`;
}

Geographic Customization

Optimize currency and amounts for specific regions:

Note: Country is automatically detected in the Meld Checkout Integration. Use countryCode parameter only when you need to override the detection for special cases.

// Region-specific currency and amount configuration
function getRegionalCheckout(overrideCountry = null) {
  const regionalConfig = {
    'US': { currency: 'USD', amount: 100 },
    'GB': { currency: 'GBP', amount: 75 },
    'EU': { currency: 'EUR', amount: 85 },
    'CA': { currency: 'CAD', amount: 130 }
  };
  
  const config = regionalConfig[overrideCountry] || regionalConfig['US'];
  let url = `https://meldcrypto.com/?publicKey=${publicKey}` +
    `&sourceCurrencyCode=${config.currency}` +
    `&sourceAmount=${config.amount}`;
    
  // Only add countryCode if overriding auto-detection
  if (overrideCountry) {
    url += `&countryCode=${overrideCountry}`;
  }
  
  return url;
}

Contact Meld

For advanced customizations requiring Meld support: Email/Slack/Telegram: Contact your integration specialist or support team
Documentation: Reference this guide when making requests

Request Template:

Subject: Meld Checkout Customization Request - [Your Account Name]

Customization Type: [Logo Update/Flow Management/Quote Limits/Default Redirect URL/etc.]
Current Setup: [Description of current checkout configuration]
Desired Changes: [Specific requirements and use case]
Timeline: [When you need changes implemented]

Implementation Complete! Your Meld Checkout Integration is now optimized for your specific use case and user experience requirements.

Welcome

AI Toolkit

Meld API

Stablecoins & Digital Assets

Bank Linking

Customization

Meld Checkout Customization & Advanced Configuration

Meld Support Required

Account Logo

Flow Management

Quote Management

Default Settings

Not Currently Available

Dashboard Customization

Visual Branding

Button Color

Button Text Color

Theme Configuration

Light/Dark Mode Implementation

Mobile Optimization

Deep Link Configuration

Responsive Implementation

Mobile iframe Considerations

Analytics & Tracking

Customer Identification Strategy

Conversion Optimization

Advanced Use Cases

Marketplace Integration

Multi-Currency Support

Geographic Customization

Contact Meld

Request Template:

​Meld Checkout Customization & Advanced Configuration

​Meld Support Required

​Account Logo

​Flow Management

​Quote Management

​Default Settings

​Not Currently Available

​Dashboard Customization

​Visual Branding

​Button Color

​Button Text Color

​Theme Configuration

​Light/Dark Mode Implementation

​Mobile Optimization

​Deep Link Configuration

​Responsive Implementation

​Mobile iframe Considerations

​Analytics & Tracking

​Customer Identification Strategy

​Conversion Optimization

​Advanced Use Cases

​Marketplace Integration

​Multi-Currency Support

​Geographic Customization

​Contact Meld

​Request Template:

Meld Checkout Customization & Advanced Configuration

Meld Support Required

Account Logo

Flow Management

Quote Management

Default Settings

Not Currently Available

Dashboard Customization

Visual Branding

Button Color

Button Text Color

Theme Configuration

Light/Dark Mode Implementation

Mobile Optimization

Deep Link Configuration

Responsive Implementation

Mobile iframe Considerations

Analytics & Tracking

Customer Identification Strategy

Conversion Optimization

Advanced Use Cases

Marketplace Integration

Multi-Currency Support

Geographic Customization

Contact Meld

Request Template: