Kana Labs
  • Getting Started
    • Welcome to Kana Labs
  • CROSS CHAIN SWAPS
    • AMM DEX Aggregator
  • INTEGRATE KANA WIDGET
    • Kana Widget
      • Install Widget
      • Configure Widget
      • Configure Aptos Keyless
  • Web3 Aggregator SDK
    • Web3 Aggregator SDK
      • Installation
      • SameChain
      • Cross Chain Swap
      • Aggregator API's
  • SPOT TRADING PLATFORM
    • Kana Trade
      • API Docs
  • PERPETUAL FUTURES
    • Kana Perps
      • Getting Started
        • Mint Tokens on Testnet
      • Breaking Down Kana Perps
        • Assets Supported
        • Order Types
        • Orderbook
        • Funding Rate
        • Leverage
        • Margin and Liquidation
        • Hedge Mode
          • Hedging a Short-Term 2-3% Price Decline
          • Dual Positioning for Flexible Profit-Taking
        • Trading Fees
      • API Docs
        • Installation Setup
        • Kana Perps Typescript REST API
        • Kana Perps Python Websocket API
        • Kana Perps Python REST API
        • Steps to place an order
        • Perps Contract Error Codes
        • Websocket Connection
        • Supported Markets
  • SPOT & PERP APIs
    • Trading APIs
      • Kana Trade API
      • Kana Perps API
        • Installation Setup
        • Example setup functions
        • Kana Perps Typescript REST API
        • Kana Perps Websocket API
        • Kana Perps Python Websocket API
        • Kana Perps Python REST API
        • Steps to place an order
  • PAYMASTER SERVICE
    • Kana Paymaster For Aptos and Supra
      • How it works?
      • How to Register?
      • Deposit Allowance
      • Manage Users
      • Paymaster SDK Tutorial (Typescript)
      • Paymaster API
      • Module & Function Whitelist
      • Subscription - Coming soon
      • FAQS
  • PERPETUAL OPTIONS
    • OPerps
  • Tokenomics & Governance
    • Kana Labs Tokenomics
  • REWARDS & REFERRAL PROGRAM
    • Rewards Program
      • Reward Program Season 1
      • Reward Program Season 2
      • How to Keep Track of Your Points?
      • Where to find the Missions Dashboard?
  • Referral Program
    • How to Generate Referral Link? (For the Referrer)
    • How to map your wallet to the invite IDs? (For the invited users)
Powered by GitBook
On this page
  • Basic example
  • Troubleshooting
  1. INTEGRATE KANA WIDGET
  2. Kana Widget

Install Widget

The widget can be installed on any web page with just a few lines of code. This will help to bring cross-chain swaps across multiple chains with the most efficient pricing to your website.

Install the widget via npm or yarn or pnpm

npm i @kanalabs/kana-widget-v2

or

yarn add @kanalabs/kana-widget-v2

or

pnpm install @kanalabs/kana-widget-v2

Basic example

Here is an example of a basic app using Kana Widget.

import { KanaWidget, WidgetConfig } from "@kanalabs/kana-widget-v2";

const widgetConfig: WidgetConfig= {
    // Required: The unique SDK key provided by the developer. This key is essential for the widget to function properly.
    // If you haven't received a key yet, please contact the development team to obtain one.
    sdkKey: "Your dApp/company SDK key"
  };

export const WidgetPage = () => {
  return (
    <KanaWidget config={widgetConfig} />
  );
};

Troubleshooting

If you are facing any issue like .

// BREAKING CHANGE: webpack<5 used to include polyfills for node.js core modules by default.
PreviousKana WidgetNextConfigure Widget

Last updated 7 months ago

Please add custom webpack settings to **config-overrides.js**. For further details regarding custom webpack settings refer [] .

here