# Registration page

{% hint style="info" %}
This document describes how to customize UI and fields in the registration page and backoffice for the affiliates via API.

You can also check [Registration API](https://help.theaffiliateplatform.com/apis-and-configurations/registration-api) if you want to implement own registration page.
{% endhint %}

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/>&#x20;

## **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)

<figure><img src="https://2789002490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkbip9hFgRFwIv4mXJPnz%2Fuploads%2F2iy7kBGcujuv2yKffdQQ%2Fimage.png?alt=media&#x26;token=cb2f7286-07e3-421e-8c82-e48bf4abd7f5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2789002490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkbip9hFgRFwIv4mXJPnz%2Fuploads%2F2dSqTjikR5nnJNKanVHi%2Fimage.png?alt=media&#x26;token=bab8fc4d-27e1-493d-835f-18d67209a394" alt=""><figcaption></figcaption></figure>

* Can be customized with CSS and additional JavaScript from the TAP BackOffice. &#x20;

## **The page can accept different parameters in the URL**

* <https://aff.theaffiliateplatform.com/?**lang=uk>\*\* - opens in the specified language&#x20;
* <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
* <https://aff.theaffiliateplatform.com/?**ext\\_affiliate\\_id=12345> -\*\* affiliate will have their external ID set to the value specified in the URL. Only unique values are accepted. If an existing affiliate already has the same external ID, the registration will not be successful.

## Customizing page UI

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

<figure><img src="https://2789002490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkbip9hFgRFwIv4mXJPnz%2Fuploads%2FwseGtS4t6tee8T88Z3xt%2Fimage.png?alt=media&#x26;token=b1f3172b-1c03-4361-962e-253e4cf32a99" alt=""><figcaption></figcaption></figure>

Please check the example below.

```html
<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>
```

#### Add a custom favicon (browser tab icon)&#x20;

To add a favicon that appears in the browser tab, bookmarks, or address bar on your registration page, you can see the example below<br>

```html
<head>
<link rel="icon" id="favicon" href="/img/favicon.ico">
<head>
```

## 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

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

You can also make some fields optional or even hide them

```html
<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&#x20;
3. Select **'reg\_tc'**
4. Add Terms and Conditions (in HTML format) for the respective language/s

<figure><img src="https://2789002490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkbip9hFgRFwIv4mXJPnz%2Fuploads%2Fu2t0vwObiRQSS9177mYM%2Fimage.png?alt=media&#x26;token=73e1caef-4c54-4ed7-8118-b48c1eb7ed4d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2789002490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkbip9hFgRFwIv4mXJPnz%2Fuploads%2FNcDUGkeaLwag7upGYpLt%2Fimage.png?alt=media&#x26;token=39041100-52cb-447b-9717-b3b982384a97" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
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)&#x20;
{% endhint %}

<figure><img src="https://2789002490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkbip9hFgRFwIv4mXJPnz%2Fuploads%2FzXxzd0kYablBkE6CQQix%2Fimage.png?alt=media&#x26;token=70dad481-2e66-4667-a28b-58f3c6b592fa" alt=""><figcaption></figcaption></figure>

## 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

<figure><img src="https://2789002490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkbip9hFgRFwIv4mXJPnz%2Fuploads%2FnWPlPqgqAL7SeYckFwMB%2Fimage.png?alt=media&#x26;token=f6c53c8f-dc56-448e-9f44-6907528a567c" alt=""><figcaption></figcaption></figure>

```html
<!-- 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 -->

```

<figure><img src="https://2789002490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkbip9hFgRFwIv4mXJPnz%2Fuploads%2Fp2hb10MHrxbIgsoK3qaq%2Fimage.png?alt=media&#x26;token=af83850e-a550-4187-addc-e8b0c974345e" alt=""><figcaption></figcaption></figure>

## Supported languages and default language

\
**Location**:\
Affiliate Desk > Settings

* To set the supported languages for the affiliate registration page and login panel, select the desired language(s) from '**Available languages**' drop down menu.
* To set a default language for the affiliate registration page and login panel, select the preferred language from the **'Default Language'** drop down menu. The registration and login pages will open in the language variation set as the default.<br>

<figure><img src="https://2789002490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkbip9hFgRFwIv4mXJPnz%2Fuploads%2FutnZ5iuZkYPpPUtkW0jY%2Fimage.png?alt=media&#x26;token=ca3bd25d-4d1a-47e2-8d1f-c1866675d411" alt=""><figcaption></figcaption></figure>