Pricing tables allow your customers to select the plan that that they’d like to subscribe to. Pricing tables can be used on your public pricing page, as well as part of in-app paywalls.One of the major benefits of leverage Stigg’s pricing table widget, is that any change that you make to your pricing model is auto-magically reflected in the pricing table - no additional coding is required 😎.
Pricing tables includes cards that represent each plan that customres can subscribe to.Each plan includes the following details:
Plan name
CTA button to allow users to select the plan.
Price
Entitlements that the customer will get access to when subscribing to the plan. Entitlement visibility, order and display text can be defined at the plan level.
Available add-ons - available add-ons are defined according to the list of add-ons that are compatible with the plan. Add-on visibility is defined at the add-on level.
Rendering Stigg’s pricing table widget on your public pricing page allows you to present the available pricing to your website’s visitors.You can leverage the product’s customer journey configuration to control what plan the customer will be provisioned a subscription for once they click on “Get started”.
Copy
Ask AI
<Paywall onPlanSelected={({ plan, intentionType }) => { switch(intentionType) { case SubscribeIntentionType.START_TRIAL: // TODO: provision trial subscription break; case SubscribeIntentionType.REQUEST_CUSTOM_PLAN_ACCESS: // TODO: redirect to contact us form break; case SubscribeIntentionType.UPGRADE_PLAN: case SubscribeIntentionType.DOWNGRADE_PLAN: // TODO: show checkout experience break; } }} />
Users that are logged in to the application can view the current plan that they’re subscribed to, as well as downgrade and upgrade options.
Copy
Ask AI
<Paywall onPlanSelected={({ plan, customer, intentionType }) => { switch(intentionType) { case SubscribeIntentionType.START_TRIAL: // TODO: provision trial subscription break; case SubscribeIntentionType.REQUEST_CUSTOM_PLAN_ACCESS: // TODO: redirect to contact us form break; case SubscribeIntentionType.CHANGE_UNIT_QUANTITY: case SubscribeIntentionType.UPGRADE_PLAN: case SubscribeIntentionType.DOWNGRADE_PLAN: // TODO: show checkout experience break; case SubscribeIntentionType.CANCEL_SCHEDULED_UPDATES: // TODO: show confirmation dialog // once confirmed, cancel the scheduled subscription update break; } }} />
It’s also possible to only present the upgrade options (and hide lower tier/free plans); thereby, encouraging customers to upsell:
Copy
Ask AI
<Paywall showOnlyEligiblePlans onPlanSelected={({ plan, customer, intentionType }) => { switch(intentionType) { case SubscribeIntentionType.START_TRIAL: // TODO: provision trial subscription break; case SubscribeIntentionType.REQUEST_CUSTOM_PLAN_ACCESS: // TODO: redirect to contact us form break; case SubscribeIntentionType.CHANGE_UNIT_QUANTITY: case SubscribeIntentionType.UPGRADE_PLAN: case SubscribeIntentionType.DOWNGRADE_PLAN: // TODO: show checkout experience break; case SubscribeIntentionType.CANCEL_SCHEDULED_UPDATES: // TODO: show confirmation dialog // once confirmed, cancel the scheduled subscription update break; } }} />
When tiered and volume pricing is defined, this is automatically reflected in the Stigg pricing table widget with a numeric up-down picker where customers can choose their desired unit quantity:
When stair-step pricing is defined, this is automatically reflected in the Stigg pricing table widget with a drop-down where customers can choose their desired tier:
For more advanced customization, custom CSS can be applied using the widget designer of the Stigg app. Alternatively, custom CSS can also be applied using code.Below you can find a list of the supported CSS classes:
Styles applied to a specific entitlement row using its feature ID (slug).
{feature.id} is the feature’s slug (lowercase; spaces and special characters become -).
This class is added in addition tostigg-entitlement-row-container, so you can safely target one entitlement without affecting others.
Mirrors the existing patterns: stigg-{plan.id} (plan) and stigg-compatible-addon-{addon.id} (add-on).