Skip to content

Symphony Swap Widget

Symphony's swap interface can be easily embedded into any website using an iframe. This guide explains how to integrate and customize the embed.

Quick Start

Here's how to embed the Symphony Swap Widget:

<iframe src="https://symph.ag/embed"></iframe>

Live Demo

<iframe
  src="https://symph.ag/embed"
  style={{ width: "100%", minHeight: "650px" }}
/>

Size Requirements

  • Minimum Width: 377px
  • Minimum Height: 650px (Suggested)

The widget container has a minimum width set, with no height restriction. Highly recommend a minimum height of 650px (to prevent scrolling when AppKit wallet modal is open), ideally around a minimum 680-685px for better results.

URL Parameters

Customize the embed by adding these URL parameters:

Token Selection

  • tokenIn: Input token address
  • tokenOut: Output token address

Tokens can be later changed by the user.

https://symph.ag/embed
?tokenIn=0x160345fc359604fc6e70e3c5facbde5f7a9342d8
&tokenOut=0x95597eb8d227a7c4b4f5e807a815c5178ee6dbe1

Appearance

  • bgColor: Background color of the container

    • Hex colors (use %23 instead of #): bgColor=%23FFFFFF
    • Named colors: bgColor=white
    • RGB: bgColor=rgb(255,255,255)
    • RGBA: bgColor=rgba(255,255,255,0.9)

  • theme: Color theme of Symphony widget
    • Could take values as 'light' or 'dark'
    • Defaults to dark appearance when not given

Features

  • notifications: Show/hide notification cards
    • Disable: notifications=false
    • Enable: notifications=true (default)

Complete Example

//Basic white theme with pre-selected tokens
<iframe
  src="https://symph.ag/embed
  ?tokenIn=0x160345fc359604fc6e70e3c5facbde5f7a9342d8
  &tokenOut=0x95597eb8d227a7c4b4f5e807a815c5178ee6dbe1
  &bgColor=white
  &theme=light
  &notifications=false"
></iframe>