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.