Skip to main content

How do I set up the configuration completion process?

Your customer configures their product variant. When they are finished, they can add it to a shopping cart or send you a request via email, possibly with a PDF attachment.

You can set which options you allow.

tip

In your configurator’s editor, you should only place a test order once you have the veröffentlicht configurator.

Set Order Actions​

You can specify which actions your users can perform. You can offer more than one action, such as both “Request” and “Add to Cart.”

  • Open the editor
  • Depending on your Layout, you’ll find the action buttons in the lower right corner of the 3D area.
  • Click the pencil icon next to them
  • A list of actions will now open in the right sidebar. Expand the action you want to change.
  • Or click on
    Loading...
    (at the very bottom)

Set a Primary Action​

The primary action is displayed on the final configuration step instead of the “Next” button.

  • At the top of an action, next to the name, there is a toggle that designates the action as the main action.

Designing the Overview Page​

Before a configuration is saved, an overview page displaying the selections and the price is shown. Depending on the promotion, this page can be customized.

To do this, select the “Overview Page” option in the promotion:

  • Features and Items: The features, sorted by step, and the selected or entered values are displayed. In addition, the items that are determined based on these values and that set the price are displayed.
  • Items Only: Only the items are displayed.
  • No Overview: The overview page is not displayed.

Retrieve Customer Data​

  • In the action, check the box next to “Contact Form.”
  • You can now select specific fields for customer data, which will then be requested on a page following the overview page, before saving.
  • If you click the drop-down menu next to one of these fields, an option will open allowing you to specify whether the field is required.
  • You can also include a privacy notice here.
  • If an email address is collected, you have the option here to trigger a Mail an den Kunden.
warning

Please note:

When you request customer data, you are collecting personal information. This data is protected by the GDPR. You must therefore obtain the user’s consent before launching the configurator (on your website or in your online store).

Customize the contact form (Custom HTML Layout)​

By default, the contact form contains only the predefined fields for customer data. With a Custom HTML Layout, you can freely expand the form—for example, by adding a consent checkbox, a dropdown, or a required field.

How It Works​

The Custom HTML Layout replaces the content area of the contact form with your own HTML. Within this HTML, you can embed features from your configurator—even those that do not appear in any visible step.

Enable Custom Layout​

  1. Open your configurator’s editor.
  2. Navigate to the desired action and open the contact form settings.
  3. Enable the Custom HTML Layout option.
  4. An HTML editor will open where you can directly enter and edit your layout.

Embedding Features​

To display a feature in the custom layout, use the <StandaloneVariable> tag:

<StandaloneVariable key="merkmalKey" />

The feature must be set up for this:

  1. Create the feature as usual on any step.
  2. In the feature, select the “Remove from step” option—the feature remains active in the configurator but does not appear in the normal step view.
  3. Reference it using <StandaloneVariable key="…" /> in your HTML.

Examples of Use​

Consent Checkbox Create a Yes/No attribute (e.g., Key: kontakterlaubnis), remove it from the step, and embed it:

<p>Ich bin damit einverstanden, kontaktiert zu werden.</p>
<StandaloneVariable key="kontakterlaubnis" />

"How did you hear about us?" dropdown Create a selection attribute with the desired options (e.g., Key: herkunft) and embed it:

<p>Wie sind Sie auf uns aufmerksam geworden?</p>
<StandaloneVariable key="herkunft" />

Required Field Configure the field as a required field in the field settings. The form can only be submitted once the field has been filled out.

Control the Order Using CSS​

By default, the custom section appears below the regular form fields. You can use CSS to move it to the top. To do this, replace .branche with your attribute’s key:

.orderDialogPrivateData.k3-form-container.k3-contact-form {
  display: flex;
  flex-direction: column;
}

.orderDialogPrivateData.k3-form-container.k3-contact-form > div:has(.branche) {
  order: -1;
}

Data Transfer​

All values of the integrated features are transferred in full with the configuration request when the form is submitted—both in the email and in the target system (e.g., Shopify, Webhook).

note

Configurators without a custom HTML layout continue to function as usual. The standard contact form remains available.

Dynamically Hide Order Actions​

You can also hide actions, for example, to assign different paths to different outcomes or to force the user to select an optional feature.

For example, if you want to embed the configurator on your website and in your shop and have different outcomes:

  • Set up a feature that specifies which order buttons should be displayed. This is likely hidden. It can be a numeric feature (0=website, 1=shop)—that’s the simplest option— or a Yes/No toggle, or a dropdown menu where the values are “keys.”
  • You then set this attribute differently depending on whether the user is coming from the website or the shop. To do this, give the attribute itself a “key,” e.g., “webOrShop,” and append it to the configurator’s URL, e.g., …&webOderShop=1 or …&webOderShop=web (if “web” is a value key).
  • Finally, create a rule using this attribute and the action “Set Configurator Completion.” You can then specify, for each value of the attribute, which order buttons can be hidden or grayed out.