Programme de parrainage viral de Flowrite - Comment nous avons multiplié par 8 nos inscriptions hebdomadaires

Publié: 2022-03-22

introduction

Depuis notre premier lancement en octobre, nous avons collecté des inscriptions par e-mail sur notre page de destination auprès de personnes enthousiasmées par notre produit. Une fois qu'un utilisateur potentiel a rejoint notre liste d'attente en soumettant son adresse e-mail, nous lui envoyons un e-mail de confirmation.

Tout au long de l'automne, nous avons réitéré notre e-mail de confirmation à plusieurs reprises - en essayant d'encourager ceux qui s'inscrivent à partager sur Flowrite avec leurs amis. Nous avons testé différentes copies et fourni des liens de partage pour les médias sociaux, ce qui nous a valu une bonne quantité de bouche à oreille. En fin de compte, ce qui manquait, c'était une incitation pour que les gens passent le mot.

Quelques mois plus tard, nous avons commencé à rechercher des solutions de marketing de référence prêtes à l'emploi telles que Viral Loops, KickoffLabs et Prefinery, mais aucune d'entre elles ne nous a vraiment donné la flexibilité que nous recherchions. Nous voulions maîtriser l'intégralité du processus : inscription, intégration, recommandations, e-mails et récompenses. ‍

Nous avons donc commencé à créer notre propre système de parrainage à l'aide d'outils sans code. Peu de temps après, nous avons lancé une nouvelle version du flux d'inscription consistant en une enquête d'intégration magnifiquement intégrée et un programme de parrainage - donnant aux gens la possibilité de gagner des récompenses en invitant leurs amis à rejoindre notre liste d'attente.

Le nouveau système a provoqué un immense pic dans nos inscriptions - plus de 8 fois plus de la semaine 4 de 2021 par rapport aux inscriptions hebdomadaires moyennes au cours des 6 semaines précédentes. ‍

Il s'agit d'une instruction pratique étape par étape sur la façon de mettre en œuvre le même programme de parrainage dans votre entreprise.

Que comprend le programme de parrainage de Flowrite ?

  • Inscription par e-mail sur flowrite.com
  • Lien de parrainage unique attribué à chaque utilisateur
  • Récompenses pour le nombre de personnes référées
  • Enquête Typeform magnifiquement intégrée pour collecter des informations supplémentaires sur chaque utilisateur
  • Possibilité pour l'utilisateur de parrainer un ami lors de l'enquête
  • Feuille de calcul interne pour suivre les inscriptions et les références
  • Classement public permettant aux utilisateurs de suivre leurs références

Que faut-il pour créer un programme similaire ?

  • Site Web que vous pouvez personnaliser avec votre propre HTML et JavaScript (c'est-à-dire un site Webflow ou simplement un site Web HTML pur)
  • Enquête typeformulaire (facultatif)
  • Google Sheets ou Airtable
  • Gmail ou quelque chose d'autre qui envoie des e-mails
  • Plate-forme d'automatisation (par exemple Zapier ou Integromat) pour coller les choses ensemble

De plus, avoir un certain niveau de compréhension de JavaScript peut devenir utile mais n'est en aucun cas essentiel !

️
Avant de vous lancer, je vous recommande de suivre vous-même notre processus d'inscription pour voir comment tout fonctionne. Appuyez simplement sur le bouton dans la barre de navigation, entrez votre e-mail, répondez à notre enquête Typeform et vérifiez votre boîte de réception pour un e-mail de confirmation.

1. Création d'un code de parrainage

Chaque personne qui s'inscrit sur notre liste d'attente se voit attribuer un code aléatoire à 6 caractères composé de chiffres et de lettres. À la fin du processus d'inscription, nous utilisons ce code sur la page de confirmation pour donner à l'utilisateur des liens de partage en un clic pour les médias sociaux.

Pour créer un code de parrainage, insérez l'extrait suivant à la fin de votre balise <body> (ou avant la balise </body>) sur chaque page où un utilisateur peut s'inscrire. Si vous utilisez Webflow ou un créateur de site Web similaire, vous pouvez insérer le code globalement sur chaque page à partir des paramètres de votre site.

  
const referralCode = Math.random().toString(36).substring(2, 8)

Deuxièmement, créez une autre variable ou constante appelée referenceUrl, qui est composée de l'URL de votre page d'accueil et du code que nous venons de générer. Insérez-le sous la variable referCode.

  
const referralUrl = 'https://www.flowrite.com/?ref=' + referralCode

2. Stockage de l'URL de l'utilisateur

Vous souhaitez également stocker l'URL actuelle de l'utilisateur dans une variable. Il est essentiel de savoir de quelle URL provient chaque inscription afin de compter le nombre de références pour chaque lien de référence.

  
const siteUrl = window.location.href

Votre code devrait maintenant ressembler à ceci :

  const referralCode = Math.random().toString(36).substring(2, 8); const referralUrl = 'https://www.flowrite.com/?ref=' + referralCode; const siteUrl = window.location.href;
const referralCode = Math.random().toString(36).substring(2, 8); const referralUrl = 'https://www.flowrite.com/?ref=' + referralCode; const siteUrl = window.location.href;

3. Le formulaire d'inscription

Création de champs de saisie masqués

En plus d'un champ de saisie d'adresse e-mail, votre formulaire d'inscription doit également contenir deux entrées masquées auxquelles nous attribuerons bientôt les valeurs referenceUrl et siteUrl des étapes précédentes.

Pour ajouter les champs de saisie, insérez le code suivant dans votre élément de formulaire - juste à côté du champ e-mail.

  <input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'>
<input class='referralUrl' name='referralUrl'> <input class='siteUrl' name='siteUrl'>
Si vous utilisez Webflow, vous pouvez le faire avec un élément HTML Embed masqué.

Remplir les champs de saisie

Les entrées sont toujours vides, cependant. Vous devez affecter les variables des étapes 1 et 2 dans vos entrées afin qu'elles soient incluses dans la soumission.

  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;
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;
Si vous utilisez par exemple les symboles de Webflow et que vous avez plusieurs instances du même formulaire d'inscription sur une seule page de votre site Web, vous devez vous assurer que les variables sont affectées aux entrées correctes. Consultez notre mémo Notion pour obtenir des instructions à ce sujet.

Le tester

Désormais, lorsqu'un utilisateur s'inscrit sur le site Web, l'URL de référence et l'URL du site doivent être incluses de manière masquée dans la soumission. Si vous utilisez Webflow, vous pouvez le vérifier à partir de l'e-mail de confirmation.

4. Personnalisation de votre enquête Typeform

Dans le cadre du système d'inscription et de parrainage, nous utilisons Typeform pour en savoir plus sur chaque utilisateur. Il n'est pas nécessaire de répondre à l'enquête Typeform pour rejoindre la liste d'attente car nous collectons les adresses e-mail déjà lors de l'inscription initiale. Le pourcentage d'utilisateurs qui répondent à l'enquête est actuellement d'environ 75 %.

En pratique, nous souhaitons transmettre le code de référence (étape 1) et l'e-mail de l'utilisateur dans Typeform et les "porter" tout au long de la soumission. Nous faisons cela afin de :

  1. Utilisez le code de référence dans les liens de partage sur votre page de confirmation (étape 7)
  2. Faites correspondre les inscriptions initiales à la liste d'attente avec les réponses Typeform correspondantes. En transférant l'e-mail du formulaire d'inscription vers Typeform, nous n'avons pas besoin de demander à l'utilisateur de le soumettre deux fois.

Champs cachés

Pour ce faire, vous devez utiliser la fonction Champs masqués de Typeform. Vous pouvez trouver les paramètres sous Logic → Advanced.

Vous devez définir deux champs masqués : @email et @code. Une fois cela fait, vous pouvez insérer ces valeurs à la fin de votre lien Typeform et les soumettre avec les autres réponses de votre Typeform :

5. Intégrer le Typeform à votre site

Typeform vous propose plusieurs alternatives pour intégrer une enquête sur votre page. Si vous ne souhaitez pas utiliser d'intégration, vous pouvez simplement rediriger vos utilisateurs vers le lien Typeform.com.

Nous utilisons l'alternative "Popup" avec la taille de Popup définie sur "Large"


Si vous choisissez d'utiliser l'une des intégrations, vous devez saisir le code d'intégration de Typeform et le placer dans le code HTML de votre page.

Avec une fenêtre contextuelle, peu importe où vous placez le code Typeform. Nous avons le nôtre au sommet de la hiérarchie des pages.

La fenêtre contextuelle comprend également un élément <a>, qui est essentiellement un bouton "Lancez-moi". Sa fonction est d'ouvrir la fenêtre contextuelle de l'enquête lorsque vous cliquez dessus. Cependant, puisque vous souhaitez que la fenêtre contextuelle s'ouvre automatiquement lorsqu'un utilisateur soumet le formulaire d'inscription, vous avez besoin d'un morceau de code qui le fait pour vous.

Vous souhaitez également que ce code prenne l'e-mail qui a été soumis (à partir d'un élément d'entrée avec un identifiant défini sur "email"), l'affecte à une variable et l'insère à la fin de votre lien Typeform avec le referCode. Ce seront les champs cachés que nous avons mis en place plus tôt

  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(); });
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(); });

Enfin, définissez la visibilité de l'élément <a> sur "aucun" afin de masquer le bouton "Lancez-moi".

Si vous utilisez Webflow, vous pouvez simplement masquer l'intégralité de l'intégration HTML.

6. Redirection de formulaire

Typeform vous permet de rediriger les utilisateurs vers des URL personnalisées après avoir terminé l'enquête. Les URL peuvent être personnalisées avec les données de l'enquête ainsi que les champs masqués.

Nos liens de redirection contiennent à la fois le code de parrainage (un champ caché) et le prénom de l'utilisateur de l'enquête.

Par exemple, si le "code" était défini sur 123456 et que le prénom de l'utilisateur était Aaro , l'URL de redirection serait :

7. Page de validation

Sur notre page de confirmation, nous voulions offrir aux utilisateurs des options simples pour partager leur lien de parrainage personnel et les informer des récompenses qu'ils peuvent gagner.

Incitation

Notre façon d'inciter les utilisateurs est d'offrir des produits de marque Flowrite et un accès gratuit au produit. Avec le merchandising, nous vous recommandons de choisir des articles que vous pouvez faire tenir dans une lettre. Nous avons récemment réalisé que l'expédition de colis à travers le monde peut coûter un peu cher.

Si vous souhaitez approfondir la manière de choisir les récompenses et les incitations pour les programmes de parrainage, consultez le guide de Referral Rock sur le sujet.

Personnalisation de la page de confirmation

Avoir cette URL de redirection personnalisée de Typeform vous permet de personnaliser votre page de confirmation pour chaque utilisateur. Par exemple, la page de confirmation de Flowrite utilise la valeur "prénom" de l'URL pour rendre la page légèrement plus personnelle :


Pour faire de même, commencez par envelopper la partie du paragraphe que vous souhaitez personnaliser dans une plage. Ensuite, définissez l'identifiant de l'étendue sur "prénom".

Enfin, insérez l'extrait suivant à la fin de la balise <body> de votre page de confirmation.

  const firstname = siteUrl.substring(siteUrl.indexOf('firstname=') + 10); document.getElementById('firstname').innerHTML = firstname;
const firstname = siteUrl.substring(siteUrl.indexOf('firstname=') + 10); document.getElementById('firstname').innerHTML = firstname;

En plus du prénom, vous pouvez également utiliser la valeur "code" de l'URL pour personnaliser les liens de partage pour les réseaux sociaux. Pour créer un lien Twitter, définissez d'abord l'identifiant de votre bouton de partage Twitter sur "tweet".

Ensuite, insérez le code suivant à la fin de la balise <body> de votre page de confirmation.

  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);
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);
Utilisez votre créativité pour personnaliser les textes et les liens de votre page de confirmation comme bon vous semble. Vous pouvez également comparer les nôtres.

8. Courriel de confirmation

Après l'inscription initiale sur notre site Web, nous envoyons un e-mail de confirmation à l'adresse e-mail qui a été soumise. Naturellement, nous souhaitons utiliser l'URL de référence de l'étape 3 dans chaque lien de partage de cet e-mail.

Que vous utilisiez Zapier ou Integromat pour automatiser l'e-mail de confirmation, vous souhaitez utiliser la soumission du formulaire d'inscription comme déclencheur et le connecter à votre compte de messagerie pour envoyer l'e-mail de confirmation en fonction des données soumises - adresse e-mail et URL de référence de étape 3.

Nous avons décidé d'utiliser Gmail car cela nous permettait d'envoyer des e-mails qui avaient l'air et se sentaient les plus personnels. Cependant, les limites d'envoi quotidiennes de Gmail nous ont posé quelques problèmes lorsque le volume a dépassé les 1500 emails/jour. Si votre volume d'inscription est constamment supérieur à cela, vous voudrez peut-être envisager d'autres alternatives comme SendGrid ou Mailchimp.

Pour inclure des liens dynamiques et tout autre contenu en plus du texte (par exemple des images), vous devez choisir l'option HTML dans Zapier. Dans Integromat, HTML est activé par défaut.

Vous trouverez ci-dessous un exemple de structure que vous pouvez utiliser pour créer votre e-mail de confirmation en HTML. Utilisez les données de la soumission du formulaire pour personnaliser l'URL de référence.

  Hello <br><br> This is a demo email <br><br> <a href=https://twitter.com/intent/tweet?url=[referralUrl]&text=Example>Share on Twitter</a> <br><br> <img src="imagelink" width="400" height="300"> <br><br> Cheers
Hello <br><br> This is a demo email <br><br> <a href=https://twitter.com/intent/tweet?url=[referralUrl]&text=Example>Share on Twitter</a> <br><br> <img src="imagelink" width="400" height="300"> <br><br> Cheers

9. Système de suivi

Suivi interne

Enfin, vous devez fournir les données d'inscription de votre site Web et les soumissions Typeform à une seule destination où vous pouvez suivre le nombre d'inscriptions, les soumissions Typeform correspondantes et les références. Nous utilisons Google Sheets mais n'hésitez pas à utiliser Airtable ou quelque chose d'autre avec lequel vous vous sentez à l'aise.

Pour que les données circulent vers votre feuille en temps réel, vous devez la connecter à votre site Web et à Typeform à l'aide de Zapier/Integromat/etc. Vous avez besoin de deux déclencheurs :

  1. Inscription à la liste d'attente → Envoyer un e-mail et créer une nouvelle ligne de feuille de calcul (c'est celle dont nous avons discuté à l'étape précédente)
  2. Soumission de formulaire → Créer une nouvelle ligne de feuille de calcul
Zapier et Integromat ont tous deux des instructions complètes sur la façon de réaliser ces intégrations.

Pour le système de suivi, nous avons créé un modèle simple que vous pouvez dupliquer et utiliser comme base pour votre propre système de suivi :

En plus des quatre feuilles de calcul incluses dans le modèle, nous avons également créé divers autres tableaux tels que le suivi automatisé des récompenses et le pipeline d'e-mails, la feuille de désabonnement, la cartographie de l'entonnoir, etc. Mais nous vous laisserons cela

Externe

Pour aider les utilisateurs à suivre le nombre de références avec leur lien unique, nous avons créé un classement public - également avec Google Sheets.

+ 10. Références supplémentaires avec Typeform

L'un des moyens de booster votre taux de parrainage est de demander à vos utilisateurs de saisir l'adresse e-mail de leur ami ou d'un collègue. Il peut s'agir de l'une des questions de votre enquête Typeform ou d'un formulaire sur votre page de confirmation.

Nous avons inclus la question de référence à la fin de notre enquête Typeform.


Voici à quoi cela ressemble sur Zapier :

L'opération de filtrage avant l'envoi de l'email est importante. Vous voulez vous assurer que :

  1. La valeur est en fait un e-mail (Typeform n'est pas parfait pour l'identifier)
  2. La valeur n'est pas vide
  3. Le référent ne se réfère pas lui-même

Enfin, nous incluons le référent dans le champ cc de l'e-mail de parrainage pour rendre l'expérience encore plus personnelle.

C'est ça

Votre programme de parrainage est maintenant prêt à être lancé. Félicitations!

Au cas où vous rencontriez des problèmes en cours de route, n'hésitez pas à m'envoyer un mail – ou mieux encore, à commenter sur Twitter / LinkedIn pour que tout le monde puisse s'en apercevoir.

J'aimerais aussi savoir si vous finissez par utiliser ce système, alors s'il vous plaît contactez-moi si vous l'avez fait et partagez le message avec quelqu'un d'autre qui pourrait en bénéficier ️