Embedding the Configurator in WordPress

With the HTML snippet, your configento.app configurator appears on any WordPress page – as a quote or enquiry tool on your website. You don't need a plugin for this: a <script> tag and a <div> in the Custom HTML block are enough. Visitors put their product together, see the price instantly and send you their enquiry via the action button – as an email, a PDF or to your own URL.

WooCommerce plugin in Q4 2026: For WooCommerce shops, we are launching a dedicated plugin in the fourth quarter of 2026. It adds the configuration to the cart with a verified price. Until then, the snippet also works on WooCommerce pages, but only as an enquiry tool – see WooCommerce.

What you need

• Access to configento.app – the HTML snippet is included from the Basic plan; the 14-day trial is enough to try it out.
• At least one published component. The snippet always shows the most recently published version.
• A WordPress user account with the role Administrator or Editor – see Who may add scripts.

Step 1: Prepare the snippet and the domain

1. In the admin, open Settings → Integrations, click Generate on the HTML5 (V3 Beta) card and copy the V3 JavaScript snippet with Copy.
2. Under Settings → Domains, enter the domain of your WordPress website without https://, e.g. www.mysite.com. If you test on a staging site, enter its domain as well.
3. In the snippet, replace YOUR_TEMPLATE_ID with the ID of your component. You'll find it in the component overview, e.g. ID 10722.

The steps in detail are in HTML Snippet Integration.

Step 2: Insert the snippet in WordPress

In the block editor

1. Open the page or post in the editor.
2. Add the Custom HTML block where you want the configurator (via + or by typing /html).
3. Paste the snippet into the block.
4. Save the page and open it in your browser.

Don't use the paragraph block or another text block: WordPress removes the <script> tag there.

In the classic editor

Switch to the Text tab at the top right (not Visual) and paste the snippet there.

With a page builder

Page builders have their own element for HTML code, such as the HTML widget in Elementor or the Code module in Divi. Paste the snippet there. Some builders only show the configurator in the preview or on the published page, not in edit mode.

On several pages

The <script> tag belongs on each page only once. If there are several configurators on one page, each just needs its own <div data-configento …>. If you use the same configurator on many pages, save the HTML block as a synced pattern – then you change it in one place.

Who may add scripts

WordPress only allows <script> tags for users with the permission for unfiltered HTML. On a normal website, these are the roles Administrator and Editor. If an Author or Contributor saves the page, WordPress removes the script – the configurator then doesn't appear. In a WordPress network (multisite), only Super Admins may do this.

If someone without this permission edits a page with the snippet, the script can be lost on saving. Check the page in your browser afterwards.

Price, summary and image

Without further attributes, the snippet shows no price and no summary. The simplest option on a WordPress page is:

data-configento-embed-mode="admin-preview"

The title, price bar and summary then appear inside the configurator itself, as in the preview in the admin. If you want to place the price or image somewhere else, next to a heading for example, create the target elements in the same HTML block – see HTML Snippet Integration.

You adapt the look to your theme with CSS: Customise the Design (CSS).

Multilingual websites

If your website is multilingual through a translation plugin, there is a separate page for each language. Set the matching language in the snippet there, e.g. data-configento-locale="en_GB" on the English page. Alternatively, let visitors choose the language in the configurator – see HTML Snippet Integration.

Receiving enquiries

On a website without a shop, the action button completes the configuration. It sends the enquiry to you by email and, if you like, a copy with a PDF to the visitor, creates a PDF quote or passes the configuration to your own URL. The captcha protects against spam.

To take the enquiry into an existing form, read the selection via the JavaScript API.

Optimisation plugins and caching

Page caching is not a problem: the snippet is static HTML, and the configurator loads its data itself.

Plugins that delay, combine or defer JavaScript can slow the configurator down or stop it altogether – it then only appears after a mouse movement or not at all. In such plugins, add configento.js or cloud.configento.app to the JavaScript exclusion list.

WooCommerce

For WooCommerce, we are launching a dedicated plugin in the fourth quarter of 2026. It shows the configurator on the product page, checks the price on the server and adds the configuration with its surcharge to the WooCommerce cart – like our plugins for Magento, Shopware, Shopify and PrestaShop.

Until then, you can also use the snippet in a WooCommerce shop, in the product description for example. It shows the configurator and price there, but adds nothing to the cart. Use it as an enquiry tool with the action button in the meantime.

The old WooCommerce plugin from the classic cloud is no longer being developed.

Troubleshooting

More cases are in the troubleshooting section of HTML Snippet Integration.

Next steps

• HTML Snippet Integration
• The Action Button
• Customise the Design (CSS)
• Create Your First Component