Skip to main content
Mobile apps integrate with VIZOCHOK via the WebSocket API directly. The JS SDK widget is designed for web browsers; mobile platforms should build their own chat UI on top of the WebSocket protocol.

​
What You Need to Build

To integrate VIZOCHOK into a mobile app, you need to implement:

WebSocket Client

Connect to wss://api.vizochok.com/api/v1/ws/chat, handle authentication, send/receive JSON messages, manage reconnection.

Chat UI

Text input, message bubbles, streaming text display (token-by-token), typing indicators.

Product Cards

Render product_cards messages as native product list with images, prices, quantity steppers, and “Add” buttons.

Cart Sync

Listen for cart_changed events and update your app’s cart state. Send action messages when user interacts with product cards.

​
WebSocket Message Types to Handle

Your mobile client needs to handle these server messages: And send these client messages: For full field specifications, see WebSocket Protocol.

​
Platform-Specific Considerations

​
React Native

  • Use a WebSocket library (built-in WebSocket API or react-native-websocket)
  • Handle AppState changes: disconnect on background, reconnect on foreground
  • Store conversation_id in AsyncStorage for session persistence
  • Use FlatList for message rendering with streaming text support

​
Flutter

  • Use web_socket_channel package for WebSocket connection
  • Listen to AppLifecycleState for background/foreground transitions
  • Store conversation_id in shared_preferences
  • Use StreamBuilder to render incoming messages reactively

​
Native iOS / Android

  • iOS: URLSessionWebSocketTask (iOS 13+) or Starscream
  • Android: OkHttp WebSocket or Java-WebSocket
  • Both: handle network reachability changes, reconnect with exponential backoff

​
Connection Lifecycle for Mobile

1

App opens chat screen

Connect to WebSocket, send auth message with API key and user ID.
2

User sends a message

Send message with text and conversation_id. Show streaming response as text_delta messages arrive.
3

User interacts with products

When user taps “Add” on a product card, send action message with sku and quantity. Listen for cart_changed to confirm.
4

App goes to background

Close WebSocket connection gracefully. Save conversation_id.
5

App returns to foreground

Reconnect to WebSocket, send auth with saved conversation_id. Server sends session_restored with cart state.

​
Reconnection Strategy

Implement exponential backoff with jitter, matching the web SDK behavior: Do not reconnect on auth errors (close codes 4001, 4002, 4003, 4004).

​
Code Examples

For working Python and Node.js WebSocket connection examples, see WebSocket Direct Integration. The same protocol applies to mobile clients in any language.