Prebuilt UI

Light offers several prebuilt UI solutions that let you easily integrate with the Light platform:

• Embedded flows - Want to keep customers in your experience, but skip building the UI? The embedded flows are a low-code experience where you embed an iframe or webview directly within your product.
• No-code web app - A standalone web app with all needed experiences ready to go, using your brand. Link your customers to the portal and they use their email address to log in.
• No-code flows - An experience for the auxiliary experiences like when customers are renewing plans. Customers are sent a Light-hosted flow with your brand.

Experience availability

Use any combination of the API and our prebuilt UI solutions to create your Light integration. Since the prebuilt UI solutions uses the same APIs available to you, you can always start with a prebuilt UI and migrate parts to a direct API integration with custom UI as needed.

Experience	Embedded flows	No-code web app	No-code flows
Enrollment	X	X
Billing	X	X
Documents	X	X
Service		X
Energy usage		X
Renewals	X		X

Brand configuration

The prebuilt UIs have a default look and feel that is designed to be easy to use and integrate. It can be minimally configured with things like logos and company name to match your brand. However, if you want a more customized flow or design you can use the APIs directly.

Embedded flows

Light offers optional embedded flows that lets you integrate the Light platform into your website or mobile app using a webview or iframe, simplifying your integration and saving development time.

The embedded flows can be launched from your application with various scopes to fulfill flows like Enrollment or Billing, and is built entirely on the same APIs you can use directly.

Scopes

Each embedded flow has a specific scope that determines the flow that will be launched. The following scopes are currently supported, but more scopes will be added in the future. Reach out to us if you have a specific use case that you would like to see supported.

Scopes:

• enrollment - Launches the embedded flow with the enrollment experience. Preview
• update-payment-method - Launches the embedded flow for a user to update their payment method. Preview
• billing - Launches the embedded flow with the user's invoices. Preview
• documents - Launches the embedded flow with the user's documents. Preview

Tutorial

1. Get a embedded flow link

When you launch a embedded flow flow, you launch it for a specific Account. Use the uuid of the Account as the account_uuid in a POST to /v1/app/accounts/{account_uuid}/flow-login?scope=enrollment:

This API will return a payload like:

{
  "login_link": "https://flow.light.dev/login?token=6277d9fb7b76832d1fc7545d4ed649d7",
  "scope": "enrollment",
  "expires_at": "2025-09-30T14:30:00.753Z"
}

The login_link returned will be a pre-authenticated flow link that can be used to launch an iframe or webview. The expires_at indicates when this pre-authenticated token included in the login_link will expire.

2. Surface embedded flow at the right moment

The embedded flow is usually displayed inside an iframe or webview after a user clicks a button or navigates to another page.

For end users to successfully navigate an embedded flow, no other UI elements should visually appear on top of the iframe or webview. Ensure other UI elements, such as nav bars, have a lower z-index and are not absolute positioned on top.

<iframe
  src="https://flow.light.dev/login?token=6277d9fb7b76832d1fc7545d4ed649d7"
  width="100%"
  height="100%"
  style="position: fixed; top: 0; left: 0; z-index: 99999;"
></iframe>

3. Close the enrollment flow

We need to close the embedded flow once a user chooses to exit the flow. Close the embedded flow by listening for the light-flow-close event emitted by the embedded flow.

window.addEventListener("message", function (event) {
  const eventType = event.data?.type;
  if (!eventType) {
    return;
  }

  if (eventType === "light-flow-close") {
    // TODO: remove the Light iframe or webview
  }
});

No-code web app

On a deadline? We also have a prebuilt app that you can white-label with no-code to get started. Reach out for us to get started.

No-code flows

These are our same prebuilt UI flows that you can embed, except hosted by Light. These can be used for out-of-band experiences like renewals to save you time of building for all paths at launch. They are typically launched via a pre-authenticated email link, providing a quick and branded interaction for the customer.

Scopes

The following scopes are currently supported, but more scopes will be added in the future. Reach out to us if you have a specific use case that you would like to see supported.

Scopes:

• renewal - Launches the no-code flow with the renewal experience.