How to Use Prefinery with a JavaScript Framework (React/Vue)

We've had plenty of customers that use a frontend single-page JavaScript framework, like React, Vue, or Express, successfully integrate Prefinery with their SPA (single page application). 

Option 1: Embed the Prefinery Signup Form on a Page

The easiest approach is to embed the Signup Form on a page on your site. 

Depending on implementation you might run into an issue with displaying the Prefinery form on the page. Below, we'll quickly walk you through how the Prefinery JavaScript snippet works so you'll understand how you can better implement it on your end or fix any issue you may experience with getting the form to having.

Understanding How Prefinery JavaScript Snippet Works

As you know, from the Installation page in your Prefinery account, there are two parts to it - the JavaScript snippet and the <div>, which is replaced with the form. This is what then happens:

  1. The JavaScript snippet (which you've copied and pasted into the <head> of your page) is deferred and loads when the DOM is ready.
  2. When the JavaScript snippet loads, we scan the DOM for any <div> elements with the prefinery-form-embed class value and replace that <div> with the embedded signup form. 

Displaying Your Signup Form

The problem with SPA's is that there is client-side rendering/writing of the DOM, which happens after our JavaScript snippet loads. Basically, our snippet runs before prefinery-form-embed is rendered on the page which results into no signup form being shown.

To fix or avoid this issue you'll need to load/reload the JS after every time the prefinery-form-embed element is available and needed in the DOM, or trigger a page refresh (from within the JS framework you are using) after the DOM is written.

Option 2: Post Data to Your Project's JSONP Endpoint

JSONP is a method for sending JSON data without worrying about cross-domain issues. You can find your project's unique JSONP endpoint by navigating to Installation > Frontend Framework.

You will design your own HTML form, intercept the submit event, build a JSON payload representing the data the user entered in the form, and submit that payload to your JSONP endpoint.

The following is an example of a simple form, illustrating what data can be collected from your users and sent to Prefinery:

<form action="#" class="pfy-signup-form" method="post">
  <input id="referrer" name="referrer" type="hidden" value="">
  <input id="referral_token" name="referral_token" type="hidden" value="">
  <input id="utm_source" name="utm_source" type="hidden" value="">
  <input id="utm_medium" name="utm_medium" type="hidden" value="">
  <input id="utm_campaign" name="utm_campaign" type="hidden" value="">
  <input id="utm_term" name="utm_term" type="hidden" value="">
  <input id="utm_content" name="utm_content" type="hidden" value="">

  <input id="email" name="email" type="email" autocomplete="email">
  <input id="first_name" name="first_name" type="text" autocomplete="given-name">
  <input id="last_name" name="last_name" type="text" autocomplete="family-name">

  <input type="submit" value="Submit">

Note: Add the class  pfy-signup-form to your HTML form and include the hidden input fields (as shown above) with the IDs referrer, referral_token, utm_source, utm_medium, utm_campaign, utm_term, and utm_content, in order to have their respective values automatically set by the Prefinery JavaScript snippet.

When the user submits the form you will build a JSON payload (as shown below) and submit it to your project's JSONP endpoint.

  user: {
    profile: {
      email: '',
      first_name: 'Bruce',
      last_name: 'Wayne'
  referrer: '',
  referral_token: 'fAke', // Credit owner of 'fAke' with referring this user
  utm_source: 'Google',
  utm_medium: 'cpc',
  utm_campaign: 'charity_benefit',
  utm_term: 'bruce+wayne+charity+benefit',
  utm_content: 'banner'

There are various NPM packages which can help make your JSONP request, including jsonp and axios-jsonp-pro.

Still need help? How can we help? How can we help?