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 display.

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:

The JavaScript snippet (which you've copied and pasted into the <head> of your page) is deferred and loads when the DOM is ready.
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.

Alternatively, and in particular if you are using a Single Page Application (SPA) framework and find that you need to explicitly re-initialize Prefinery's forms after your page HTML has been written, you can call the initForms method (see: Initialize Forms) after the DOM has been written which will re-initialize the Prefinery form(s) on the page.

Option 2: Use the JavaScript Web API

You can use Prefinery's JavaScript Web API in order to add users to your project.

prefinery('addUser', {
  email: 'bruce@wayneenterprises.com',
  first_name: 'Bruce',
  last_name: 'Wayne',
}, function (user) {
  console.log('User: ' + JSON.stringify(user));
});