Third-Party Forms

Send configurator selections straight into third-party forms with no back-end code. Learn to listen for the Add to Cart event and pre-fill a Zapier Interfaces form.

Capture product configuration data from Mimeeq configurators and automatically pre-fill third-party forms like Zapier Interfaces. This no-code guide shows how to listen for browser events, pass configuration details via URL parameters and trigger automated workflows, with no back end required.

When a user clicks the Add to Cart (or Request a Quote) button inside a Mimeeq configurator, the embed fires a browser event called mimeeq-add-to-cart. This event carries a rich payload describing exactly what the user configured: selected options, quantities, pricing, product codes and more.

We use Zapier Interfaces as the example form tool because it has a generous free tier and connects natively to the rest of the Zapier automation ecosystem (email, Google Sheets, HubSpot, Salesforce, Slack and hundreds more). The same approach works with most other embeddable form tools (Typeform, Tally, HubSpot forms, etc.) as long as they support URL query-parameter pre-filling.

---

How it works

---

Part 1 — Understanding the event payload

When the mimeeq-add-to-cart event fires, event.detail contains an object with the following useful properties. You don't need to use all of them. Pick what makes sense for your workflow.

Property	Description	Example value
productCode	The base product identifier	"SOFA-3S"
variantCode	Full encoded variant string (encodes the entire configuration)	"SOFA-3S~...~"
price	Total calculated price	1299.00
currency	Currency code	"EUR"
quantity	Quantity selected	1
selectedOptionsList	Array of selected options with human-readable labels	See below
selectedOptions	Object map of option set codes to selected value codes	{ "fabric": "velvet-blue" }
shortCode	The configurator's short code	"IYCMLZ"

selectedOptionsList in detail

Each item in this array describes one chosen option:

{
  "blockName": "Fabric",
  "optionSetName": "Fabric",
  "valueShortCode": "velvet-blue",
  "value": "Velvet Blue",
  "price": 0
}

This is the most human-readable way to summarise what was configured. It is ideal for passing into a form field or email body.

Accessing the payload in JavaScript

document.addEventListener('mimeeq-add-to-cart', function(event) {
    var payload = event.detail;

    console.log('Product code:', payload.productCode);
    console.log('Variant code:', payload.variantCode);
    console.log('Price:', payload.price, payload.currency);
    console.log('Full payload:', payload);
});

Open your browser's developer console while testing to inspect the full object. The exact properties available may vary depending on your configurator setup.

---

Part 2 — Setting up a Zapier Interfaces form

1

Create a free Zapier account

Go to zapier.com and sign up. The free plan is sufficient to follow this guide.

2

Create a new Interface

1. From the Zapier dashboard, click Interfaces in the left sidebar (or visit interfaces.zapier.com).

2. Click + New Interface.

3. Choose Form as the starting template.

4. Give your form a name, e.g. "Product Enquiry".

3

Add your form fields

Add whatever fields you need for your workflow. For a product enquiry use case, typical fields would be:

• Name (short text)

• Email (email)

• Phone (short text, optional)

• Message / Notes (long text, optional)

• Configuration Summary: a hidden or read-only field that will receive the selected options automatically

• Configuration URL: a hidden field that will receive the page URL including the full variant code

Tip: hidden fields are ideal for technical data like the configuration summary and URL. Visitors won't see them, but they will be captured and passed through to your Zap.

4

Note the field IDs

Every field in a Zapier Interfaces form has a unique ID (e.g. field-068b, field-fa17). You'll need these to pre-fill fields via query parameters. To find a field ID:

1. Click on a field in the form editor.

2. Look at the Field Settings panel. The ID is shown there, or it appears in the embed/share URL when you preview the form.

Make a note of the IDs for the fields you want to pre-fill (typically your configuration summary field and configuration URL field).

5

Enable query parameter support

This is a critical step. By default, Zapier Interfaces forms do not accept pre-filled values from the URL. Without this setting enabled, query parameters passed in the URL will be ignored and fields will not be pre-filled.

In the Zapier Interfaces form editor:

1. Go to Settings (or Share / Embed settings, depending on your interface version).

2. Look for the option labelled "Allow query params", "Accept URL parameters" or similar.

3. Turn this on.

6

Get the embed code

Still in the Zapier Interfaces editor, go to the Share / Embed tab and copy the web component embed snippet. It will look something like this:

<script type="module" src="https://interfaces.zapier.com/assets/web-components/zapier-interfaces/zapier-interfaces.esm.js"></script>

<zapier-interfaces-page-embed
  page-id="YOUR_PAGE_ID"
  allow-query-params="true"
  style="width: 100%; height: 600px;">
</zapier-interfaces-page-embed>

Note the allow-query-params="true" attribute. It must be present on the element for pre-filling to work.

---

Part 3 — Adding the Mimeeq embed to your page

Add the Mimeeq configurator embed to your page using the standard embed snippet from your Mimeeq account. The short code is unique to your configurator:

<mmq-embed short-code="YOUR_SHORT_CODE" template="default" locale="en"></mmq-embed>
<script src="https://cdn.mimeeq.com/read_models/embed/app-embed.js" type="application/javascript" async></script>

Replace YOUR_SHORT_CODE with the short code shown in your Mimeeq admin panel for the relevant configurator.

---

Part 4 — Wiring it together with JavaScript

This JavaScript listens for the Mimeeq event and opens the pre-filled Zapier form. Adapt the field IDs (field-XXXX) to match the actual field IDs from your own form.

Option A — Inline on the same page

Show the form inline on the same page:

document.addEventListener('mimeeq-add-to-cart', function(event) {
    var payload = event.detail;

    // Build a human-readable summary of what was configured
    var summary = '';
    if (payload.selectedOptionsList && payload.selectedOptionsList.length > 0) {
        summary = payload.selectedOptionsList.map(function(opt) {
            return (opt.blockName || opt.optionSetName) + ' = ' + (opt.value || opt.valueShortCode || '');
        }).join('\n');
    }

    // Capture the current page URL (contains the full variantCode as a query param)
    var pageURL = window.location.href;

    // Build the query string using your actual Zapier field IDs
    var queryString = 'field-XXXX=' + encodeURIComponent(pageURL) +
                      '&field-YYYY=' + encodeURIComponent(summary);

    // Set the query params on the embed element and show it
    var embed = document.querySelector('zapier-interfaces-page-embed');
    embed.setAttribute('query-params', queryString);

    // If you're showing it in a modal or hidden div, reveal it here
    document.getElementById('your-form-container').style.display = 'block';
});

Option B — Modal overlay

A common pattern is to hide the form in a modal that appears when Add to Cart is clicked. The Zapier web component reads query-params only once, when it is first inserted into the DOM. If the component is already on the page, you need to remove and re-insert it to pass new values.

document.addEventListener('mimeeq-add-to-cart', function(event) {
    var payload = event.detail;

    // Build configuration summary
    var summary = '';
    if (payload.selectedOptionsList && payload.selectedOptionsList.length > 0) {
        summary = payload.selectedOptionsList.map(function(opt) {
            return (opt.blockName || opt.optionSetName) + ' = ' + (opt.value || opt.valueShortCode || '');
        }).join('\n');
    }

    // Truncate if very long to stay within URL length limits
    if (summary.length > 3000) {
        summary = summary.substring(0, 3000) + '... (truncated)';
    }

    var pageURL = window.location.href;
    var queryString = 'field-XXXX=' + encodeURIComponent(pageURL) +
                      '&field-YYYY=' + encodeURIComponent(summary);

    // Remove old embed and insert a fresh one so it picks up the new query params
    var container = document.getElementById('form-embed-container');
    var oldEmbed = container.querySelector('zapier-interfaces-page-embed');
    if (oldEmbed) {
        container.removeChild(oldEmbed);
    }

    var newEmbed = document.createElement('zapier-interfaces-page-embed');
    newEmbed.setAttribute('page-id', 'YOUR_PAGE_ID');
    newEmbed.setAttribute('allow-query-params', 'true');
    newEmbed.setAttribute('query-params', queryString);
    newEmbed.style.cssText = 'width: 100%; height: 80vh;';
    container.appendChild(newEmbed);

    // Show the modal
    document.getElementById('your-modal').style.display = 'flex';
});

// Close modal
document.getElementById('close-modal-btn').addEventListener('click', function() {
    document.getElementById('your-modal').style.display = 'none';
});

---

Part 5 — Connecting the form to actions in Zapier

Once your form is collecting submissions, you can trigger any automated action using a Zap.

1. In Zapier, click + Create Zap.

2. Set the Trigger to Zapier Interfaces — New Form Submission and select your form.

3. Add one or more Actions, for example:

   • Gmail / Outlook: send a notification email to your sales team with the configuration details

   • Google Sheets: append a row to a leads spreadsheet

   • HubSpot / Salesforce / Pipedrive: create or update a CRM contact and deal

   • Slack: post a message to a channel

   • Webhooks by Zapier: POST the data to any custom endpoint

Each action step in Zapier lets you map the form field values (including your pre-filled configuration summary and URL) into the relevant fields of the destination app.

---

Troubleshooting

Fields are not being pre-filled

• Confirm that "Allow query params" is enabled in the Zapier Interfaces form settings.

• Confirm that allow-query-params="true" is set on the element.

• Check that the field IDs in your query string exactly match the IDs shown in the form editor.

• If re-using an already-rendered embed, make sure you are removing and re-inserting the element (the web component only reads query-params on first render).

The event is not firing

• Open your browser console and add a temporary listener for mimeeq-add-to-cart to confirm the event fires.

• Make sure the Mimeeq embed script has loaded before your listener is registered. Placing your script at the bottom of the page body or using defer helps.

The configuration summary is being cut off

• URL query parameters have practical length limits (typically 2,000–8,000 characters depending on browser and server). If a configuration has many options, truncate the summary to a safe length (e.g. 3,000 characters). Rely on the configuration URL, which contains the full variantCode, to reconstruct the exact configuration if needed.

The modal appears but the form is blank

• This is usually the re-insertion issue described above. Remove the old element from the DOM before creating a new one.

---

Related articles

Integration Guide

Connect the configurator to any store using Mimeeq APIs.

Shopify Add to Cart Methods

Choose how configured products and bundles reach the cart.