Thrinacia’s CrowdFunding widget is a robust solution that will allow you to host a campaign on almost any website. In the rare occurrence where your websites CSS or other restrictions are conflicting with the widget, you may want to try using the iframe method. In this article, we will show you how to use the iframe on your website and how to manipulate the iframe to make crowdfunding widget look more aesthetically pleasing.
Summary:
- Step 1: Configure the software and connect the payment gateway.
- Step 2: Create the campaign.
- Step 3: Host the campaign on a separate page.
- Step 4: Add an iframe to the page and reference the campaign widget.
- Step 5: Add the custom CSS code.
If you already have your iframe created, and pasted on your website, you can skip to Step 5 and learn more about adding the styles to the iframe.
Step 1. Configure the software and connect the payment gateway.
For those that would like to create a Crowdfunding campaign, and paste it on any website, you can use the widget to do this. If you are already an Atlas subscriber, it is recommended to read the following article to learn about configuring the platform for the sedra widget: Quick Widget Setup
Step 2. Create the Crowdfunding campaign.
If you have read the above article for the Quick Widget Setup you may have read the third step which says to create a campaign. To do this, simply go to your Atlas URL and either click on the start button or add a /start after your URL. For example: mywebsite.com/start and begin creating the campaign.
Once you have your crowdfunding campaign approved/running, you will have the option to paste the widget code on your web page. Unfortunately, not all website builders will provide the capabilities to add the widget code onto the site for various reasons. This requires a workaround. Almost all sites, however, will allow you to add iframe code. This can be used to host the campaign. In order to reference the widget, you will have to host the campaign on a separate page. Make sure you copy the widget code.
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 later be referencing this page via iframe. 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:
Import the .html file that you created as a new page via SFTP. Place the file in the following location using: webui/angapp/widget.html
Go to the page that is hosting the widget, and copy the URL.
Step 4. Add an iframe to the page and reference the campaign widget.
It is recommended to use a blank page to reference the widget on. This will help avoid any conflicting CSS on the page. Paste the following iframe code onto the page:
<iframe width="100%" height="500px" src="YOUR-URL-HERE" frameborder="0"></iframe>
The URL will go where it says YOUR-URL-HERE of the page that you are hosting the widget on. Below is an example of the iframe being used:
Once you have pasted the iframe onto the page, you might notice that it may not look the way that you would like, and may have a scrolling effect. This is normal, and can be adjusted in the iframe code above if you would like to make it longer, wider, or both. Adjust the settings in the iframe such as the height, and width if you would like.
The scroll bar effect is a simple way of adding the campaign to the site and will not require any further customizations. If you do not like the look of the scroll bar, you will have to add the custom styling.
Step 5. Add the custom CSS code.
Here we will provide a few examples of code that you can use in order to make your iframe look better on the page. CSS or Cascading Style Sheets will allow you to style the elements on a page. Since you are referencing the iframe code, you will be styling the entire content referenced for the iframe as one whole element.
As a suggestion, you can update the iframe code to read as follows:
<iframe style="width: 100%; height: 3000px; border: 0px;" scrolling=no src="YOUR-URL-HERE" frameborder="0"></iframe>
As you can see from the above HTML code, there is a hight of 3000px. This may not be long enough or it may be too long depending on your particular length for the campaign. So if your campaing looks cut off like this:
This means that you need to increase the height of the iframe.
You may also find that the iframe is not displaying in full width as per the screenshot above. This will force you to add custom CSS to your website. Keep in mind that it may not work on all websites due to the layout. Try using the below CSS:
.your-iframe-class-name { max-width: 100% !important; }
If you are using the above CSS code, you will have to add a class to your iframe. To do this add the just add:
<iframe class="your-class-name" style="width: 100%; height: 3000px; border: 0px;" scrolling=no src="YOUR-URL-HERE" frameborder="0"></iframe>
Inside of the iframe.
Please note that the length of the widget can also be affected by the screen size width, for example, the screen size width of a desktop computer will be different than the screen size width of a mobile phone. So you will need to make adjustments according to the different screen sizes. To make these adjustments, you will need to use one of the following tutorials:
- Adjust width and height of iframe to fit with content in it
- jQuery iframe auto height plugin
- Responsive Web Design – Media Queries
The above tutorials are for more advanced users. If you need assistance, you can always contact support@thrinacia.com with any questions you may have. The campaign should appear as follows:
That does it, once you make the right adjustments for the campaign, you can start gaining the backers. Good luck!