Capturing Configurator Data with a Third-Party Form

Overview

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.

This guide shows you how to listen for that event and pass the data into a third-party form automatically — no back-end code required. 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 — The Big Picture

User configures product → clicks Add to Cart
        ↓
Browser fires: mimeeq-add-to-cart event (with full payload)
        ↓
Your JavaScript reads the payload and builds a query string
        ↓
Zapier Interfaces form opens with fields pre-filled via query params
        ↓
User reviews / adds contact details → submits the form
        ↓
Zapier Zap triggers: send email, write to CRM, log to spreadsheet…

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.

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 and 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

Step 1 — Create a free Zapier account

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

Step 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".

Step 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.

Step 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).

Step 5 — Enable query parameter support

This is a critical step. By default, Zapier Interfaces forms do not accept pre-filled values from the URL. You must explicitly enable this.

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.

Without this setting enabled, query parameters passed in the URL will be ignored and fields will not be pre-filled.

Step 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 — this 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 is the JavaScript that 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 — 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 — Show the form in a modal overlay

A common pattern is to hide the form in a modal that appears when Add to Cart is clicked. The key technical consideration is that 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 <zapier-interfaces-page-embed> 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) and 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 <zapier-interfaces-page-embed> element from the DOM before creating a new one.

Summary

This approach requires no custom back-end. Everything runs in the browser and through Zapier's no-code automation platform, making it accessible to non-developers and quick to set up for any Mimeeq customer.

Updated on: 19/02/2026