Last Updated: 8/10/2021, 10:11:00 AM

# AccelByte WordPress React Plugin

# Overview

The AccelByte WordPress Plugin is a ReactJS based application for integrating WordPress with the AccelByte platform. If you already have a website, you can use WordPress React Plugin to make your website work along with the AccelByte Player Portal under the same domain, to make it feel like a single web application. To do this, there are few things that need to be done by you and AccelByte.

# Prerequisites

# Tutorials

You’ll be working together with AccelByte to unify the design between your website and the AccelByte Player Portal, particularly the web header and footer. For the WordPress configuration, follow the steps below.

  1. Add the AccelByte WordPress Plugin to your website.

  2. During the integration, the AccelByte team will share the environment variables to build the project based on your dev environment.

  3. In your WordPress, add HTML elements with the following IDs:

    • Add the ab-wpr-root ID, which is the main element of the plugin. This ID is mandatory.
    • Add the ab-wpr-login-button-root ID, which will be used as a login button and dropdown container. This ID is mandatory.
    • Add the ab-wpr-login-button-root-mobile ID, which will be used as a mobile button container. This ID is optional.
    • Add the ab-wpr-footer-privacy-link ID, which will be used as the container for the Privacy section of the website footer. This section usually contains links to legal policies. This ID is optional.
    • Add the ab-wpr-purchase-btn (opens new window) ID, which will be used as a Purchase button for items in your online store. This ID is optional.

    wp-react-plugin

  4. Add an extra .htaccess rule to handle error redirection from the login website:

  1. Create an IAM Client through the Admin Portal to authorize the website on the AccelByte platform.

INFO

During development or in a production environment, you might have a different base URL with the Player Portal (e.g. the Player Portal URL might "https://demo.accelbyte.io", whereas the WordPress URL is "http://localhost"). Both the Player Portal and WordPress URLs need to be added to the IAM Client you create, so that the cookies can be shared between those URLs.

# Item Purchase Button Integration

Once you have published an item in your online store, you will be able to embed the purchase button for that item on any page on your WordPress site. You can get the code snippet for your WordPress site from the item’s page in your published store in the AccelByte Admin Portal. Here's an example code snippet:

Default Button (Plain button)

<div class="ab-wpr-purchase-btn" data-item-id="{**ITEM_ID**}" data-btn-type="default">{**ITEM_NAME**}</div>  

Button With Image

<div class="ab-wpr-purchase-btn" data-item-id="{**ITEM_ID**}" data-btn-type="large">{**ITEM_NAME**}</div>  

NOTE

You can change the image for the button on the item’s page in the Admin Portal, on the Publishing Content card under the Images tab.

INFO

Unique purchase links for each of your catalog items are automatically generated by the Admin Portal.

  • Learn more about publishing content in the Catalog service documentation.
  • Read more about how you can create your own publishing platform with our Player Portal.