​
Overview

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:
  1. Provides customers with visibility to their current subscription details - subscribed plan, purchased add-ons, granted promotional entitlements.
  2. Provides customers with visibility to the usage of their subscription’s features.
  3. 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 😎.
  4. Allows customers to view their billing and payment information - when Stigg is integrated with a billing solution (such as Stripe), customers can also update this information and view previous invoices directly from the billing solution’s billing portal.

​
Customer portal sections

Stigg’s customer portal widget is composed of the following sections.

​
Subscription overview

The Subscription Overview section provides customers with visibility to their current subscription details - subscribed plan, purchased add-ons, granted promotional entitlements.

​
Usage

The Usage section provides customers with visibility to the usage of their subscription’s features.

​
Plan picker

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.

​
Payment details

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.
  1. Stigg must be integrated with Stripe
  2. To ensure that the functionality of Stigg’s Customer Portal doesn’t collide with Stripe’s Billing Portal, ensure that Stripe’s Billing Portal is configured correctly.

​
Invoices

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.

​
Rendering a customer portal

To render customer portals inside your application, when a customer signs-in or restores their session set the customer ID: 
import { StiggProvider } from '@stigg/react-sdk';

export function App() {
  return (
    <StiggProvider apiKey="<STIGG_CLIENT_API_KEY>" customerId="<LOGGED_IN_CUSTOMER_ID>">
      <NestedComponents />
    </StiggProvider>
  );
}
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. 
<CustomerPortal
	paywallComponent={<Paywall />}
	theme={...}
	textOverrides={...}
/>
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

​
Widget modularity

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: 
import { 
  CustomerPortalProvider,
  CustomerUsageData,
  PaymentDetailsSection,
  /* more components that can be used as standalone
  SubscriptionsOverview,
  AddonsList,
  Promotions,
  InvoicesSection
  */
} from '@stigg/react-sdk"

function App() {
 	return (
		<CustomerPortalProvider theme={...} textOverrides={...}>
			<CustomerUsageData />
			<PaymentDetailsSection />
		</CustomerPortalProvider>    
  )
}

​
Subscriptions with a custom price

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.

​
Customization

​
No-code widget designer

The Stigg app offers a no-code widget designer, which allows you to control the widget colors, typography and layout.

​
Custom CSS

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 nameDescription
stigg-payment-details-section-layoutStyles applied to billing information title
stigg-payment-details-section-headerStyles applied to payment details title layout
stigg-payment-details-section-titleStyles applied to payment details title
stigg-customer-nameStyles applied to payment details customer name
stigg-customer-emailStyles applied to payment details customer email
stigg-credit-cardStyles applied to payment details credit card
stigg-credit-card-expirationStyles applied to payment details credit card expiration date
stigg-invoices-section-layoutStyles applied to invoice section layout
stigg-invoices-section-headerStyles applied to invoice section title layout
stigg-invoices-section-titleStyles applied to invoice section title
stigg-view-invoice-history-buttonStyles applied to invoice history button
stigg-edit-payment-details-buttonStyles applied to update payment details button
stigg-user-information-layoutStyles applied to user information
stigg-customer-portal-usage-section-titleStyles 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.

​
Texts

The default widget texts can currently be overridden using code: 
const textOverrides = {  
	manageSubscription: 'Manage',
	usageTabTitle: 'Usage',
	addonsTabTitle: 'Add-ons',
	promotionsTabTitle: 'Promotions',
	promotionsSubtitle: 'You were granted access to additional functionality at no additional cost.',
  contactSupportTitle: 'Have questions about your subscription?',
  contactSupportLink: 'Contact support',
  editBilling: 'Edit billing details',
  invoicesTitle: 'Invoices',
  viewInvoiceHistory: 'View invoice history',
  editPaymentDetails: 'Edit',
  paywallSectionTitle: 'Plans',
  cancelScheduledUpdatesButtonTitle: 'Cancel update',
}

<CustomerPortal
    textOverrides={textOverrides}
    paywallComponent={<Paywall />}
/>
You can find more text overrides options here

​
Additional resources

Customer Portal Properties

Global Theming Customization

ReactReact

Vue.jsVue.js

Next.jsNext.js

Webflow, Wordpress, HTMLWebflow, Wordpress, HTML