Webflow Integration

What We Currently Support in Webflow

Feature support in Webflow:

• iFrame embed (paste into a Webflow Code Embed element)

• Customiser Links (needs Enable Customiser Link ticked, and either Quote Mode turned on for the customiser or Etsy connected. A Universal Store also needs an active subscription, or a trial with a payment method)

• Quote Mode

• Add to Cart (requires custom implementation)

• Order Integration (not built in)

• Manufacturer Emails (not built in)

How to Integrate Sign Customiser in Webflow

Steps to Find Your Customiser ID

1. Log in to your Sign Customiser account.

2. Create your customiser.

3. Click Customisers in the menu.

4. Find your customiser in the list. Write down the number in the Customiser ID column.

You can also click the name of your customiser. The Overview page shows the same number in the chip that starts with ID:.

For more help, see Find your Sign Customiser ID.

Embedding Sign Customiser in Webflow

1. Log in to your Webflow account.

2. Open the page where you want to show the customiser.

3. Select the layout element where you want to add the customiser.

4. Open the Add panel in Webflow.

5. Drag the Code Embed element from the advanced section into that element. See Code Embed element in Webflow University.

6. Paste this iframe code into the Code Embed element:

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

7. Replace YOUR_CUSTOMISER_ID with your customiser ID.

8. Save your changes.

The style attribute makes the customiser fill the width of its container, and its height when the container has a set height. Keep it in the code. If the customiser is too small, set a fixed height in the iframe instead, for example height:700px.

FAQ

How do I connect Sign Customiser to use the “Add to Cart” functionality?

The “Add to Cart” feature requires custom implementation. To start, follow our Custom Integration: How to Handle “Add to Cart” Actions guide.