Customer Portal Setup

Bold Subscriptions allows your customers to manage their own subscriptions through a dedicated page called the Customer Portal. Through this page, your customers can adjust their subscription information depending on the permissions you've enabled in the Customer Portal settings.

Your customers can access the Customer Portal by logging into their BigCommerce account on your store.

For more information on enabling customer accounts, please visit Using & Managing Customer Accounts with Bold Checkout.

 Alert

This guide must be completed in order to allow your customers the ability to manage their own subscriptions.

 


 

  1. From the WordPress admin, select Pages.
  2. Select Add New.
    Add New Page
  3. Title the page My Subscriptions.
  4. Select the plus sign and select Browse all.
    My Subscriptions Page
  5. Scroll down to Widgets and select Custom HTML.
    Widgets then Custom HTML
  6. In the Page Content section, select HTML.
  7. Copy and paste the following code into the HTML editor:
    <div id="customer-portal-root"></div>
    Add code in HTML
  8. Select Publish.
  9. Select Publish again.
  10. Navigate back to the WordPress admin and select Appearance then Menus.
    Appearance and Menus
  11. Select the menu where you want My Subscriptions to appear.
  12. Under Add menu items, select the My Subscriptions page you just created and select Add to Menu.
    My Subscriptions Menu
  13. Click Save Menu.
  14. Go back to the storefront, refresh the page and check that My Subscriptions appears in the selected menu.

 


 

Customizations

Once you have your Customer Portal set up, you can also display it in a few additional ways. You can add it to any page using Shortcode or a Gutenberg Block

 

Shortcode

To use Shortcode simply create a new page and copy and paste the following code to your page content:

[bold_subscriptions_customer_portal]

For more information on using Shortcode Blocks, please visit WordPress Support.

 

Gutenberg Block

To use a Gutenberg Block simply create a new page, select the + sign and search Bold Customer Portal.

Gutenberg Block for Bold Customer Portal

 


 

The Customer Portal supports the ability to change its default text or add translations for other languages.

 Caution

This customization requires developer knowledge. It is highly recommended to have a developer assist you.

You can manage the Customer Portal's language changes and translations by setting window.BOLD.subscriptions.config.internationalization to an object within your shop's theme, with the following shape:

Key Type Shape
{language_code'} Object

The ISO 639-1 language code to configure internationalization data for.

(en = English, fr = French, es = Spanish, etc.)

{language_code}.translation Object The key containing the translations for the parent language code.
{language_code}.translation.{translation_key} String

The translation value for a specific key.

Learn more about translation values below.

 

A full list of available translation keys and their default values can be found in the window.BOLD.subscriptions.config.internationalizationDefaults object on your storefront.

 Example

Setting the en and fr translation of the orderFrequencyTitle key:

 

window.BOLD.subscriptions.config.internationalization = {

    en: {

        translation: {

            subscriptionSummaryOrderFrequencyTitle: 'Order frequency'

        }

    },

    fr: {

        translation: {

            subscriptionSummaryOrderFrequencyTitle: 'Récurrence des commandes'

        }

    }

}

 

 

Translation Values

  • Translation values may contain interpolation values denoted by keys within double curly brace brackets (eg. "The value is {{value}}".) Use the default translation values to guide what interpolation keys are available for each translation key.
  • Some translation keys allow an extra key with a _plural suffix to be specified which allows different translations for different counts of the translation subject. For languages requiring more than simple singular and plural translations _0, _1, _2, _n suffixes can also be used.
  • Formats of dates can be altered by adding the format after a comma when using an interpolation value (eg. {{date,MMMM DD, YYYY}}). For a full reference of available date format tokens, please view this list.

 

 

Language Detection and Fallback

When multiple languages are provided the customer portal will automatically detect the customer's language and chooses the best translations to use from the available options. When customers view your customer portal with a locale not defined in the translations for their language they are given the en translation by default. You can set the window.BOLD.subscriptions.config.internationalizationFallbackLanguage variable to an ISO 639-1 language code to change the fallback language of the customer portal.

 

 

Programmatically Changing Languages

If you would like to change the current language of the customer portal in Javascript you can do so using the window.BOLD.subscriptions.changeLanguage(languageCode) method.

 

 

Testing Other Languages

You can force the customer portal to display the translations for another language by setting the lng query param in your url to an ISO 639-1 language code. For example, your-shop-url.com/pages/customer-portal?lng=fr.

Was this article helpful?
0 out of 0 found this helpful