Panda TS Trading Platform documentation

Introduction (Static HTML)

This document provides a detailed overview, to integrate the Trading Platform into an existing customer website.
Please read it entirely before starting the integration.

Note: Download the live code example with basic functionality and CSS.

Plugin installation

The loader.js script, will automatically load all the needed dependencies for the Trading Platform.
To start, you need to load the loader.js script, by adding the following lines, just before the closing </body> tag:

  <script src="https://nfp.pandats.com/brandname/loader.js"></script>

The actual link is provided by your PandaTS Success Manager.

DOM Integration

The integration is made by including the corresponding tags on your HTML page.

Tags list:

Plugin	Tag	Mandatory	Description
Init	<panda-forex-init> </panda-forex-init>	Yes	Initialize plugins
Trading Platform	<panda-forex-trading-platform> </panda-forex-trading-platform>	No	Trades operations
Signup	<panda-forex-signup> </panda-forex-signup>	Yes	Customer signup
Login	<panda-forex-login> </panda-forex-login>	Yes	Customer Login
Accounts	<panda-forex-accounts> </panda-forex-accounts>	No	List of trading accounts, switching between accounts
Account Status	<panda-forex-account-status> </panda-forex-accounts-status>	No	Real-time trading account status.Please note, that it works only when trading platform plugin is present.
Clock	<panda-forex-clock> </panda-forex-clock>	Yes	Switching client timezone
Language	<panda-forex-lang> </panda-forex-lang>	No	Switching plugins localization
Deposit	<panda-forex-deposit-credit> </panda-forex-deposit-credit>	No	Customer deposit operations.
Menu	<panda-forex-menu> </panda-forex-menu>	No	Global menu. Please note that some menu options will work only if corresponding plugins are present.
Personal Profile	<panda-forex-personal-profile> </panda-forex-personal-profile>	Yes
Client Area	<panda-forex-client-area> </panda-forex-client-area>	No	Customer profile operations: update profile, change password, manage trading accounts, support tickets, verification center, transaction history, funds withdrawal
Color theme switcher	<panda-forex-theme-switch> </panda-forex-theme-switch>	Yes	Switching between light and dark UI

To initialize the Trading Platform, please include the tag <panda-forex-init></panda-forex-init> at the top of your page, just after the opening <body> tag.
Place all other tags on their corresponding places.

Some Tags can be configured with the following attributes:

Plugin	Attribute	Values	Default value	Description
Signup	redirect-after-signup	relative URL with leading '/'	none	Redirect user to given URL path after signup
Login	show-logout	true / false	true	Show/hide "Logout" button when customer is logged in
	redirect-after-login	relative URL with leading '/'	none	Redirect user to given URL path after login
Deposit	show-button	true / false	true	Show/hide "Deposit" button when customer is logged in
	show-close	true / false	true	Show/hide "Close" button on deposit popup
Theme Switcher	show-switch	true / false	true	Show/hide theme switcher dropdown

Examples:

  <panda-forex-signup redirect-after-signup="/trade-room?lang=en"></panda-forex-signup>

  <panda-forex-login show-logout="false" redirect-after-login="/trade-room?lang=en"></panda-forex-login>

  <panda-forex-theme-switch show-switch="true"></panda-forex-theme-switch>

Interaction

It is possible to interact with the Trading Platform, by using the runPlugin function as shown here:

  <button onclick="runPlugin('forexSignup')">click to signup</button>

Other options:

Plugin	Event	User Status	Description
Login	forexLogin	not logged in	Opens login popup
Signup	forexSignup	not logged in	Open signup popup
Deposit	forexDeposit	logged in	Open deposit popup
Trading Platform	forexSwitchDemo	logged in	Create and log in demo trading account. If demo account exists - just log in

"runPlugin" can also be called from custom JS files, with a simple runPlugin(event).
E.g. calling runPlugin('forexSignup'); in developer console will display a signup popup.

CSS styling

Panda Trading Platform comes in default black, blue and white theme. However, they can be easily styled to perfectly fit your site's color palette.

Common elements for CSS styling are:

Login and Sign Up buttons in site head
Login and Sign Up popup windows
Deposit button
Client Area popup window
Trading platform

Here is how Sign Up & Login buttons look before styling:

To use custom CSS, it is best to have an ID for your body tag, and then use it to target the elements. This way, it's the easiest to override any default CSS configurations.

Here is how Sign Up & Login buttons look after styling:

  #custom-body-id #panda-forex-login .forex-button-pandats {
      background-color: #fff;
      border-color: #19A175;
      color: #19A175;
  }

  #custom-body-id #panda-forex-signup .forex-button-pandats {
      background-color: #992DEE;
  }

Visual behavior can be affected by your CSS theme. Make sure your CSS is proper for each Tag, and that no interference is created, by too generic CSS selectors.

Language parameters

The Panda Trading Platform will automatically translate itself, if a proper language query is given at the end of the URL.
For example, the following URL will translate the Trading Platform to German:

www.yourbrand.com/?lang=de

Supported languages:

Language	ISO code
Arabic	ar
Chinese Simplified	cn
Chinese Traditional	zh
English	en
French	fr
Georgian	ge
German	de
Hungarian	hu
Italian	it
Polish	pl
Portuguese	pt
Romanian	ro
Russian	ru
Spanish	es
Turkish	tr
Korean	kr
Thai	th
Czech	cz
Dutch	nl
Indonesian	id
Malay	ms
Japanese	ja
Vietnamese	vi

The language must be represented in ISO-2 format (As shown in the chart above).

Event callbacks

Panda Trading Platform provides variety of callbacks, that can be used on client-side to trigger custom functions.

Callbacks list:

Callback name	Description
depositSuccessCallback	Triggered when the user has successfully deposited to his account.
depositFailCallback	Triggered when the user tried to make a deposit but attempt failed (rejected by PSP).
signupSuccessCallback	Triggered when the user successfully registered in the system.
signupFailCallback	Triggered when the user failed to register in the system (invalid input values, existing e-mail, etc.).
loginSuccessCallback	Triggered when the user successfully logged into the system.
loginFailCallback	Triggered when the user failed to login due to nonexistant e-mail or wrong password.
logoutCallback	Triggered when the user logged out of the system.
appInitCallback	Triggered when Panda plugins are loaded and initialized.
themeChangeCallback	Triggered when user changes color scheme in trading system.

To use this callbacks, you will need to declare them as a global variable:

  const forexEvents = {
      depositSuccess: depositSuccessCallback,
      depositFail: depositFailCallback,
      signupSuccess: signupSuccessCallback,
      signupFail: signupFailCallback,
      loginSuccess: loginSuccessCallback,
      loginFail: loginFailCallback,
      logout: logoutCallback,
      init: appInitCallback,
      themeChange: themeChangeCallback
  };

Callbacks are declared as functions, like this:

  function depositSuccessCallback(event) {
      // your custom function here
  }

Note: Complete list of callback events is included in /js/custom.js file in static-html.zip

Theme color switcher

To provide the most convenient and user-friendly trading experience, the Trading Platform can be displayed in both light and dark themes. To enable theme switching, please include the following Tag in your code:

  <panda-forex-theme-switch id="panda-forex-theme-switch" show-switch="false"></panda-forex-theme-switch>

Note: Working live example is provided in static-html.zip

Single page fullscreen

For the convenience of working with the Trading Platform, nothing extra should be on this page. Therefore, the menu should be hidden.
The menu can be opened by clicking on the left menu icon as shown in the following picture:

The Trading Platform Header should contains the following items:

Brand logo
Trading accounts switcher (list of trading accounts)
Account status (real-time trading account details)
Theme Switcher
Clock (switching client timezone)
Client menu (global menu for the client area)
Deposit CTA
Social Platform

See example below:

Note: For your convenience we provide you with a working example of the Trade Room (trading platform full screen single page) template files for static HTML sites - static-html.zip

Introduction (Wordpress)

This document provides a detailed overview, to integrate the Trading Platform into an existing customer website.
Please read it entirely before starting the integration.

Note: Download the WP live code example with basic functionality and CSS.

Plugin installation

The archive with plugin will be provided by your delivery manager.
Plugin name: Panda Forex
lugin directory: panda-forex
Upload this folder in your /wp-content/plugins directory using your favorite FTP manager (FileZilla was used in the example below):

Activate plugin on WP plugins page:

PandaTS shortcodes

The plugin is shortcode-based. Each shortcode is responsible for specific functionality.
Please note that all shortcodes that are placed in php files must be enclosed in <?php echo do_shortcode('[shortcode]'); ?> wrapper
Below is the of shortcodes that should be included in header.php, right after opening of <body> tag.
Those shortcodes don't have visual representation and needed for initialisation and internal logic of plugins:

Initialisation plugin shortcodes:

Shortcode	Mandatory	Description
[forex-init]	Yes	Initialize plugins
[forex-personal-profile]	Yes	Customer profile, finance questionnaire, sms verification
[forex-client-area]		Customer profile operations: update profile, change password, manage trading accounts, support tickets, verification center, transaction history, funds withdrawal

List of shortcodes included in the header of the page.
Those shortcodes will render clock, dropdown menus and buttons, so header.php is also a good place to insert them, so they are visible for all users and located in topmost part of the site.

Top menu plugin shortcodes:

Shortcode	Mandatory	Description
[forex-clock]	Yes	Switching client timezone
[forex-menu]	No	Global menu. Please note that some menu options will work only if corresponding plugins are present.
[forex-signup]	Yes	Customer signup
[forex-login]	Yes	Customer login
[forex-deposit-credit]	No	Customer deposit operations.
[forex-theme-switch]	Yes	Switching between light and dark UI

List of shortcodes included in the trading platform page. those you do not want to include in the header, use a separate WP page.
Shortcodes can be placed as plain text and will be automatically rendered as trading platform elements.

Trading platform plugin shortcodes:

Shortcode	Mandatory	Description
[forex-accounts]	Yes	List of trading accounts, switching between accounts
[forex-account-status]	Yes	Real-time trading account status. Please note, that it works only when trading platform plugin is present.
[forex-trading-platform]	Yes	Trades operations

Please note that each shortcode must be used only once, adding it multiple times will cause duplication of menu elements and unpredictable behavior.

Theme integration example

Integration is based on including corresponding shortcode tags as php includes (most likely in header.php of your WP theme) and on wordpress pages (as content).

Example of php include in header.php:

  .signup_header_btn .mainpandats .simple-button-pandats,
  .login_header_btn .mainpandats .forex-button-pandats {
      color: #FFF;
      border-radius: 3px;
      border: none;
      height: 40px !important;
      font-size: 16px;
      transition: all 0.5s ease 0s !important;
  }

  .signup_header_btn .mainpandats .simple-button-pandats {
      background: #ee4625;
  }

  .login_header_btn .mainpandats .forex-button-pandats {
      background: transparent;
      border: 1px solid #FFF;
  }

Theme integration example

Integration is based on including corresponding shortcode tags as php includes (most likely in header.php of your WP theme) and on wordpress pages (as content).

Example of php include in header.php:

Initialisation shortcodes:

  <!-- body -->

  <div class="panda-forex-plugins">
      <!--?php echo do_shortcode('[forex-init]'); ?-->
      <!--?php echo do_shortcode('[forex-personal-profile]'); ?-->
      <!--?php echo do_shortcode('[forex-client-area]'); ?-->
  </div>

Top menu shortcodes:

  <div class="top_menu">
      <ul>
          <li class="clock_header_btn"><!--?php echo do_shortcode('[forex-clock]'); ?--></li>
          <li class="menu_header_btn"><!--?php echo do_shortcode('[forex-menu]'); ?--></li>
          <li class="signup_header_btn"><!--?php echo do_shortcode('[forex-signup]'); ?--></li>
          <li class="login_header_btn"><!--?php echo do_shortcode('[forex-login show-logout="false"]'); ?--></li>
          <li class="theme_switch_btn"><!--?php echo do_shortcode('[forex-theme-switch show-switch="false"]'); ?--></li>
          <li class="deposit_header_btn"><!--?php echo do_shortcode('[forex-deposit-credit]'); ?--></li>
      </ul>
  </div>

Expected result:

Example of WP content include. For this purpose a separate page was created in WordPress.
In this example plain html with shortcodes was used.
Please note that shortcodes are enclosed in divs with unique class names,
to properly mark up elements for further CSS styling:

Code example:

  <div class="platform_container">
      <div class="platform_header">
          [forex-accounts] [forex-account-status]
      </div>
      <div class="platform_body">
          [forex-trading-platform]
      </div>
  </div>

Expected result:

DOM Breakdown:

CSS Styling

Panda plugins come in default black, blue and white theme, however they can be easily styled to perfectly fit your site's color palette.

Common elements for CSS styling are:

Login and Sign Up buttons in site head
Login and Sign Up popup windows
Deposit button
Client Area popup window
Trading platform

Here is how Sign Up and Login buttons look before styling:

Sign Up and Login buttons after styling:

Sign Up and Login buttons CSS code:

  .signup_header_btn .mainpandats .simple-button-pandats,
  .login_header_btn .mainpandats .forex-button-pandats {
      color: #FFF;
      border-radius: 3px;
      border: none;
      height: 40px !important;
      font-size: 16px;
      transition: all 0.5s ease 0s !important;
  }

  .signup_header_btn .mainpandats .simple-button-pandats {
      background: #ee4625;
  }

  .login_header_btn .mainpandats .forex-button-pandats {
      background: transparent;
      border: 1px solid #FFF;
  }

Please note: Panda plugins visual behavior can be affected by your theme CSS styles.
Make sure to review your HTML and CSS to ensure proper styling for each plugin part and that no interference created by too generic CSS selectors.

Language parameters

Some plugins can be configured via attributes:

Plugin	Attribute	Values	Default value	Description
Login	show-logout	true false	true	Show/hide "Logout" button when customer is logged in
Deposit	show-button	true false	true	Show/hide "Deposit" button when customer is logged in
	show-close	true false	true	Show/hide "Close" button on deposit popup

Example:

  <?php echo do_shortcode('[forex-login show-logout="false"]'); ?>

Plugins interaction:

It is possible to run some plugins and/or their actions via registered function â€œrunPluginâ€, for example this html code:

<button onclick="runPlugin('forexSignup')">Click to Sign Up</button>

creates a button that will open registration popup on click.List of actions that can be accessed this way:

Plugin	Event	User status	Description
Login	forexLogin	not logged in	Opens login popup
Signup	forexSignup	not logged in	Opens signup popup
Deposit	forexDeposit	logged in	Opens deposit popup

Language parameters:

Panda plugins will automatically translate themselves if proper language query is given in the end of URL, example:www.yourbrand.com/?lang=de
will cause the plugins to be shown in German language. The language must be represented in ISO-2 format and only language codes shown below will work.

List of supported languages:

Language	ISO code
Arabic	ar
Chinese Simplified	cn
Chinese Traditional	zh
English	en
French	fr
Georgian	ge
German	de
Hungarian	hu
Italian	it
Polish	pl
Portuguese	pt
Romanian	ro
Russian	ru
Spanish	es
Turkish	tr
Korean	kr
Thai	th
Czech	cz
Dutch	ni
Indonesian	id
Malay	ms
Japanese	ja
Vietnamese	vi

Event callbacks

Panda Trading Platform provides an array of various callbacks that can be used on client-side to bind custom functions to user actions.

List of callback events:

Callback name	Description
depositSuccessCallback	Triggered when the user has successfully deposited to his account.
depositFailCallback	Triggered when the user tried to make a deposit but attempt failed (rejected by PSP).
signupSuccessCallback	Triggered when the user successfully registered in the system.
signupFailCallback	Triggered when the user failed to register in the system (invalid input values, existing e-mail, etc.).
loginSuccessCallback	Triggered when the user successfully logged into the system.
loginFailCallback	Triggered when the user failed to login due to nonexistant e-mail or wrong password.
logoutCallback	Triggered when the user logged out of the system.
appInitCallback	Triggered when Panda plugins are loaded and initialized.
themeChangeCallback	Triggered when user changes color scheme in trading system.

To make use of events and their callbacks you will need to declare them as a global variable:

  const forexEvents = {
      depositSuccess: depositSuccessCallback,
      depositFail: depositFailCallback,
      signupSuccess: signupSuccessCallback,
      signupFail: signupFailCallback,
      loginSuccess: loginSuccessCallback,
      loginFail: loginFailCallback,
      logout: logoutCallback,
      init: appInitCallback,
  };

Callbacks are declared as functions, like this:

function depositSuccessCallback(event) {
      // your custom function here
  }

Complete list of callback events is included in template-platform.php file in wordpress-based.zip

Theme color switcher

Panda Trading Platform can be displayed in light and dark color schemes, to provide users most convenient and user-friendly trading experience.

Theme selection dropdown

To enable theme switching via dropdown menu - use this shortcode:

  <?php echo do_shortcode('[forex-theme-switch]'); ?>

This will display a dropdown with available themes for user to select from

The expected result should look like this:

Theme selection switcher

To enable theme switching via toggling switching element - use this code in your html.
In order to display only the switcher, but keep functionality - we need to hide the original dropdown and place a 'switch' checkbox:

  <div style="display: none !important;"><?php echo do_shortcode('[forex-theme-switch]'); ?></div>

  <div id="theme-switch" class="switch">
      <label>
          <input type="checkbox" id="theme-color-switcher" />
          <span class="lever" title="Switch color theme"></span>
      </label>
  </div>

Mobile behavior

PandaTS provides a separate web app for mobile users that is usually accesssed via www.yoursite.com/mobile link.
Contact your success or delivery manager if you have questions about mobile application.

The plugins described in this document do not support mobile view, so it is a good practice to detect mobile users and redirect them to mobile tranding platform.To do that we use a WordPress plugin that will detect mobile devices and send user to corresponding page.

Plugin installation:

Download archive mu-plugins.zip
Extract archive
In disable_plugins_for_mobile.php, on line 44 find "/trade-room". Replace it with a link to your web trading platform.
E.g. if your trading platform is www.yoursite.com/trade-now/ - replace "/trade-room" with "/trade-now".
Now all clients that try to access www.yoursite.com/trade-now/ from a mobile device will be redirected to www.yoursite.com/mobile/
upload whole /mu-plugins/ folder to wp-content directory in WordPress.
check if the plugin worked.
If you see shortcodes as plain text in mobile view - the plugin works correctly

Add CSS media query to hide disabled plugins on mobile devices

  @media only screen and ( max-width: 767px ) {
      .panda-forex-plugins,
      .top_menu {
          display: none !important;
      }
  }

After this fix the shortcodes will not be displayed on mobile view:

Global PHP variable for mobile detection:

Plugin also sends variable mobileDevice (returns 1 or 0) into global PHP scope.
You can use this to check for mobile users anywhere on the site, to hide content elements or change UI behavior.

Code snippet from header.php:

  <head>
      <!-- Get mobileDevice value from global scope -->
      <script type="text\javascript">
          if ( <?php echo $GLOBALS['MOBILEDEVICE']; ?> === 1) {
              isMobileDevice = true; // You can use this new global JS variable anywhere

          } else {
              isMobileDevice = false;
          }
      </script>
  </head>

Example:

  <!-- Get Hide all elements with "desktop_only" class using jQuery -->

  <script type="text\javascript">
      if (isMobileDevice === true) {
          $('.desktop_only').hide();
      }
  </script>

Single page fullscreen

For the convenience of working with platform, nothing extra should be on this page. Therefore, the menu that is in the header of the website should be hidden and can be opened on the left, when you click on the menu button.

See example below:

In the header of the website we place only following items:

Brand logo
Trading accounts switcher (list of trading accounts)
Account status (real-time trading account details)
Clock (switching client timezone)
Client Area menu (global menu for the client area)
Deposit CTA

See example below:

For your convenience we provide you with working example of the Trade Room (trading platform full screen single page) template files for WordPress based sites

wordpress-based.zip

Important notes

WP user handling:

Each time when new customer is registered via Panda website interface - plugin will create a WP user with his username and password, for ease of routing and showing specific information for registered clients.
All such users are assigned with a WP role 'forexClient'. As a security measure against leads theft the plugin will then delete every user with this role when he logs out. On re-login the user is created anew.
WP Users that are created not through plugin interface (such as Administrators and Editors) are not affected by this and never deleted.

Check your config file

After unzipping the archive with panda plugins navigate to the panda-forex folder.
Find a file called config.php, it will look like this:

  $config = [
      'deployUrl' => 'https://nfp.pandats.com/your_brand_name/',
      'redirectAfterSignup' => '/webtrader/',
      'redirectAfterLogin' => '/webtrader/'
  ];

deployUrl is a link to Panda server to get all needed scripts for it to work. Make sure that the last part of the link is your brand name.
If it is not - contact your delivery manager immediately.

redirectAfterSignup and redirectAfterLogin represent relative links to redirect user after he signs up or logs in via Panda web plugin.
If trading platform on your website is located on e.g. www.yoursite.com/trading-platform/ then those variables must be set to '/trading-platform/'.