LogoLogo
  • Introduction
    • Get started
  • Kiln Products
    • Overview
    • 🧱Validators
      • ⛓️Protocols
        • Algorand (ALGO)
        • Aptos (APT)
        • Avalanche (AVAX)
        • Babylon (BABY)
        • Bittensor (TAO)
        • Cardano (ADA)
        • Celestia (TIA)
        • CoreChain (CORE)
        • Cosmos (ATOM)
        • Cronos (CRO)
        • DyDx (DYDX)
        • Ethereum (ETH)
        • Eigenlayer (EIGEN)
        • Fetch.ai (FET)
        • Flare (FLR)
        • Harmony (ONE)
        • Injective (INJ)
        • Iota (IOTA)
        • Kava (KAVA)
        • Kusama (KSM)
        • Mantra (OM)
        • MultiversX (EGLD)
        • Near (NEAR)
        • Oasis (ROSE)
        • Osmosis (OSMO)
        • Peaq (PEAQ)
        • Polkadot (DOT)
        • Polygon (POL - ex MATIC)
        • Sei (SEI)
        • Solana (SOL)
        • Stacks (STX)
        • Starknet (STRK)
        • Story(IP)
        • Sui (SUI)
        • Symbiotic (SYM)
        • Tezos (XTZ)
        • The Open Network (TON)
        • Tron (TRX)
        • Zetachain (ZETA)
    • 🎆Connect
      • Accessing Kiln Connect
      • API specs
      • Postman Demo
      • SDK
        • Getting started
        • How to find Kiln's validators
        • Upgrade guide from v2 to v3
      • Tutorials
        • SOL - Tag a stake
        • DYDX - How to bridge your rewards
      • Kiln Connect FAQs
    • 🚀Dashboard
      • Architecture
      • Staking
        • Cardano (ADA)
        • Celestia (TIA)
        • Cosmos (ATOM)
        • Cronos (CRO)
        • DYDX (DYDX)
        • Ethereum (ETH)
          • Native EigenLayer Restaking
          • Deposit into compounding validators
          • Convert skimming validators to compounding validators
        • Fetch.ai (FET)
        • Injective (INJ)
        • Kava (KAVA)
        • Kusama (KSM)
        • Mantra (OM)
        • Near (NEAR)
        • Osmosis (OSMO)
        • Polkadot (DOT)
        • Polygon (POL)
        • Solana (SOL)
        • Tezos (XTZ)
        • The Open Network (TON)
        • TRON (TRX)
        • ZetaChain (ZETA)
      • Reporting
        • Cardano (ADA)
        • Celestia (TIA)
        • Cosmos (ATOM)
        • Cronos (CRO)
        • DYDX (DYDX)
        • Ethereum (ETH)
        • Fetch.ai (FET)
        • Injective (INJ)
        • Kava (KAVA)
        • Kusama (KSM)
        • Mantra (OM)
        • Near (NEAR)
        • Osmosis (OSMO)
        • Polkadot (DOT)
        • Polygon (POL)
        • Solana (SOL)
        • Tezos (XTZ)
        • The Open Network (TON)
        • Tron (TRX)
        • ZetaChain (ZETA)
      • Unstaking
        • Cardano (ADA)
        • Celestia (TIA)
        • Cosmos (ATOM)
        • Cronos (CRO)
        • DYDX (DYDX)
        • Ethereum (ETH)
          • Native EigenLayer Withdraw Flow
          • Partial withdraw liquidity
        • Fetch.ai (FET)
        • Injective (INJ)
        • Kava (KAVA)
        • Kusama (KSM)
        • Mantra (OM)
        • Near (NEAR)
        • Osmosis (OSMO)
        • Polkadot (DOT)
        • Polygon (POL)
        • Solana (SOL)
          • Deactivate
          • Merge
          • Split
          • Withdraw
        • Tezos (XTZ)
        • Tron (TRX)
        • The Open Network (TON)
        • ZetaChain (ZETA)
      • Import stakes
      • Move stakes
      • Invite a user to your organization
      • Troubleshooting
      • 🎓Tutorials
        • Cosmos Chains - Auto-compound a stake
      • Dashboard FAQs
    • 📥dApp
      • ETH staking
      • EigenLayer
        • Operator delegation
        • Native restaking
        • Liquid restaking
      • 🔒Security
      • Kiln dApp FAQ
    • ⛓️Onchain
      • 🙋‍♀️Dedicated Validators
        • Key concepts
          • Deposit Flow
          • Rewards Management
          • Unstaking
        • How to integrate
          • 1. Contract Interactions
          • 2. Administration
      • 🤽‍♂️Pooled Staking
        • Key concepts
          • Staking Positions
          • Oracle Reports
          • Exit & Withdrawal
        • How to integrate
          • 🐎Getting Started
          • 🏗️Architecture overview
          • 😊User experience
          • 📃Integration contract
          • ⛑️Contract governance
          • ℹ️Contract ABI
          • 📥Using TheGraph
          • 🥩Staking Interactions
            • Staking
            • Rewards
            • Unstaking & Withdrawals
      • 🎡Tokenized Validators
      • 🎩Node Operators: how to integrate
        • Dedicated Validators (v1)
          • Manage Validators
        • Pooled Staking
          • 1. Using TheGraph for Setup
          • 2. Deploying vPool
          • 3. Key Provisioning in vFactory
          • 4. Oracle Daemon
          • 5. Depositing via Integration Contracts
          • 6. Exit Daemon
          • 7. Deploy Integration Contract (optional)
      • 🔓Security
        • Staking Risks
        • Audits & Bug Bounties
        • Business Continuity
        • Source code
    • 💰DeFi
      • 🦋Morpho via Kiln DeFi
      • 💻How to integrate?
        • Smart contract interactions
        • Governance
        • Reporting data
        • Administration
        • Supported DeFi Protocols
        • Additional Rewards Management
      • 🔓Security
        • Risks
        • Audits & Bug Bounty
        • Pause
        • Source code
        • Compliance Features
      • Kiln DeFi FAQ
    • 🪄Widget
      • 🧑‍🎨Customize - Widget Editor
      • ☄️Integrate - No/Low Code
    • 🛠️More Tools
      • ETH Batch Deposit Contract
      • Safe CD
  • Integrations
    • 🔭Plan your integration
    • 🔌Integrate Kiln products
    • 📱Wallets
      • Stake from Ledger Live
        • Direct Staking
        • Using Kiln Widget
          • DeFi Lending in Ledger Live
        • Using Kiln dApp
          • Dedicated Validators
          • Pooled Staking
          • EigenLayer Restaking
      • Stake from Safe{Wallet}
        • How to stake ETH on Safe & FAQ
        • DeFi Lending in Safe{Wallet}
        • Using Kiln dApp
      • Stake from Squads
    • 🏢Custody platforms
      • Stake from Anchorage
      • Stake from Bitgo
      • Stake from Coinbase Custody/Prime
      • Stake from Copper
      • Stake from Cordial Systems
      • Stake from DFNS
      • Stake from Finoa
      • Stake from Fireblocks
      • Stake from Fordefi
      • Stake from Hex Safe
      • Stake from Ledger Enterprise
      • Stake from Metamask Institutional
      • Stake from Rakkar
      • Stake from Taurus
      • Stake from Utila
      • Stake with Zodia
  • Working with Kiln
    • ☑️Staking & DeFi Track Record
    • ✅Security & Insurances
    • ☎️Support
      • FAQs
        • Enzyme FAQ
        • EigenLayer FAQ
        • Kiln x Safe{Wallet} FAQ
        • Ledger Live FAQ
Powered by GitBook
On this page
  • Prerequisites
  • Configure your Widget
  • Integrate your Widget
  • Deeplinks
  • Your widget base url
  • Portfolio
  • Manage
  • Deposit
  • Withdraw

Was this helpful?

Export as PDF
  1. Kiln Products
  2. Widget

Integrate - No/Low Code

Kiln Widget enables the activate of earn feature without requiring extensive technical resources. Whether you have a dedicated development team or not, you can integrate Kiln Widget with ease.

PreviousCustomize - Widget EditorNextMore Tools

Last updated 2 months ago

Was this helpful?

Prerequisites

  • You need a dashboard organization, if it's not already the case, ask kiln team so that we can onboard you.

  • You need access to a Kiln Connect API key, if it's not already the case, ask kiln team so that we can onboard you. You can generate one yourself, .

  • Have some deployed products on mainnet, if it's not already the case, kiln can provide test product for your testing and trial integration.

  • Optional : have customize your widget, you can directly upload your configuration via API and soon in Kiln dashboard directly

Configure your Widget

Configure the widget look and feel

You can , the you just have to past this json in the API widget config endpoint to edit the widget to your configuration.

Endpoint: PUT /v1/widget/config

Request Body:

{
    "theme": "light", // Values: light, dark, desktop (take the broswer default) 
    "logo_url": null; // null for no logo, paste url for logo
    "rounding": "8", // use editor value 
    "widget_style": "flat+border", // use editor value 
    "card_padding": "16", // use editor value 
    "widget_width": "compact", // use editor value 
    "navigation": "segment", // use editor value 
    "font_primary": "Geist", // use editor value 
    "font_secondary": "IBM Plex Sans", // use editor value 
    "show_icons": true, // show hide icons in navigation
    "show_wallet": true, // show hide wallet selector
    "multi_chain": true, // force the wallet to only display reporting and product to only one chain
    "css_variables": {
        "--Color-Brand-Light-Primary": "rgba(255,101,33,1.00)",
        "--Color-Brand-Light-Secondary": "rgba(255,101,33,1.00)",
        "--Color-Brand-Light-Secondary-10\\%": "rgba(255,101,33,0.10)",
        "--Color-Brand-Dark-Primary": "rgba(255,101,33,1.00)",
        "--Color-Brand-Dark-Secondary": "rgba(255,101,33,1.00)",
        "--Color-Brand-Dark-Secondary-10\\%": "rgba(255,101,33,0.10)",
        "--Color-Surface-Light-Transparent": "rgba(0,0,0,0.00)",
        "--Color-Surface-Light-World": "rgba(240,240,240,1.00)",
        "--Color-Surface-Light-Primary": "rgba(255,255,255,1.00)",
        "--Color-Surface-Light-Underlay": "rgba(240,240,240,1.00)",
        "--Color-Surface-Light-Input": "rgba(255,255,255,1.00)",
        "--Color-Surface-Dark-Transparent": "rgba(0,0,0,0.00)",
        "--Color-Surface-Dark-World": "rgba(17,17,17,1.00)",
        "--Color-Surface-Dark-Primary": "rgba(21,21,21,1.00)",
        "--Color-Surface-Dark-Underlay": "rgba(32,32,32,1.00)",
        "--Color-Surface-Dark-Input": "rgba(51,51,51,1.00)",
        "--Color-Border-Light-Primary": "rgba(217,217,217,1.00)",
        "--Color-Border-Light-Secondary": "rgba(217,217,217,1.00)",
        "--Color-Border-Light-Input": "rgba(0,0,0,1.00)",
        "--Color-Border-Light-Divider": "rgba(229,229,229,1.00)",
        "--Color-Text-Light-Primary": "rgba(0,0,0,1.00)",
        "--Color-Button-Light-Primary": "var(--Color-Brand-Light-Primary)",
        "--Color-Button-Light-Primary-Text": "rgba(255,255,255,1.00)",
        "--Color-Button-Light-Secondary": "rgba(255,255,255,1.00)",
        "--Color-Button-Light-Tertiary": "rgba(255,255,255,1.00)",
        "--Color-Text-Light-Secondary": "rgba(85,85,85,1.00)",
        "--Color-Text-Light-Tertiary": "rgba(136,136,136,1.00)",
        "--Color-Text-Light-Additional": "rgba(170,170,170,1.00)",
        "--Color-Text-Light-Positive": "rgba(87,176,31,1.00)",
        "--Color-Text-Light-Negative": "rgba(252,36,36,1.00)",
        "--Radius-0": "0px",
        "--Radius-4": "4px",
        "--Radius-8": "8px",
        "--Radius-12": "12px",
        "--Radius-16": "16px",
        "--Radius-20": "20px",
        "--Radius-24": "24px",
        "--Radius-28": "28px",
        "--Radius-32": "32px",
        "--Radius-100\\%": "999%",
        "--logo": "kiln",
        "--Color-Border-Dark-Primary": "rgba(51,51,51,1.00)",
        "--Color-Border-Dark-Secondary": "rgba(51,51,51,1.00)",
        "--Color-Border-Dark-Input": "rgba(68,68,68,1.00)",
        "--Color-Border-Dark-Divider": "rgba(41,41,41,1.00)",
        "--Color-Text-Dark-Primary": "rgba(255,255,255,1.00)",
        "--Color-Text-Dark-Secondary": "rgba(169,169,169,1.00)",
        "--Color-Text-Dark-Tertiary": "rgba(136,136,136,1.00)",
        "--Color-Text-Dark-Additional": "rgba(255,255,255,1.00)",
        "--Color-Text-Dark-Positive": "rgba(87,176,31,1.00)",
        "--Color-Text-Dark-Negative": "rgba(255,61,61,1.00)",
        "--Color-Button-Dark-Primary": "var(--Color-Brand-Light-Primary)",
        "--Color-Button-Dark-Primary-Text": "rgba(255,255,255,1.00)",
        "--Color-Button-Dark-Secondary": "rgba(51,51,51,1.00)",
        "--Color-Button-Dark-Tertiary": "rgba(21,21,21,1.00)"
    }
}
Advanced configuration

Advanced parameters can be used to further customize your widget integration:

  • slug:

    Defining a custom sub-domain for your widget : slug.widget.kiln.fi By default the slug is your organization-id, something like: d6309182-cbad-11ec-9d64-0242ac120002

  • frame_ancestor_urls: By specifying the frame_ancestor_urls, you're explicitly allowing only your domain to embed Kiln Widget, enhancing security of your integration.

  • connector: By default it's set to browser enabling the user to connect a wallet extension. If on your platform user can't use a browser extension to connect to the Widget, Kiln will need to build a custom connector, a great example of similar setups are with Safe or Ledger Live.

  • links: By default it's set to null to display the default kiln T&Cs and privacy policy. You can pass custom links here as presented in the example bellow.

Endpoint: PUT /v1/widget/config

Request Body:

{
    "frame_ancestor_urls": [
        "my-custom-domain.com"
    ],
    "connector": "custom-connector", // Contact our team if you need a custom connector
    "slug": "super-custom", // url will be super-custom.widget.kiln.fi
    "links": [
        {
            "text": "FAQ",
            "url": "https://www.faq.com"
        },
        {
            "text": "Support",
            "url": "https://www.support.kiln.fi"
        }
    ]
}

Integrate your Widget

To integrate kiln widget in your platform, you just need to embed you widget URL in an iFrame, it can work on any tech stack and even in no-code tools.

React code sample demonstrating how to embed "kiln.widget.kiln.fi" in an iframe
const KilnWidget = () => {
  return (
      <iframe
        src="https://kiln.widget.kiln.fi"
        title="Kiln Widget"
        allow="clipboard-write"
        style={{ width:"100vw", height:"100vh"}}
      />
  );
};

export default KilnWidget;

This code creates a React component called KilnWidget that embeds the "kiln.widget.kiln.fi" widget in an iframe.

Deeplinks

Kiln provides a deeplink mechanism that allows seamless redirection into the different pages between overview, deposit and withdraw.

To enhance your platform's capabilities, consider integrating specific features of the Kiln Widget. For instance, if you already have an existing native earn section, you can redirect users to the Kiln Widget for deposit transactions. After a transaction is signed, seamlessly bring the user back to your platform.

Your widget base url

Access your widget using the configured slug , this will automatically pull your configuration including theme and available earn products. In this document we refer to this as "base url" or "your widget".

Structure: https://slug.widget.kiln.fi/

Portfolio

By default if you redirect the user to "your widget" the overview page, it's will show all the user active and potential position based on the products you enabled in your widget.

To redirect the user to this page you need to add the /overview after your base URL.

Structure: https://slug.widget.kiln.fi/overview

Manage

By default if you redirect the user to "your widget" the overview page, it's will show all the user active and potential position based on the products you enabled in your widget.

To redirect the user to the manage page you need to add the /overview after your base URL.

Structure: https://slug.widget.kiln.fi/overview/{product}/{product_id}

  • product is define in the deployment endpoint and can be one of dedicated / pooling / defi

  • product_id valid vault ID in the format <chainId>_<vaultAddress>

    • eg. 1_0xd88714e295da03a07bcb8ad4a4dbe87fa42d75f9

Example opening a Morpho Vault:

Deposit

If you want to open the widget direct on the deposit flow, you will need to add /earn after your base URL.

Structure: https://slug.widget.kiln.fi/earn

On this page, you can use the following path params to further customize the deposit flow.

Here’s the improved Kiln Widget Deeplink Integration Guide with a clearer query parameters table, better type definitions, select options, detailed descriptions, and examples.

Parameter
Allowed Values
Description
Example

select_deployment

"disabled" or unspecified

Controls whether users can select a deployment. If "disabled", the deployment selection is locked.

select_deployment=disabled

select_asset

"disabled" or unspecified

Controls whether users can select an asset. If "disabled", the asset selection is locked.

select_asset=disabled

product_id

Valid product ID in the format <chainId>_<vaultAddress>

Predefines the deployment to use.

deployment_id=1_0xabc123456789...

asset_id

Valid asset ID in the format <chainId>_<assetAddress>

Predefines the asset to deposit.

asset_id=1_0xdef456789abc...

callback_title

Any string

The text displayed on the return button after deposit.

callback_title=Back+to+Dashboard

callback_url

Valid HTTPS URL

The URL where the user is redirected after deposit completion.

callback_url=https://yourapp.com/dashboard


Example Deeplinks

1. Allow full Selection

Users can freely choose deployment and asset:

https://iframe.widget.testnet.kiln.fi/earn

2. Predefine vault and asset

Locking a specific vault and asset:

https://iframe.widget.testnet.kiln.fi/earn?product_id=8453_0x390D077f8E60ffb58805420edc635670AA4f34C3&asset_id=8453_0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913

3. Disable deployment and asset selection

Prevent users from changing the predefined values:

https://iframe.widget.testnet.kiln.fi/earn?select_deployment=disabled&select_asset=disabled

4. Redirect users after deposit

Automatically send users back to your app after completing the deposit using callback_url :

https://slug.widget.kiln.fi/earn?product_id=1_0xabc123...&asset_id=1_0xdef456...&callback_title=Back+to+App&callback_url=https://yourapp.com/dashboard

Withdraw

If you want to open the widget direct on the withdraw flow, you will need to add /withdraw after your base URL.

Structure: https://slug.widget.kiln.fi/withdraw

You can use the path parameters defined above, notably : product_id , callback_title , callback_url .

Example: , a Kiln managed configuration for testing the widget in an iframe.

🪄
☄️
click here to read more
export the configuration from the editor
https://iframe.widget.testnet.kiln.fi/
https://iframe.widget.testnet.kiln.fi/overview/defi/8453_0x390D077f8E60ffb58805420edc635670AA4f34C3