A widget shows your Kadens events, tickets or people on your own website, and visitors can buy without leaving it. You need a Kadens account and access to edit your website. Create a widget, allow your website, then copy and paste one short code.
A widget is a piece of your Kadens page that lives inside your website. There are three kinds:
| Widget | Description |
|---|---|
Events and tickets | Your upcoming events, with ticket checkout inside your site. |
One event | One event's page: dates, venue, description and tickets, with Buy. |
People | Profile cards of the people you choose, linked to their public profiles. |
Courses | Your courses with their prices, each linked to its page on your site. |
Plans and pricing | Your membership plans side by side, each linked to its sign up page. |
Class schedule | Your upcoming classes as an agenda, always up to date. |
Buy button | One button for one event, course or plan, styled to match your page. |
Programme | The full timetable of an edition, by time, room or teacher. |
Volunteer teams | The teams of an event taking volunteers, with a button to apply on Kadens. |
Form | A card that opens one of your forms on Kadens. |
Newsletter | A signup form that adds people to one of your groups. |
The code you paste only names your widget. When you change the widget in Kadens (what it shows, its layout or its colors), every website that uses it updates by itself. You never paste the code again.
Four steps, no coding needed.
In Kadens, open Integrations, then Widgets, and create one. Choose what it shows and how it looks.
Add the address of your website, like https://www.example.com. A widget only appears on websites you allow.
Open your widget and go to the Install tab. Copy the code shown there. It already carries your username and your widget.
Paste the code where you want the widget to appear, then publish your website. Find your site builder in the guides below for the exact steps.
A widget only loads on the websites you add to your list.
This protects your checkout: nobody can put your widget on a page you do not control. Your list is sent to browsers as a security rule (frame-ancestors), so a website that is not on it shows nothing where the widget should be.
| Address | Result |
|---|---|
https://www.example.com | Allowed. One website. Any path or trailing slash you type is removed. |
https://*.example.com | Allowed. Every subdomain one level deep, like shop.example.com. It does not include example.com itself or deeper levels like a.b.example.com: add those as their own entries. |
* | Not allowed. It would let any website on the internet show your widget. |
https://*.com | Not allowed. A wildcard needs a real domain after it. |
http://www.example.com | Not allowed. Websites must use https. |
http://localhost:3000 | Allowed for testing on your own computer. http works only for localhost. |
https://www.example.com/tickets | Saved as https://www.example.com. The whole website is allowed, not one page. An address with ? or # is refused. |
https://203.0.113.7 | Not allowed. Use your website's domain name. |
One script and one element. The Install tab builds this code for you.
For any site that accepts code. Adjusts its height by itself.
In the samples on this page, your-username and your-widget-id stand for your own values. Copy your real code from the Install tab.
| Attribute | Type | Description |
|---|---|---|
handleRequired | string | Your Kadens username. |
widgetRequired | string | The id of the widget to show. |
locale | string | The language of the widget. When it is missing, the widget uses the lang of your page. |
color-scheme | light | dark | auto | Forces light or dark colors for this placement. Leave it out to use the widget's own setting. |
title | string | The accessible name of the widget frame, read by screen readers. Defaults to Kadens widget. |
data-layer | boolean | Also pushes every widget event to window.dataLayer, for Google Tag Manager. |
meta-pixel | boolean | Sends a Purchase event to your Meta Pixel when someone completes a purchase. Your page must already load the pixel. |
For builders that strip scripts. Fixed height.
Pick your site builder. Each guide says what you need first, where the code goes and what to check.
You need access to edit your site's pages, or someone who has it and can paste the code for you.
Per page: paste the code on each page where the widget should appear. If your site has a place for code on every page (often called header or footer code), you can put the first line there once and paste only the second line on each page.
Open the published page in a new browser tab. The widget appears where you pasted the code, usually within a few seconds.
Self-hosted WordPress (WordPress.org) works on any setup. On WordPress.com you need a paid plan with hosting features: the Free plan removes the script and the widget will not show.
Per page: add a Custom HTML block to each page or post where the widget should appear. WordPress has no built-in place for code on every page, so paste the whole code in each block.
Open the page on your live site, not in the editor. The widget shows where you added the block.
Custom Code needs a Premium plan and a connected domain. Without both, the widget will not show on your site.
On the pages you choose. Custom Code runs in the page itself, on your own domain, and the widget appears at the end of each chosen page.
Open the page on your own domain, not the Editor preview. The widget shows at the end of the page.
You need to be the store owner or staff with permission to edit themes in Shopify admin.
Per template: a section added in the theme editor shows on every page that uses that template (for example, every product page). To show it on one page only, give that page its own template first.
Open your store in a new tab, not the theme editor, and go to that page. The widget shows where the section sits.
Code Embed runs only on a paid Site plan or in a Core, Growth, Agency or Freelancer Workspace. On a free Starter site the widget will not show.
Per page: put a Code Embed where the widget should appear. For every page, paste it once in Site settings › Custom code › Footer code instead, which runs before the closing body tag and needs a paid Site plan; the widget then shows at the end of each page. To keep it inside your pages, put only the first line in Footer code and the second line in each Code Embed.
Open the published site. In the Designer the Code Embed shows a placeholder instead of the widget; that is expected.
Scripts run on the Core, Plus and Advanced plans. On the Personal plan the widget will not show, and the iframe version will not either.
Per page: add a Code block to each page where the widget should appear. For every page, paste it once in the Code Injection panel in Settings instead.
Open the page on your live site in a private window. In the editor the block shows a placeholder, because scripts do not run in the editor preview.
You need edit access to the Framer project.
Per page: put an Embed where the widget should appear, and paste the whole code in each Embed.
Open your published site and go to the page. The widget appears where you placed the Embed.
You need a Ghost staff account that can publish (Author or higher). Contributors can add the card but cannot publish it.
Per post or page: add an HTML card where the widget should appear. For every page, paste it once in Settings › Advanced › Code injection › Site footer instead; the widget then shows at the end of each page. To keep it inside your posts, put only the first line in Site footer and the second line in each HTML card.
Open the published post or page. The editor shows the card as code; the widget only appears on the published page.
You need permission to edit and publish website pages or landing pages in HubSpot.
Per page: paste the code in a Rich text module's Source code where the widget should appear, or in the page editor's Settings › Advanced › Footer HTML to show it at the end of that page. For every page on a domain, go to Settings › Content › Pages, choose the domain and paste it in Site footer HTML.
Open the live page. If the widget is missing, open the module's Source code again: if the script line is gone, HubSpot removed it.
Change these in the widget studio in Kadens. Your website updates by itself.
| Setting | Values | Description |
|---|---|---|
Theme | site | kadens | minimal | bold | soft | dark | A starting style. You can adjust any detail after picking one. |
Color scheme | light | dark | auto | Light, dark, or auto to follow the visitor's device. |
Colors | accent, accentForeground, background, card, text, mutedText, border | Your own colors for buttons, backgrounds, cards, text and borders. |
Fonts | Your site's font, the visitor's system font, or one from the Kadens font catalog. Fonts load inside the widget from Kadens, never from Google. | |
Text size | 12 to 22 px | The base size of the widget's text. |
Corner radius | 0 to 64 px | How rounded cards and buttons are. |
The widget element sends DOM events to your page, so you can measure clicks and sales with your own analytics.
| Event | Payload | Description |
|---|---|---|
kadens:ready | { widget } | The widget has loaded and is visible. |
kadens:widget-view | { widget, ...props } | A visitor action inside the widget. With data-layer, it is also pushed to window.dataLayer as kadens_widget_view. |
kadens:item-click | { widget, ...props } | A visitor action inside the widget. With data-layer, it is also pushed to window.dataLayer as kadens_item_click. |
kadens:checkout-open | { widget, ...props } | A visitor action inside the widget. With data-layer, it is also pushed to window.dataLayer as kadens_checkout_open. |
kadens:checkout-complete | { widget, ...props } | A visitor action inside the widget. With data-layer, it is also pushed to window.dataLayer as kadens_checkout_complete. |
kadens:powered-by-click | { widget, ...props } | A visitor action inside the widget. With data-layer, it is also pushed to window.dataLayer as kadens_powered_by_click. |
kadens:checkout-completed | { widget, orderRef, kind, amountMinor, currency } | A purchase finished. The amount is in minor units (cents for EUR or USD). With meta-pixel, it also sends a Purchase to your Meta Pixel. |
<kadens-widget handle="your-username" widget="your-widget-id" data-layer></kadens-widget>
<script>
document.addEventListener('kadens:checkout-completed', (event) => {
const { orderRef, amountMinor, currency } = event.detail;
gtag('event', 'purchase', {
transaction_id: orderRef,
value: amountMinor / 100, // amounts arrive in minor units (cents)
currency,
});
});
</script>Add the meta-pixel attribute. Nothing else is needed if your page already loads the pixel.
<kadens-widget handle="your-username" widget="your-widget-id" meta-pixel></kadens-widget>Payment happens inside the widget, in a secure window over your page. Buyers do not leave your website and you do not need your own payment setup.
Buyers can pay with just their email, or sign in to their Kadens account from the widget.
Checkout opens in a new tab.
| Problem | Solution |
|---|---|
The widget area is blank | Your website is almost always missing from your allowed websites. Add the exact address you see in the browser, including www if it has it. |
The code disappears after saving | Some site builders remove scripts. Use the iframe code instead: open Advanced in the Install tab and choose iframe. |
Your builder will not accept code | Some site builders only accept custom code on a paid plan. Each builder's guide above says whether yours does. |
You still see the old page | Publish your website again and reload the page. Some builders keep an old copy for a few minutes. |
Was this helpful?