> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stigg.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

To help you monetize your application, Stigg offers a library of snap-in monetization awareness widgets that can be easily integrated into your application using only a few lines of code.

<img src="https://mintcdn.com/stigg/LrP5_UcEXLdlkMss/images/docs/widgets-overview.png?fit=max&auto=format&n=LrP5_UcEXLdlkMss&q=85&s=e5a6609f5b13d6bca5cfe7c609ea38fe" alt="" width="2880" height="1402" data-path="images/docs/widgets-overview.png" />

<Card title="Explore widgets in Storybook" icon="book-open" href="./storybook" horizontal>
  Preview all widgets, configurations, and visual states before integrating. No setup required.
</Card>

<Warning>
  When integrating Stigg widgets into your application, it's highly recommended to [enable client-side security enforcement](/api-and-sdks/integration/frontend/hardening-client-side-access), especially in production environments.
</Warning>

## Benefits of Stigg snap-in widgets

* [Integration requires only a few lines of code](#integration-requires-only-a-few-lines-of-code)

* [Fully customizable to match your application's styling](#fully-customizable-to-match-your-application-styling)

* [Integrate once and never worry about pricing changes](#integrate-once-and-never-worry-about-pricing-changes)

* [Widgets for your application and public website](#widgets-for-your-application-and-public-website)

* [Useful both for self-service and enterprise sales](#useful-both-for-self-service-and-enterprise-sales)

* [Optimized for SaaS use-cases](#optimized-for-saas-use-cases)

### Integration requires only a few lines of code

Get up-and-running quickly, while saving precious development time.

<CodeGroup>
  ```typescript React (example) theme={null}
  <StiggProvider apiKey={'<YOUR_API_KEY>'}>
    <Paywall 
      productId="<STIGG_PRODUCT_ID>"
      onPlanSelected={({ plan, customer }) => {
      	// TODO: handle customer intention to subscribe to plan  
     }} />
  </StiggProvider>
  ```
</CodeGroup>

### Fully customizable to match your application styling

Leverage our widget designer to customize the widgets' styling using no-code and custom CSS to align it with your application's theme.

Once integrated, additional style customization can take place with no-code.

<Frame caption="No code configuration">
  <img src="https://mintcdn.com/stigg/FdQMosJ2Bzlx8vcI/images/docs/704043c-Screenshot_2023-09-12_at_1.40.57.png?fit=max&auto=format&n=FdQMosJ2Bzlx8vcI&q=85&s=eed3e4a602a41014144968f38171b5a7" width="3794" height="1744" data-path="images/docs/704043c-Screenshot_2023-09-12_at_1.40.57.png" />
</Frame>

<Frame caption="Ability to apply custom CSS">
  <img src="https://mintcdn.com/stigg/FdQMosJ2Bzlx8vcI/images/docs/647bee9-Screenshot_2023-09-12_at_1.41.10.png?fit=max&auto=format&n=FdQMosJ2Bzlx8vcI&q=85&s=e591f6f8dfc9afb6831bb3b553bb7bc8" width="3806" height="1746" data-path="images/docs/647bee9-Screenshot_2023-09-12_at_1.41.10.png" />
</Frame>

### Integrate once and never worry about pricing changes

Stigg's snap-in widgets auto-magically sync with the pricing mode that's defined in the Stigg app. When rolling out changes to your pricing, the changes are immediately reflected in the snap-in widgets - no additional code changes required! 🤯

<img src="https://mintcdn.com/stigg/uDKRUM0nhFFFMP5M/images/snap-in-widgets.gif?s=022e0c6940f90d335a2b6074cee4ef3e" alt="" width="800" height="623" data-path="images/snap-in-widgets.gif" />

### Widgets for your application and public website

Stigg's snap-in widgets can be integrated into your application and public website. This ensures that the same pricing that's communicated to customers on your public website is also the experience that your customers will see inside your application.

<Frame caption="Example of a widget embedded to a public website">
  <img src="https://mintcdn.com/stigg/fP4soQQ7PxwZeQ0V/images/docs/f1b1112-Screenshot_2023-09-10_at_22.26.04.png?fit=max&auto=format&n=fP4soQQ7PxwZeQ0V&q=85&s=4794a634a7f50aa2163ad203c7137ab9" width="2302" height="1724" data-path="images/docs/f1b1112-Screenshot_2023-09-10_at_22.26.04.png" />
</Frame>

### Useful both for self-service and enterprise sales

Let customers know about the features that they're entitled for and current usage, well as encourage them for upsells and expansions via self-service or reach out to their account executive.

<img src="https://mintcdn.com/stigg/fP4soQQ7PxwZeQ0V/images/docs/e90cceb-image.png?fit=max&auto=format&n=fP4soQQ7PxwZeQ0V&q=85&s=4747a26188bcf84d3825a1f9d0022064" alt="" width="1102" height="2056" data-path="images/docs/e90cceb-image.png" />

### Optimized for SaaS use-cases

Stigg's snap-in widgets include built-in support for complex use-cases such as trials, pricing using multiple value metrics, volume pricing, add-ons, scheduled downgrades and grandfathering.

<img src="https://mintcdn.com/stigg/FdQMosJ2Bzlx8vcI/images/docs/6aac2ce-Screenshot_2023-09-10_at_23.22.52.png?fit=max&auto=format&n=FdQMosJ2Bzlx8vcI&q=85&s=e0e1c7a1a20dbb5f1bc3a1f97dcf3271" alt="" width="1986" height="1556" data-path="images/docs/6aac2ce-Screenshot_2023-09-10_at_23.22.52.png" />

## Available widgets

<Card title="Pricing Table" icon="table" href="./pricing-table" horizontal />

<Card title="Customer Portal" icon="user" href="./customer-portal" horizontal />

<Card title="Credit Balance" icon="wallet" href="./credit-balance" horizontal />

<Card title="Credit Utilization" icon="gauge" href="./credit-utilization" horizontal />

<Card title="Credit Grants Table" icon="hand-holding-dollar" href="./credit-grants" horizontal />

<Card title="Credit Usage Chart" icon="file-invoice-dollar" href="./credit-usage" horizontal />

<Card title="Checkout" icon="money-check-dollar" href="./checkout" horizontal />

<Note>
  Additional widgets will be available soon!
</Note>