Panora
  • 👋Welcome to Panora
  • 🌐Official Links
  • PRODUCT SUITE
    • 💱Panora Swap
    • 📊Panora Trade
  • Developer
    • 💻Swap Widget
      • Install Widget
      • Widget Configuration
      • Theme Customization
      • Widget Controls
      • Guide
    • 🤖Swap API & SDK
      • 💻Swap API
        • Examples
      • 🖥️Swap SDK
      • 💦Supported Sources
    • 🎞️Swap iframe
    • 🪙Token List
      • 📔How to Add Your Token to the Panora Token List
    • 💲Token Prices
  • PARTNERSHIPS
    • 🤝Become Our Partner
    • 🏢Media & Brand Kit
  • FAQs
    • ❓Panora Help
  • LEGAL
    • 🗒️Legal Disclaimer
    • 🔓Brand & Logos
    • 📏Terms of Use
Powered by GitBook
On this page
  1. Developer
  2. Swap Widget

Widget Configuration

Custom Widget Configurations

import { PanoraWidget, PanoraWidgetConfig } from "@panoraexchange/widget-sdk"

const widgetConfig: PanoraWidgetConfig = {
    API_KEY: "YOUR_API_KEY",
    // Custom styles to tailor the appearance of the widget
    styles: {
        backgroundColor: "#141414",
        primaryColor: "white",
        secondaryColor: "gray",
        buttonColor: "hsl(191, 87%, 41%)",
    },
    // Whether to show the connect wallet button or not (default: true)
    showConnectWalletButton: true,
    // Whether to show expanded view of the complete route (defult: true)
    showExpandRouteIcon: true,
    // Whether to show the detailed info about the swap transaction (default: true)
    showRouteInfo: true,
    // Overrides the list of enabled wallets to display within the widget
    enabledWallets: [  
        "Petra",
        "Pontem", 
        "OKX Wallet"
    ]
};

PreviousInstall WidgetNextTheme Customization

Last updated 2 months ago

💻