Updated: Aug 30, 2024
How to add the Boost Recommendations widget to a Webflow site
The Boost Recommendations widget is a powerful tool that offers a seamless way to promote other newsletters and earn revenue from Boosts via third-party websites.
You can use the widget to capture new subscribers from a Webflow site and this article will cover those instructions. For more general guidance on embedding the Boost Recommendations widget, please refer to this article.
How the Boost Recommendations widget works
When users engage with the widget on any site, they will undergo the instant signup process to join your beehiiiv newsletter. During this process, they will have the option to subscribe to additional newsletters simultaneously. Any newsletters they choose to join will earn you revenue through boosting or recommending subscribers.
Ways the widget can pop up or appear
- On page load: This option will trigger the widget to pop up when someone lands on a specified URL.
- Email Submission via Subscribe Form: This option will trigger the widget to pop up upon submission of a beehiiv subscribe form that has been embedded on a Webflow site.
- Manual: This option will trigger the widget to appear wherever you place it on a specific page of a Webflow site.
How to embed the Boost Recommendations widget on a Webflow site
- From the left hand panel in your account, go to Settings > Publication > then move to the tabs on the right and select Widgets.
- Choose the type of trigger you would like to use for the widget to pop up and then follow the directions below for that option. The trigger represents the action that causes the widget to appear on an external site.
Using the ‘On page load’ trigger
Selecting On page load triggers the widget to pop up when someone lands on the specified Webflow page.
- Start by selecting the On page load trigger.
- Click on the +Add URL button to bring up the Webpage URL field, then enter in the URL of the Webflow site page where you'd like this widget to pop up. If you have more than one page that you’d like this widget to appear on, you can add multiple URLs by clicking on the +Add URL button again.
- Move down to the Redirect section and select your desired redirect action, which is what will happen after someone interacts with the widget. Choose from Close Widget or Redirect.
- Review your selections and then click on the Save Widget Settings button.
- Scroll back up and copy the provided script.
Note: Do not reuse the examples in the images. - Next, you’ll need to log into your Webflow account and go to the Custom Code area of your dashboard.
- Paste the copied script from your beehiiv account into the field for Head code and hit Save.
- Lastly, check to make sure the widget pops up on the page as expected. Navigate to the Webflow page URL that you have directed the widget to appear on and refresh the page to activate the widget.
Troubleshooting the ‘On page load’ trigger
If you’ve selected the On page load trigger and the widget doesn't appear as expected, please check these steps before contacting our support team:
- Double check that the correct URL was entered into the widget settings in beehiiv.
- Make sure that you clicked on the Save Widget Settings button in beehiiv.
- Confirm that the correct script was pasted into the head tag of your Webflow site.
- Ensure that you’ve also saved the custom code on your Webflow site.
- Try publishing your Webflow site again, then refreshing the page.
Using the ‘Email Submission via Subscribe Form’ trigger
Selecting Email Submission via Subscribe From triggers the widget to pop up when someone submits a beehiiv subscribe form that has been embedded on an external site.
- Start by selecting the Email Submission via Subscribe From trigger.
-
The widget will be displayed on all of your beehiiv subscribe forms by default. Or, you can choose to show the widget only when selected subscribe forms are submitted by checking the box next to Select Subscribe Form, and then select one of your forms.
-
Move down to the Redirect section and select your desired redirect action, which is what will happen after someone interacts with the widget. Choose from Close Widget or Redirect.
-
Review your selections and then click on the Save Widget Settings button.
-
(Optional) When using this trigger, you’ll need to remove any previous redirects from your subscribe forms, if you have any in place.
To do so, hop over to the the Subscribe Forms tab, that you’ll find to the left of the Widgets tab in your account. Click the Edit option of your subscribe form.
-
(Optional) The subscribe form will appear on the right, scroll down to the After Submission section and remove anything in the redirect to an external page field, then click to Save it.
-
(Optional) After removing any redirects, go back to the Widgets tab.
- Be sure the Email Submission via Subscribe Form trigger is still selected and then copy the provided script. (Do not copy and paste the examples in this article.)
Tech Note: If you would like to embedded your subscribe form on an external page, you can click to view it, then copy the iframe script, and paste it in a custom embed block on your Webflow site. - Next, you’ll need to log into your Webflow account and go to the Custom Code area of your dashboard.
-
Paste the copied script from your beehiiv account into the field for Head code and hit Save.
-
Lastly, check to make sure the widget pops up on the page as expected. Navigate to the Webflow page URL that you have directed the widget to appear on and refresh the page to activate the widget. Then test it out by submitting an email via the beehiiv subscribe form embedded on the site.
Troubleshooting the ‘Email Submission via Subscribe Form’ trigger
If you’ve selected the Email Submission via Subscribe Form trigger and the widget doesn't appear as expected, please check these steps before contacting our support team:
- Make sure you’ve removed any redirects from the subscribe forms that you want this widget to appear on — and that you’ve saved those settings in beehiiv.
- Make sure that you clicked on the Save Widget Settings button in beehiiv.
- Confirm that the correct script was pasted into the head tag of your Webflow site.
- Ensure that you’ve also saved the custom code on your Webflow site.
- Try publishing your Webflow site again, then refreshing the page.
Using the ‘Manual’ trigger
Selecting Manual triggers the widget to appear wherever you place it on a specific page of an external site. There are 2 scripts provided for this trigger.
1. Choose the Manual trigger from the dropdown options.
2. Move down to the Redirect section and select your desired redirect action, which is what will happen after someone interacts with the widget. Choose from Close Widget or Redirect.
3. Review your selections and then click on the Save Widget Settings button.
4. Scroll back up in your account and copy the first script shown below Step1.
5. Next, you’ll need to log into your Webflow account and go to the Custom Code area of your dashboard.
6. Paste the copied script from your beehiiv account into the field for Head code and hit Save.
7. Go back to your beehiiv account and copy the second script shown below Step 2.
8. Go back to your Webflow account and go to the Custom Code area of your dashboard.
In your Webflow account, you can further customize the behavior of the widget by specifying its triggers in the code. (Please refer to Webflow Support for assistance with this.)
Here are a few examples of things you can try:
- Trigger the popup when a specific button on the site is clicked.
- Activate the popup when users scroll to a particular section of the page.
- Set the popup to appear when users click on a tab.
9. Be sure to save your settings after making changes in your Webflow account.
10. Lastly, check to make sure the widget pops up on the page as expected. Navigate to the Webflow page URL that you have directed the widget to appear on and refresh the page to activate the widget.
Troubleshooting the ‘Manual’ trigger
If you’ve selected the Manual trigger and the widget doesn't appear as expected, please check these steps before contacting our support team:
- Make sure that you clicked on the Save Widget Settings button in beehiiv.
- Confirm that the correct script was pasted into the head tag of your Webflow site.
- Ensure that you’ve also saved the custom code on your Webflow site.
- Double check that the second code snippet is set up to execute properly.
- Try publishing your Webflow site again, then refreshing the page.