A third-party widget is a configurable, reusable component created and maintained by developers outside of BigCommerce. You can use third-party widgets to display custom content in a Stencil storefront.
This article outlines the three main steps involved in using third-party widgets with Page Builder.
- OAuth token
- App Marketplace
To use this method, you will need to obtain API credentials with OAuth content scope set to
modify. For information about making requests against BigCommerce’s REST APIs, see Authenticating BigCommerce’s REST APIs. After obtaining the token, you can inject, list, and remove widgets on any page of the store. To learn how to complete these actions, see Widgets Tutorial.
The App Marketplace (opens in a new tab) is an area inside the control panel where merchants can browse for apps available for installation on their BigCommerce store.
To create a widget using the App Marketplace, you will need to create a marketplace application that injects new widgets into the storefront using the Widgets API.
Content created by an application's widget will remain in the store even if the application gets uninstalled.
You can extend a BigCommerce-provided widget by modifying the existing API parameters in the widget template. The API parameters for a widget template are as follows:
|The name of the widget.|
|The skeleton UI of the widget rendered as Handlebars HTML.|
|The JSON schema of data for the widget template. The schema represents the customizable options available in the sidebar of Page Builder.|
To modify a BigCommerce-provided widget, re-configure the existing settings in the widget template’s
schema property when creating a widget template via the API. The settings you define in this property will be exposed in the Page Builder UI, providing merchants the ability to modify how the widget appears on their storefront.
You can change widget's customization options by modifying the template's
schema. Once you have modified the
schema, place the modified JSON object in the request body as the
schema value, and make a
POST request for the Widget Template to expose the new customization options on Page Builder.
To expose a third-party widget template in Page Builder, make a
POST request for the Widget Template. Include the widget's
schema in the body of your request. The
schema value should be the modified JSON object with customizable settings you want to incorporate for the widget.
If you successfully create the widget template, you should see the widget with its customizable options reflected in Page Builder, under the Custom section.