Pico MES

How to integrate Pico MES with Webflow

What is Pico MES? Pico MES is a manufacturing execution system built for discrete manufacturers. It runs digital work instructions at each station, records data from connected tools and devices while operators build, and reports on production and quality. It also exposes an API that other systems call, which is how it reaches an ERP or, in this case, a website.

Shop floor data tends to stay on the shop floor, while the people who ask for it most often never log into the system that holds it, whether that is a customer chasing an order or a plant manager reading a weekly summary. Publishing part of that data to your Webflow site gives them a page instead of a login.

No Pico MES app exists in the Webflow Marketplace, and neither product ships a native connector for the other, so every method below is custom work that you build and maintain. You can integrate Pico MES with Webflow by using custom code or adding Code Embed elements to your site, or by building with Webflow APIs to sync manufacturing data into Webflow CMS, route form submissions into Pico MES, and publish updates when production events fire.

Here is how to do both.

Use custom code embeds

Client-side embeds are the quickest way to put Pico MES data on a page, and they fit read-only displays such as a production counter or a station status board.

Decide first which Pico MES values you need and how they leave the system, either as a reporting export or as an authenticated call to the Pico API. Render them on the page with a Code Embed element, or add a site-wide script under custom code in your site settings when the same indicator belongs in a header on every page. Where the values already sit in CMS fields, you can pass them into an embed with dynamic custom code.

Teams building on Webflow use this pattern in a few familiar ways:

• Live production counters: A short script fetches current counts from your Pico MES data source and writes them into text elements on the page on a fixed interval.
• Work instruction pages: Formatted instructions and maintenance procedures render inside embeds on documentation pages, so technicians read them without a shop floor login.
• Station status boards: A single page shows which stations are running and which are waiting on a tool, refreshed at a rate that matches how fast the floor moves.
• Quality summaries: Inspection results and defect rates render as a table or a chart on a customer-facing page, updated whenever your export job runs.

All of this is display only, so treat it as a window into Pico MES rather than a two-way sync. The anti-pattern we see most often is the API key pasted straight into the embed, where any visitor can read it in the page source. Keep the credential in a small server-side proxy, point the page at the proxy, and rate-limit the proxy so a busy dashboard cannot hammer a production system.

Build with Webflow’s APIs

The Webflow API is the option that holds up in production, and it costs more to build. You need a server you control with a stored Webflow access token, plus someone who owns the job the day a field name changes on either side.

Once that exists, you can publish production reports to a stakeholder site, keep equipment documentation current, or change what the site shows when the state of the floor changes. The CMS API overview covers the object model you are writing into.

Sync manufacturing data to Webflow CMS

Push production metrics, quality reports, or equipment records from Pico MES into CMS collections so they publish as pages and feed Collection Lists across the site.

Model the collections on the records you actually publish, then have your middleware read from Pico MES, map the fields, and call the create item endpoint for new records and the update item endpoint for changes. Use https://api.webflow.com/v2/ as the base URL and send your token in the Authorization header as a Bearer token. Before the first write, call the list collections endpoint to get the collection and field IDs you need.

Schedule the job to match how fast the underlying data moves rather than the fastest interval you can afford: hourly for a dashboard collection, daily for a summary report. If you already run Odoo alongside Pico MES, the vendor’s open source Odoo connector is a useful reference for the Pico side, since it documents the https://api.picomes.com endpoint, the API key, and the webhook subscription the connector depends on.

Process Webflow form data in manufacturing systems

Route form submissions from your Webflow site into Pico MES for quality feedback, maintenance requests, or customer order intake.

Register a webhook with the webhook creation endpoint, subscribed to the form_submission trigger, then validate every request before your service writes anything. Webflow signs each delivery: the x-webflow-signature header carries an HMAC SHA-256 hash of the x-webflow-timestamp value and the request body joined by a colon, so recompute that hash with your signing key and reject anything that does not match.

Form submission volume and file upload size both depend on your site plan, so check your own plan limits before designing an intake flow that assumes unlimited traffic.

Trigger website updates from manufacturing events

The same webhook plumbing runs in both directions: your service listens for factory events and calls Webflow, and Webflow calls your service back when its own content changes.

When a production run finishes, your listener can create a CMS item holding the run details and update the metrics item that the dashboard page reads. On the Webflow side, the webhook event reference lists every trigger you can subscribe to, including site_publish, collection_item_created, collection_item_changed, and ecomm_order_changed. Older tutorials and code samples still name cms_item_changed or ecommerce_order_changed, which are not real trigger types and will fail at registration.

Endpoints have to be HTTPS and accept POST requests, and each trigger type caps how many webhooks a site can register, so route several event types through one endpoint instead of standing up an endpoint per event.

What you can build with the Pico MES Webflow integration

The builds worth the effort share one shape: Pico MES stays the system of record for the floor, and Webflow becomes the read surface for everyone outside it.

Manufacturing teams on Webflow usually start with one of these:

• Production status dashboards: Current output and quality figures land in a CMS collection that a dashboard page reads, so stakeholders check a URL instead of asking for a report.
• Equipment documentation portals: Work instructions and maintenance procedures sync into CMS collections that technicians can search and filter from any device.
• Quality report publishing: Inspection results become CMS items when a run closes, which gives auditors a dated, linkable record instead of a spreadsheet attachment.
• Customer order tracking: A client portal shows production progress per order by syncing order state from Pico MES on a schedule you control.

Every one of them depends on getting the CMS write path right first, so work through our guide to the CMS API before you wire anything to the factory floor.

Once the sync runs, the work shifts to keeping the site and its collections in order. Connect the MCP server to your AI tools so they can build and manage the collections holding your manufacturing data, audit the pages that publish it, and flag the ones that drifted out of date.