IMPORTANT
A special plan is required to use this type of integration. Please contact our sales team to learn more.
To use Kickflip into your own page, you have to integrate an iframe through a standard HTML code. See the following link to understand what is an iframe and how it presents itself in a browser.
Embedding the Kickflip iframe in your page
This explains how to embed the iframe element within your custom store, website or other HTML page. For specific applications or integrations, please contact us at help@gokickflip.com.
Log in the Kickflip Admin.
Under My products, create a product.
Publish your product.
Under Settings / Online stores, click on + Online store, then click on Add custom store.
Enter your online store name, your store's url, select your currency, then hit Create.
Go back to My products and open you product.
Within the Pricing tab, set your product's price and hit Save.
Open the Connect tab.
Optional : Create starting points by clicking on + Design starting point.
Click on the iFrame code button next to your product or starting point to copy the iFrame code.
Paste the iFrame code within your page's HTML code.
The Add to cart button
The Add to cart button creates a design that is saved through our API.
It also sends a local POST message to the iframe parent for further actions. The element containing the parent iframe will receive the message. You have to listen to and handle this post message with javascript code if you want to proceed.
Here's an example of a listener that handles the post message:
const handleAddToCartPostMessage = event => {
if (
event.data.eventName === 'mczrAddToCart' &&
event.origin === 'https://mycompany.gokickflip.com'
) {
const details = event.data.detail
// Handle the post message
}
}
window.addEventListener('message', handleAddToCartPostMessage, false)
Here's an example of an event data detail:
// event.data.detail =
{
"productionData": [
{
"key": "Frame material",
"value": "Red",
"ref": {
"optionId": "OPTION-5rj529",
"choiceId": "CHOICE-5rjf4x"
}
},
{
"key": "Custom name text",
"value": "Jon Snow",
"ref": {
"optionId": "OPTION-5rl3kx",
"choiceId": "CHOICE-5rkq5d"
}
},
{
"key": "Custom name color",
"value": "Mermaid Turquoise",
"ref": {
"optionId": "OPTION-5rl375",
"choiceId": "CHOICE-5rjpf5"
}
},
{
"key": "Mags image",
"value": "Brass",
"ref": {
"optionId": "OPTION-5rjiht",
"choiceId": "CHOICE-5rjvxd"
}
},
{
"key": "Mags material",
"value": "White framing",
"ref": {
"optionId": "OPTION-5rjlup",
"choiceId": "CHOICE-5rk601"
}
},
{
"key": "Bike sticker logo",
"value": "http://cdn.gokickflip.com/mycompany/5e7bffadf6e2af198028ba67.jpg",
"ref": {
"optionId": "OPTION-83hcyr",
"choiceId": "choice-3en2de"
}
}
],
"summary": [
{
"key": "Frame",
"value": "Red"
},
{
"key": "text",
"value": "Jon Snow"
},
{
"key": "color",
"value": "Mermaid Turquoise"
},
{
"key": "image",
"value": "Brass"
},
{
"key": "material",
"value": "White framing"
}
],
"designImages": [],
"_id": "5e7bffc4f6e2af198028ba69",
"price": 223.12,
"configuration": {
"OPTION-5rj529": "CHOICE-5rjf4x",
"OPTION-5rl3kx": {
"id": "CHOICE-5rkq5d",
"type": "text",
"name": "Name",
"views": [
{
"type": "text",
"text": "Jon Snow"
}
],
"value": "Jon Snow"
},
"OPTION-5rkzu9": "CHOICE-5rkti9",
"OPTION-5rl375": "CHOICE-5rjpf5",
"OPTION-5rjiht": "CHOICE-5rjvxd",
"OPTION-5rjlup": "CHOICE-5rk601",
"OPTION-83h9lv": "CHOICE-83gzj7",
"OPTION-83hcyr": {
"id": "choice-3en2de",
"name": "white-star-icon-png-28",
"type": "logo",
"views": [
{
"type": "logo",
"logo": {
"_id": "5e7bffadf6e2af198028ba67",
"originalFilename": "white-star-icon-png-28.jpg",
"size": 40965,
"date": "2020-03-26T01:04:45.702Z",
"filename": "5e7bffadf6e2af198028ba67.jpg",
"url": "http://cdn.gokickflip.com/mycompany/5e7bffadf6e2af198028ba67.jpg",
"id": "5e7bffadf6e2af198028ba67"
}
}
],
"thumbnail": {
"_id": "5e7bffadf6e2af198028ba67",
"originalFilename": "white-star-icon-png-28.jpg",
"size": 40965,
"date": "2020-03-26T01:04:45.702Z",
"filename": "5e7bffadf6e2af198028ba67.jpg",
"url": "http://cdn.gokickflip.com/mycompany/5e7bffadf6e2af198028ba67.jpg",
"id": "5e7bffadf6e2af198028ba67"
}
},
"OPTION-83hgbn": "CHOICE-83h68z",
"OPTION-83hjoj": "CHOICE-83h2w3"
},
"productId": "5e7bfcdcf6e2af198028ba52",
"productName": "Fabulous Bicycle",
"customizerProductId": "5e7bff72f6e2af198028ba5d",
"designImage": {
"_id": "5e7bffc4f6e2af198028ba68",
"originalFilename": "designThumbnail.png",
"size": 2740,
"date": "2020-03-26T01:05:08.036Z",
"filename": "5e7bffc4f6e2af198028ba68.png",
"url": "http://cdn.gokickflip.com/mycompany/5e7bffc4f6e2af198028ba68.png",
"__v": 0,
"id": "5e7bffc4f6e2af198028ba68"
},
"store": null,
"createdAt": "2020-03-26T01:05:08.041Z",
"updatedAt": "2020-03-26T01:05:08.041Z",
"designId": 6010,
"__v": 0,
"id": "5e7bffc4f6e2af198028ba69"
}
TIP
You can try it in the console:
Open the customizer preview and type this code in the console:
`window.addEventListener('message', e => console.log(e))`Click on « Add to cart » and you will see what is logged.
Definitions
Production data
This is what is included in the order sheet. You can decide what is production data by activating the Show in order sheet toggle within the settings of any question in the product builder.
Summary
This is what is included in the order summary. You can decide what appears in the Summary by enabling Show in order summary within the settings of any question in the product builder.
Configuration
This contains the whole design information. This can be useful to get custom information, such as custom imported logos (url links), or custom text if not included in production data / summary.
designImage
The url display the custom product's design thumbnail. Its normally a 250px x something, or a something x 250px image, depending on the larger side. We usually use it to display the product in the cart.
Price
Calculated based on the custom pricing you set up for the specific store. It will not display a valid price on the preview.
CAUTION
For this reason, be careful NOT to use the preview url as the iframe url, which is something that looks like this:
id
This is the design id that can be used to fetch the design data later, by using the API endpoint.
customizerProductId
This is the id of the last published version of your product.
Designs and orders
You can use the Designs page to review what kind of products your clients have created but keep in mind that it does not represent a final order. A final order includes not only the design but the processing status, payment status and other useful fields.
Design images
These are full sized images of every view of the new design. These images are available to download from the design page by clicking on the Download assets button, or when you call the design API.
IMPORTANT
This operation is done asynchronously, so we cannot guarantee when these images have uploaded to our servers.
How to load the Kickflip iframe product page with the designId so that the user can edit the configuration after the product has been added to the cart
The iframe URL pattern for designs is:
https://{brand}.Kickflip.com/customize/design/{designId}?(rest of regular parameters)
The DesignId can be found in the design and pushed in the ‘Add to Cart’ design event.
Loading the answers when editing a product that was already in the cart
For example, if you add a product to you cart with Name input: Dvid (has a typo), and Number: 11. To fix the typo, you would like to load the product with the values "Dvid" and "11".
To proceed, you have to save the designId that is in the postMessage on the Add to Cart. Then, you can load the customizer iframe and change :
E.g.
https://(yourbrand).gokickflip.com/customize/startingpoint/:startingpointid?shopid=:shopid
for
https://(yourbrand).gokickflip.com/customize/design/:designid?shopid=:shopid
This will load the design into the customizer, including the text fields. If the customer clicks on Add to Cart again, it will generate a new design, and you can replace their item in the cart with the new one.