Are you creating your website using Unstack? Would you like to add Crowdfunding capabilities, and campaigns to your website? This tutorial will show you how you can quickly add a fully white labeled Crowdfunding campaign to your new or existing Unstack website.
This article is part of the blog series for adding Crowdfunding features on your website. You can learn about adding Crowdfunding capabilities on other platforms such as Shopify, Squarespace, Wix, BigCommerce, Boldgrid, Duda, Ucraft, Pagecloud, Site123, Weebly, PrestaShop, Jimdo, One, Webnode, Strikingly, Orson, Pixpa, Yola, WooCommerce, Volusion, Format, Unbounce, IM Creator, Voog, Elementor, Weblium, HostGator, Websitebuilder, uKit, WebStarts, Webflow and GoDaddy as included in this series.
The solution described in this blog article can be used for any rewards/pre-order, or donations based Crowdfunding campaigns and paradigms. It is great for running a single campaign, or multiple campaigns on separate pages for any new or existing Unstack site using white label technology such as Atlas. To gain the capabilities to run a fully white labeled Crowdfunding campaign on your Unstack site, you need to subscribe to an Atlas subscription plan. The Micro subscription plan is great to use for this purpose. Included in the subscription plans is the Sedra widget. You can use the Sedra widget to host a campaign on any web page.
Please note that it is recommended to read the following article to quickly set up the widget for this tutorial.
Creating a Crowdfunding campaign page on your Unstack Website
Step 1: Subscribe to the Atlas subscription plan.
Step 2: Create the Crowdfunding campaign, and copy the widget code.
Note: depending on the configuration of your site, you may need to approve the campaign to view it live. To do this, you can log in as an administrator, and go to the administrator dashboard, click on campaigns, and choose approved/running from the dropdown menu located in the status column for the campaign that you have created.
Step 3: Add additional info to the widget code.
Once you have copied the widget code, there are some extra lines of code that you will need to add into the widget code in order for it to work on Unstack.
First, you will need to add the minified Jquery link. To do this simply copy the following code and paste at the very bottom of the widget code.
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
Once you have added the above script to the widget, you will also need to add a CSS style to the widget as well to be compatible with Unstack. You can add the following CSS styling at the beginning of the Sedra widget code:
<style>sedra-widget .ui.icon.input{
max-width: unset !important;
}</style>
This is what the widget code should look like:
<!-- Sedra Widget -->
<style>sedra-widget .ui.icon.input{
max-width: unset !important;
}</style>
<div class="sedra-campaign-widget">
<sedra-widget campaignid="189" themecolor="#F1592A" fontcolor="#313131"
fontfamily="Helvetica"></sedra-widget>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://your-URL-here/widget/production/getwidget.js"></script>
</div>
<!-- End Sedra Widget -->
Step 4: Create a new page and paste the widget code.
First, log into your Unstack website, then click on the “+ New page” button.
You will be prompted with a list of different templates and layouts. You can choose the custom code option.
You can then pase the widget code into the box.
You can then publish and view/donate to the campaign.
That is how you can add any pre-order, rewards, and donations based Crowdfunding campaign on to your Unstack website. For a full and more detailed tutorial, you can watch the following video: