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 from your Wix website into your Prefinery campaign/project. 

There's two parts to this: (1) installing the Prefinery JavaScript Snippet which helps track shares and referrals, among other functionalities needed for your campaign; and (2) the method for adding users to your Prefinery project from your website. 

Installing the Prefinery JavaScript Snippet

Here's how you install the Prefinery JavaScript Snippet on your Wix website. 

1

From your project dashboard, navigate to Installation and under the 1. Install the JavaScript Snippet section click-to-copy your project's script snippet. 

2

In your Wix dashboard, make sure you're accessing the correct Wix site, then navigate to Settings > Advanced section > Custom Code. 

3

In the Custom Code page, click on + Add Custom Code. A popup will appear. 

In the popup's  Code Settings tab, paste in your Prefinery JavaScript Snippet on the provided box, give your custom code a name, make sure it's added to All pages > Load code on each new page, and that it's specifically placed in the Head of the website. 

Next, click on the Code Type tab, and select Essential. Hit Apply when done to save your changes. 

Adding users to your Prefinery project from your Wix website

Due to Wix having very limited, restricted support for embedding 3rd-party content, you cannot use the  embedded Prefinery signup form nor the raw HTML form options. 

Instead, listed below are alternatives options for you to add users to your Prefinery project from your Wix website: 

Your own Wix button + Prefinery popup form (on button click)

This option is the easiest to set up, and requires no custom coding from your end. 

1

In your Wix dashboard, make sure you're accessing the correct Wix site, then navigate to Home > Edit Site. 

2

In the Wix editor, make sure you're editing the correct page where you want to place your popup button, then click on the + (plus) button, choose Button then select and drag-and-drop any of the button that you want to use into your page canvas. Click on the Publish button when done. 

After publishing, choose to View Site. 

3

While viewing the published website (not in the editor), navigate to the page where you've placed your button, then right-click on the button and choose Inspect (if using Chrome). If using any other browser, please refer to this article on how to for your particular browser. 

Find the <button> element and copy the second class value like as underlined below. Please note that this is just an example and your button's class value will be different. 

4

In your Prefinery project, navigate to Installation > 2. Push Users into Prefinery section > Modal Dialog (Popup) > clicking here and in the Popup Trigger box paste in the button class value you copied from the previous step. Make sure to prepend it with a . (dot/period) to indicate that it's a class. 

That's it! Changes may take up to 10 minutes to take effect. You can test out the button on your Wix page by refreshing the page and clicking on the button. For more information on testing signups, check out our guide here.

Your own Wix form + Prefinery JavaScript Web API

While we provide you the base script for adding users to your project via this method as well as access to our JavaScript Web API's full documentation, any additional custom form design and functionality is up to you or your dev to implement on your end, using our documentation for reference. 

1

In your Wix dashboard, make sure you're accessing the correct Wix site, then navigate to Home > Edit Site.

2

Follow Wix's guide here on how to add a form to your website: Wix Forms: Adding and Setting Up a Form on Your Site

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. 

3

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. 

4

To use the JavaScript Web API in sending form submissions to Prefinery, copy the following code 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">
// auto-reload page for scripts to run properly
(() => {
    if (window.localStorage) {
        if (!localStorage.getItem('reload')) {
            localStorage['reload'] = true;
            window.location.reload();
        } else {
            localStorage.removeItem('reload');
        }
    }
})(); 

// script to add user to Prefinery
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 your Wix dashboard, make sure you're accessing the correct Wix site, then navigate to  Settings > Advanced section > Custom Code. 

In the  Custom Code page, click on + Add Custom Code. A popup will appear. 

In the popup's Code Settings tab, paste in the code from the previous step on the provided box (make sure you've updated the form and email field IDs on it already), give your custom code a Name, make sure it's added to the specific page where your form is at, and that it's specifically placed in the Head of the website. 

Next, click on the  Code Type tab, and select Essential. Hit Apply when done to save your changes. 

That's it! You can test out the form on your Wix page by refreshing the page and submitting the form. For more information on testing signups, check out our guide here.

Your own Wix form + Prefinery Magic Form Beta feature

1

In your Wix dashboard, make sure you're accessing the correct Wix site, then navigate to Home > Edit Site.

2

Follow Wix's guide here on how to add a form to your website: Wix Forms: Adding and Setting Up a Form on Your Site

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. 

3

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 ). Copy it - you'll need this value in the next step. 

4

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 to indicate that it's an ID. 

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. 

5

Back in your Wix dashboard, make sure you're accessing the correct Wix site, then navigate to  Settings > Advanced section > Custom Code. 

In the  Custom Code page, click on + Add Custom Code. A popup will appear. 

Copy the following script: 

<script type="text/javascript">
// auto-reload page so scripts run properly
(() => {
    if (window.localStorage) {
        if (!localStorage.getItem('reload')) {
            localStorage['reload'] = true;
            window.location.reload();
        } else {
            localStorage.removeItem('reload');
        }
    }
})(); 
</script>
	

In the popup's Code Settings tab, paste in the code you just copied on the provided box, give your custom code a Name, make sure it's added to the specific page where your form is at, and that it's specifically placed in the Head of the website. 

Next, click on the  Code Type tab, and select Essential. Hit Apply when done to save your changes. 

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. 

That's it! You can test out the form on your Wix page by refreshing the page and submitting the form. For more information on testing signups, check out our guide here.