Widget playground
Use the playground to configure the implemented widget and copy the integration code for your application. It runs in the webapp alongside the wallet-enabled hosted widget.
Configure the widget
The fullscreen page places all controls in a scrollable sidebar beside the live preview. On mobile, open Configure to show the sidebar.
| Panel | Controls |
|---|---|
| Appearance | Color pickers and hex inputs for all eight theme colors, four palettes, and corner radius |
| Swap presets | Source/destination chain and asset, amount, recipient, referral code, and language |
| Integration | React or JavaScript code, visible npm install command, copy buttons, and a shareable configuration link |
| Events | Highlighted JSON notifications, copy, and clear; resize events are omitted from this list |
Use Desktop or Mobile to check the preview width. The widget grows with its contents up to its default 640px maximum and then scrolls internally. The token selector expands the card to fit its chain shortcuts. It shows a card skeleton while loading. Its compact wallet, history, refresh, and settings controls use the existing webapp UI; solid modals and wallet panels cover the widget card.
Live changes and active sessions
Appearance controls apply immediately without replacing the iframe or changing the amount, selected route, recipient, or execution state. Invalid color edits are not applied to the preview.
Financial presets and language apply with Apply presets, which starts a new session. The button is disabled while the widget reports an active lock, execution, or tracking session. Changing preview width, tabs, or colors keeps that session mounted.
The preview is fully functional: you can connect a wallet, obtain quotes, and execute a swap. User-authorized wallet actions here are real, not simulated. The Get affiliation code action opens the affiliate dashboard.
Copy and integrate
Choose React or JavaScript under Integration. The code uses the package defaults, includes the configuration you selected, and omits private capabilities and wallet credentials. If presets are pending, apply them to make the preview match the generated code. Copy the visible install command separately from the usage example.
Copy link shares the current public configuration in the URL fragment. A share link is not a saved swap, does not preserve an execution session, and does not grant embedding permission. Do not add private data to presets or shared URLs.
Install @7exchange/widget with the displayed npm command and add the copied usage example to your application. The examples use the production hosted widget by default. Configure your exact embedding origin before testing on your own site.
Follow the widget integration guide for package setup, origin approval, theme tokens, event handling, sizing, and wallet support.