Skip to main content
PoweredByNozle renders “Powered by” and the Nozle logo as a link that opens nozle.dev in a new tab. From React 0.11.0. When to use
  • Under a pricing page or billing screen you build with the hooks instead of the components.
  • Together with useNozleBranding(), which returns whether to show the badge.
You do not need it with PricingTable, PlanComparison, CurrentPlan, Checkout, UpgradeModal or BillingPortal: they show the badge themselves. When one of them renders another, for example a dialog inside the portal, only the outer one shows it.
The Powered by Nozle badge, light theme

​
Importing PoweredByNozle

​
Rendering PoweredByNozle

Show the badge only when useNozleBranding() is true:
components/pricing-footer.tsx
The badge takes its look from the appearance of the surrounding BillingProvider, also when you render it on its own.

​
Data

​
Live data

Nozle decides on the server. The public plan catalog read with your publishable key returns meta.nozle_branding, and useNozleBranding() reads it from the same cached catalog request the components make. It returns false outside a BillingProvider, and until the catalog answers.

​
API reference

PoweredByNozle takes no props.
​
boolean
true when the catalog’s meta.nozle_branding is true. false when it is false, there is no BillingProvider, or the catalog has not answered.

​
Appearance

poweredBy (the link).Style them with appearance.elements. See Elements.

PricingTable

Shows the badge below the plans.

Appearance

Themes and the poweredBy element.