> ## Documentation Index
> Fetch the complete documentation index at: https://docs.partnero.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Refer-a-friend forms: Embeddable & pop-up referral widgets

> Add no-code referral forms to your website. Create embeddable widgets and pop-up forms for customer referral programs with instant rewards.

Turn your customers into brand advocates with Partnero's no-code refer-a-friend forms. Add embeddable referral widgets or automated pop-ups to your website—no developers required.

## What Are Refer-a-Friend Forms?

Refer-a-friend forms are pre-built widgets that let your customers refer friends directly from your website. Available as:

* **Embeddable forms**—Place anywhere on your site (sidebar, footer, dedicated page)
* **Pop-up forms**—Automatically appear based on visitor behavior (time on page, scroll depth, exit intent)

Both options work without writing code and can be fully customized to match your brand.

<Note>
  Before proceeding, you should have a refer-a-friend program created on Partnero. If you haven't created one yet, refer to the [Knowledge Base](https://help.partnero.com) for guidance.
</Note>

## How Customer Referrals Work

1. A visitor enters their email to refer friends and earn a reward
2. They enter their friend's information (name and email)
3. A thank-you page is displayed
4. The referred friend receives an invitation email
5. When the friend signs up, both parties can receive rewards

## Step 1: Install PartneroJS

Install the PartneroJS snippet to enable the forms on your website.

<Steps>
  <Step title="Get your snippet">
    1. Log in to [Partnero](https://app.partnero.com)
    2. Go to **Programs** and select your refer-a-friend program
    3. Navigate to **Integration** in the sidebar
    4. Copy the PartneroJS snippet
  </Step>

  <Step title="Install the snippet">
    Paste the snippet into your website's HTML just before the closing `</head>` tag:

    ```html theme={null}
    <!-- PartneroJS -->
    <script>
        (function(p,t,n,e,r,o){ p['__partnerObject']=r;function f(){
        var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
        f.q=f.q||[];p[r]=p[r]||f.bind(f.q);p[r].q=p[r].q||f.q;o=t.createElement(n);
        var _=t.getElementsByTagName(n)[0];o.async=1;o.src=e+'?v'+(~~(new Date().getTime()/1e6));
        _.parentNode.insertBefore(o,_);})(window, document, 'script', 'https://app.partnero.com/js/universal.js', 'po');
        po('settings', 'assets_host', 'https://assets.partnero.com');
        po('program', 'PUBLIC_PROGRAM_ID', 'load');
    </script>
    <!-- End PartneroJS -->
    ```
  </Step>
</Steps>

## Step 2: Choose Your Form Type

You can use an embeddable form, a pop-up, or both. Configure them in your Partnero dashboard under **Referral portal → Forms**.

<Tabs>
  <Tab title="Embeddable Form">
    ### Embeddable Form

    Display a refer-a-friend form anywhere on your website by adding a simple HTML element.

    **To enable:**

    1. Go to **Referral portal → Forms** in your program settings
    2. Enable the **Embeddable form** toggle
    3. Copy the provided snippet

    **Add to your website:**

    Place this HTML element wherever you want the form to appear (sidebar, footer, dedicated page, etc.):

    ```html theme={null}
    <div id="po-refer-a-friend-embeddable-signup-PUBLIC_PROGRAM_ID"></div>
    ```

    <Warning>
      Replace `PUBLIC_PROGRAM_ID` with your actual program ID from the Partnero dashboard.
    </Warning>

    The form will automatically render inside this div when the page loads.
  </Tab>

  <Tab title="Pop-up Form">
    ### Pop-up Form

    Automatically display a refer-a-friend pop-up to visitors based on trigger conditions.

    **To enable:**

    1. Go to **Referral portal → Forms** in your program settings
    2. Enable the **Pop-up form** toggle
    3. Configure trigger and visibility settings

    <Tip>
      For pop-up forms, you only need the PartneroJS snippet from Step 1. No additional HTML is required—the pop-up appears automatically based on your trigger settings.
    </Tip>

    ### Trigger Settings

    Configure when the pop-up appears:

    | Trigger            | Description                                            |
    | ------------------ | ------------------------------------------------------ |
    | **Wait X seconds** | Show after visitor spends specified time on page       |
    | **Scroll to X%**   | Show when visitor scrolls to 50%, 75%, or 100% of page |
    | **Before closing** | Show when visitor moves mouse toward closing the tab   |

    ### Frequency Settings

    Control how often returning visitors see the pop-up:

    * Show again after X days/weeks/months
    * Always show (for testing)

    ### Visibility Settings

    Control where the pop-up appears:

    | Setting                    | Description                        |
    | -------------------------- | ---------------------------------- |
    | **All pages**              | Show on every page                 |
    | **Hide on specific pages** | Exclude certain URLs               |
    | **Show on specific pages** | Only show on certain URLs          |
    | **Device targeting**       | Hide on desktop, mobile, or tablet |
  </Tab>
</Tabs>

## Configure Rewards

Set up instant rewards for both the referrer and their friend.

Go to **Referral portal → Forms** and find the **Reward delivery** section:

<AccordionGroup>
  <Accordion title="Follow program settings">
    Rewards are delivered based on your program's default reward configuration. This is the recommended option for most use cases.
  </Accordion>

  <Accordion title="Instant delivery">
    Send rewards immediately when the form is completed:

    **For the referring customer:**

    * No reward
    * Generic coupon (existing coupon code)
    * Dynamic coupon (auto-generated unique codes)

    **For the referred friend:**

    * No reward
    * Generic coupon
    * Dynamic coupon

    <Info>
      With instant delivery, the referred friend receives an invitation and gets their reward immediately after signing up. The referrer receives their reward right after the friend signs up.
    </Info>
  </Accordion>
</AccordionGroup>

## Customize Appearance

Customize how your form looks to match your brand in the **Design & appearance** section:

| Setting              | Options                                    |
| -------------------- | ------------------------------------------ |
| **Branding**         | None, Logo, or Symbol                      |
| **Background color** | White, gray shades, or custom hex          |
| **Gradient color**   | Black, gray, blue, teal, none, or custom   |
| **Layout corners**   | Square, rounded, or fully rounded          |
| **Layout style**     | Border, shadow, or none                    |
| **Text color**       | Gray shades or custom hex                  |
| **Button color**     | Indigo, blue, cyan, teal, black, or custom |
| **Input style**      | Default, shadow, or transparent            |

## Customize Content

Edit the copy for each step in the **Content** section:

### Step 1: Customer

* **Title**—Main heading (e.g., "Refer a Friend")
* **Subtitle**—Optional secondary heading
* **Description**—Explain the benefits of referring
* **Custom fields**—Add additional form fields
* **Button text**—CTA button label
* **Marketing consent**—Optional opt-in checkbox
* **Terms of service**—Link to your terms

### Step 2: Friend

* **Title**—Heading for friend invitation step
* **Description**—Explain what happens next
* **Button text**—Submit button label

### Thank You Page

* **Title**—Confirmation heading
* **Description**—Thank the referrer
* **Reward text**—Explain what reward they'll receive

## Email Templates

Customize the emails sent during the referral process in the **Emails** section:

| Email                                      | When Sent                                   |
| ------------------------------------------ | ------------------------------------------- |
| **Referring customer reward notification** | When the referrer receives their reward     |
| **Referred customer reward notification**  | When the friend receives their reward       |
| **Friend invitation**                      | When someone shares a referral via the form |

## Frequently Asked Questions

<AccordionGroup>
  <Accordion title="Do I need coding skills to add referral forms?">
    No. Partnero's refer-a-friend forms are completely no-code. You only need to paste a small JavaScript snippet once, then configure everything through the dashboard. For embeddable forms, you add one HTML element where you want the form to appear.
  </Accordion>

  <Accordion title="Can I use both embeddable and pop-up forms together?">
    Yes. Many businesses use embeddable forms on dedicated referral pages while also showing pop-ups to visitors who haven't engaged with the referral program yet.
  </Accordion>

  <Accordion title="What rewards can I offer for referrals?">
    You can offer instant coupon codes (generic or dynamically generated), discounts, store credits, or follow your program's default reward settings. Both the referrer and the referred friend can receive different rewards.
  </Accordion>

  <Accordion title="How do I prevent spam submissions?">
    The forms automatically validate email addresses and prevent duplicate submissions. You can also add terms of service checkboxes and marketing consent fields.
  </Accordion>

  <Accordion title="Can I customize the form design to match my brand?">
    Yes. You can customize colors, fonts, corner styles, branding (logo/symbol), button styles, and all text content. The forms are designed to blend seamlessly with any website design.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Refer-a-Friend API" icon="code" href="/guides/tracking/refer-a-friend-api">
    For custom integrations with full control
  </Card>

  <Card title="Knowledge Base" icon="book" href="https://help.partnero.com/article/325-embeddable-and-pop-up-forms-for-refer-a-friend-programs">
    Detailed walkthrough with screenshots
  </Card>
</CardGroup>