https://github.com/accelbyte/wordpress-react-plugin
https://github.com/accelbyte/wordpress-react-plugin
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/accelbyte/wordpress-react-plugin
- Owner: AccelByte
- Created: 2020-08-03T06:40:02.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-04T06:04:19.000Z (almost 3 years ago)
- Last Synced: 2025-07-19T08:48:55.057Z (8 months ago)
- Language: TypeScript
- Size: 124 KB
- Stars: 2
- Watchers: 6
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# AccelByte WordPress Plugin
## Overview
The AccelByte WordPress Plugin is a ReactJS based application for integrating WordPress with AccelByte platform
### High Level Features
- Player authentication
- [Login](features-doc/LOGIN.md)
- [Unverified Email](features-doc/UNVERIFIED_EMAIL.md)
- [Blocked Legal](features-doc/BLOCKED_LEGAL.md)
- [Headless Account](features-doc/HEADLESS_ACCOUNT.md)
- [Under Deletion Status](features-doc/UNDER_DELETION.md)
- [Logout](features-doc/LOGOUT.md)
- [Item purchase button](features-doc/ITEM_PURCHASE_BUTTON.md)
- [Document policy link for policy section](features-doc/DOCUMENT_POLICY_LINK.md)
### Building the project
To build this plugin you need to set up following environments variable:
- `CLIENT_REDIRECT_URI` - URI to redirect back from AccelByte Login Website to WordPress website
- `APP_SECURITY_CLIENT_ID` - Client ID from IAM for WordPress application in browser
- `JUSTICE_PUBLISHER_NAMESPACE` - Default namespace
- `JUSTICE_BASE_URL` - Base URL of Accelbyte services
- `JUSTICE_PLAYERPORTAL_URL` - URL of AccelByte PlayerPortal URL
- `JUSTICE_LEGAL_WEBSITE_URL`- URL of AccelByte Legal website URL
- `JUSTICE_CREATE_ORDER_URL` - AccelByte Player Portal URL for order creation
- `CLIENT_REGISTER_URI_PATH_NAME` - Optional - Client URI path name as entry point to generate PP register URI and redirect to it, ie: "/register-overlay/"
- `CLIENT_LOGIN_URI_PATH_NAME` - Optional - Client URI path name as entry point to generate PP login URI and redirect to it, ie: "/login-overlay/"
- `CLIENT_FORGOT_PASSWORD_URI_PATH_NAME` - Optional - Client URI path name as entry point to generate PP forgot password URI and redirect to it, ie: "/forgot-password-overlay/"
- `CLIENT_OVERLAY_URI_PATH_AUTO_REDIRECT` - Optional - force redirect to player portal page if the user already logged in when accessing CLIENT_REGISTER_URI_PATH_NAME, CLIENT_FORGOT_PASSWORD_URI_PATH_NAME and CLIENT_LOGIN_URI_PATH_NAME, (default true)
And run these command under directory `/widget` to install the dependencies and build the plugin:
- `yarn install`
- `yarn build`
## WordPress integration
To integrate this plugin with your WordPress, you need to do following steps:
- Copy folder `wordpress-react` under directory `{YOUR_WORDPRESS_ROOT}/wp-content/plugins`
- Go to `{YOUR_WORDPRESS_ADMIN_URL}/wp-admin/plugins.php` and make sure plugin `AccelByte WordPress React` activated
## Managed HTML Element
This plugin will be running up on the client browser side. Once the script loaded, it will look for HTML element with a specific id or class name to be modified and managed by the plugin
Make sure you provide HTML element with following id or classname inside your WordPress template:
- Element ID `ab-wpr-root` for application root for the plugin
- Element ID `ab-wpr-login-button-root` for login button container
- Element ID `ab-wpr-login-button-root-mobile` for mobile button container
- Element ID `ab-wpr-footer-privacy-link` for footer section container
- Element classname `ab-wpr-purchase-btn` for purchase item button
## Item Purchase Button Integration
Once you published an item on AccelByte store, you will be able to embed the purchase button on any page on the WordPress site,
You can get the code snippet to be embedded on your WordPress site from Admin Portal item page on Published Store.
#### Snippet Example:
Here's the example for snippet code generated for purchase able item
#### Default Button (Plain button)
`
{**ITEM_NAME**}`
#### Button With Image
`
{**ITEM_NAME**}`
Note: You can change the image of the button on Admin Portal item store page at `Publishing Content` card under `Images` tab
#### Link
The purchase link is uniquely generated from Admin Portal item store page