How to Integrate with Typeform

Typeform is an online form builder software as a service popularly used for creating online surveys. Typeform and Prefinery integrate with each other 2-way, but there are limitations, notably with the second option below: 

Prefinery to Typeform

In this option, which is what we recommend, you use the Prefinery form on your website (e.g. to collect the user's email address and also track shares and referrals) then as soon as they submit the form redirect the user to Typeform (e.g. to collect additional info from the user). 

This method will allow you to pre-fill the Typeform as well with the user's email address, and also show to the user their referral status page only after completing the Typeform.

In summary, the user would land on your website (which is also where referral links would point to), fill out and submit the Prefinery form, get redirected to the Typeform to continue filling it out and submitting, then redirected back to your website where their referral status page is shown to them where they can access their referral link, share buttons, leaderboard, and other stats. 

Here's how you can do that: 

1.) Setup your Typeform to be pre-populated. In particular, since you already collect the user's email address with the Prefinery signup form, you can make the email field in Typeform a hidden field which you prefill using the next step below.

2.) Install the Prefinery form on your website (e.g. at https://www.yourwebsite.com/signup/ ). Then, set your form to redirect to your Typeform URL on submit as described here: How to pass user data as redirect URL parameters on form submit

That means your script could be like as follows:

<script>

window.top.location.href = "https://yourname.typeform.com/to/abc123#email=" + prefinery_data.user.email;

</script>

At this point, when the user submits your Prefinery form, they get redirected to your Typeform but no longer needs to enter their email address again.

3.) Embed the Prefinery referral status page on another page in your website e.g. your thank-you page https://www.yourwebsite.com/signup/thank-you as described here: Embed the Viral Referral Page on my Site

<div class="prefinery-viral-referral-embed" data-prefinery-tester-email=""></div>

Your embed code should use the data-prefinery-tester-email attribute (NOT the default data-prefinery-tester-id ) with an empty value like the above. 

4.) Set your Typeform to redirect to the embedded Prefinery referral status page.

https://www.yourwebsite.com/signup/thank-you?ref=

Make sure you recall the user's email address (refer to the recall paragraph of that Typeform guide) to add it on the redirect URL right after the ref parameter ?ref= . This is required so that the embedded Prefinery referral page knows for which user to display a personalized referral page for when the user gets redirected to that page from the Typeform.

5.) In your Prefinery dashboard, go to Referral Page > Settings and set Referral URL to point to the page where you installed your form (in step #2 above e.g. https://www.yourwebsite.com/signup/ ).

Typeform to Prefinery

Integrating Typeform with Prefiinery allows you to automatically add the user, after filling out the Typeform survey, to your Prefinery campaign and provide them their unique referral link. 

This works by passing the field values entered on Typeform (e.g. email, name, etc.) as URL parameters in the instant signup link that you set as your typeform's redirect URL. 

While this method allows you to automatically create a new user in Prefinery on Typeform submit, there are some limitations like the lack of built-in share and referral tracking in the background unlike the embedded/popup Prefinery form or using our APIs like the first option above.  

Here's how: 

1.) In your Prefinery project dashboard, go to Installation > 2. Push Users into Prefinery > Give Existing Users an Instant Signup Link

Scroll to the bottom until your find Other then copy the instant signup link by clicking on it. 

2.) In your Typeform dashboard, find and edit the form that you'd like to integrate with your Prefinery campaign. 

3.) In the typeform editor, click on the Settings tab (gear icon), find and enable the Redirect on completion option, then paste in your copied instant signup link. Make sure to replace the placeholder EMAIL-ADDRESS with the email address variable of your typeform (the field where you user would enter their email address) denoted by the email icon.  

Referring to our guide on how to use Instant Signup Links you can also pass other information besides an email address to Prefinery. For example to pass the first and last name with the email address your instant signup link would be like as follows: 

https://i.prefinery.com/projects/s12ab12j/users/instant?email=EMAIL-ADDRESS&first_name=GIVEN-NAME&last_name=SURNAME

You'd then replace the placeholders EMAIL-ADDRESS , GIVEN-NAME and SURNAME with their corresponding typeform variables. 

4.) Publish your changes when done, and do a test submission on your typeform to confirm that once submitted the user is automatically added in Prefinery and shown the Prefinery referral page. 

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