Skip to main content

SDK recipes and code snippets

Use these recipes as implementation starters for common product and support workflows.

What it is​

This page contains reusable patterns built on top of Messenger SDK methods and events.

Where to find it in OXVO​

All recipe outcomes appear in Inbox conversations, labels, and contact context.

When to use it​

Use these snippets when rolling out event-driven support workflows.

Recipe: Track abandoned cart context​

Send cart data into conversation attributes before or during checkout exit.

await messenger.setConversationAttributes({
  cart_id: 'CART_1024',
  cart_value: 249.0,
  cart_currency: 'USD',
  checkout_step: 'shipping',
  abandoned_at: new Date().toISOString(),
});

await messenger.addLabel('abandoned_cart');

Use this context in support triage, priority rules, and analytics.

Recipe: Open Messenger after a failed checkout action​

try {
  await submitPayment();
} catch (error) {
  await messenger.setConversationAttributes({
    checkout_error: 'payment_failed',
  });
  await messenger.open();
}

Recipe: Hide launcher on specific routes​

function syncLauncherByRoute(pathname) {
  const hideOn = ['/fullscreen-preview', '/auth/callback'];
  messenger.setLauncherVisible(!hideOn.includes(pathname));
}

Recipe: Sync locale and theme from app settings​

messenger.setLocale(currentLocale);
messenger.setTheme(currentTheme); // light | dark | auto

Recipe: Trigger backend workflow from postback​

messenger.on('postback', async event => {
  await fetch('/internal/support/postback', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ payload: event?.detail || {} }),
  });
});

Recipe: Use live chat loader with custom appearance​

messenger.setLiveChatLoader({
  enabled: true,
  appearance: {
    position: 'right',
    theme: 'auto',
    type: 'expanded_bubble',
    launcherTitle: 'Talk to support',
    horizontalSpacing: 20,
    verticalSpacing: 20,
    messengerColor: '#2d6bff',
  },
});

Recipe: One-time user education prompt on first open​

messenger.once('opened', () => {
  showToast('You can share screenshots and files directly in chat.');
});

📷 Image (optional): Messenger SDK workflow recipes board
Why: Helps teams map common product events to concrete Messenger SDK actions without reading each recipe in sequence.
File: docs/images/sdk-recipes-workflow-board.png
AI prompt: "Clean product documentation board for OXVO SDK recipes with cards titled Abandoned Cart, Checkout Failure, Route Visibility, Theme/Locale Sync, Postback Automation, and Live Chat Loader; modern SaaS UI mock, neutral grays and primary accent, OXVO branding only, no personal data, 1600x1000."