Card Isle Embed Documentation

Easily offer Card Isle cards within your Ecommerce platform.


Bring your customers access to Card Isle's collection of over 9,000 greeting card designs and the ability to upload personal photos. Simply drop in a few lines of code to your website, and install a plug-and-play printer at your distribution facility.



Your card:



Your message:

Artist signature:

Embedded iFrame Documentation

Our goal is to make this easy

If you have any questions, please don't hesitate to reach out to info@cardisle.com.


Overview of the integration

Step 1. Use our tools to add a greeting card upsell to your website.

Step 2. Customers personalized their own cards on your site.

Step 3. Print cards in your shop and include with order.


Required components

Card Isle's greeting card design functionality is added to your website via an iFrame. We provide a library to take care of making the integration mobile-friendly and taking care of the communication between the iFrame and your site. The three components required for this integration are listed below.

Javascript library: All functionality for the embedded iFrame is included in this library: https://s3.amazonaws.com/cardisle.web/static/ecommerce/shop_embed.js

Card Isle Button: Assigning the class card-isle-button to a clickable element (e.g. button, div, etc.) provides an anchor for the Javascript library.

Event Listener: The Card Isle iFrame will communicate details of your customer's card selection through a message that can be captured via an event listener.


A simple demonstration

The intention of this demo is to provide you with a simple but complete example of how the Card Isle integration can be built.

<html>
<head>
<style>
  img {
    width: 100px;
    display: block;
    border: solid 1px gray;
    margin: 10px 0;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- import the Card Isle Javascript library -->
<script src="https://s3.amazonaws.com/cardisle.web/static/ecommerce/shop_embed.js"></script>
<script>
  $(document).ready(function() {
          // initiate Card Isle functionality after the page has loaded
    initiate_card_isle_widget();
    window.addEventListener("message", receiveMessage, false);
    function receiveMessage(event) {
                // verify that message came from Card Isle
      if (event.origin !== "https://www.cardisle.com")
        return;
      if (typeof event.data.status !== "undefined"){
        if (event.data.status == "success") {
          $(".card-isle-button").after("<img width=100 src='" + event.data.card_image + "' />");
          $(".card-isle-button").after("<p><b>Card name: </b>" + event.data.card_name + "</p>");
          $(".card-isle-button").after("<p><b>Card inside text: </b>" + event.data.card_text + "</p>");
          $(".card-isle-button").after("<p><b>Pickup code: </b>" + event.data.pickup_code + "</p>");
        }
      }
    }
  });
</script>
</head>
<body>
  <button type="button" class="card-isle-button">DEMO: Click me</button>
</body>
</html>

Details of the JSON message from the Card Isle iFrame:

RESPONSE PARAMETERS:
  status: "success" or "failure"
  pickup_code: unique 5-digit code that will be used to print the card
  card_image: url to a thumbnail of the card cover art
  card_text: peronalized message from inside of card
  artist_signature: signature of artist who created the cover art

EXAMPLE RESPONSE:
{
  "status": "success",
  "pickup_code": "123ab",
  "card_image": "https://urltoimage.jpg",
  "card_text": "Happy Earth Day!",
  "artist_signature": "Lyonel Feininger"
}

Printing the cards is easy

We have a user-friendly interface for printing cards from your Card Isle printer, but if you would like an API integration into your platform, we offer that as well.

POST ENDPOINT: https://cardisle.com/api/partner/print

POST PARAMETERS:
  pickup_code: (REQUIRED) the same pickup_code that was created when the card was designed
  partner_uuid: (REQUIRED) your printer's unique identifier (provided by Card Isle)
  testing: (OPTIONAL) boolean to test API

EXAMPLE POST:
{
  "pickup_code": "123ab"
  "partner_uuid": "11111111-aaaa-bbbb-2222-cccccccccccc"
}

RESPONSE PARAMETERS:
  status: "success" or "failure"
  message: if there is a failure, this will give a brief description of why

EXAMPLE RESPONSE:
{
  "status": "success",
  "message": "None"
}


Card Examples

Want to learn more?