Frontend Layer

Overview

The frontend layer is the user-facing interface through which end customers, sales representatives, or other stakeholders interact with a TwikBot configurator. It is responsible for presenting configuration options, displaying real-time 3D visual feedback, and capturing user input that drives the configuration engine.

TwikBot's frontend layer is fully decoupled from the core platform, meaning it can take multiple forms depending on the deployment context and the client's requirements.

Deployment Models

Standalone

TwikBot can be deployed as a standalone configurator experience, hosted independently and accessed via a dedicated URL. This is the fastest path to a working configurator and is well suited to projects where the client does not have an existing digital environment to integrate into, or where the configurator is the primary destination in the sales or specification process.

The standalone deployment includes:

• A pre-built option selection panel

• Real-time 3D viewport

• Pricing summary display

• Quote or output generation trigger

Web Plugin (Integrated)

For projects where the client has an existing digital environment — a branded website, a dealer portal, or a sales tool — TwikBot can be integrated via the web plugin. The plugin script is published from a TwikBot project and included in the client's web page, embedding the configurator seamlessly within the existing experience.

This is the recommended approach for enterprise clients with established digital ecosystems. The web plugin supports JavaScript, Angular, and React environments, and exposes the full Web SDK for custom interaction and event handling.

For step-by-step integration instructions, see [Developer Docs → Web SDK → Quickstart].

Kiosk & In-Store

For physical retail or showroom environments, TwikBot can be deployed on dedicated kiosk hardware or large-format touch screens. The frontend is typically a custom build optimised for touch interaction and the specific screen dimensions of the deployment environment.

Augmented Reality (AR)

TwikBot supports AR experiences directly from the configurator. End users can view their configured product in their physical environment using their device's camera. AR availability is device-dependent and can be queried at runtime via the Web SDK. This is particularly relevant for bicycle, automotive accessories, and consumer product deployments where spatial context adds value to the configuration experience.

Key Responsibilities of the Frontend Layer

Regardless of deployment model, the frontend layer is responsible for:

• Presenting configuration options — Displaying available choices to the user in a clear, navigable structure

• Communicating with the configuration engine — Passing user selections to TwikBot and receiving updated configuration state in return

• Displaying 3D output — Rendering the visual output from TwikBot's rendering layer within the interface

• Handling pricing display — Showing real-time pricing updates as options are selected

• Triggering output actions — Initiating quote generation, BOM export, or production file generation upon configuration completion

Relationship to Other Layers

The frontend layer communicates with the Twikit Platform via the Web SDK. It does not interact directly with the rendering layer or external systems — all of that communication is handled server-side by the platform. This keeps the frontend lightweight and focused on presentation and user interaction.

Frontend Layer
      │
      │  Web SDK
      ▼
Twikit Platform  →  Rendering Layer
                 →  External Systems

Considerations for Partners & Agencies

When scoping the frontend layer for a client project, the following questions should inform your approach:

• Does the client have an existing digital environment? If yes, a web plugin integration is likely more appropriate than the standalone deployment.

• What are the UI/UX requirements? Bespoke design requirements increase frontend development scope significantly.

• What devices and screen sizes need to be supported? Browser, mobile, tablet, kiosk, and in-store displays each have different requirements.

• What is the performance baseline? Real-time 3D rendering is resource-intensive. The frontend must be optimised to deliver acceptable performance across the target device range.

• Who will maintain the frontend post-launch? If the client's internal team will own the frontend, consider how maintainable the codebase is for a non-specialist team.

Developer Resources

For technical implementation details, refer to the following pages in Developer Docs:

For support or technical questions during frontend integration, contact the Twikit team via support.twikit.com.