Individual Card Ordering Intro
The InstantCard ICO is currently in BETA.
Please Contact Us with any suggestions or bugs!
The InstantCard ICO lets you easily integrate card ordering into your own website. The system allows you to choose whether individuals pay for cards themselves at checkout, or if the cost should be deducted from your organization’s InstantCard account. Cards are sent to any address entered within the US.
This allows you to do several things without needing any knowledge of coding:
• Easily distribute membership cards
• Keep visitors on your website even when ordering badges
• Have remote contractors order badges to their own addresses
• Create a revenue stream from cards on your website
• Appear as the distributor of a given ID/badge
To use the the ICO, you must place the following elements in the page where you would like the order form to appear:
For site performance, it is recommended that you place the script only in the footer of pages where it is used. Sometimes, however, certain conflicts require it to be placed in the HEAD section.
IMPORTANT: This script uses JQuery, which must be loaded on your site to use the ICO.
Wrapping Element (DIV)
Place this exactly where you would like the order form to appear in the page. This is where the order form will be generated, regardless of the placement of the other elements. Note, you may use any id for this DIV, but you must make sure that the “my_div” parameter (in the code which follows) corresponds to the name. This is to avoid any potential naming conflict, and is only recommended if you already have an HTML element with the same id.
This is the script which hold’s your organization’s info, as well as optional parameters which allow you to change some functionality and styling. Above you see only the required parameters to initialize the ICO. To see optional parameters, go to the PARAMETERS section of this page.
|This is a public API token associated with a specific user for your organization. This is required to use the ICO. By default, users do not have a public token assigned. Please CONTACT US to have one generated for a user.|
|card_template_id||integer||18949||This is the ID for the card template you wish to be used for the ICO. If you do not know the unique number for the card template, you may contact us.|
|organization_id||integer||20004593||This is the ID for your organization. If you do not know the unique number for your organization, you may contact us.|
|my_div||string||“ICO”||This is the id used for the wrapping element in which the ICO will be generated on the page.|
|color||string||“grey”||This is the primary color used for fonts, buttons, etc, unless overridden by your site’s CSS.|
|accent_color||string||“#07d”||This is the highlight color, used for things such as breadcrumbs, and the waiting spinner.|
|font_family||string||“helvetica”||This is the font family used for the ICO, unless overridden by your site’s CSS.|
The individual ordering pays for the card(s) at checkout using a valid credit card.
The ICO runs in a staging environment, and no cards will be ordered. Attention: to use this you must make sure your organization and card template(s) have been migrated to staging in the InstantCard system.
While in staging, if “pay_on_checkout : true”, you may use the following credit card details to test the system:
CC: 4242 4242 4242 4242 | EXP: [any future date] | CVC: 424
The user may order as many cards as they wish, up to an optionally defined maximum. Note: optional “maximum” parameter hasn’t been implemented yet.
DEPRECATED see “price”
true- The ICO fetches the price to ship a card and displays the per-card-cost below the breadcrumbs.
false- The per-card-cost is not displayed. Only the final total will be displayed at checkout.
All countries are available for shipping, extra postage is applied to all orders outside of US and Canada. Initial price is listed “$xx.xx + postage” when “if per_card_cost:true”.
|price||integer||||Card price in cents.
If “int_ship=false”, enter price with postage. If “int_ship=true”, enter price without postage. Leave blank to not display price until payment (for “pay_on_checkout=true”).
Example code with all parameters
Note: It does not matter in what order the parameters are listed.
Limited styling options may be found in the OPTIONAL PARAMETERS. For all other styling, you must request a copy of the ICO CSS file, edit it, and host it locally. Alternatively, you may override certain CSS classes on your site using the “important!” tag, but this is only recommended if only a few, minor changes are required.
If you wish to change the text used in the ICO (say, for example, you wish to translate everything to another language), you must first request the source files to host locally. Then, most text strings may be changed within the ICO_variables.js file.
This is a working example, which uses the InstantCard ICO. The following code generates the form below. Since it is in staging, you may try it yourself with the following credit card information:
CC: 4242424242424242 | EXP: [any future date] | CVC: 424
The ICO was developed to run on any site running JQuery. There are, however, from time-to-time conflicts due to some sites’ legacy plugins, older versions of JQuery, etc. In these cases, there are several workarounds to ensure you can use the card ordering ICO on any website.
Option 1: InstantCard-hosted iframe
Once set up, you will receive a small snippet of code that looks like the following:
which generates the following:
NOTE: The side scroll bar comes from the height chosen in the iframe parameters. To avoid this, replace the height (in this case, “500px”) with a height that accommodates the form for your given template. Some trial and error may be required to achieve a good height.
Option 2: self-hosted iframe
If you are aware of conflicts within your CMS, but also know to create basic HTML pages under your domain, you may host your own iframe. To do this, create a basic HTML document, placing your ICO code where the following example has “→ put your ICO code here ←”
Name your HTML document something appropriate (for example, “example.html”) and upload it to the public_html folder for your website.
(note: if you don’t know how to do this, please see iframe option 1)
Then, use the following code anywhere within your CMS:
NOTE: A side scroll bar may be generated by height chosen in the iframe parameters. To avoid this, replace the height (in this case, “500px”) with a height that accommodates the form for your given template. Some trial and error may be required to achieve a good height.
“window.onload” Not Triggering
In some cases, especially with certain conflicts within a CMS, the “window.onload” command won’t trigger in that case replace the following code