How to insert a donation button on your website via the TubePay API

Step 1: Add the AirTime module on your website.

To create your module open the BitTube AirTime extension, navigate to the "Link" menu and select the "Register Platform" tab.

If you don't have the extension you can get it at our official website.

Then give it a name as you find appropriate and click the "Register Platform" button

Step 2: Implement the module on your website.

Copy your AirTime module code.

NOTE: You can find this page at any time by visiting the "Already linked" tab in the "Link" menu and clicking on the module ID.

Step 3: Paste the code on your website.

The code should be on every page of your website that you want to monetize or where you have the donation button. 

If you are using Wordpress adding it to a text box in the footer will work and not be visible as text.

If you edit your website using an HTML editor placing the code in the "head" tag will be best.

Implementing the AirTime module will generate rewards from the total time visitors spend on your website. To access the rewards open the wallet address associated with your module! 

Step 4: Copy and paste the donation button code.

Note!

The module code is necessary to make the donation button work.

Copy the code below.

<div
  data-tubepay-donate="[Amount]"
  data-tubepay-creator-name="[Creator ID]"
  data-tubepay-creator-display="[Creator Name]"
  data-tubepay-fiat-currency="[Currency]">
</div>

You can find all TUBEpay APIs at https://bittube.app/docs/tubepay

Change the data attributes described in the table below:

Data Attributes

Parameter Required Description
data-tubepay-donate Yes Amount to donate. Can be left empty, but must exist. Defaults to 1 TUBE
data-tubepay-creator-name No Creator platform unique ID to donate to
data-tubepay-creator-display No Display name for the recipient to be shown upon donation
data-tubepay-fiat-currency No Currency to translate the amount of TUBE to

Paste the code inside a section tag. For Wordpress, placing it will depend on your editor. You can use a text element or Raw (code) element.

The code above looks like this:

This is enough to make the button work.

The button appearance.

By default the Donation button has the following CSS:

.am-donate-main .donation-info .button{
    cursor: default;
    text-align: center;
    margin: 0px;
    border-radius: 4px;
    padding: 1px 6px;
    border: 1px solid #00abff;
    background: #00abff;
    color: #fff;
    height: auto;
    display: inline-block;
}

To change the style use the bellow ID and include it in your style.css file

 .am-donate-main .donation-info .button

and to overwrite the default CSS use:

 !important ;

If you are using Wordpress including the CSS code in your custom CSS field for the particular page will apply the styling.

Button interaction.

The visitors on your website can change the donation amount by typing in the amount field. 

When the button is clicked it will open the AirTime module sidebar. 

In case the visitor is not a BitTube user (they don't have the BitTube browser extension installed) they can sign up with email or social network directly from the sidebar.

BitTube users can top up their account with $TUBE via wire transfer, debit card or another cryptocurrency.

Thank you for using BitTube AirTime. If you have any questions use the Help Desk button on the left.

Still need help? Contact Us Contact Us