▪️Registration page

This document describes how to customize UI and fields in the registration page and backoffice for the affiliates.

You can also check Registration API if you want to implement own registration page

TAP is providing a default affiliate registration page for all operators.

An Example of the page can be seen at this address - https://aff.theaffiliateplatform.com/

The page is supporting

• Different languages ( Go to Affiliate Desk \ Settings , to set the default language and available languages for your registration page)

• All the texts can be adjusted by the operator from TAP BackOffice (Go to Tools \ Translation\Values' screen to find the relevant translation keys for registration page (Affiliation) and affiliates backoffice/login page (Affiliation Admin)

• Can be customized with CSS and additional JavaScript from the TAP BackOffice.

The page can accept different parameters in the URL

• https://aff.theaffiliateplatform.com/?lang=uk - opens in the specified language

• https://aff.theaffiliateplatform.com/?tc=true - opens Terms & Conditions window

• https://aff.theaffiliateplatform.com/?mgr=123 - registered affiliate will be assigned to the manager with ID 123 and the affiliate will be automatically approved. You can prevent automatic approval by adding &auto_approve=false to the URL

• https://aff.theaffiliateplatform.com/?paff=456 - affiliate will be assigned as a child to the affiliate with ID 456

• https://aff.theaffiliateplatform.com/?registration_source=FB123 - affiliate will be marked with the tag FB123 as the registration source

Customizing page UI

You can provide custom CSS, colors, and background of the page in the Settings \ Custom JS & CSS (REG. SCREEN) section.

Please check the example below.

<style>
	body {
		background-image: url('https://static.smr.vc/2576047dbc254e7266bfc9-WheelBg, pumpkins.jpg');
		background-color: transparent !important;
		background-size: cover !important;
		color: #fff !important;
	}

	#reg_form {
		padding: 40px !important;
		background-color: #000;
	}

	form label {
		color: #fcd004 !important;
		font-weight: bold !important;
	}

	form input,
	form select,
	form textarea {
		border-color: #fcd004 !important;
		border-width: 2px !important;
		border-radius: 6px !important;
	}

	form>div>div.input-group>input,
	form>div>div.input-group>select,
	form>div>div.input-group>textarea {
		border-color: #fcd004 !important;
		border-top-right-radius: 6px !important;
		border-top-left-radius: 0px !important;
		border-bottom-right-radius: 6px !important;
		border-bottom-left-radius: 6px !important;
		border-width: 2px 2px 2px 0px !important;
	}

	form .input-group .input-group-prepend span {
		background-color: #fcd004 !important;
		border-color: #fcd004 !important;
		border-width: 2px 0px 0px 0px !important;
		border-top-left-radius: 6px !important;
		border-bottom-left-radius: 6px !important;
	}

	form button.btn-primary[type="submit"] {
		color: #fff;
		background-color: #fcd004;
		border-color: #fcd004;
	}
</style>

Change the set of required fields

You can change a set of required fields in the Settings \ Custom CSS & JS section. Please check the example below

<script>
$('#web_site_url').attr('required', 'true');
</script>

You can also make some fields optional or even hide them

<script>
	$('#skype').attr('required', false);
	$('#company').attr('required', false);
	$('#web_site_url').attr('required', false);
	$('#comments').attr('required', false);
	$('#country').attr('required', false);


	$('#skype_block').css('display', 'none');
	$('#company_block').css('display', 'none');
	$('#web_site_url_block').css('display', 'none');
	$('#comments_block').css('display', 'none');
	$('#country_block').css('display', 'none');
</script>

Terms and Conditions

When registering as an affiliate, applicants must accept the platform’s Terms & Conditions. This step ensures compliance with the program’s rules and policies. To add Terms and Conditions:

1. Go to 'Tools' header > 'Translation \ Values' screen

2. Use the filtering options to find Registration page translation keys

3. Select 'reg_tc'

4. Add Terms and Conditions (in HTML format) for the respective language/s

To apply Terms & Conditions for the English version of the affiliates' registration page, you can apply it either in 'Translation keys' or in Settings, T&C (HTML)

Customizing login page for affiliates

TAP provides a fully configured affiliate portal, serving as a login page and user interface for affiliates. You can apply custom JS for affiliates UI in Settings \ Custom JS (AFF.APP). Please check the example below

<!-- Start of Custom Drive Link Widget -->
<script>
  (function() {
      var widget = document.createElement("div");
      widget.style.position = "fixed";
      widget.style.bottom = "20px";
      widget.style.right = "20px";
      widget.style.background = "#007bff";
      widget.style.color = "white";
      widget.style.padding = "10px 20px";
      widget.style.borderRadius = "8px";
      widget.style.cursor = "pointer";
      widget.style.boxShadow = "2px 2px 10px rgba(0, 0, 0, 0.2)";
      widget.style.fontFamily = "Arial, sans-serif";
      widget.innerText = "T&C";
      widget.onclick = function() {
          window.open("https://docs.google.com/document/d/1-4TCqsn3v_tQpIYSMVoZ7jb3IF5LSqDZIK8-7rinIL4/view", "_blank");
      };

      document.body.appendChild(widget);
  })();
</script>
<!-- End of Custom Drive Link Widget -->