Skip to main content

Generic Integration Guide

Updated yesterday

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

  1. Log in to your Sign Customiser dashboard.

  2. Ensure you have already generated your API Key and copied it.

  3. Copy the token – you will use it in the Authorization header 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_after

    • Custom: 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

403 Forbidden response

Invalid or missing API token

Regenerate the token and update the Authorization header

422 Unprocessable Entity

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

Did this answer your question?