Logik.io Tutorial: Getting Started with Headless CPQ

Logik.io represents a new generation of CPQ technology — a headless, AI-powered configuration engine that delivers sub-second solving for even the most complex products. Whether you're using it with ServiceNow or as a standalone solution, this tutorial will get you started with Logik.io fundamentals.

What is Logik.io?

Logik.io is a headless CPQ engine that separates the configuration logic from the user interface. Key innovations:

Sub-second solving — Real-time configuration without page reloads
Headless architecture — Deploy configurations anywhere (web, mobile, portals)
AI-powered — Intelligent recommendations and guided selling
3D visualization — Immersive product visualization capabilities

Headless Architecture Explained

Traditional CPQ systems tightly couple the configuration engine with the UI. Logik.io decouples them:

Traditional CPQ:[UI + Configuration Engine + Database] = One SystemHeadless CPQ:[Any UI] ←→ [Logik.io API] ←→ [Configuration Engine]

Traditional CPQ:[UI + Configuration Engine + Database] = One SystemHeadless CPQ:[Any UI] ←→ [Logik.io API] ←→ [Configuration Engine]

Benefits of Headless

Benefit	Description
Omnichannel	Same configuration logic across web, mobile, partner portals
Performance	Optimized API responses, often <100ms
Flexibility	Use any frontend framework (React, Vue, Angular)
Scalability	Engine scales independently from UI
Maintenance	Update logic without touching UI code

Core Concepts

Sets and Fields

In Logik.io, configurations are built from Sets containing Fields:

yaml

Set: computer_configFields:  - processor: [i5, i7, i9]  - memory: [8GB, 16GB, 32GB, 64GB]  - storage: [256GB, 512GB, 1TB, 2TB]  - graphics: [Integrated, RTX3060, RTX4080]

Set: computer_configFields:  - processor: [i5, i7, i9]  - memory: [8GB, 16GB, 32GB, 64GB]  - storage: [256GB, 512GB, 1TB, 2TB]  - graphics: [Integrated, RTX3060, RTX4080]

Rules

Rules define relationships between fields:

Requires Rule

yaml

# i9 processor requires at least 32GB memoryRule: high_end_memoryWhen: processor = "i9"Then: memory IN [32GB, 64GB]

# i9 processor requires at least 32GB memoryRule: high_end_memoryWhen: processor = "i9"Then: memory IN [32GB, 64GB]

Excludes Rule

yaml

# Integrated graphics excludes large memoryRule: graphics_constraint  When: graphics = "Integrated"Then: memory NOT IN [64GB]

# Integrated graphics excludes large memoryRule: graphics_constraint  When: graphics = "Integrated"Then: memory NOT IN [64GB]

Default Rule

Computed Fields

Calculate values dynamically:

yaml

Field: total_priceType: ComputedFormula:   base_price +   processor_price +   memory_price +   storage_price +   graphics_price

Field: total_priceType: ComputedFormula:   base_price +   processor_price +   memory_price +   storage_price +   graphics_price

Building Your First Configuration

Step 1: Define the Product Model

Start with your product structure:

json

{  "set": "laptop_configurator",  "fields": [    {      "name": "series",      "type": "select",      "options": ["Business", "Creative", "Gaming"]    },    {      "name": "processor",      "type": "select",      "options": ["i5-13400", "i7-13700", "i9-13900"]    },    {      "name": "memory",      "type": "select",      "options": ["8GB", "16GB", "32GB", "64GB"]    }  ]}

{  "set": "laptop_configurator",  "fields": [    {      "name": "series",      "type": "select",      "options": ["Business", "Creative", "Gaming"]    },    {      "name": "processor",      "type": "select",      "options": ["i5-13400", "i7-13700", "i9-13900"]    },    {      "name": "memory",      "type": "select",      "options": ["8GB", "16GB", "32GB", "64GB"]    }  ]}

Step 2: Add Business Rules

Define constraints and dependencies:

json

{  "rules": [    {      "name": "gaming_requires_high_memory",      "when": "series == 'Gaming'",      "then": "memory IN ['16GB', '32GB', '64GB']"    },    {      "name": "business_defaults",      "when": "series == 'Business'",      "then": "processor = 'i5-13400'"    }  ]}

{  "rules": [    {      "name": "gaming_requires_high_memory",      "when": "series == 'Gaming'",      "then": "memory IN ['16GB', '32GB', '64GB']"    },    {      "name": "business_defaults",      "when": "series == 'Business'",      "then": "processor = 'i5-13400'"    }  ]}

Step 3: Connect Your UI

Call the Logik.io API from your frontend:

javascript

// Initialize configuration sessionconst session = await logik.createSession({  blueprint: 'laptop_configurator'});// Make a selectionconst result = await session.setField('series', 'Gaming');// Result includes:// - Updated field values// - Valid options for remaining fields// - Computed prices// - Any validation messagesconsole.log(result.fields.memory.options);// ['16GB', '32GB', '64GB'] - 8GB excluded by rule

// Initialize configuration sessionconst session = await logik.createSession({  blueprint: 'laptop_configurator'});// Make a selectionconst result = await session.setField('series', 'Gaming');// Result includes:// - Updated field values// - Valid options for remaining fields// - Computed prices// - Any validation messagesconsole.log(result.fields.memory.options);// ['16GB', '32GB', '64GB'] - 8GB excluded by rule

Step 4: Handle Responses

Process the API response:

javascript

function handleConfigUpdate(result) {  // Update UI with valid options  result.fields.forEach(field => {    const element = document.getElementById(field.name);    element.options = field.validOptions;    element.value = field.value;    element.disabled = field.validOptions.length === 1;  });    // Update price display  document.getElementById('price').innerText =     formatCurrency(result.computedFields.total_price);    // Show any messages  if (result.messages.length > 0) {    showNotifications(result.messages);  }}

function handleConfigUpdate(result) {  // Update UI with valid options  result.fields.forEach(field => {    const element = document.getElementById(field.name);    element.options = field.validOptions;    element.value = field.value;    element.disabled = field.validOptions.length === 1;  });    // Update price display  document.getElementById('price').innerText =     formatCurrency(result.computedFields.total_price);    // Show any messages  if (result.messages.length > 0) {    showNotifications(result.messages);  }}

AI-Powered Features

Intelligent Recommendations

Logik.io can suggest configurations based on user preferences:

javascript

// Get AI recommendationsconst recommendations = await session.getRecommendations({  usage: 'video_editing',  budget: 2000});// Returns scored configuration optionsrecommendations.forEach(rec => {  console.log(`${rec.name}: ${rec.score}% match`);  console.log(`Price: ${rec.price}`);});

// Get AI recommendationsconst recommendations = await session.getRecommendations({  usage: 'video_editing',  budget: 2000});// Returns scored configuration optionsrecommendations.forEach(rec => {  console.log(`${rec.name}: ${rec.score}% match`);  console.log(`Price: ${rec.price}`);});

Guided Selling

Lead users through configuration with smart questions:

javascript

// Get next best questionconst question = await session.getNextQuestion();// Example response:{  "fieldName": "primary_use",  "question": "What will you primarily use this laptop for?",  "options": [    { "value": "business", "label": "Business & Productivity" },    { "value": "creative", "label": "Creative Work" },    { "value": "gaming", "label": "Gaming" }  ],  "impact": "This will help us recommend the right specifications"}

// Get next best questionconst question = await session.getNextQuestion();// Example response:{  "fieldName": "primary_use",  "question": "What will you primarily use this laptop for?",  "options": [    { "value": "business", "label": "Business & Productivity" },    { "value": "creative", "label": "Creative Work" },    { "value": "gaming", "label": "Gaming" }  ],  "impact": "This will help us recommend the right specifications"}

3D Visualization Integration

Logik.io integrates with 3D visualization engines:

javascript

// Update 3D model based on configurationsession.onFieldChange('color', (value) => {  threeDViewer.setMaterial('case', {    color: colorMap[value]  });});session.onFieldChange('graphics_card', (value) => {  threeDViewer.showComponent('gpu', {    model: gpuModels[value]  });});

// Update 3D model based on configurationsession.onFieldChange('color', (value) => {  threeDViewer.setMaterial('case', {    color: colorMap[value]  });});session.onFieldChange('graphics_card', (value) => {  threeDViewer.showComponent('gpu', {    model: gpuModels[value]  });});

Performance Optimization

Client-Side Caching

Cache frequently used data:

javascript

// Cache blueprintsconst blueprintCache = new Map();async function getBlueprint(id) {  if (!blueprintCache.has(id)) {    blueprintCache.set(id, await logik.getBlueprint(id));  }  return blueprintCache.get(id);}

// Cache blueprintsconst blueprintCache = new Map();async function getBlueprint(id) {  if (!blueprintCache.has(id)) {    blueprintCache.set(id, await logik.getBlueprint(id));  }  return blueprintCache.get(id);}

Batch Updates

Send multiple field changes together:

javascript

// Slow: Individual callsawait session.setField('processor', 'i7');await session.setField('memory', '32GB');await session.setField('storage', '1TB');// Fast: Batch updateawait session.setFields({  processor: 'i7',  memory: '32GB',  storage: '1TB'});

// Slow: Individual callsawait session.setField('processor', 'i7');await session.setField('memory', '32GB');await session.setField('storage', '1TB');// Fast: Batch updateawait session.setFields({  processor: 'i7',  memory: '32GB',  storage: '1TB'});

ServiceNow Integration

When using Logik.io with ServiceNow:

Quote Integration

javascript

// Create ServiceNow quote from configurationconst quote = await servicenow.createQuote({  configurationId: session.id,  opportunityId: currentOpportunity,  account: customerAccount});

// Create ServiceNow quote from configurationconst quote = await servicenow.createQuote({  configurationId: session.id,  opportunityId: currentOpportunity,  account: customerAccount});

Workflow Automation

javascript

// Trigger ServiceNow workflow on configuration completesession.onComplete(async (config) => {  await servicenow.startWorkflow('quote_approval', {    quoteId: config.quoteId,    totalValue: config.totalPrice,    requiresReview: config.hasCustomizations  });});

// Trigger ServiceNow workflow on configuration completesession.onComplete(async (config) => {  await servicenow.startWorkflow('quote_approval', {    quoteId: config.quoteId,    totalValue: config.totalPrice,    requiresReview: config.hasCustomizations  });});

Best Practices

1. Design for Performance

Keep rule sets focused
Use computed fields sparingly
Batch API calls

2. Progressive Disclosure

Start with high-level choices
Reveal details progressively
Use guided selling for complex products

3. Error Handling

javascript

try {  const result = await session.setField('quantity', 1000);} catch (error) {  if (error.type === 'VALIDATION_ERROR') {    showValidationMessage(error.message);  } else if (error.type === 'CONSTRAINT_VIOLATION') {    highlightConflictingFields(error.fields);  }}

try {  const result = await session.setField('quantity', 1000);} catch (error) {  if (error.type === 'VALIDATION_ERROR') {    showValidationMessage(error.message);  } else if (error.type === 'CONSTRAINT_VIOLATION') {    highlightConflictingFields(error.fields);  }}

4. Analytics Integration

Track configuration behavior:

javascript

session.onFieldChange('*', (field, value, previous) => {  analytics.track('configuration_change', {    field,    value,    previous,    sessionDuration: session.duration  });});

session.onFieldChange('*', (field, value, previous) => {  analytics.track('configuration_change', {    field,    value,    previous,    sessionDuration: session.duration  });});

Next Steps

Now that you understand Logik.io basics:

Explore the API documentation — Comprehensive endpoint reference
Build a prototype — Start with a simple product
Test performance — Benchmark your configuration rules
Integrate visualization — Add 3D product rendering

For expert help with your Logik.io implementation, contact our ServiceNow CPQ specialists.

Logik.io Tutorial: Getting Started with Headless CPQ

Logik.io Tutorial: Getting Started with Headless CPQ

What is Logik.io?

Headless Architecture Explained

Benefits of Headless

Core Concepts

Sets and Fields

Rules

Requires Rule

Excludes Rule

Default Rule

Computed Fields

Building Your First Configuration

Step 1: Define the Product Model

Step 2: Add Business Rules

Step 3: Connect Your UI

Step 4: Handle Responses

AI-Powered Features

Intelligent Recommendations

Guided Selling

3D Visualization Integration

Performance Optimization

Client-Side Caching

Batch Updates

ServiceNow Integration

Quote Integration

Workflow Automation

Best Practices

1. Design for Performance

2. Progressive Disclosure

3. Error Handling

4. Analytics Integration

Next Steps

Related Articles

CPQ Implementation Guide: From Planning to Go-Live

Oracle CPQ vs Salesforce CPQ: Complete Comparison Guide

Need Expert CPQ Help?