Kiln Widget enables the deployment of earning functionalities without requiring extensive technical resources. Whether you have a dedicated development team or not, you can integrate the widget effort
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, click here to read more.
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 export the configuration from the editor, 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
This code creates a React component called KilnWidget that embeds the "kiln.widget.kiln.fi" widget in an iframe.
In the situation your platform doesn't have the capability to embed an iFrame, Kiln can provide access to react UI components and code samples on how to reproduce the widget natively in your platform.
