Product Sections

The product sections show information on the product recommendations. In contrast to the elements of the top and bottom sections, this section relates to the products.

Under Result Page > Product Sections you can configure the following elements:

• Title: Title of the recommended product.

  • Data Source Column: Selection of the column of the product file

• Additional Data: Displays additional information (e.g. texts) on the recommendations.

  • Icon URL: URL to the icon that appears next to the section (optional).

  • Static Label: Label of the section.

  • Label From Data: Alternative label to the static label from the product file.

  • Data Source Column: Selection of the column of the product file.

• Additional Data Expandable: Has the same functionality as Additional Data, but the information is initially hidden and can be expanded by the user with one click.

• Picture: Picture of the recommended product.

  • Image URL Template: Enter the image URL. The same image is then displayed for all products.

  • Data Source Column: Selection of the column of the product file. To use variable images, you must enter an individual image URL for each product in the product file.

• CTA to Form Page: Button for opening the contact form.

  • CTA Button Label: Title of the button.

  • Target Form Page: Selection of the contact form (you must configure the form in the workbench in the section Form Page before you can select it).

• User input: Display of the answers selected by the user. To activate this function, also select the pages whose responses you want to display on the result page under Algorithm > show_user_inputs .

• Download: Configure up to 8 attachments such as instructions, technical data sheets, etc. for download.

  • Section Label: Title of the section.

  • First / Second / Third… fallback name: Name of the download file (static for all recommendations).

  • Download Template URL: Link to the download file (static for all recommendations).

  • First / Second / Third… URL Column: Selection of the column of the product file. This contains the link to the download file for each line(individually for each recommendation).

  • First / Second / Third… Name Column: Selection of the column of the product file. This contains the name of the download file for each line (individually for each recommendation).

    
    

• CTA to external link: Redirects the selector user to another website in a new tab

  • Button Label: Title of the button.

  • Label from data: Selection of the column of the product file for the link title.

  • External Link: Enter the website URL (static for all recommendations).

  • DataSource Column: Selection of the column of the product file with the download URLs (individual download file for each recommendation).

  • Custom CSS Classes: Optional input of a CSS class for individual styling.

• Labels: Add up to four labels / icons per product. You store these URLs for the icons in a separate column in your product file.

• Copy Text Modal: Option to copy a text to the clipboard by clicking on it

  • Static Label: Title of the section.

  • Label from data: Alternative title from the product file.

  • First copy button label: Label of the button with which selector users copy the text.

  • First Attribute for text: Selection of the column of the product file whose content selector users copy by clicking.

• Download Modal: Has the same functionality as Download. The download takes place via a pop-up.

• CTA api button: Creates a button that serves as an interface for transferring the results to a shopping cart. Would you like to connect your shopping cart? Contact your CSM support directly: csm@foxbase.de

• CTA to Event: Button, which sends an event with configured data to other JavaScript applications when clicked.

  • CTA to Event button label: Title of the button.

  • CTA to Event Attributes: Input which product information (e.g. ID, name) is attached to the event when the button is clicked.

  • CTA to Event Message Type: Enter the type of event that is triggered when the button is clicked.

  • Custom CSS Classes: Optional input of a CSS class for individual styling.

• IFrame: Display of a product-specific IFrame.

• Paragraph: Entry of a text that is displayed on the results page.

• Quantity: Specification of the required product quantity for the wishlist.

  • Static label: Static title of the section.

  • Label from Data: Selection of the column of the product file for individual labels per recommendation.

  • DataSource Column: Selection of the column of the product file with the quantity specification.

  • Default Quantity: Standard quantity.

💡You need a code template to use the Wishlist components. Are you interested? Your CSM support will be happy to help you.

• Handlebars Data: Allows you to access the answers from the questionnaire and display them on the results page.

  • Icon URL: URL of the icon

  • Static Label: Static title of the section.

  • Label from data: Alternative title from the product file.

  • Data Source Column: Selection of the column of the product file. This determines the inputs from the questionnaire. Required format: <{{userInput[0].questions[0].answers[0].value}}>

• Add to Wishlist button: Transfers the selected product recommendation to the wishlist.

  💡You need a code template to use the Wishlist components. Are you interested? Your CSM support will be happy to help you.

• CTA Detail Page Button: Redirects the user to the detail page.

  💡You need a code template to use the detail page components. Are you interested? Your CSM support will be happy to help you.

Setting up product sections

Below you will find a detailed overview of some of the sections described above.

Download section

On the result page, you can add any number of download sections with a maximum of eight attachments to each product, e.g. instructions, technical data sheets, etc.

To get to the download section, navigate as follows:  Result Page > Result Page Product Sections > Add Section > Download.

Beforehand, the corresponding columns (in this example: technisches_merkblatt_url and technisches_merkblatt_name), which contain the URLs to the attached files in the download area, must be added to the CSV file (see also Product upload):

You then select these under Download at First URL Column etc. Further attachments can be added by clicking on the plus symbol (see below).

Info: left: Configuration of the download section in the Workbench; right: Download section in the selector that the user sees

Under First URL Column select the column with the URL to the attached file. At First Name Column you also select the column with the name of the respective attached file.

You can configure attachments with individual designations for each product, e.g. "Data sheet A-600" or "Data sheet B-600".

Download multiple documents in one ZIP file

To enable selector users to download multiple documents in a ZIP file with one click, perform the following steps under Result Page > Product Sections:

1. Click on Add Section > Download or Download Modal.

2. Enter the information for the downloadable documents as described in the section above.

3. Activate the toggle display "Download all files" button

4. Enter the button text under Download all files Button - Label.
5. Enter the URL to the download icon under Download all files Button - Icon URL.
6. Enter the desired file name in the Download all files - Filename field.

Label section

You can add up to four labels / icons to the result page.

Before configuration, you must store the URLs of the labels in a column in the product data. The configuration is identical to the download section (see above).