Adding Crowdfunding campaigns to your uKit website

Add Crowdfunding campaigns to your uKit website
Add Crowdfunding campaigns to your uKit website

Are you creating your website using uKit? 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 uKit 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, Websitebuilder 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 uKit site using white label technology such as Atlas. To gain the capabilities to run a fully white labeled Crowdfunding campaign on your uKit 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 uKit Website

Step 1: Subscribe to the Atlas subscription plan.

New Atlas Subscription plans Thrinacia UI
Atlas subscription plan options

Step 2: Create the Crowdfunding campaign, and copy the widget code.

Campaign creation steps preview widget code
Campaign creation steps preview 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: Host the widget on a separate page.

Once you have created the campaign and copied the widget code, you will have to host the widget on a separate page. You will have to reference this page in order to host it on the Volusion website. If you would like to host the campaign on a separate page using the Atlas platform, you can log into the site using SFTP, create a new .html file with the widget code included for this example we have saved it to be called widget.html:

Widget code pasted into editor
Widget code pasted into editor

Import the .html file that you created as a new page via SFTP. Place the file in the following location using SFTP: webui/angapp/widget.html

Go to the page that is hosting the widget, and copy the URL.

Step 4: Create a new page and paste the iframe.

Log into the uKit website, and create a new page. To do this, go to your uKit dashboard, and click on the pages option in the left menu. Next, click on the add page button.

Add a new page
Add a new page

Once you click on Add page, you will have to choose whether you want to add a news page or page. You can choose the page option.

Choose page
Choose page

Name the page.

Add the page name
Add the page name

Now that you have created the page, you can add the campaign to the page via the widget.

Click on the puzzle icon in the left menu, then drag and drop the HTML widget icon onto the page.

Choose the HTML code widget
Choose the HTML code widget
Drag and drop the HTML widget onto a section of the page
Drag and drop the HTML widget onto a section of the page

Paste the iframe code with the link to the widget page. You can use the below iframe code to paste into the HTML editor:

<iframe width="100%" height="500px" src="YOUR-URL-HERE" frameborder="0"></iframe>
Paste iframe code
Paste iframe code

If you would like to customize the iframe further, please refer to the following blog article.

You can now view and donate to the campaign.

Preview the campaign
Preview the campaign

That is how you can add any pre-order, rewards, and donations based Crowdfunding campaign on to your uKit website. For a full and more detailed tutorial, you can watch the following video: