Viral loops waiting list
Typeform x Show
Supercharge your daily communication Flowrite turns words into ready-to-send emails, messages and post in your personal style. Explore FlowriteJoin 30,000+ others Refresh if you want to submit another email. Oops! Something went wrong while submitting the form. Product Browser Extension Web app Templates Tone selector Use cases Leadership Sales Investors Customer support HR & recruiting Marketing & communications Company About Careers Hiring! Product updates Wall of Love x Request access Thank you! Your submission has been received! Oops! Something went wrong while submitting the form. Join 30,000+ others Request access Join 30,000+ others Feb 11, 2021 Company updatesFlowrite's viral referral program How we 8x'd our weekly signupsStep-by-step guide on how to build a referral program with barely any code to take your signups to the next level. Aaro Isosaari Co-Founder, CEO IntroductionEver since our first launch in October, we've collected email signups on our landing page from people excited about our product. After a potential user joined our waitlist by submitting their email address, we would follow-up with a confirmation email. Throughout the fall, we iterated our confirmation email numerous times trying to encourage those signing up to share about Flowrite to their friends. We tested different copies and provided share links for social media, which got us a decent amount of word-of-mouth. In the end, what was missing was an incentive for people to spread the word. Some months later, we started looking into off-the-shelf referral marketing solutions like Viral Loops, KickoffLabs, and Prefinery, but none of them really gave us the flexibility that we were looking for. We wanted to own the entire process signup, onboarding, referrals, emails, and rewards. So, we started building our own referral system using no-code tools. Soon after, we launched a new version of the signup flow consisting of a beautifully integrated onboarding survey and a referral program giving people the possibility to earn rewards by inviting their friends to join our waitlist. The new system caused an immense spike in our signups over 8x increase on week 4 of 2021 compared to the average weekly signups during the preceding 6 weeks. This is a practical step-by-step instruction on how to implement the same referral program in your business What does Flowrite's referral program include?
What's required to build a similar program?
Also, having some level of understanding of JavaScript may become handy but is not essential by any means! ️ Before getting into it, I'd recommend going through our signup process yourself to see how everything works. Just hit the button in the navbar, enter your email, go through our Typeform survey and check your inbox for a confirmation email. 1. Creating a referral codeEach person that signs up to our waitlist is assigned a random 6-character code consisting of numbers and letters. At the end of the signup process, we use this code on the confirmation page to give the user one-click sharing links for social media. To create a referral code, insert the following snippet at the end of your tag (or before tag) on each page where a user can sign up. If you're using Webflow or a similar website builder, you can insert the code globally to every page from your site settings. const referralCode = Math.random().toString(36).substring(2, 8)
Secondly, create another variable or constant called referralUrl, which is composed of the URL of your homepage and the code we just generated. Insert it below the referralCode variable. const referralUrl = 'https://www.flowrite.com/?ref=' + referralCode
2. Storing the user's URLYou also want to store the user's current URL in a variable. It's essential to know from which URL every signup is coming in order to count the # of referrals per each referral link. const siteUrl = window.location.href
Your code should now look like this: const referralCode = Math.random().toString(36).substring(2, 8);
const referralUrl = 'https://www.flowrite.com/?ref=' + referralCode;
const siteUrl = window.location.href;
3. The signup formCreating hidden input fieldsIn addition to an email input field, your signup form should also contain two hidden inputs to which we'll soon assign the referralUrl and siteUrl values from the previous steps. To add the input fields, insert the following code inside your form element right next to the email field. Populating the input fieldsThe inputs are still empty, though. You need to assign the variables from steps 1 and 2 into your inputs so that they get included in the submission. const referralCode = Math.random().toString(36).substring(2, 8);
const referralUrl = 'https://www.flowrite.com/?ref=' + referralCode;
const siteUrl = window.location.href;
document.querySelector('#referralUrl').value=referralUrl;
document.querySelector('#siteUrl').value=siteUrl;
If you're using e.g. Webflow's symbols and have multiple instances of the same signup form on a single page of your website, you need to make sure that variables get assigned to the correct inputs. Check our Notion memo for instructions on this. Testing it outNow, when a user signs up on the website, both the referral URL and the site's URL should be hiddenly included in the submission. If you're using Webflow, you can verify this from the confirmation email. 4. Customizing your Typeform surveyAs part of the signup & referral system, we are using Typeform to learn more about each user. Completing the Typeform survey is not required to join the waitlist because we collect the email addresses already during the initial signup. The percentage of users who proceed to complete the survey is currently roughly 75%. In practice, we want to deliver the referralCode (step 1) and the user's email into Typeform and "carry" them throughout the submission. We do this in order to:
Hidden fieldsTo make this happen, you need to use Typeform's Hidden Fields feature. You can find the settings under Logic Advanced. You need to set two Hidden Fields: @email and @code. Once that's done, you are able to insert those values at the end of your Typeform link and have them submitted along with the other answers of your Typeform: 5. Integrating the Typeform to your siteTypeform gives you several alternatives on how to embed a survey on your page. If you don't want to use an embed, you can just redirect your users to the Typeform.com link. If you choose to go with any of the embeds, you need to grab Typeform's embed code and place it in your page's HTML. With a popup, it doesn't really matter where you place the Typeform code. We have ours on top of the page hierarchy. You also want that code to take the email that was submitted (from an input element with id set to "email"), assign it to a variable, and insert it at the end of your Typeform link together with the referralCode. These will be the Hidden Fields we set up earlier const referralCode = Math.random().toString(36).substring(2, 8);
const referralUrl = 'https://www.flowrite.com/?ref=' + referralCode;
const siteUrl = window.location.href;
document.querySelector('#referralUrl').value=referralUrl;
document.querySelector('#siteUrl').value=siteUrl;
$('#waitlist-form').submit(() => {
email = document.querySelector('#email').value;
$('.typeform-share').attr('href', 'https://form.typeform.com/to/c74dZXPe?typeform-medium=embed-snippet#email=' + email + '&code=' + referralCode);
$('.typeform-share').click();
});
Lastly, set the visibility of the element to "none" in order to hide the "Launch me" button. If you're using Webflow, you can just hide the entire HTML Embed. 6. Typeform redirectTypeform allows you to redirect users to custom URLs after completing the survey. The URLs can be customized with both the survey data as well as Hidden Fields. Our redirect links contain both the referral code (a Hidden Field) and the user's first name from the survey. For example, if the "code" was set to 123456 and the first name of the user was Aaro, the redirect URL would be: 7. Confirmation pageIncentivizationOur way of incentivizing the users is to offer Flowrite-branded merch and free access to the product. With merch, we'd recommend choosing items that you can fit in a letter. We recently realized that shipping packages across the world can get a little expensive.. If you want to dig deeper on how to choose rewards and incentives for referral programs check out Referral Rock's guide on the topic. Customizing the confirmation pageHaving that custom redirect URL from Typeform allows you to customize your confirmation page for every user. For example, Flowrite's confirmation page uses the "firstname" value of the URL to make the page just slightly more personal:
Lastly, insert the following snippet at the end of the tag of your confirmation page. const firstname = siteUrl.substring(siteUrl.indexOf('firstname=') + 10);
document.getElementById('firstname').innerHTML = firstname;
In addition to the first name, you can also use the "code" value of the URL to customize share links for social media. To create a Twitter link, first set the id of your Twitter share button to "tweet". Then, insert the following code at the end of the tag of your confirmation page. const code = siteUrl.substring(siteUrl.lastIndexOf('code=') + 5, siteUrl.lastIndexOf('&f'));
const twitterlink = 'https://twitter.com/intent/tweet?url=https://www.flowrite.com/?ref=' + code + '&text=Example';
document.getElementById('tweet').setAttribute('href', twitterlink);
Use your creativity to customize the texts and links on your confirmation page any way you like. You can also benchmark ours. 8. Confirmation emailAfter the initial signup on our website, we send a confirmation email to the email address that was submitted. Naturally, we want to use the referralUrl from step 3 in every sharing link of that email. Regardless of whether you're using Zapier or Integromat to automate the confirmation email, you want to use the signup form submission as a trigger and connect it to your email account to send the confirmation email based on the submitted data email address and referralURL from step 3. We decided to use Gmail since it allowed us to send emails that look and feel the most personal. However, Gmail's daily sending limits have caused us some problems when the volume has exceeded 1500 emails/day. If your signup volume is constantly higher than that, you might want to consider other alternatives like SendGrid or Mailchimp. To include dynamic links and any other content besides text (e.g. images), you should choose the HTML option in Zapier. In Integromat, HTML is enabled by default. Below is an example structure you can use to create your confirmation email using HTML. Use the data from the form submission to customize the referralUrl. 9. Tracking systemInternal trackingFinally, you need to deliver the signup data from your website and the Typeform submissions to a single destination where you can track the # of signups, corresponding Typeform submissions, and referrals. We are using Google Sheets but feel free to go with Airtable or something else you feel comfortable with. In order to have data flowing to your Sheet in real time, you need to connect it with your website and Typeform using Zapier/Integromat/etc. You need two triggers:
Both Zapier and Integromat have comprehensive instructions on how to make these integrations happen. For the tracking system, we've created a simple template that you can duplicate and use as a base for your own tracking system: In addition to the four worksheets included in the template, we've also built various other tables like automated reward tracking and email pipeline, unsubscriptions sheet, funnel mapping, and more. But we'll leave that up to you ExternalTo help users track the # of referrals with their unique link, we've created a public leaderboard also with Google Sheets. + 10. Additional referrals with TypeformOne of the ways to boost your referral rate is to ask your users to enter the email address of their friend or a colleague. This could be one of the questions in your Typeform survey or a form on your confirmation page.
The filter operation before sending the email is important. You want to make sure that:
Lastly, we include the referrer in the cc field of the referral email to make the experience extra personal That's itYour referral program is now ready for launch. Congrats! In case you ran into any problems along the way, don't hesitate to send me an email or even better, comment on Twitter / LinkedIn so that everyone can take notice. I'd love to also know if you end up using this system, so please ping me if you did and share the post with someone else that might benefit from it ️ Supercharge your communication with Flowrite Turn words into ready-to-send emails and messages. Explore Flowrite We wanted to own the entire process signup, onboarding, referrals, emails, and rewards. - - Supercharge your daily communication Explore Flowrite Refresh if you want to submit another email. Oops! Something went wrong while submitting the form. Share the article Related articlesNo items found. We use cookies to analyze site performance and deliver a better experience for visitors. Learn more. Got it! Faster communication awaitsThank you! Your submission has been received! Oops! Something went wrong while submitting the form. Product updates Read the latest About Flowrite Get to know us Company updates Writing Productivity Blog Get the insights ProductProduct overviewBrowser Extension Web app Templates Tone selector Use casesLeadership Sales Investors Customer support HR & recruiting Marketing & communications ResourcesBlogProduct updatesFAQPrivacyCompanyAboutCareers We're hiring!Wall of LoveContact |