How to integrate with Wix

Wix is a website builder that allows you to quickly create landing pages and small websites using their drag-and-drop builder or by choosing from templates. 

By integrating Prefinery with your Wix website, you can add users that submit your Wix form into your Prefinery campaign. 

Here's how: 

The following requires a Wix paid plan and that your Wix site is connected to a domain. 

1

Due to Wix having very limited and restricted support for adding HTML widgets which breaks Prefinery's referral link tracking, you cannot embed Prefinery's signup form. Instead, you need to use a Wix form and the Prefinery JavaScript Web API

Following Wix's guide on adding and setting up a form on your site, in the bottom-left corner of your dashboard click on Edit Site to go into the Wix Website Editor. 

In the Editor, select the section you want to place your new form into, then click on the Add (+) button > Contact & Forms. Choose the type of form you'd like to use (make sure it will require an email address) and drag-and-drop it into the section. 

When you're done adding and configuring your form, click on Publish in the top-right corner then select View Site

2

While viewing the webpage where your form is at, open your browser's Developer Tools (here's how for the different browsers: Chrome, Edge, Firefox, Safari). 

Click on the Inspector Tool, then click on the whole form and you should be able to see the <form> tag selected in the HTML code view.  You will need the value of the <form> tag's id property - it's the string enclosed with double quotes (in the example below, it'd be comp-kkcuhzzq ). 

You'll also need to get the  id value of the <input> tag for the email address field (in the example below, it'd be input_comp-kkcuhzzq ). 

You'll need these two values in the next steps. 

3

In your Prefinery project dashboard, navigate to Installation then copy the JavaScript Snippet. 

4

Following Wix's guide on embedding custom code on your site, from your Wix dashboard navigate to Settings, then under Advanced select Custom Code

In order to add Custom Code, Wix requires a paid plan and that your Wix site is connected to a domain. 

In the Custom Code page, click on the + Add Custom Code, then in the popup modal that appears select Code Settings tab and paste in the Prefinery JavaScript Snippet you copied earlier. 


At this point, you have two options depending on how much of the integration you'd like to customize: 

"Magic Form" Feature Easy to implement. Best for non-developers and those without access to a developer to help in writing scripts. Cannot make use of custom events. 
JavaScript Web API Best for developers and those comfortable with JavaScript. Allows the use of custom events and different API calls. 

"Magic Form" Feature

This process is pretty straightforward. From your project dashboard, just head to Installation then in section 2. Push Users into Prefinery find and select Magic Form tab. 

Within the tab, click on the " clicking here" link then in the Form Selector field that appears enter your Wix <form> tag's id value (in the example below, it'd be #comp-kkcuhzzq). Make sure to include a hashtag # right before it. 

Note: Please allow up to 10 minutes for this change to take effect in case you're wondering why your test submissions aren't getting through. Also make sure that you've entered the correct  id value with the hashtag # in the beginning, and no whitespace in between. 

Skip to the last step when done.


JavaScript Web API

To use the JavaScript Web API in sending form submissions to Prefinery, copy the following code snippet and paste it in right after the Prefinery JavaScript Snippet. Make sure to replace YOUR_FORM_ID_HERE and YOUR_EMAIL_FIELD_ID_HERE with the actual IDs you got in step 2. 

<script type="text/javascript">
window.addEventListener('load', function() {
  // Listen for submissions to the form
  var form = document.getElementById('YOUR_FORM_ID_HERE');
  if (form.attachEvent) {
    form.attachEvent('submit', processSubscriptionForm);
  } else {
    form.addEventListener('submit', processSubscriptionForm);
  }
});

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

  var email = document.getElementById('YOUR_EMAIL_FIELD_ID_HERE').value;
  prefinery('addUser', email, function(user) {
    // Place your form submit action code here
  });
}
</script>

Note:  event.preventDefault(); will stop the original form submit behavior from occurring and is included to ensure that the asynchronous call to add the user to Prefinery completes successfully. You will need to write/provide the form submit event in the addUser callback function. What code is placed there depends on your requirements. 

Proceed to the next step when done.


5

Back in Wix, complete the rest as follows: 

Name: Prefinery
Add Code to Pages: All Pages > Load Code on each new page
Place Code in: Head

Hit Apply when done. Also, make sure that the newly-added custom code is Enabled

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