How to set up the affiliate program registration form on a custom page
When you create your Affiliatly account, you are provided with a specific link to your affiliate registration form where they can sign up to join your program.
However, we understand that some of you may be interested on adding the registration form to an inner page inside their store (sometimes even to a private page) for better consistency or control.
In case you're interested, you can achieve this by adding the iframe code snippet for your program registration to a page of your choice.
The easiest and simplest way to get the codes for your account is by logging into your admin panel, then going to Setup -> Step 4. Affiliate Registration and it will show you the exact snippets for your account that are available for you to add to your page depending on your preference.
Please note that the af-XXXXXXX in this example is replaced by your actual Affiliatly Account ID, found in the tab Account.
When you see it inside your Affiliatly admin panel it's ready to be copied and pasted.
Next, let's go over some details and tips for both snippets so you get to understand each and decide which one would you like to use:
Form only
This is for those who want to dedicate a portion of the page to the iframe and would want to invest more time in customizing the rest of the content of the page where the registration will be placed.
The snippet looks like this:
<iframe src="https://www.affiliatly.com/af-10XXX/affiliate.panel?mode=register&form_only=1" width="100%" height="800" frameborder="0"></iframe>
Whole page with banner and text
This is for those who want to dedicate the whole page to the affiliates registration without adding any other extra content than the text and banner you can customize from Affiliatly.
The snippet looks like this:
<iframe src="https://www.affiliatly.com/af-10XXX/affiliate.panel?mode=register&frame=1" width="100%" height="1100" frameborder="0"></iframe>
We strongly recommend to take these snippets as just examples and just get yours in your Affiliatly admin panel (Setup -> 5. Registration and login pages).
The reason is that the snippets vary but the one that you will find in your admin panel will always be the correct one for you.
Some frequently encountered situations
- The snippet doesn't fits as perfect as you imagined on the page you embedded it.
If you look closely to the snippets you will notice a width parameter and a height parameter. They have default recommended values but you can increase/decrease them accordingly in case you're looking to make it fit better on the page you're setting up.
- Sometimes, after you set the width and height to a state you're comfortable with the iframe's dimensions and even though all elements are displayed the scrollbars would still be displayed affecting the overall design of the page.
If you experience this there's an additional parameter you could add to get rid of the scrollbars: scrolling="no"
The result should look similar to this:
Form only: <iframe src="https://www.affiliatly.com/af-10XXX/affiliate.panel?mode=register&form_only=1" width="100%" height="800" frameborder="0" scrolling="no"></iframe>
Whole page with banner and text: <iframe src="https://www.affiliatly.com/af-10XXX/affiliate.panel?mode=register&frame=1" width="100%" height="1100" frameborder="0" scrolling="no"></iframe>
That's it for this guide. If you still need help with this or any other topic please reach our support team and we'll be happy to assist you.