Embed affiliate portal on your website

The embed feature allows you to place a fully customizable affiliate registration form directly on your website using an iframe. This creates a seamless signup experience where affiliates can register without leaving your site.

• Embed registration forms directly on your website
• Fully customizable colors, text, and styling
• Works with any website or CMS
• Seamless user experience without redirects

What is the Embed Feature?

Instead of directing potential affiliates to a separate registration page, you can embed the registration form directly on your website. The form is displayed in an iframe and can be styled to match your brand perfectly.

When an affiliate completes registration through the embedded form, they're automatically enrolled in your program and can start sharing their referral links immediately.

How to Access the Embed Editor

To customize and get your embed code:

1. Navigate to your program — Go to your dashboard and select the affiliate program you want to embed.
2. Open the embed editor — Click on the program, then navigate to the embed section or click "Embed signup form" from the program menu.
3. Customize your form — Use the visual editor to adjust colors, text, borders, and other styling options to match your brand.
4. Copy the embed code — Once you're happy with the design, copy the generated HTML or React code.

The embed editor provides a live preview, so you can see exactly how the form will look before adding it to your website.

Customization Options

The embed form offers extensive customization options to match your brand:

Colors & Styling

• Background color — Set the form background color
• Text color — Customize text color for labels and content
• Accent color — Set the button and focus border color
• Border color — Customize input and form border colors
• Input background — Set the background color for input fields
• Border radius — Adjust the roundness of corners (0-20px)

Text & Labels

• Button text — Customize the submit button label (e.g., "Join Affiliate Program")
• Success message — Set the message shown after successful registration
• Field labels — Customize labels for name, email, and password fields
• Placeholders — Set placeholder text for input fields

Form Options

• Show/hide name field — Toggle whether the name field is required
• Show password hint — Display or hide the "Minimum 6 characters" hint
• Text size — Adjust font size for all text elements
• Button padding — Control the vertical padding of the submit button
• Show outer border — Toggle the outer border around the form

Size & Layout

• Width — Set iframe width (e.g., "100%" or "500px")
• Height — Set iframe height (e.g., "500px" or "600px")

Embedding on Your Website

Once you've customized your form, you'll receive embed code in two formats:

HTML Format

Use this for standard HTML websites, WordPress, or any CMS that supports iframes:

<iframe
  src="https://yourdomain.com/embed/your-program-slug?bgColor=#ffffff&accentColor=#3b82f6"
  width="100%"
  height="500"
  frameborder="0"
  style="border: none; border-radius: 12px;"
></iframe>

React Format

Use this format if you're building with React or Next.js:

<iframe
  src="https://yourdomain.com/embed/your-program-slug?bgColor=#ffffff&accentColor=#3b82f6"
  width="100%"
  height="500"
  frameBorder="0"
  style={{ border: 'none', borderRadius: '12px' }}
/>

Simply paste the code into your HTML or React component where you want the form to appear. The form will automatically load and handle all registration logic.

Best Practices

To get the most out of your embedded affiliate portal:

• Match your brand — Use colors and styling that match your website's design for a seamless experience
• Choose the right size — Set appropriate width and height so the form displays properly on all devices
• Test on mobile — Ensure the iframe is responsive and works well on mobile devices
• Place strategically — Embed the form on pages where affiliates are most likely to sign up, such as your affiliate program information page
• Provide context — Add text above or around the form explaining the benefits of joining your affiliate program
• Set redirect URL — Configure where affiliates are redirected after successful registration (defaults to the affiliate login page)