With Referral Factory, getting website referrals is easy with a referral program widget. In this guide, we take you through the steps to install a referral program widget on your website or on a logged-in environment like a web app.
Are you looking for software to help you turn your website visitors into referrals?
Get your referral program up and running, and embed it into your website, in just a few hours 👉 Try Referral Factory for free for 15 days to start getting website referrals today!
If you already have a Referral Factory account, then keep reading to learn how to install a referral program widget on your website 👇
In this guide 👇
1. What Is A Referral Program Widget?
2. How To Install A Referral Program Widget
2.1. Installing A "Logged Out" Referral Program Widget on a Website
2.2. Installing A "Logged In" Referral Program Widget on a Web App or User Dashboard
3. How To Customize the Look and Feel of Your Widget
4.1. Can I change the position of the referral program widget?
4.2. Can I change the image that shows in the button for the referral program widget?
1. What Is A Referral Program Widget?
A referral program widget allows you to embed your referral program pages directly into your website, web app, or logged-in environment as a small component that floats in the right-hand corner of the screen. This widget serves as a convenient way for your visitors or users to access and participate in your referral program without leaving your website or app. It provides a seamless user experience and encourages more people to refer your business to their friends and contacts.
To make it easy for you to get more website referrals, Referral Factory's widget function works by taking your referral program pages and essentially repackaging them as embeddable widgets. We provide you with a ready-to-use script that can be inserted into your website or web app.
Here is an example of how you can get more website referrals using the Referral Factory widget.
Note that there are two options for the referral program widget: "Logged Out" and "Logged In"
Option 1: A standard "logged out" referral program widget where any visitor to your website will be able to see Step 1 for the Person Referring where they can sign up to get their unique referral link and start referring their friends.
.webp?width=342&height=674&name=referral_program_software_widget%20(1).webp)
Option 2: A "logged-in" referral program widget where your logged-in users will be automatically added to your referral program, generating their unique referral link. In this case, the widget will show Step 2 for the Person Referring.
2. How To Install A Referral Program Widget
What You Need:
1. Any Referral Factory plan.
2. A published referral campaign.
3. A no-code website builder like WordPress, Webflow, or Squarespace OR a web developer.
❗️ Remember that the copy and design of your referral program widget will pull directly from your campaign pages. If you have multiple campaigns, be sure to select the correct one!
2.1. Installing A "Logged Out" Referral Program Widget on a Website
Method 1
→ Navigate to the Campaigns tab
→ Select the campaign for which you want to create a widget.
→ Click Widget.
-webp.webp)
→ Make sure to select the tab titled For Users Who Are NOT Logged In.
→ Copy the ready-to-use widget script.
OR
Method 2
→ Navigate to the Promote section inside the campaign builder.
-webp.webp)
→ Click Promote your campaign on your website or blog.
→ Make sure to select the tab titled Website Widget.
→ Copy the ready-to-use widget script.
❗️ Any changes to the look and feel of the widget button (i.e., the text "Refer Friends" or the button colors) need to be made before the ready-to-use script is copied and inserted into your website. Jump to that section of this guide to learn more about how to customize your widget 👇
❗️ Since the widget pulls directly from your campaign pages, any changes to what shows inside the widget can be made via the campaign builder and these settings may be changed after you have inserted the widget script into your website.
→ If your website is managed by a web developer, provide them with this exact script and ask them to insert the script on the relevant pages of your website right before the </body> tag in your website code.
→ If your website is built on a no-code builder like WordPress, Webflow, or Squarespace, you may be able to use a plugin to insert the script yourself. Please consult the following guides for more information:
📖 How To Install A Widget On Your No-Code Website | WordPress 📖
📖 How To Install A Widget On Your No-Code Website | Webflow 📖
📖 How To Install A Widget On Your No-Code Website | Squarespace 📖
2.2. Installing A "Logged In" Referral Program Widget on a Web App or User Dashboard
Method 1
→ Navigate to the Campaigns tab
→ Select the campaign for which you want to create a widget.
→ Click Widget.
→ Make sure to select the tab titled For Logged In Users.
→ Copy the ready-to-use widget script.
OR
Method 2
→ Navigate to the Promote section inside the campaign builder.
-webp.webp)
→ Make sure to select the tab titled Logged In Widget.
→ Copy the ready-to-use widget script.
❗️ Any changes to the look and feel of the widget button (i.e., the text "Refer Friends" or the button colors) need to be made before the ready-to-use script is copied and inserted into your website. Jump to that section of this guide to learn more about how to customize your widget 👇
❗️ Since the widget pulls directly from your campaign pages, any changes to what shows inside the widget can be made via the campaign builder and these settings may be changed after you have inserted the widget script into your website.
→ If your website is managed by a web developer, provide them with this exact script and ask them to:
→ Change the variables loggedInUserFirstName and loggedInUserEmail to the same variables that are used to provide your logged-in user's data.
→ Insert the script on the relevant pages of your web app or logged-in environment right before the </body> tag in your website code.
→ If your website is built on a no-code builder like WordPress, Webflow, or Squarespace, you may be able to use a plugin to insert the script yourself. Please consult the following guides for more information:
📖 How To Install A Widget On Your No-Code Website | WordPress 📖
📖 How To Install A Widget On Your No-Code Website | Webflow 📖
📖 How To Install A Widget On Your No-Code Website | Squarespace 📖
3. How To Customize the Look and Feel of Your Referral Program Widget
→ You can adjust the text that shows on the closed widget. By default, the text is set to "Refer Friends".
-webp.webp)
❗️ Please note that the widget text has a 20-character limit.
→ You can adjust the colors of the closed widget.
-webp.webp)
📌 Do you have questions about what else you can customize on the widget? Jump to our FAQ section 👇
❗️ Any changes to the look and feel of the widget need to be made before the ready-to-use script is copied and inserted into your website.
4. Widget FAQ
4.1. Can I change the position of the referral program widget?
If you would like to change the position of the widget on your website, you will need to make your own CSS edits to the ready-to-use script provided by Referral Factory. Learn more here.
4.2. Can I change the image that shows in the button for the referral program widget?
The button for the referral program widget will show the logo you have uploaded to your campaign pages. You cannot change this feature. If you would prefer to use different styling, we recommend using the referral program pop-up, which allows you to customize the styling of your button or trigger.
5. Further Resources
Want to learn more about how to promote your referral program? Have a look at the following resources:
📖 How to Promote Your Referral Program 📖
📣 10 Ways To Promote Your Referral Program 📣