TABLE OF CONTENTS
FOLLOW
This post will teach you How to Build your Own Affiliate System on your Webflow Site in webflow, what an affiliate system feature is and when/why you might want to use affiliate systems in your project.
How to Build your Own Affiliate System on your Webflow Site
Memberscripts needed:
- https://www.memberstack.com/scripts/member-id-invite-links
- https://www.memberstack.com/scripts/prefill-form-based-on-url-parameters
Tutorial:
Cloneable:
https://webflow.com/made-in-webflow/website/invite-friends-link
Why/When Would you eed to Build your own Affiliate System on your Webflow Site?
- When you want to incentivize existing members to invite new members and you need to keep track of who invited who so they can be rewarded.
If you’re thinking of offering certain perks to website members who refer others, you’ll need to give existing members unique invite links based on their member IDs that they can send out.
We’re going to look at how you can build that functionality for existing members and how you can make those invite links work by prefilling a referral field on your sign-up form.
Building an affiliate system on a Webflow site
To build an affilitate system on a Webflow site, we’re going to use two Memberscripts:
Follow the links to each to get the codes you’ll need to add to your page and watch video tutorials on how to set everything up.
Setting it up
The first thing you’ll need to do is build the element that will house the unique invite link and style it however you want.
For this step, we’re going to use MemberScript #66.
After you’ve built the element for the invite link, add a text link where you want the invite link to appear in which you can write whatever you want, it will just be replaced with the member’s unique link. Add the following attribute to it:
- ms-code-invite-link-“URL”
Instead of “URL”, just copy the link that you want to send people to, like a sign-up page.
If you want to give your users the ability to just click the link and have it copied to the clipboard, you might want to check out MemberScript #8.
Now you have a way to give existing members a unique invite link. You can either add the MemberScript #66 custom code now and test out what you’ve built so far or wait until the end and add both codes then.
Now we just need to prefill the referral field in the sign-up form with the ID from the invite links.
To do that, we’re going to move on to MemberScript #67.
This is going to be super easy, all you need to do is add an input field to your sign-up form that will prefill the URL parameters – in this case the referring member’s unique ID.
After you’ve added the field, just add this parameter to it:
- ms-code-prefill-param=”inviteCode”
And that’s it. You can choose to hide the field if you don’t want it visible and editable to referred members.
Making it work
Now that you’ve got the form set up and you’ve added the required fields, all you need to do is add the MemberScript #66 & #67 custom codes to your pages, before the closing body tag.
Remember that the #66 code goes on the page where the existing member gets their unique link and the #67 code goes on the sign-up page.
Conclusion
That’s everything, you can now go ahead and test both features.
If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.
Our demo can help you get started with generating unique invite links for existing members and prefilling a referral field in the sign-up form when that link is used.
.png)
