1. Introduction
Sanal AI
  • Introduction
    • 💬 Sanal AI Integration
    • 🤝 Overview
    • 🚀 Getting Started
    • 🛠️ Integration Flow
    • ✅ Checklist
    • 🔌 Bridge Protocol
  • Data Sync
    • 🛠️ Data Sync
    • 📐 Data Layout
    • 🏪 Merchants
    • 📂 Categories
    • 🏷️ Items
    • 🛒 Products
    • 📦 Inventory
    • 👤 Customers
    • 🧾 Orders
    • 🧾 Variants & Combinations
  • API Requirements
    • 🔌 API Requirements
    • API: `syncMerchants`
    • API: `syncCategories`
    • API: `syncItems`
    • API: `syncProducts`
    • API: `syncInventory`
    • API: `syncCustomers`
    • API: `syncOrders`
  1. Introduction

🛠️ Integration Flow

🔄 App and Widget Workflow#

The host app (your app) and widget (Sanal AI's widget) follow this order every time the widget opens inside your host app:
Loading:
StepWhoAction
1HostLoad widget URL in WebView or iframe
2WidgetSend SANAL_READY when widget is loaded
Initializing:
StepWhoAction
3HostSend SANAL_INIT (user ID, auth token, language)
4HostSend SANAL_CART_SYNC (full cart + merchant ID)
During AI Chat:
StepWhoAction
5UserChats with the AI
6WidgetMay send SANAL_CART_ADD SANAL_CART_REMOVE or SANAL_CART_CHANGE
7HostUpdate your cart, then send SANAL_CART_SYNC again
SANAL_CART_ADD includes only uuid, quantity, modifiers, variant_groups, and variant_combinations. Your app resolves product details from your catalog.
Navigation / Exit:
StepWhoAction
8UserCan ask for 'Checkout', 'View Product' options in chat
9WidgetMay send SANAL_NAVIGATE_* (checkout, product, etc.)
10HostOpen the matching user screen in your app

🔄 Flow Diagram#

Previous
🚀 Getting Started
Next
✅ Checklist
Built with