To embed your campaign widget on your website, simply follow these steps:
- Go to your campaign page (example: https://fundrazr.com/campaigns/bMmtb)
- In the row of sharing options under the campaign picture, click Embed (see Screenshot 1 below for where to look onscreen)
- Select a style and width for your widget (see Screenshot 2). Note: The Tall and Wide badges will allow you to select a custom width so the widget is easy to fit on your website
- Click Get Code (see Screenshot 2)
- Copy & paste both snippets of code into the source code for your website (see Important note below)
- Click "Close" and you're done!
- Widget code: This is the code for the widget itself. This snippet needs to be placed where you want the widget to appear on the page.
Note: If you have more than one FundRazr campaign running at the same time, you can place them all on one web page. To do this, you only need to add the loader script to the page once, then for each additional campaign, you only need to change the 5 digit code for your campaign, as shown in bold here:
Want to embed your full campaign on a page of your website instead of just a widget/badge? No problem!
- The loader code will stay the same, so don't change anything there.
- The widget code is where you'll need to make changes.
- YOU WILL NEED TO UNDERSTAND HTML CODE TO MAKE THESE CHANGES SUCCESSFULLY. If you aren't sure what to do here, forward this page to your website administrator.
You'll need to change certain variants inside the widget code.
data-type="badge" - The TYPE should be changed to full-campaign:
data-width="200" - The WIDTH is variable, so whatever width you see in this section after grabbing the standard code should be changed to 1080:
data-url="http://fnd.us/c/bMmtb" - The URL included in the standard code is the FundRazr Short URL. For full page campaigns, this needs to be the full URL of the campaign:
data-variant="tall" - The variant needs to be removed.
Here's a Before & After example:
class="fr-widget" data-type="badge" data-variant="tall" data-width="200" data-url="http://fnd.us/c/bMmtb"
class="fr-widget" data-type="full-campaign" data-url="https://fundrazr.com/campaigns/bMmtb" data-width="1080"
*This page is provided as a guide only. If you don't understand how to add HTML code to your website, do not attempt this yourself or you could break your website. Please have your website designer/administrator add the code for you.