▪️Registration page

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

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

Smartico 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

• All the texts can be adjusted by the operator from Smartico BackOffice

• Can be customized with CSS and additional JavaScript from the Smartico 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 CSS & JS sections. 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>