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.product object will contain detailed information about the product, structured as follows:
{
"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)"
}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. Integrating this logic ensures a smooth user experience from product customisation to purchase.
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 Create an API token
Log in to your Sign Customiser dashboard.
Ensure you have already generated your API Key and copied it.
Copy the token – you will use it in the
Authorizationheader on every request.
2 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.
3 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 }4 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.
5 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 |