Widget

Embed the widget

The widget is one custom element. Add it with a script tag on any page, or as a React component.

With a script tag

Add the script once, then the element wherever the plan should appear. The element shows the plan straight away from a 15 KB script. The Solana code loads only when a visitor chooses Connect wallet, so the widget doesn't slow your page down.

script tag snippet

<script src="https://cdn.solloop.app/widget.js" defer></script>
<solloop-subscribe plan="plan_8xK2m" theme="light"></solloop-subscribe>

In React

The solloop package has a React component with the same options as props, and typed events as callbacks. React 19 is supported.

install command

npm install solloop

React snippet

import { SolLoopSubscribe } from 'solloop/react';

export function Pricing() {
  return <SolLoopSubscribe plan="plan_8xK2m" theme="light" />;
}

The npm package is published with the mainnet launch. Until then, use the script tag.

Attributes

A value the widget doesn't understand falls back to its default instead of breaking the page, so a typo never blanks your checkout.

Attribute	React prop	What it does
plan	plan	Required. A plan id (plan_8xK2m), or a plan address to read it straight from the chain.
theme	theme	light (default) or auto. auto renders light for now; dark is on the way.
accent	accent	A hex colour for buttons and highlights, to match your brand.
radius	radius	The outer corner radius as a CSS length. 16px by default.
locale	locale	A BCP 47 tag for formatting dates, such as en-GB. The copy is English. en by default.
cluster	cluster	mainnet-beta or devnet, to override the plan’s cluster when testing.
rpc	rpcUrl	Your own Solana RPC endpoint. By default the widget goes through SolLoop’s.
success-url	successUrl	Where to send the customer after they subscribe. https only.
api-url	apiUrl	Where plan ids are resolved. https://api.solloop.app by default.

Styling

The widget renders inside a shadow root: your CSS can't break it, and its CSS can't leak into your page. Use accent and radius to match your brand. The element takes the width of its container, up to 420 px.

Content Security Policy

If your site sends a Content Security Policy, allow:

script-src https://cdn.solloop.app for the widget.
connect-src https://api.solloop.app for plans and Solana calls, plus your own RPC host if you set rpc.

The widget needs no unsafe-inline or unsafe-eval.