# Embed the customiser on any website

Add the customiser to almost any website with an iframe embed — works on plain HTML, no-code site builders, and any platform with a custom code or embed block.

- Source URL: https://www.signcustomiser.com/help/integrations/15788612-embed-the-customiser-on-any-website/
- Markdown URL: https://www.signcustomiser.com/help/integrations/15788612-embed-the-customiser-on-any-website.md
- Category: Integrations
- Last updated: 2026-07-02

## Article

The customiser runs inside an iframe, so you can add it to almost any website — a plain HTML page, a site builder like Framer, Carrd or Ghost, or any platform with a "custom code" or "embed" block. All you need is your customiser's ID.

## Before you start

<div class="intercom-interblocks-callout" style="background-color: #e3e7fa80; border-color: #334bfa33;"><p class="no-margin"><b>Note:</b> Embedding the customiser on your own website is a <a href="https://web.signcustomiser.com/register" target="_blank" class="intercom-content-link">Universal Plan</a> feature. Sign in at <a href="https://web.signcustomiser.com/login" target="_blank" class="intercom-content-link">web.signcustomiser.com</a>.</p></div>

You'll need two things:

-   A customiser you've built and want to show.

-   Its **Customiser ID** — the number that tells the embed which customiser to load. See [Find your Sign Customiser ID](../../integrations/find-your-sign-customiser-id/).

## Add the customiser to your page

Paste this where you want the customiser to appear, and replace **YOUR\_CUSTOMISER\_ID** with your own ID:

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

It works anywhere you can add an iframe, custom HTML, or an "embed" or "code" block — that covers most website builders and hand-coded pages. There's nothing to install.

## Sizing the customiser

The customiser fills the space you give it — it doesn't grow to fit its own contents. Set a height so it isn't squashed:

-   Give it a fixed height, for example `height:700px`:

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

-   Or give the block or section that holds the iframe a height, and leave the iframe at `height:100%`.

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

## Display options

Add these to the end of the embed URL to change how the customiser opens:

-   **Start on the AI design screen** — see [Set the Custom Design Form as the Initial Screen](../../ai-sign-designer/set-the-custom-design-form-as-the-initial-screen/).

-   **Right-to-left languages** — add `?rtl=true`.

## Taking orders

The embed lets customers design a sign. If your site has no shopping cart — a brochure, a portfolio, or any page where you take orders by hand — there are two ways to collect those designs:

-   **Quote Mode** — the customiser shows a quote form in place of add to cart. Each design is saved as a submission in your admin, and with email notifications switched on it's also emailed to you, so you can quote and invoice by hand. See [Quote Mode](../../features/quote-mode/).

-   **Customiser Link** — a ready-made page hosted on our domain (`web.signcustomiser.com/hosted/YOUR_CUSTOMISER_ID`) that you point a button or link at, with no embedding at all. To switch it on, set up Quote Mode, then enable the Customiser Link on your Hosted Customisers page. See [Customiser Links](../../integrations/hosted-customisers/).

If you do sell online — through WooCommerce or your own platform — connect your store under **Sales channel setup** in your admin so finished designs go straight into your cart.