Messenger Storefront (In-app Mini App)

আপনার Facebook Page-কে একটি সম্পূর্ণ in-app storefront-এ পরিণত করুন। একটি পরিপাটি, multipage product catalog তৈরি করুন — photo, video, themed page, প্রতি product-এ একটি AI assistant ও lightweight order-taking সহ — যা একজন customer আপনার Page-এর Persistent Menu-তে “Open Storefront” button-এ tap করার মুহূর্তেই Messenger-এর ভেতরে খোলে। কোনো app store নেই, কোনো আলাদা website নেই, পরিচালনা করার মতো কোনো checkout নেই। শুধু একটি tap, আর আপনার customer browse করছে।

প্রতিটি plan-এ free, trial সহ। Telegram Storefront-এর মতো একই visual drag-and-drop composer-এ তৈরি — একই ১১টি block type, একই ৬টি theme, একই per-product AI chat, একই lightweight order CTA — Integrations → Facebook Page → Configure mini app-এ।

আপনি যা তৈরি করতে পারেন

Telegram Storefront-এর মতোই একই আকার — প্রতিটি block type ও theme port হয়:

• Boutique storefront — hero banner + product grid + per-product chat + order inquiry form। Order আপনার inbox-এ আসে; একজন teammate সেখান থেকে reply দেয়।
• Restaurant menu — multipage (Starters / Mains / Drinks) + photo gallery + একটি delivery address field সহ cart-mode checkout।
• Course বা service catalog — একটি Video intro, testimonial ও bot-এ ফিরে একটি “Book a call” CTA সহ product card।
• Brochure Page — hero + about + gallery + contact card + FAQ। কোনো product একদম নেই। আপনার Facebook Page-এর ভেতরে বাস করা একটি পরিপাটি mobile brochure।
• Lead-capture landing — একটি page, একটি hero, একটি form, একটি CTA। সম্ভাব্য সবচেয়ে হালকা Messenger funnel।

কেন এটি গুরুত্বপূর্ণ

• Customer-রা কখনো Messenger ছাড়ে না। কোনো app install নেই, মনে রাখার মতো কোনো domain নেই, ছেড়ে দেওয়ার মতো কোনো checkout flow নেই। storefront Messenger-এর WebView-তে খোলে এবং user-এর theme ও ভাষা উত্তরাধিকার সূত্রে পায়।
• আপনার Page-এর chat থেকে এক tap। আপনি আপনার Page সংযুক্ত করার মুহূর্তেই Persistent Menu-তে একটি একক “Open Storefront” entry স্বয়ংক্রিয়ভাবে seed করা হয় — কোনো Meta Business Suite config নেই, কোনো app review নেই, কোনো webhook wiring নেই।
• AI-native product chat। Per-product chat আপনি সেই product-এ attach করা document-এ scope করা — assistant অন্য product-এর তথ্য ফাঁস না করেই “এই dress-এ return policy কী?”-এর উত্তর দেয়।
• একজন সত্যিকারের মানুষের কাছে order handoff। Lightweight order form (inquiry বা cart mode) একটি structured handoff হিসেবে আপনার Inbox-এ আসে, follow-up-এর জন্য customer-এর Messenger DM খোলা রাখা অবস্থায়।
• প্রতিটি plan-এ free। Trial cap (৫ page / প্রতি page-এ ২৫ block / ১০০ product doc) প্রতিটি paid plan-এ উঠে যায়। Pricing per-org — একটি দ্বিতীয় Facebook Page যোগ করলে আপনার tier price পরিবর্তন হয় না।

এক নজরে

• Multipage, drag-and-drop। End user-রা page switch করতে hamburger (উপরে-বামে) tap করে। আপনি একটি page publish করলে, এটি full-screen load হয়।
• ১১টি block type — Hero, Product card, Product grid, Carousel, Gallery, FAQ, Testimonial, CTA back-to-bot, Contact, Video, Rich text। (আপনি cart-mode order CTA ব্যবহার করলে Cart একটি auto-injected virtual page — কোনো আলাদা “Cart review” block নেই।)
• per-block style override সহ ৬টি theme।
• শেষ published snapshot-এ এক-click revert সহ Draft → Publish lifecycle।
• Auto-seeded Persistent Menu — একক “Open Storefront” button, editable label, locked action।
• Outer-chat fallback — পুরোনো Messenger client-এর জন্য block-গুলো in-chat Generic Template, Quick Reply ও image carousel-এ project করে।
• Built-in Help Center — একটি pinned FAQ surface, সবসময় এক tap দূরে। Telegram-এর মতো একই panel।
• কোনো payment নেই, কোনো inventory নেই, কোনো shipping নেই — এটি একটি পরিপাটি catalog + lead-capture surface, একটি সম্পূর্ণ e-commerce stack নয়।

Customer-রা কীভাবে এটি খুঁজে পায়

প্রতিটি সংযুক্ত Facebook Page যে কেউ এটিকে message করে তার কাছে একটি Persistent Menu প্রকাশ করে। আমরা একটি একক entry স্বয়ংক্রিয়ভাবে seed করি — “Open Storefront” (default label, যেকোনো ভাষায় ১–৩২ অক্ষরের যেকোনো কিছুতে editable) — যা আপনার storefront খোলে।

launch flow একটি postback:

1. End user Persistent Menu-তে “Open Storefront”-এ tap করে।
2. bot একটি BROWSE_SHOWCASE postback পায়, একটি one-time launch token mint করে এবং একটি একক “Open Storefront” CTA সহ একটি Button Template ফেরত পাঠায়।
3. End user button-এ tap করে → Messenger একটি WebView খোলে → storefront load হয়।

একটি “tap menu → instant WebView” পদ্ধতির তুলনায় এটি একটি অতিরিক্ত tap। আমরা postback model ব্যবহার করি কারণ direct-WebView model পুরোনো Messenger client-এর একটি উল্লেখযোগ্য অংশে নীরবে ব্যর্থ হয় (Meta SDK error 2071011)। postback-via-Button-Template দিয়ে, আমরা test করা প্রতিটি client কাজ করে — এবং launcher token single-use, HMAC-bound, এবং recipient-এর DM-এ থাকে, তাই share-link অপব্যবহারের কোনো ঝুঁকি নেই।

পূর্বশর্ত

• একটি সংযুক্ত Meta (Facebook) integration। storefront এর উপরে চলে — যোগ করার মতো কোনো আলাদা integration নেই।
• (ঐচ্ছিক) per-product chat-এ wire করার জন্য product image, product copy, FAQ entry ও knowledge-base document।

Quick start (৫ মিনিট)

“আমি একটি Page সংযুক্ত করেছি” থেকে “আমার প্রথম customer browse করছে” পর্যন্ত সবচেয়ে ছোট পথ:

1. Integrations → আপনার Facebook Page → Configure mini app-এ যান। composer Draft state-এ খোলে।
2. বাম rail-এ ”+ Add page”-এ click করুন। এটির নাম দিন (যেমন “Home”)।
3. একটি Hero block যোগ করুন — headline, subheadline, একটি 16:9 background image (একটি photo drop করুন, cropper স্বয়ংক্রিয়ভাবে খোলে)।
4. একটি Product card যোগ করুন — name, price, 1:1 image, ছোট description। AI chat toggle on করুন এবং একটি doc attach করুন (একটি PDF spec sheet, আপনার shipping policy — আপনার KB থেকে যেকোনো কিছু)।
5. সেই product-এ একটি Order CTA যোগ করুন — inquiry mode বেছে নিন, form field বেছে নিন (name সবসময় আবশ্যক)।
6. Publish-এ click করুন। আমরা স্বয়ংক্রিয়ভাবে Persistent Menu publish করি — আপনার Page-এর menu এখন প্রতিটি visitor-কে “Open Storefront” দেখায়।
7. একটি ভিন্ন Facebook account থেকে আপনার নিজের Page-কে DM করুন। menu → “Open Storefront” → “Open Storefront” (Button Template) tap করুন। আপনার product-এ tap করুন। “Ask a question”-এ tap করুন। “Order this”-এ tap করুন। Submit করুন। কয়েক সেকেন্ডের মধ্যে আপনার Inbox-এ handoff আসতে দেখবেন।

এটিই minimum-viable Messenger Storefront। আপনি বড় হওয়ার সাথে সাথে আরও page, আরও product, theme, video ও একটি Help Center যোগ করুন।

composer

composer Telegram Storefront-এর একই editor — সম্পূর্ণ tour-এর জন্য Telegram Storefront: The composer দেখুন (3-pane layout, draft/publish lifecycle, image cropper, tier limit)। একমাত্র channel-নির্দিষ্ট surface হলো Distribute tab।

Distribute tab (Messenger)

composer-এর সবচেয়ে ডানের tab হলো Distribute। Messenger-এ এটি দেখায়:

পুরোনো client-এর জন্য outer-chat fallback

যেসব end user-এর Messenger client একটি WebView একদমই খুলতে পারে না, তাদের জন্য storefront এখনও কাজ করে — এটি chat thread-এর ভেতরেই project করে। outer_chat_adapter.py-এর Send API adapter ১১টি block type-এর প্রতিটিকে একটি Messenger-native primitive-এ map করে:

• Hero / Product card / CTA back-to-bot → Generic Template card
• Product grid / Carousel → Generic Template carousel (multi-card swipe)
• Gallery → image-sequence message
• FAQ / Rich text → ঐচ্ছিক Quick Reply সহ text message
• Testimonial / Contact → action button সহ Generic Template card
• Video → video attachment + caption

কোনো ভাঙা UI নেই, কোনো dead end নেই। একই product list, একই order CTA — শুধু in-chat template হিসেবে render করা।

End user-দের জন্য recovery flow

একজন end user যদি এমন একটি WebView-তে এসে পড়ে যা auth bootstrap করতে পারে না (অত্যন্ত বিরল — শুধু কয়েকটি খুব পুরোনো client-এ), storefront shell একটি sticky top-of-screen banner দেখায় যা m.me/{page_id}?ref=BROWSE_SHOWCASE-এ আপনার Page-এ ফিরে link করে। এক tap তাদের Messenger thread-এ ফিরিয়ে আনে; আবার “Open Storefront”-এ tap করলে তারা একটি নতুন launcher token পায় এবং ভেতরে ফিরে আসে।

এটি স্বয়ংক্রিয় — কোনো admin setup প্রয়োজন নেই।

Order ও handoff

Order CTA Telegram Storefront-এর মতোই একইভাবে কাজ করে — inquiry mode বা cart mode, একই configurable form field, একই instant “Got your order” DM, Inbox-এ একই Order Request Panel।

একমাত্র Messenger-নির্দিষ্ট পার্থক্য: order handoff inbox-এ metadata.type == "messenger_mini_app_order" সহ আসে (Telegram mini_app_order ব্যবহার করে)। inbox দুটোর জন্যই একই panel render করে।

২৪-ঘণ্টার messaging window follow-up message-এর ক্ষেত্রে প্রযোজ্য: Meta আপনাকে শুধু একজন user-এর শেষ inbound-এর ২৪ ঘণ্টার মধ্যে message করতে দেয়। storefront launch postback window reset করে, তাই “Got your order” DM ও যেকোনো teammate follow-up স্বাভাবিকভাবে আসে — কিন্তু customer >২৪ ঘণ্টা চুপ থাকলে, আপনি reply দিতে পারার আগে তাদের আপনার Page-কে আবার message করতে হবে।

সম্পূর্ণ order-flow walk-through-এর জন্য (form field, anti-spam limit, dedup window) Telegram Storefront: Orders and cart দেখুন — সবই Messenger-এর সাথে shared।

Auth model (কৌতূহলীদের জন্য)

আপনাকে এটি নিয়ে ভাবতে হবে না — platform এটি সামলায়। তবে আপনি কৌতূহলী হলে:

• Public read (/style, /showcase, /help-entries) সম্পূর্ণ public, ?i={integration_id} দিয়ে keyed। এগুলোতে কোনো cookie নেই, কোনো signed_request নেই, কোনো rate-limit নেই — প্রতিটি cold-start client storefront সাথে সাথে render করে।
• Write action (/ask, /track, /product-chat/stream, /order-inquiry) একটি session প্রয়োজন। Primary path: একটি one-time launch token থেকে mint করা একটি messenger_mini_app_session httpOnly cookie (CHIPS-partitioned, তাই Messenger-এর in-app browser এটিকে third-party-block করে না)। Fallback: যে বিরল client-এ SDK এখনও কাজ করে তার জন্য Meta-র signed_request HMAC।

ব্যাস। কোনো customer কখনো একটি login prompt দেখে না।

এটি যা করে না

Telegram Storefront-এর মতোই একই scope:

• কোনো payment নেই। Order CTA inquiry handoff, Checkout API বা Stripe নয়।
• কোনো inventory tracking নেই। Product card-এ availability badge হলো free-text label যা আপনি manually edit করেন (“Sold out”, “Pre-order”, “Last 3”)।
• কোনো shipping calculation / address validation নেই। Delivery address free-form text হিসেবে সংগ্রহ করা হয়।
• কোনো customer account নেই। Customer-দের তাদের Messenger PSID দিয়ে শনাক্ত করা হয়; কোনো login বা signup flow নেই।
• কোনো Page comment বা Page post নেই। এই integration শুধু Messenger thread ও storefront launch সামলায়।
• কোনো Instagram DM storefront নেই (এখনো)। একই Meta integration শুধু Messenger cover করে; Instagram DM শুধু text-conversation।
• ২৪-ঘণ্টার messaging window প্রযোজ্য। উপরে দেখুন।

সমস্যা সমাধান

”Open Storefront” আমার Page-এর menu-তে আসছে না

1. composer → Distribute tab → Publish to Messenger-এ tap করুন।
2. আপনি একটি “Connect your Page” amber banner দেখলে, আগে সেই ধাপটি সম্পন্ন করুন — auto-seed-এর Page-management permission প্রয়োজন।
3. একটি re-publish-এর পরেও banner থাকলে, integration disconnect করে আবার reconnect করুন। post-connect auto-seed নতুন করে চলে।

Customer বলে button কিছুই খোলে না

প্রায় সবসময় একটি stale Messenger client। shell তাদের একটি one-tap “back to chat” banner দেখায়; তারা Page আবার খোলে, আবার “Open Storefront”-এ tap করে, এবং পরের launcher token একটি নতুন redemption পায়।

storefront খোলে কিন্তু আমি একটি order submit করতে পারি না

Check করুন যে:

1. আপনি Messenger-এর ভেতরে আছেন (regular Facebook web wrapper নয়)।
2. আপনার Page-এ customer-এর শেষ inbound message ২৪ ঘণ্টার কম আগে ছিল (অথবা তারা সবেমাত্র launch button tap করেছে, যা window reset করে)।
3. আপনার Inbox দেখাচ্ছে — order হয়তো এসেছে, কিন্তু একটি search বা status filter দিয়ে বাদ পড়েছে।

auto-seed ব্যর্থ হয়েছে এবং Publish to Messenger button ধূসর

আপনার Page-management permission নেই। Integrations → আপনার Meta integration → Three-dot menu → Reconnect-এ যান। OAuth flow আপনাকে অনুপস্থিত scope-এর জন্য আবার prompt করে।

গুরুত্বপূর্ণ নোট

• প্রতি Page-এ একটি storefront: প্রতিটি Facebook Page-এর নিজস্ব draft ও published storefront রয়েছে — একই org-এর অন্য Page থেকে স্বাধীন।
• Pricing per-org, per-Page নয়: একটি দ্বিতীয় Facebook Page যোগ করলে আপনার tier price পরিবর্তন হয় না।
• Telegram-এর সাথে shared composer: আপনি দুটি channel-ই পরিচালনা করলে, একই composer দুটোই তৈরি করে — শুধু প্রতিটি integration-এর “Configure mini app” link খুলুন। Theme, block ও Help Center entry cross-link হয় না, কিন্তু pattern-গুলো transfer হয়।
• Outer-chat adapter স্বয়ংক্রিয়: আপনি এটি configure করেন না। আপনি যে প্রতিটি block publish করেন তা fallback path-এর জন্য Generic Template / Quick Reply / image carousel-এ project করে।