Widget Integration

The Komashi Widget is a ready-made UI component you can embed on your own website so customers can subscribe and manage subscriptions without leaving your site — no frontend to build from scratch.

You do not write the embed code by hand. Komashi generates it for you in Settings → Widgets in the Control Center, where you copy a ready-made <script> tag for each widget type. See Widgets for the step-by-step flow.

Two widget views are available, selected with the data-view attribute:

Service Picker (data-view="service-picker") — lets a customer select a service and subscribe directly on your website.
Subscription Details (data-view="subscription-details") — displays and manages an existing subscription.

Embed code

Service Picker

<script
  src="https://<your-instance>/widget/embed.js"
  data-komashi-widget
  data-service-id="YOUR_SERVICE_ID"
  data-view="service-picker"
></script>

Subscription Details

<script
  src="https://<your-instance>/widget/embed.js"
  data-komashi-widget
  data-subscription-id="YOUR_SUBSCRIPTION_ID"
  data-view="subscription-details"
></script>

Attributes

Attribute	Required	Description
`data-komashi-widget`	✅ Yes	Marks the script as a Komashi widget.
`data-view`	✅ Yes	`service-picker` or `subscription-details`.
`data-service-id`	For Service Picker	The service to display.
`data-subscription-id`	For Subscription Details	The subscription to display and manage.
`data-customer-id`	No	Preselect an existing customer.
`data-redirect-url`	No	Where to redirect after checkout (Service Picker) or after changes (Subscription Details).

The src points at the /widget/embed.js script on your own Komashi instance — the copied code already contains the correct host. The ID in the copied code is a placeholder (YOUR_SERVICE_ID / YOUR_SUBSCRIPTION_ID): replace it with the real ID before you publish the page.

The Service Picker handles customers inside the widget, so you do not have to pass one. Add data-customer-id when you already know who the customer is and want them preselected. The Subscription Details widget needs no subscription selector — the subscription is identified by data-subscription-id.

You do not need to build or maintain any of the following:

Service and pricing UI — rendered automatically from your service configuration.
Subscription flows — handled within the widget.
Responsive layout — works on desktop and mobile out of the box.
API communication — the widget talks to Komashi directly.

Requirements

A service configured in your Control Center.
A webpage that can load external scripts.
No backend changes required.

Widget Integration