Embed the customiser on any website

The customiser runs inside an iframe. You can add it to a hand-coded HTML page, or to any other page where you can add an iframe. You need only your customiser’s ID.

Before you start

You need two things:

• A customiser that you built and want to show.

• Its Customiser ID. This number tells the embed which customiser to load. It shows as a chip in the header of the customiser’s Overview page, for example ID: 9025. See Find your Sign Customiser ID.

Add the customiser to your page

Paste this code where you want the customiser to appear. Replace YOUR_CUSTOMISER_ID with your own ID.

<iframe src="https://web.signcustomiser.com/embed/YOUR_CUSTOMISER_ID" style="width:100%; height:100%"></iframe>

It works wherever you can add an iframe, for example on a hand-coded page. You do not install anything.

An iframe shows the customiser. On its own, it does not add a design to a cart. If your site has a shopping cart, read the Selling with a cart section below.

Sizing the customiser

The customiser fills the space that you give it. Set a height for it. Use one of these methods:

• Give the iframe a fixed height, for example height:700px.

  <iframe src="https://web.signcustomiser.com/embed/YOUR_CUSTOMISER_ID" style="width:100%; height:700px"></iframe>

• Give the block or section that holds the iframe a height. Keep the iframe at height:100%.

On phones, allow enough height for the sign preview and the options below it.

Display options

Add these options to the end of the embed URL. They change how the customiser opens. Start the first option with ?. Join more options with &.

• Start on the custom design screen: add ?initial_screen=CUSTOM_DESIGN. This works only if the customiser has a form of type Custom designs. If it has none, the customiser opens on its normal first screen. See Set the Custom Design Form as the Initial Screen.

• Choose a language: add ?language_code=fr. Use the code of a language that you published under Languages. If the code does not match a published language, the customiser opens in your default language. See Choose the customiser language on Shopify and Universal.

• Right-to-left languages: add rtl=true and the language code, for example ?language_code=ar&rtl=true. See Use right-to-left languages.

Taking orders

The embed lets customers design a sign. Your site can have no shopping cart. For example, you can take orders by hand. Then you have two ways to collect designs:

• Quote Mode: the customiser shows a quote form instead of add to cart. Sign Customiser saves each design in your Quotes inbox. It also sends each design by email to the Receiver Email of the quote form. If that field is blank, the email goes to the email address of the Store owner’s account. You then quote and invoice by hand. See Quote Mode.

  To switch it on, do these steps:

  1. Open your customiser.

  2. Go to Features, then Quote Mode.

  3. Tick Enable Quote Mode.

  4. In Select a quote form, select a Quote Mode form. The form must have a required Email field.

  5. Click Save.

  

  A warning icon next to a form in the Forms list means that emails are off for that form. The recipient of the form is inactive. Contact support.

• Customiser Link: a ready-made page on our domain (web.signcustomiser.com/hosted/YOUR_CUSTOMISER_ID). Point a button or link at it. You do not embed anything. See Customiser Links.

  To switch it on, do these steps:

  1. Set up Quote Mode on the customiser.

  2. Under Your Store, open Customiser Links.

  3. Tick Enable Customiser Link.

  4. Click Save.

  The link needs the same live access as the embed. Without it, shoppers see an “unavailable” page.

  

Selling with a cart

On its own, an iframe does not add designs to a cart. If you sell on a platform that has a cart, connect that platform. Each option has its own guide:

• WooCommerce: connect WooCommerce. Then paste the embed code from Embed Instructions on your WooCommerce integration page instead of the iframe. See Connecting WooCommerce with Sign Customiser.

• Wix: connect Wix from Sign Customiser. Then add the Sign Customiser element in the Wix editor. See Wix Integration.

• Etsy: shoppers design on your Customiser Link. They copy their design details and return to your Etsy listing to place the order. You do not use an iframe. See Etsy integration.

• Custom API: use this for your own platform. Your own page code handles the cart. Turn it on first, as the next paragraphs explain. See Custom API Integration.

• Shopify: see Choose how to install Sign Customiser on Shopify.

To connect a platform, go to Integrate, then Integrations. On the card of the platform, click Connect followed by the platform name, for example Connect WooCommerce.

To turn on Custom API, go to Integrate, then Integrations. In the Custom API card, click Connect Custom API. Then, in the dialog, click Enable Custom API. The Custom API card on the Integrations page shows when no integration is active, or when Custom API is already active.

After you connect WooCommerce or Custom API, get the embed code from the integration page. Go to Integrations and click View Details on your integration. Under Embed Instructions, select your customiser in Select Customiser (optional). The code has a script tag and a sign-customiser-embed element.

<script src="..."></script><sign-customiser-embed  customiser-id="YOUR_CUSTOMISER_ID"  integration-id="YOUR_INTEGRATION_ID"  driver="woocommerce"></sign-customiser-embed>

Click Copy Code to copy the code. The code already has your IDs and the script address. The driver value is woocommerce for WooCommerce and custom for Custom API. For WooCommerce, this element sends the finished design to your cart. A plain iframe does not.