> For the complete documentation index, see [llms.txt](https://help.theaffiliateplatform.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.theaffiliateplatform.com/apis-and-configurations/registration-page.md).

# Registration page

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

You can also check [Registration API](/apis-and-configurations/registration-api.md) if you want to implement your 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/>

## **The page is supporting**

* Different languages (go to **Configuration > Settings**, **General** tab, **Affiliate App Features** section, to set the available languages and the default language for your registration page; see **Supported languages and default language** below)
* All the texts can be adjusted by the operator from TAP BackOffice: go to **Tools > Translation \ Values** and filter by **Area** to find the relevant translation keys: **Affiliation** for the registration page, and **Affiliation Admin** for the affiliates backoffice and its login page

<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&amp;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&amp;token=bab8fc4d-27e1-493d-835f-18d67209a394" alt=""><figcaption></figcaption></figure>

* 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. The ID must belong to an active manager of your program; otherwise it is ignored. The affiliate is not approved automatically: it waits in **Affiliates → Pending Approval** until someone approves it.
* <https://aff.theaffiliateplatform.com/?**paff=456>\*\* - affiliate will be assigned as a child to the affiliate with ID 456. The ID must belong to an affiliate of your program; otherwise it is ignored.
* <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 **Configuration > Settings**, on the **Custom JS & CSS (Reg. Screen)** tab. The page adds this code to its `<head>`, so you can use `<style>`, `<script>` and `<link>` tags.

<figure><img src="https://2789002490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkbip9hFgRFwIv4mXJPnz%2Fuploads%2FLBTCqwEjnoOFAG78qcSG%2Fimage.png?alt=media&amp;token=1e1f1374-e6af-4bbc-8636-5c5e1182fe46" alt=""><figcaption><p>Custom JS &#x26; CSS (Reg. Screen) tab with &#x3C;style> tags</p></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)

To add a favicon that appears in the browser tab, bookmarks, or address bar on your registration page, add a `<link>` tag on the same tab. The code already goes into the page's `<head>`, so do not wrap it in `<head>` tags. Use the full address of an icon on your own site, as in the example below.

```html
<link rel="icon" id="favicon" href="https://www.example.com/favicon.ico">
```

## Change the set of required fields

You can change a set of required fields on the same **Custom JS & CSS (Reg. Screen)** tab. 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>
```

The fields you can change this way are `phone_number`, `skype`, `company`, `web_site_url`, `country` and `comments`. Each field sits in a block with the same ID plus `_block`, for example `country_block`. First name, last name, email, username, password and the Terms & Conditions checkbox are always required: the server refuses a registration without them, even if you hide them on the page.

## Registration checks

* **reCAPTCHA**: when **Enable recaptcha on the registration page and API** is on (**Configuration > Settings**, **General** tab, **Affiliate App Features** section), every registration is checked with Google reCAPTCHA, and the ones that fail the check are refused. Turn it off only if you build your own registration page and call the [Registration API](/apis-and-configurations/registration-api.md) from your server.
* **Mail validation on registration**: TAP managers can turn on a check of the email address. With **Validate, mark as bounced**, the registration goes through and a bad address is marked as bounced. With **Validate, fail registration**, a registration with a bad address is refused. Ask your TAP manager if you want to change this setting.

## 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 (**Area**: **Affiliation**) to find Registration page translation keys
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&amp;token=73e1caef-4c54-4ed7-8118-b48c1eb7ed4d" alt=""><figcaption><p>Translation \ Values tab - displayed values for the Area: Affiliation (Registration Page)</p></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&amp;token=39041100-52cb-447b-9717-b3b982384a97" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
You can also set the Terms & Conditions in **Configuration > Settings**, on the **T\&C** tab (text editor) or the **T\&C (HTML)** tab (HTML code). Both tabs edit the same text. The registration page first looks for the **reg\_tc** text in the visitor's language. When that language has no text, it uses the default language, then English. The page shows the Terms & Conditions from Settings only when the **reg\_tc** text it finds is empty or exactly "Empty". Set the **reg\_tc** text for every language you offer: either to your Terms & Conditions, or to the word Empty to use the text from Settings.
{% endhint %}

<figure><img src="https://2789002490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkbip9hFgRFwIv4mXJPnz%2Fuploads%2FlDAgBvFURdvUdG9IYPv3%2Fimage.png?alt=media&amp;token=38bfc6aa-af2b-4633-ad8a-fd34e4819bd9" alt=""><figcaption><p>T&#x26;C (HTML) tab with Terms &#x26; Conditions in HTML code </p></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 **Configuration > Settings**, on the **Custom JS (Aff. App)** tab. In **JS position**, choose **Add before and after login** to run the code on the login page too, as in the example below. With **Add only after login**, the code runs only after the affiliate logs in. Please check the example below

![Custom JS (Aff. App) tab with the JS position field](https://2789002490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fkbip9hFgRFwIv4mXJPnz%2Fuploads%2FL19xkpXA0IIbHgKK0N2L%2Ftap-settings-custom-js-aff-app-tab-3dd30147-0e8058.jpg?alt=media)

```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://www.example.com/terms-and-conditions", "_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&amp;token=af83850e-a550-4187-addc-e8b0c974345e" alt=""><figcaption><p>Login page of the affiliate portal with custom widget</p></figcaption></figure>

## Supported languages and default language

\
**Location**:\
Affiliates Desk > Configuration > Settings > **General** tab > **Affiliate App Features** section

* 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%2FZ7iZHGIxQO5dkAs0x7mM%2Fimage.png?alt=media&amp;token=efd77d51-4b10-4aa5-9db5-8ab98422dafa" alt=""><figcaption><p>Supported languages and Default Language set for the affiliate registration page and login panel</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.theaffiliateplatform.com/apis-and-configurations/registration-page.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
