The Action Button

With the action button your customer completes the configuration: they request a quote by email, download a PDF or send the configuration to your own system. The action button is a characteristic with its own settings. This article explains all actions, the placeholders for email and PDF, and what you should do against spam.

Creating an action button

1. Open the component and click + (Add characteristics) on the desired group in the structure tree.
2. Under Basic settings, set the Data category to Frontend and the Data type to Action button.
3. Under Label, enter the button text, e.g. "Request a quote" – for each content language.
4. In the Button settings section, choose the Action and fill in the related fields (see below).
5. Save and publish the component.

The button shows the Label. If it's empty, V3 shows the internal name. In Legacy, the characteristic's Information also appears below the button; in V3, only the button.

The other fields such as Visibility, Sort order and CSS class work as for any characteristic – see Add Characteristics & Values.

The actions

Before every action, the configurator checks the entries: if a required field is missing, the message appears on the characteristic and nothing is sent. In V3, an Error rule also stops the button – see Build a Rule Set.

Custom URL

Under Custom POST URL, enter the address the configuration should go to, e.g. https://www.myshop.com/inquiry.php.

With {$baseurl}/path, the address is completed with the domain of the page the configurator is currently running on. That way the same button works on several domains.

How the configuration arrives (V3): configento.app sends it as JSON to your URL. Each characteristic has an entry under its internal name with, among others, label (label), value (value or entry), valueLabel (label of the value), choiceSku (SKU of the value), valueQty (quantity) and visibility. On top of that comes _combined_sku with the combined article number of the configured product (see Component Settings). If your URL responds with a PDF, the customer's browser downloads it.

Your URL's response (V3): An HTTP status 2xx counts as success. The customer is then taken to the page under Redirect after action; without one, "Successfully submitted." appears below the button. If your URL responds with a PDF (Content-Type: application/pdf), the customer's browser downloads it. The configurator doesn't evaluate the rest of the response, including fields such as message or redirect. Any other status appears below the button as "Submission failed: HTTP …" with the status. If you want to evaluate the response yourself, for example to show your own message or hide the form, use the action event – see JavaScript API.

Checking the origin (V3): configento.app sends the configuration to your URL from its server, not from the browser. Every request is signed with the secure key of your service. You find it in the Service Portal on the Services page. That way your URL recognises requests that don't come from configento.app and rejects them. If the component contains a captcha, configento.app only forwards requests with a solved captcha. So a valid signature also means: the captcha was solved.

Verify the signature over the unmodified request body and reject requests older than five minutes. Example in PHP:

$body      = file_get_contents('php://input');
$timestamp = $_SERVER['HTTP_X_CONFIGENTO_TIMESTAMP'] ?? '';
$signature = $_SERVER['HTTP_X_CONFIGENTO_SIGNATURE'] ?? '';
$expected  = 'sha256=' . hash_hmac('sha256', $timestamp . '.' . $body, 'YOUR-SECURE-KEY');

if (!hash_equals($expected, $signature) || abs(time() - (int) $timestamp) > 300) {
    http_response_code(403);
    exit;
}
$configuration = json_decode($body, true);

If your service has no secure key, X-Configento-Timestamp and X-Configento-Signature are missing.

In Legacy, the customer's browser sends the configuration directly to your URL. Your server must allow requests from your shop's domain (CORS).

Hand over to the page

With this action, it isn't configento.app that submits the configuration but your page: the button checks the entries and hands the configuration over to your JavaScript, which sends it to your own server. This fits if you already have your own endpoint or react differently depending on the shop or language, for example with your own recipients. Rules and the button's visibility work as with any other action.

The action needs the V3 engine; a component with this button therefore always runs with V3. How your JavaScript receives the configuration and verifies the captcha on your server is described in JavaScript API.

Generate PDF

Edit the PDF body by clicking the preview (Click to edit). Under Body CSS (optional) you can add your own CSS rules for the PDF. Header and footer, logo and font come from the Branding.

The download only works in V3. In Legacy, the PDF is generated but not delivered to the customer – use Send email with PDF there.

Send email

Preparing the recipient field: only characteristics of the type Small input field with Allowed input = E-mail are available. If there are none, the editor shows "Create a text characteristic with email validation to use as the recipient." Create one and set Required field to Yes. The list shows the characteristics' internal names.

Sender and delivery: the email is sent through your own SMTP server. Sender address and name come from Settings → Email sending. Without complete settings there, no email is sent – see Global Settings.

Languages: you maintain subject and body for each content language. The editor warns as long as a part is missing in the selected language. The email is sent in the language in which the customer uses the configurator; if a text is missing for it, configento.app uses the component's default language. Legacy decides by the browser language: German, or English otherwise.

Send email with PDF shows the fields for email and PDF together.

Redirect after action

Under Redirect after action you can optionally enter a page the customer is taken to after a successful action, e.g. a thank-you page. Without a redirect, V3 shows "Successfully submitted." below the button. Legacy shows no message without a redirect – enter a thank-you page there so the customer sees that the request arrived.

Placeholders

Placeholders work in Subject, Email body, PDF body and Filename.

In {{characteristic:NAME.FIELD}}, NAME is the internal name of the characteristic and FIELD is one of these:

Example: Hello {{characteristic:name.value}}, your colour: {{characteristic:colour.valueLabel}}.

With checkbox and multiple selection, several values are joined with commas. An unknown name results in empty text.

{{configuration_table}} only shows characteristics with Visibility Yes (visible) or Backend only that have a value. The column headers are always German: "Merkmal", "Auswahl", "Artikel-Nr." and "Menge".

Spam protection with Captcha

An email action is a public form: anyone who finds it can use it to trigger emails to any address – through your SMTP server. If the component contains no captcha, the editor warns: Spam risk: no Captcha in this component.

How to protect the button:

1. Create a characteristic with the data type Captcha (V3 only) in the same component, ideally directly above the action button.
2. Set the component to the V3 frontend engine – see Frontend Engine: Legacy or V3.

As soon as the component contains a captcha, configento.app only sends emails and PDFs with a solved captcha. The customer hardly notices: their browser solves the captcha in the background.

In addition, configento.app limits sending: at most 100 emails per hour per action button and 10 per minute per visitor. If someone submits the same configuration again within a minute, no second email goes out.

What the customer sees

When changes take effect

Changes to the action button – action, texts, recipient field – only take effect in the shop after publishing. Changes to Email sending and Branding in the settings, on the other hand, take effect immediately.

Several buttons

If you need several actions, create several action buttons, e.g. "Download PDF" and "Quote by email". Each button has its own action and its own texts.

Action button via AI agent

The AI agent can set up an action button for you: "Create a button 'Request a quote' that sends an email with PDF to the address from the field Email, with a copy to sales@myshop.com." Then check the texts and recipient field in the editor. More on this: AI Agent: Build Configurator via Chat.

Troubleshooting

1. Below the button it says "This action has no endpoint configured." – with Custom URL, the Custom POST URL is missing. With the other actions: save and publish the component.
2. No email arrives – under Settings → Email sending, check the connection with Test connection and a test email. Check that a Recipient field is selected and the customer entered a valid address there.
3. "Submission failed: HTTP 403" – the page runs on a shop domain that's not listed under Settings → Domains, or the captcha wasn't solved. The admin preview and Shopify shops are never rejected because of the domain – so you can test the button in the preview.
4. "Submission failed: HTTP 429" – the sending limit has been reached. Wait a few minutes.
5. "Submission failed: HTTP 500" – usually the SMTP settings are missing or the SMTP server refuses.
6. A placeholder stays empty – check the internal name (upper/lower case) and the field. {{combined_image}} is always empty in Legacy and also needs a combined product image in the component. {{combined_sku}} stays empty when none of the selected values and none of the characteristics has an article number.
7. The email arrives in the wrong language – subject or body is missing for the customer's language. Switch Content language: to that language and fill in both.
8. The button does nothing, a characteristic is marked red – a required field is missing or an error rule applies. The message appears on the characteristic or below the total price.
9. Below the button it says "The page has no handler set up for this button." – the action Hand over to the page is selected, but the page lacks the JavaScript that receives the configuration. See JavaScript API.

Next steps

• Add Characteristics & Values
• Global Settings
• Frontend Engine: Legacy or V3
• HTML Snippet Integration