⚙️ Configurator
⚙️

Configurators

Introduction

Overview

Welcome to the This series is designed to guide you through the process of using iConfigure in combination with First 3D to build powerful and visually engaging product configurators. This introductory section provides an overview of the capabilities of iConfigure, focusing on its key features and functionalities, as well as a walkthrough of the back-office interface.

What is iConfigure?

Definition

iConfigure is a CPQ (Configure, Price, Quote) software designed to facilitate the creation of customizable 3D product configurators. It integrates seamlessly with First 3D to provide a user-friendly platform for both developers and businesses.

Key Features

  1. 3D Product Configurations

    • Leverages First 3D for real-time 3D product customization.
    • Provides an intuitive interface for end-users.
  2. Dynamic Pricing Engine

    • Calculates prices dynamically based on user inputs.
    • Supports conditional logic for including or excluding options.
  3. Quotation Generation

    • Automatically generates PDF quotations that include a screenshot of the configured product and a detailed list of chosen values.
  4. Analytics Module

    • Tracks user interactions within the configurator.
    • Offers actionable insights to optimize user experience and sales performance.
  5. Dealer Module

    • Enables dealers to embed customized configurators on their websites.
    • Supports branding with dealer-specific styles and colors to align with their webshops.

Back-Office Overview

The back-office is the central hub for managing iConfigure’s functionalities. Below is an overview of the key sections:

  1. Homepage

    • Displays a summary of activities over the past seven days.
    • Metrics include user interactions and configurator usage.
  2. Metrics Section

    • Tracks key data points such as user behavior and configuration trends.
    • Provides insights to help optimize configurators.
  3. Configurations Overview

    • Categorizes products into owned, dealer, and supplier products.
    • Focuses primarily on owned products during the initial setup.
  4. Quotations Overview

    • Lists all quotations generated by the system.
    • Allows clients to manage their quotes efficiently.
  5. Dealer Management

    • Includes tools for adding and managing dealers.
    • Features customization options for dealer-specific configurators.
  6. Export and Data Management

    • Allows exporting of data such as quotations, customer details, and tracking information.
  7. Settings

    • Configures company-specific settings, including branding and operational preferences.

Setup

Installing iConfigure Plugin

  1. Download the iConfigure plugin from the GitHub repository.
  2. Extract the downloaded ZIP file.
  3. Copy the plugin to the following directory in your First 3D installation:

    • puzzles/plugins
  4. Place the template file in the appropriate applications directory.

    • Use the Applications folder for First 3D or locate your custom directory.

Adding a New Product

  1. Open iConfigure and navigate to the "Configurations" section.
  2. Click "Add New Product."
  3. Copy the URL of the newly created configurator.
  4. Paste the URL into the "First URL" field in First 3D.
  5. Save and preview the configurator.
  6. Ensure First 3D is updated to the latest version for compatibility.

Basics of iConfigure

Structure of a Configurator

A product configurator in iConfigure consists of the following components:

  • Steps: Represent different stages in the configuration process.
  • Features: Contain the main customization options.
  • Subfeatures: Nested options within features.

Types

  1. Single Selection

    • Users can choose one option from a set.
    • Example: "Feature 1" with ID feature1.
  2. Multiple Selection

    • Users can select multiple options.
    • Example: "Feature 2" with IDs feature2a and feature2b.
  3. Number Input

    • Allows numerical inputs with configurable units, steps, and ranges.
    • Example: A field with a step value of 1 and a price multiplier of 2.

Adding Features

  1. Add a step to your product configuration.
  2. Define a feature (e.g., "Feature 1") and assign an ID.
  3. Add subfeatures as needed, each with unique IDs.
  4. Configure feature properties such as input type, default values, and associated pricing.

Previewing the Configurator

  • Save your progress and refresh the preview to test configurations.
  • Verify the functionality of single and multiple selections as well as numerical inputs.

Visualization in the Front End

  • Steps are displayed as separate sections.
  • Features are shown as input fields (e.g., dropdowns, checkboxes, or sliders).
  • Subfeatures appear as options within features or as linked fields.

Visualizations

Display Types

iConfigure supports various display types for visualizing features:

  1. Round Buttons: Circular buttons for selection.
  2. Toggles: Switch-like inputs for binary options.
  3. Carousels: Horizontal scrolling displays for images or cards.
  4. Image Lists: Lists with visual thumbnails.
  5. Image Slides: Stretchable images that support horizontal scrolling on mobile devices.

Setting Up Displays

  • Toggle and list visualizations are text-based and do not require images.
  • Round buttons, carousels, and image-based displays support uploaded images for enhanced interactivity.
  • Adjust the number of items displayed side-by-side for carousels and image lists based on the size of the images.

Optional Data

Optional Parameters for Features

  • Info Icons Provide additional information for features or subfeatures. Example: Add an info icon with descriptive text and optional images for better context.
  • Quotation Text Text included in quotations based on selected features. Conditional inclusion ensures only relevant data appears in the final document.
  • Required Fields Enforce mandatory inputs to proceed to the next step. Example: Ensure specific selections are made before advancing.
  • Styling and Branding Customize colors and styles to match company branding. Automatically applies branding across the configurator.
  • Price Visibility Options Toggle visibility of total or individual prices for features and subfeatures. Enable or disable price tracking and VAT inclusion.

Advanced Tracking and Behavior

  • Enable tracking to monitor user behavior within the configurator.
  • Use interaction buttons for visual enhancements during the configuration process.

Getting Started

In the following lessons, we will dive deeper into:

  • Advanced customization options.
  • Leveraging analytics for user behavior insights.
  • Optimizing performance and maintaining configurators.

Prepare your tools and environment, and let’s begin creating exceptional product experiences!

Conditions

Overview

Feature conditions allow developers to include or exclude features and subfeatures based on certain criteria. These criteria can be set to be true or false and allow for highly customizable configurations. For example, a furniture configurator can conditionally show or hide certain table legs based on the selected tabletop.

Adding Conditions

  1. Navigate to the desired feature or subfeature.
  2. Add a "Requirement" condition.
  3. Set the condition logic (e.g., "If single selection equals 1, hide this feature").

Examples of Conditions

  • Simple Conditions: Show or hide a feature based on a single input.

    • Example: If singleSelection = 1, hide the feature.
  • Advanced Conditions: Combine multiple conditions using logical operators (AND, OR).

    • Example: Show a feature only if singleSelection = 1 AND numberInput > 75.

Practical Usage

  • Conditional Rendering: Dynamically hide or display features and subfeatures based on user input.
  • Subfeature-Specific Logic: Create logic specific to subfeatures, such as showing a subfeature only if numberInput < 25.
  • Complex Logic: Combine multiple conditions for sophisticated configurations.

Calculations

Overview

Feature calculations allow for dynamic pricing and other numerical adjustments within the configurator. These calculations can be applied conditionally or unconditionally and can use inputs such as number values or quantities.

Adding Calculations

  1. Enable calculations for a feature.
  2. Use the "Add Calculation" button to create a calculation rule.
  3. Define the calculation logic (e.g., numberInput x 20).
  4. Add conditions if the calculation is to be applied selectively.

Examples of Calculations

  • Simple Multiplications: Multiply a number input value by a constant.

    • Example: numberInput x 20.
  • Conditional Pricing: Apply pricing logic only if a specific condition is met.

    • Example: If singleSelection = 1, apply numberInput x 20.
  • Quantity-Based Pricing: Calculate pricing based on quantities from multiple selections.

    • Example: Total price = (subFeatureQuantity1 + subFeatureQuantity2) x 100.

Practical Usage

  • Dynamic Pricing: Adjust prices dynamically based on user inputs.
  • Conditional Application: Execute specific calculations based on conditional logic.
  • Complex Formulas: Use arithmetic operations to create advanced pricing formulas.

3D Basics

Overview

3D integration allows for dynamic 3D visualization and interaction within the configurator. By utilizing puzzles and templates, developers can create highly interactive experiences.

Setting Up 3D

  1. Create a 3D model in Blender.
  2. Export the model using the 3D template provided by iConfigure.
  3. Add features and subfeatures in iConfigure (e.g., shapes, colors).

Dynamic Interactions

  • Use 3D puzzles to create dynamic interactions:

    • Configuration Updates: Trigger updates when features are changed.
    • Conditional Rendering: Show or hide objects based on feature values.
    • Material Changes: Dynamically update material colors (e.g., green or red based on selection).
    • Size Adjustments: Adjust the size of objects based on number inputs.

Practical Examples

  • Shape Selection: Show a specific shape (e.g., cube or sphere) based on user selection.
  • Color Changes: Update the material color dynamically.
  • Size Inputs: Scale objects proportionally based on input values.

Advanced Features

  • Get Active: Check if a feature is selected.
  • Get Item by ID: Retrieve the selected item's ID programmatically.
  • Scroll to Step: Navigate to specific steps in the configurator.
  • Screenshot Generation: Capture screenshots for use in quotations.

Summary

With these advanced capabilities, iConfigure combined with 3D enables developers to create highly customizable and interactive 3D configurators. By leveraging conditions, calculations, and dynamic visualizations, you can provide an exceptional user experience tailored to complex product configurations.