Thrinacia’s standalone UI comes with an extensive amount of features and capabilities. If you would like to use all of these capabilities on another website, this article will explain the steps for embedding the standalone UI on your website via an iframe.
Summary:
- Step 1: Connect the payment gateway.
- Step 2: Create the campaign.
- Step 3: Add an iframe to the page and reference the campaign.
- Step 4: Add the custom CSS code.
Step 1. Connect the payment gateway.
In order to create the campaign, you must first connect the payment gateway to accept the donations. There are two ways that you can set up the payments:
- Direct Transactions – This means all of the donations go into one single Stripe account connected to the platform. Learn how to connect the payment gateway for this scenario by reading this article.
- Marketplace Mode – This allows your campaign creators to connect their own Stripe account to the campaign, and you can take an automatic transaction fee on the donations. Learn how to connect the payment gateway for this scenario by reading this article.
Step 2. Create the Crowdfunding 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.
Follow the steps, and send the campaign for review. You can then approve the campaign by reading this FAQ. Once you have your campaign approved/running, you will have the ability to accept donations to the campaign. You are now ready to host the campaign on a separate page.
Step 3. Add an iframe to the page and reference the campaign.
It is recommended to use a blank page to reference the campaign 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 of your campaign will go where it says YOUR-URL-HERE of the campaign page on the standalone UI. 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 including the standalone UI navigation, and footer. This is normal and can be adjusted in the iframe code, and standalone UI CSS.
If you do not mind the Standalone UI navigation, footer, and the scroll bar effect, then this would be the last step. If you do not like the look of the scroll bar, and the standalone UI navigation + footer, then you will have to add custom styling.
Step 4. 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.
For those that are only running single campaigns in the iframe code, you may want to remove the standalone UI navigation, the social media sharing, and the footer. In order to remove these items, you will have to add custom CSS code to the standalone UI website. Here is an article that explains the process of adding custom CSS to your platform: https://www.thrinacia.com/blog/post/tips-on-customizing-your-thrinacia-atlas-instance-via-simple-css-js-code
To remove the navigation, footer, and social sharing options, you can use the following CSS code in the custom CSS file on your platform:
html body #nav-wrapper,
html body #footer-wrap,
html body #socialicons-wrap {
display: none !important;
}
Now that you have styled the campaign, you can then style the iframe. 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 campaign looks cut off, 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. 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!