Custom Builder Integration

Champro Custom Builder Integration

Champro Custom Builder integration allows dealers to:

– Embed Champro Custom Builder on their website.
– Use API to access customer designs, rosters, SKUs and PDF art proofs.
– Purchase customer designed products via the Champro website or API.

1. Embedding Custom Builder

Embedding Custom Builder (CB) allows your customers to build custom uniforms on your website. After the customer saves the design on the embedded CB, it will appear in your “My Designs 3D” page on Champro website ( https://champrosports.com/cslockerroom/index/#/locker-room )

My Designs 3D page allows you to make necessary adjustments to the custom product design, roster and place the order online.

Embedding CB is a two step process requiring minimal technical knowledge.

1.1 Generate Customer Key

You can generate your CB API key on the Account & Contact Info page ( https://champrosports.com/AccountAndContactInfo ):

1.2 Embed The Code

When embedding Custom Builder please use one of the Embed URLs from the table below:

Category	Embed URL
All Categories	"https://cb.champrosports.com/V2/Index?lic=EnterYourCustomerKeyHere"
BASEBALL	"https://cb.champrosports.com/V2/Index/1335?cat=s&Name=BASEBALL&lic=EnterYourCustomerKeyHere"
FASTPITCH	"https://cb.champrosports.com/V2/Index/1344?cat=s&Name=FASTPITCH&lic=EnterYourCustomerKeyHere"
MEN'S BASKETBALL	"http://cb.champrosports.com/V2/Index/1391?Name=MEN%27S%20BASKETBALL&lic=EnterYourCustomerKeyHere"
WOMEN'S BASKETBALL	"http://cb.champrosports.com/V2/Index/1387?Name=WOMEN%27S%20BASKETBALL&lic=EnterYourCustomerKeyHere"
FOOTBALL	"https://cb.champrosports.com/V2/Index/1368?cat=s&Name=FOOTBALL&lic=EnterYourCustomerKeyHere"
HOCKEY	"http://cb.champrosports.com/V2/Index/1389?Name=HOCKEY&lic=EnterYourCustomerKeyHere"
MEN'S SPORTSWEAR	"http://cb.champrosports.com/V2/Index/1406?Name=MEN%27S%20SPORTSWEAR&lic=EnterYourCustomerKeyHere"
WOMEN'S SPORTSWEAR	"http://cb.champrosports.com/V2/Index/1407?Name=WOMEN%27S%20SPORTSWEAR&lic=EnterYourCustomerKeyHere"
WOMEN'S VOLLEYBALL	"http://cb.champrosports.com/V2/Index/1400?Name=WOMEN%27S%20VOLLEYBALL&lic=EnterYourCustomerKeyHere"
SPLASH	"https://cb.champrosports.com/V2/Index/1352?cat=s&Name=SPLASH&lic=EnterYourCustomerKeyHere"
CAPS	"https://cb.champrosports.com/V2/Index/1312?cat=s&Name=CAPS&lic=EnterYourCustomerKeyHere"
FACE COVERINGS	"https://cb.champrosports.com/V2/Index/1302?cat=s&Name=FACE%20COVERINGS&lic=EnterYourCustomerKeyHere"

2. Custom Builder API:

Using the Custom Builder API requires more technical knowledge and time commitment, but allows full automation in processing of custom uniform orders. You can use CB API to :

– Access customer designs, rosters, SKUs and PDF art proofs
– Place orders

In order to use the Custom Builder API, you must have a Customer Key and should have Custom Builder Embedded on your website (see instructions above). You can use source code of the Custom Builder API Demo as a reference.

2.1 Get Design Session IDs

Design Session ID is sent back to you via AddEventListener() method after Save Design button is clicked. The following function is the event listener on the parent page for events in the child iFrame.

window.addEventListener("message", (event) => {

if (event.data && event.data.sender == "CustomBuilder") {

cb_callback(event.data.action, event.data.message);

}

});

The following function handles information from the listener.

function cb_callback(cb_action, cb_id) {

//add you code for handling DesignSessionID
//cb_action - code of action sent from child iFrame. For saving of design it returns as "ProcessDesign"
//cb_id - "Design Session ID" - session id for stored design - you can use this Session Id to get additional information or placing the order
//not mandatory JS code

}

2.2 Get Order Data methods

2.2.1 Download Proof file

You can call the following API address to download the PDF file

https://cb.champrosports.com/api/Order/GetFile?CustomerKey=YOUR_CUSTOMER_KEY&SessionId=YOUR_SAVED_DESIGN_SESSION_ID&FileType=ProofPdf

2.2.2 Download FrontImage file

You can call the following API address to download the FRONT image

https://cb.champrosports.com/api/Order/GetFile?CustomerKey=YOUR_CUSTOMER_KEY&SessionId=YOUR_SAVED_DESIGN_SESSION_ID&FileType=FrontImage

2.2.3 Download BackImage file

You can call the following API address to download the BACK image

https://cb.champrosports.com/api/Order/GetFile?CustomerKey=YOUR_CUSTOMER_KEY&SessionId=YOUR_SAVED_DESIGN_SESSION_ID&FileType=BackImage

2.2.4 Download LeftImage file

You can call the following API address to download the LEFT image

https://cb.champrosports.com/api/Order/GetFile?CustomerKey=YOUR_CUSTOMER_KEY&SessionId=YOUR_SAVED_DESIGN_SESSION_ID&FileType=LeftImage

2.2.5 Download RightImage file

You can call the following API address to download the RIGHT image

https://cb.champrosports.com/api/Order/GetFile?CustomerKey=YOUR_CUSTOMER_KEY&SessionId=YOUR_SAVED_DESIGN_SESSION_ID&FileType=RightImage

2.2.6 Retrieve Order data

You can call the following API address to download the ORDER DATA (JSON file)

https://cb.champrosports.com/api/Order/GetOrderInfo?CustomerKey=YOUR_CUSTOMER_KEY&SessionId=YOUR_SAVED_DESIGN_SESSION_ID

The JSON file has the following structure:

{

"KbCartItemId":"integer",
"CreatedDataTime":"string",
"RosterLineId":"GUID",
"ProductName":"string",
"DesignName":"string",
"DesignColor":"string",
"Notes":"string",
"SelectedFabric":"string",
"SelectedLeadTime": {

"LeadTimeId":"string",
"LeadTimeName":"string",
"LeadTimeDays":"integer"

},
"AvailableLeadTimes": [ {

"LeadTimeId":"string",
"LeadTimeName":"string",
"LeadTimeDays":"integer"

} ],
"Quantity":"integer",
"Teams": [ {

"TeamLineId":"GUID",
"TeamName":"string",
"Quantity":"integer",
"Players": [ {

"PlayerName":"string",
"PlayerNumber":"string",
"PlayerSize":"string",
"Quantity":"integer",
"SKU":"null",

} ],

}

2.3 Place Order Method

In order to place orders via API, you must provide your IP address(es) on the Account & Contact Info page ( https://champrosports.com/AccountAndContactInfo )

To place the order via our API you can send POST request

https://cb.champrosports.com/api/Order/PlaceOrder
(JQuery example: $.post( 'https://cb.champrosports.com/api/Order/PlaceOrder', OrderData))

With JSON data following structure

{

"CustomerKey":"string",
"SessionId":"string",
"PONumber":"string",
"LeadTimeId":"string",
"ShipTo": {

"FirstName":"string",
"LastName":"string",
"Company":"string",
"Phone":"string",
"Address1":"string",
"Address2":"string",
"Suite":"string",
"City":"string",
"State":"string",
"Zip":"string",
"Country":"string"

}

Once order is placed we return the response following structure

{

"Result":"string",
"Order":"string",
"Message":"string",
"MessageCode":"string",
"AllowedValues":"string",
"ValidatedShippingAddress": {

}

“Result”: {"OK" || "ERROR"}
“Order”: {placed order number if Result is "OK"}
“Message”: {error text description if Result is "ERROR"}
“MessageCode”: {"01" = "Lead Time is not entered" || "02" = "wrong Lead Time code" || "03" = "error in address validator service" || "04" = "address is not validated" || "05" = "Design session ID or Customer Key are wrong, does not match or roster is empty" || "06" - not able to resolve SKU || "07" = "Do not allow to place order with your Terms of payment" || “08” = “It does not allow to place order from your IP address”}
“AllowedValues”: {comma separated list of available values if it is applied s.a. for MessageCode "02"}

Customer must validate Address before submitting the order.To validate Address, please use UPS Validate an Address page.

List Of Error Codes:

"01" = "Lead Time is not entered"
"02" = "wrong Lead Time code"
"03" = "error in address validator service"
"04" = "address is not validated"
"05" = "Design session ID or Customer Key are wrong, does not match or roster is empty"
"06" = "not able to resolve SKU"
"07" = "Do not allow to place order with your Term of payment"
"08" = "It does not allow to place order from your IP address"

You can see how it was implemented in sources on our Example page