Tutorials

How to implement the Prefinery JavaScript Web API in common scenarios.

Example 1: Add a user when they submit a non-Prefinery form

There are times when you may not be using Prefinery's Signup Form, which automatically adds users to your campaign and tracks referrals. Some common scenarios are:

  • You're using a form provided by your landing page provider (LeadPages, Webflow, Instapage, etc.),
  • You're using a form provided by a WordPress plugin,
  • You're using a checkout form provided by your e-commerce platform (Shopify, WooCommerce, etc.),
  • Youre built your own custom form.

You can use the prefinery('addUser') method to add a user to your Prefinery campaign.

Example Form

    

<!DOCTYPE html>
<html>

<head>
  <title>Your Website</title>
  <script>prefinery=window.prefinery||function(){(window.prefinery.q=window.prefinery.q||[]).push(arguments)};</script>
  <script src="https://widget.prefinery.com/widget/v2/YOUR_PROJECT_UID.js" defer></script>
</head>

<body>
  <form id="form" action="/path-on-your-site" method="post">
    <label for="email">Email Address</label>
    <input type="email" name="email" id="email" autocomplete="email">
    <input type="submit" value="Submit">
  </form>
</body>

</html>

Example JavaScript

    
  window.addEventListener('load', function() {
    // Listen for submissions to the form
    var form = document.getElementById('pfy_signup_form');
    if (form.attachEvent) {
      form.attachEvent('submit', processForm);
    } else {
      form.addEventListener('submit', processForm);
    }
  });

  // Callback function that is invoked when the form is submitted
  function processForm(event) {
    // Prevent the default form action
    event.preventDefault();

    var email = document.getElementById('email').value;
    prefinery('addUser', email, function(user) {
      // Do something with the newly added user
      console.log('User: ' + JSON.stringify(user));
    });
  }

Note: Prefinery automatically credits the referring user with having referred this person. There is no explicit trigger/track referral method.

Example 2: Trigger rewards when a user performs a custom event (e.g. on purchase or upgrade)

If you have set up Rewards inside your campaign that are awarded when the user refers their friend and their friend performs a custom action (e.g. purchase, upgrade), then you can make a prefinery('triggerRewards') call in order to tell us that the person has performed this action/event.

If having performed that action causes any rewards to be earned by any users, then those rewards will be created. 

    
    prefinery('triggerRewards', {
      email: 'user@email.com',
      event: 'purchase',
    });

If you would like to add the user to your campaign and record that they performed a custom action/event at the same time, you can do so by: 

    
    prefinery('addUser', email, function(user) {
      prefinery('triggerRewards', {
        event: 'purchase',
      });
    });

Make sure you set up webhooks to catch the reward_earned or reward_delivered events, or set up a Zapier intetration and handle the Reward Earned or Reward Delivered Triggers, in order to automatically deliver rewards to your users. Please see our guide on How to deliver rewards for more information.

Example 3: Add a user and show their personalized referral page in a popup (modal dialog)

    
    prefinery('addUser', email, function(user) {
      prefinery('popupReferralPage');
    });