​

Mach Embed Integration

​

URL Parameters for Customization

​

Theme Customization

• themePrimary: Primary color for buttons (hex format, e.g., %23349FFD for #349FFD)
• themeBackground: Background color (hex format)
• themeModalBackground: (EXPERIMENTAL) Background color of the Swap In Progress flow, which is more stably impacted using the useIntuitiveColorDefaults param below
• showBranding: Whether to show “Powered by Mach.Exchange” (default: true)
• hideAIInput: Whether to hide the AI input box (default: false)
• useIntuitiveColorDefaults: Whether to use automatic color complementary pairing when only one color is provided (default: false). When both primary and background colors are provided, this parameter has no effect.

​

Logo Customization

• logoUrl: URL of the partner logo to display (URL-encoded)
• logoHeight: Height of the logo in pixels (numeric value, default: 40)
• logoWidth: Width of the logo in pixels (numeric value, optional)
• logoPosition: Alignment of the logo, options: left, center, or right (default: center)

​

Pending Transaction Indicator

• showPendingTX: Whether to show the pending transaction indicator (default: false). For best results, pair with showHamburgerMenu
• pendingTXPosition: Position of the pending transaction indicator, options: left, center, or right (default: opposite to logo)

​

Hamburger Menu

• showHamburgerMenu: Whether to show the Mach hamburger menu (with its links adjusted for Embed mode, default: false)

​

Token Configuration

• chains: Comma-separated list of chain IDs to restrict available networks
• from: Source token in format chainId:tokenAddress
• to: Destination token in format chainId:tokenAddress
• destinationWallet: Custom recipient wallet address for receiving tokens (enables “Send to different wallet” mode)

​

Additional Notes

• All color values should be URL-encoded (e.g., %23 instead of #)
• The destinationWallet parameter configures a default destination wallet, routing users’ order destination to the specified address unless they change it
• When hideAIInput=true, the AI-powered input interface will be hidden for a more streamlined experience
• Logo URLs must be properly URL-encoded
• Chain IDs should correspond to supported networks
• Token addresses should be valid contract addresses for the specified chains

​

Example URLs

​

Embed with primary color, theme backgrounds hidden AI input, and destination wallet

​

Embed with backgrounds, destination wallet, and using intuitive color defaults

​

Embed with hidden AI input, visible hamburger/slide out menu, chains set to ETH/OP, and pending transaction indicator

​

Integration Example

<iframe 
  src="https://dev.mach.exchange/embed?hideAIInput=true&destinationWallet=YOUR_WALLET_ADDRESS" 
  width="100%" 
  height="600" 
  frameborder="0">
</iframe>

​

Conclusion