Client-side Integration
Client-side integration is the first step towards fully enabling your App with Kachingle.
Adding Kachingle Javascript API to your application
The Kachingle Javascript API must be invoked at the top of the page to check on the cookie and authentication status of the user before drawing any Medallion.
You may either use the standard HTML <script> tag or use the PHP API get_js_code_tag method.
The Javascript Way
<script type="text/javascript" src="http://api.kachingle.com/code.js?app_id=your_app_id></script>
If you want the Javascript API to work for multiple app IDs:
<script type="text/javascript" src="http://api.kachingle.com/code.js?app_id[]=your_app_id_1&app_id[]=your_app_id_2></script>
In sandbox mode, replace the source URL with http://api.sandbox.kachingle.net.
The PHP Way
After instantiating the API Kachingle Premium class, call the get_js_code_tag method by passing an app ID or an array of app IDs.
On the sandbox:
<?php
$api = new Kachingle(Kachingle::use_sandbox);
echo $api->get_js_code_tag($my_app_id);
?>
In production:
<?php
$api = new Kachingle(Kachingle::use_live_www);
echo $api->get_js_code_tag($my_app_id);
?>
Displaying the Medallion
Any page that is enabled with the Kachingle Premium Javascript API is now ready to display Kachingle Medallions.
To implement a Medallion:
-
Create a tag in the body of your HTML with a custom id attribute.
<div id="kp_medallion_id"></div>
-
Below the tag, call the Javascript API place_medallion method by passing your app ID, the id attribute of the tag and the optional featured_bundle parameter.
The featured_bundle argument is used to display the Bundle you want to promote to your users. When supplied, a user who clicks on the Medallion will be taken to a Kachingle join page branded with your App and highlighting your chosen Bundle. When not supplied, the user will be presented the same join page showing all Bundles containing your App, but without any particular Bundle highlighted.
<script>
kachingle.place_medallion(your_app_id, "kp_medallion_id", featured_bundle);
</script>
« Previous: Development Process Next: Server Side Integration »