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-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.

Customers are handled inside the Service Picker widget, so the embed code carries no customer parameter. The Subscription Details widget needs no subscription selector either — 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