The Universal Sign Customizer app can be seamlessly integrated into any website with editable HTML.
To begin, log into your dashboard at web.signcustomiser.com and navigate to your customizer. On the "Overview" tab, you will find the embed code needed for integration.
Step 1: Embed the Customizer
Copy the unique <iframe> code provided and paste it into the HTML of the desired webpage on your site where you want the customizer to be displayed.
Step 2: Handling "Add to Cart" Actions
To enable your website to respond to customers pressing the "Add to Cart" button after designing their sign, you will need to insert the provided JavaScript code directly below the <iframe> within the same HTML page. The script should look like this:
<script>
window.addEventListener('message', event => {
if (event.data.type === "onProductCreated") {
// Write your custom add-to-cart logic here
// Clear the loading state after adding to cart
const iframe = document.querySelector("iframe[src*='signcustomiser.com']");
iframe.contentWindow.postMessage({ type: "hideLoadingScreen" }, "*");
}
});
</script>
The event.data object will contain detailed information about the product, structured as follows:
{
"product": {
"text": "Hello World",
"textAlign": "left",
"font": "Gruppo",
"colour": "PINK",
"size": "50cm",
"material": "",
"productType": "",
"productTypeColour": [],
"support": "Cut to shape",
"supportColour": "Clear Acrylic Transparent - Free",
"jacket": "",
"mounting": "",
"extra": [
{
"name": "Mounting Options",
"value": "Complimentary Silver Installation Kit"
},
{ "name": "Dimmers & Remotes", "value": "Standard Dimmer (+3 USD)" },
{ "name": "Outdoor Use", "value": "No, thanks, it will be for indoor use." }
],
"supportLayers": [],
"price": "86.34",
"comparePrice": null,
"sizeCm": "50cm X 5.59cm",
"sizeIn": "19.69in X 2.2in",
"sizeDisplay": "50cm / 50cm X 5.59cm / 19.69in X 2.2in",
"weight": "null",
"icons": "",
"viaShare": "false",
"description": "Text: Hello World\nText Align: left\nFont: Gruppo\nColour: PINK\nSize: 50cm / 50cm X 5.59cm / 19.69in X 2.2in\nBackboard: Cut to shape\nBackboard Colour: Clear Acrylic Transparent - Free\nMounting Options: Complimentary Silver Installation Kit\nDimmers & Remotes: Standard Dimmer (+3 USD)\nOutdoor Use: No, thanks, it will be for indoor use.",
"taxable": true,
"productImage": "base64 encoded image (redacted here)",
"productImageWhite": "base64 encoded image (redacted here)",
"customBackground": "base64 encoded image (redacted here)",
"customBackgroundOriginal": "base64 encoded image (redacted here)",
"productTypeImageUrls": {
"face": {
"cropped": "https://...",
"original": "https://..."
},
"side": {
"cropped": "https://...",
"original": "https://..."
}
}
},
"customiserId": "123",
"svg": "<svg>...</svg>",
"priceBreakdown": {
"base": 20.00
}
}This product object provides a comprehensive dataset that can be used to create the product in your eCommerce backend and add it directly to the shopping cart.
After creating the product in your own database you need to call our API to let us know about the resulting product ID, along with some data from the onProductCreated event. Here's an example using node.js:
async function syncProductToCustomiser(productData) {
const {
product,
customiserId,
priceBreakdown,
} = productData;
// Remove image data from product object for API call
const cartData = { ...product };
delete cartData.productImage;
delete cartData.productImageWhite;
delete cartData.customBackground;
delete cartData.customBackgroundOriginal;
// create the product in your db and get its ID
const productId = storeSignInDb(productData);
// upload the images to your servers and get a full url back
// you will need to implement this yourself
const customBackgroundUrl = uploadBase64(product.customBackground)
const customBackgroundOriginalUrl = uploadBase64(product.customBackgroundOriginal)
// Prepare API payload
const apiPayload = {
product_id: String(productId),
cart: cartData,
price_breakdown: priceBreakdown || {},
custom_background_path: customBackgroundUrl,
custom_background_original_path: customBackgroundOriginalUrl,
product_type_paths: product.productTypeImageUrls,
logo_original_path: product.logoOriginalUrl || null
};
try {
const response = await fetch(`https://web.signcustomiser.com/api/customisers/${customiserId}/products`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer your-api-token'
},
body: JSON.stringify(apiPayload)
});
if (!response.ok) {
throw new Error(`API request failed: ${response.status}`);
}
const result = await response.json();
console.log('Product synced successfully:', result);
} catch (error) {
console.error('Failed to sync product:', error);
throw error;
}
}
If you do not call our products API we will not be able to properly track orders in the next step.
Step 3 – Sync completed orders to Sign Customiser
Use this guide after embedding the customiser (Step 1) and wiring the Add to Cart listener (Step 2).
1 Hook into your platform's "order-completed" event
Listen for the event that fires when an order is fully paid.
Examples
Magento:
sales_order_place_afterCustom: any server-side webhook or job
When the event fires, gather the data shown in the payload below.
2 Send the order to Sign Customiser
Endpoint
POST https://web.signcustomiser.com/api/orders
Required headers
Authorization: Bearer YOUR_API_TOKEN Content-Type: application/json Accept: application/json X-API-Client: "generic"
Minimal payload
{
"order_id": "123456", // your platform's internal ID
"order_number": "SC-1001", // human-readable code
"products": [
{
"id": "987654321"
} // at least one product ID
]
}Recommended full payload
{
"order_id": "123456",
"order_number": "SC-1001",
"order_total": 86.34,
"order_currency": "USD",
"email": "[email protected]",
"products": [
{
"id": "987654321",
"customiser_id": 42,
"main_image_url": "https://…/main.jpg",
"white_image_url": "https://…/white.jpg",
"svg_image_url": "https://…/design.svg",
"custom_background_url": "https://…/bg.webp",
"custom_background_original_url": "https://…/bg-orig.webp",
"product_type_urls": {
"face": { "cropped": "https://…", "original": "https://…" },
"back": { "cropped": "https://…", "original": "https://…" }
}
}
],
"shipping_address": {
"name": "John Smith",
"phone": "+1 555-123-4567",
"address1": "123 Main St",
"address2": "Suite 4",
"city": "Los Angeles",
"province": "CA",
"country": "US",
"zip": "90001"
},
"shipping_line": "Express"
}Successful response
{ "ok": true }3 What happens next?
Sign Customiser records the order.
Manufacturing/production emails are sent automatically to your configured manufacturer(s).
Order analytics are updated in your dashboard.
No further action is required on your end.
4 Troubleshooting
Symptom | Likely cause | Fix |
| Invalid or missing API token | Regenerate the token and update the |
| Required field missing / wrong type | Validate against the payload spec above |
Order appears in dashboard but no manufacturer email | Manufacturer email not configured | In the dashboard go to Settings → Manufacturers and add an email address |