Stigg’s customer portal widget allows you to introduce self-service and drive in-app expansions using only a few lines of codes.
The customer portal:
Stigg’s customer portal widget is composed of the following sections.
The Subscription Overview section provides customers with visibility to their current subscription details - subscribed plan, purchased add-ons, granted promotional entitlements.
The Usage section provides customers with visibility to the usage of their subscription’s features.
The Plan Picker section allows customers to upgrade and downgrade their subscription in a self-served manner.
When you update your pricing model in Stigg, customers will auto-magically be able to upgrade or downgrade their subscription according to the updated pricing model 😎.
Behind the scenes, this section leverages the Stigg Pricing Table widget.
The Payment Details section allows customers to view their billing and payment information.
Customers that have a an active paid subscription can update their billing details (name, address) and payment method in the Stripe Billing Portal via link from the Stigg Customer Portal.
Customers that have a an active paid subscription or had one in the past can view past invoices in the Stripe Billing Portal via a link from the Stigg Customer Portal.
Stigg must be integrated with Stripe to allow customers to view past invoices.
Visibility for invoices directly in the Stigg Customer Portal is on our roadmap.
To render customer portals inside your application, when a customer signs-in or restores their session set the customer ID:
Use the CustomerPortal
component to render the customer portal.
The CustomerPortal component support component composition so it’s possible to pass as a parameter the Paywall component and it will be rendered inside the customer portal.
Learn more on how to refresh Stigg cache after performing an operation that modifies the customer to immediately reflect the customer changes on the customer portal
The CustomerPortal
component is just an opinionated way to render the customer portal in a specific layout which is based on our experience after reviewing many customer portals, but if you need more flexibility in how the customer portal is rendered, you can integrate directly each of its sections separately.
To do so, wrap all the section components with CustomerPortalProvider
which will pass the necessary data to each component:
Customers that are subscribed to a subscription with a custom price can’t upgrade on downgrade their subscription in a self-served manner using the customer portal widget. Instead, you can handle the onContactSupport
method to allow customers contact a sales or customer success representative that can do so on their behalf.
The Stigg app offers a no-code widget designer, which allows you to control the widget colors, typography and layout.
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:
Class name | Description |
---|---|
stigg-payment-details-section-layout | Styles applied to billing information title |
stigg-payment-details-section-header | Styles applied to payment details title layout |
stigg-payment-details-section-title | Styles applied to payment details title |
stigg-customer-name | Styles applied to payment details customer name |
stigg-customer-email | Styles applied to payment details customer email |
stigg-credit-card | Styles applied to payment details credit card |
stigg-credit-card-expiration | Styles applied to payment details credit card expiration date |
stigg-invoices-section-layout | Styles applied to invoice section layout |
stigg-invoices-section-header | Styles applied to invoice section title layout |
stigg-invoices-section-title | Styles applied to invoice section title |
stigg-view-invoice-history-button | Styles applied to invoice history button |
stigg-edit-payment-details-button | Styles applied to update payment details button |
stigg-user-information-layout | Styles applied to user information |
stigg-customer-portal-usage-section-title | Styles applied to the Usage section title |
stigg-entitlement-usage-{featureID} | Styles applied to the feature usage according to their unique ID |
In addition, since the Plans section of the customer portal can include the Stigg pricing table widget you can leverage its CSS classes to customize its styling.
The default widget texts can currently be overridden using code:
You can find more text overrides options here
Stigg’s customer portal widget allows you to introduce self-service and drive in-app expansions using only a few lines of codes.
The customer portal:
Stigg’s customer portal widget is composed of the following sections.
The Subscription Overview section provides customers with visibility to their current subscription details - subscribed plan, purchased add-ons, granted promotional entitlements.
The Usage section provides customers with visibility to the usage of their subscription’s features.
The Plan Picker section allows customers to upgrade and downgrade their subscription in a self-served manner.
When you update your pricing model in Stigg, customers will auto-magically be able to upgrade or downgrade their subscription according to the updated pricing model 😎.
Behind the scenes, this section leverages the Stigg Pricing Table widget.
The Payment Details section allows customers to view their billing and payment information.
Customers that have a an active paid subscription can update their billing details (name, address) and payment method in the Stripe Billing Portal via link from the Stigg Customer Portal.
Customers that have a an active paid subscription or had one in the past can view past invoices in the Stripe Billing Portal via a link from the Stigg Customer Portal.
Stigg must be integrated with Stripe to allow customers to view past invoices.
Visibility for invoices directly in the Stigg Customer Portal is on our roadmap.
To render customer portals inside your application, when a customer signs-in or restores their session set the customer ID:
Use the CustomerPortal
component to render the customer portal.
The CustomerPortal component support component composition so it’s possible to pass as a parameter the Paywall component and it will be rendered inside the customer portal.
Learn more on how to refresh Stigg cache after performing an operation that modifies the customer to immediately reflect the customer changes on the customer portal
The CustomerPortal
component is just an opinionated way to render the customer portal in a specific layout which is based on our experience after reviewing many customer portals, but if you need more flexibility in how the customer portal is rendered, you can integrate directly each of its sections separately.
To do so, wrap all the section components with CustomerPortalProvider
which will pass the necessary data to each component:
Customers that are subscribed to a subscription with a custom price can’t upgrade on downgrade their subscription in a self-served manner using the customer portal widget. Instead, you can handle the onContactSupport
method to allow customers contact a sales or customer success representative that can do so on their behalf.
The Stigg app offers a no-code widget designer, which allows you to control the widget colors, typography and layout.
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:
Class name | Description |
---|---|
stigg-payment-details-section-layout | Styles applied to billing information title |
stigg-payment-details-section-header | Styles applied to payment details title layout |
stigg-payment-details-section-title | Styles applied to payment details title |
stigg-customer-name | Styles applied to payment details customer name |
stigg-customer-email | Styles applied to payment details customer email |
stigg-credit-card | Styles applied to payment details credit card |
stigg-credit-card-expiration | Styles applied to payment details credit card expiration date |
stigg-invoices-section-layout | Styles applied to invoice section layout |
stigg-invoices-section-header | Styles applied to invoice section title layout |
stigg-invoices-section-title | Styles applied to invoice section title |
stigg-view-invoice-history-button | Styles applied to invoice history button |
stigg-edit-payment-details-button | Styles applied to update payment details button |
stigg-user-information-layout | Styles applied to user information |
stigg-customer-portal-usage-section-title | Styles applied to the Usage section title |
stigg-entitlement-usage-{featureID} | Styles applied to the feature usage according to their unique ID |
In addition, since the Plans section of the customer portal can include the Stigg pricing table widget you can leverage its CSS classes to customize its styling.
The default widget texts can currently be overridden using code:
You can find more text overrides options here