AccelByte Web Widgets V2

In addition to the Accelbyte Web SDK and Web Widgets, the library provides an extension called Web Widgets V2 allowing the creation of SDK UI components. AccelByte Web Widgets is a UI library consisting of a set of JavaScript React components that can be embedded inside a browser. These components have the same appearance and business functionality as the AccelByte Player Portal.

Note

The Web Widgets are currently undergoing Alpha testing. If you would like to participate in the Alpha test, we encourage you to reach out to your assigned DPM resource before making use of these solutions.

Installation

To npm install the Web Widgets execute

yarn add @accelbyte/widgets-v2

Testing

yarn --cwd packages/sdk test

Usage

Widgets V2 Usage Example

<SdkWidget
    sdkOptions={{
        baseURL: "<Publisher Base URL, e.g. https://demo.accelbyte.io>",
        clientId: "<Publisher Client ID>, e.g. 32_char_guid",
        redirectURI: "<Publisher Redirect URL, e.g. https://demo.accelbyte.io>",
        namespace: "<Publisher namespace>, e.g. 'accelbyte'"
    }}
    Link={WidgetLink}
    NavLink={WidgetLink}
    history={{
        // This is to support Next.js with a dynamic base path and make it similar to any other application.
        // We need to remove the base path from location.pathname and add the base path when navigating.
        location,
        push: to => router.push(to),
        replace: to => router.replace(to)
    }}
    onInitializeSDK={sdk => console.info('initialized', sdk)}
    routes={PlayerPortalRoutes}>
    <StoreWidget>
    {({ isSingleGame }) => {
        return <StoreSection isSingleGame={isSingleGame} />
    }}
    </StoreWidget>
</SdkWidget>

Payment Widgets V2 Sample Usage

<PaymentWidget 
    namespace={`<Publisher namespace>, e.g. 'accelbyte'`} 
    paymentOrderNo={`<Order Number got from Store Detail>`} 
    redirectPath={`<Redirect Path after successful transaction>`} 
/>

Widgets V2 Sample App

In addition, there is a Widget V2 Sample App for complete example widgets v2 usage.