Telegram Storefront (In-bot Mini App)

আপনার Telegram bot-কে একটি সম্পূর্ণ in-app storefront-এ পরিণত করুন। একটি পরিপাটি, multipage product catalog তৈরি করুন — photo, video, themed page, প্রতি product-এ একটি AI assistant ও lightweight order-taking সহ — যা একজন customer আপনার bot-এর menu button-এ tap করার মুহূর্তেই Telegram-এর ভেতরে খোলে। কোনো app store নেই, কোনো আলাদা website নেই, আর নিজে বানানোর মতো কোনো আলাদা checkout পাতাও নেই: একটি যুক্ত store-এর সাথে জুড়ে দিন — ক্রেতারা আপনার আসল checkout-এ টাকা দেবে; হাতে সাজান — order আপনার inbox-এ অনুরোধ হিসেবে আসবে। শুধু একটি tap, আর আপনার customer browse করছে।

প্রতিটি plan-এ free, trial সহ। Integrations → Telegram bot → Configure mini app-এ একটি visual drag-and-drop composer-এ তৈরি: ১১টি block type, ৬টি theme, per-product AI chat, order CTA যা আপনার inbox-এ একজন সত্যিকারের মানুষের কাছে handoff করে।

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

production-এ storefront যেসব সাধারণ আকার নেয় তার কয়েকটি:

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

একটি page দিয়ে শুরু করুন, প্রস্তুত হলে একটি multipage catalog-এ বেড়ে উঠুন।

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

• Customer-রা কখনো Telegram ছাড়ে না। কোনো app install নেই, মনে রাখার মতো কোনো domain নেই, নিজে বানানোর মতো কোনো আলাদা checkout পাতা নেই। storefront Telegram-এর WebView-তে খোলে এবং user-এর theme, ভাষা ও login উত্তরাধিকার সূত্রে পায়।
• একটি chat থেকে এক tap। আপনি bot সংযুক্ত করার মুহূর্তেই composer-এর পাশের menu button সেট হয়ে যায়; আপনি একটি storefront তৈরি করে bot-এ publish করলেই button সেটি খোলে। আপনি একটি product publish করার মুহূর্তেই label স্বয়ংক্রিয়ভাবে “Shop”-এ flip হয় — কোনো BotFather config প্রয়োজন নেই।
• একটি storefront, দুই channel। storefront একবার তৈরি করুন আর একসাথে একটি Telegram bot এবং একটি Facebook Messenger Page-এ publish করুন — দুটোতেই একই page, product ও theme। Distribute tab থেকে প্রতিটি channel publish করুন; একটি unpublish করুন অন্যটিতে হাত না দিয়ে।
• 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-এর Telegram DM খোলা রাখা অবস্থায়।
• প্রতিটি plan-এ free। page, প্রতি page-এ block বা product doc-এ কোনো cap নেই — কোনো plan-এই নয়, free trial সহ। Pricing per-org — একটি দ্বিতীয় Telegram bot যোগ করলে আপনার 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 (Telegram default + ৫টি custom)।
• শেষ published snapshot-এ এক-click revert সহ Draft → Publish lifecycle।
• Per-integration on/off toggle — এটি off করলে bot menu Telegram-এর / command picker-এ ফিরে যায়; public URL 410 Gone ফেরত দেয় যাতে stale bookmark content ফাঁস না করে।
• Multilingual storefront — আপনার storefront-এর content WhatsApp-এর সমর্থিত যেকোনো ভাষায় author করুন (ফাঁক পূরণ করতে এক-click AI translation সহ), এবং একটি built-in language switcher প্রতিটি visitor-কে নিজেরটি বেছে নিতে দেয়। Right-to-left ভাষা (Arabic, Hebrew, Persian, Urdu) সঠিকভাবে render হয়। shell-এর নিজস্ব button স্বয়ংক্রিয়ভাবে visitor-এর device ভাষা অনুসরণ করে।
• Built-in Help Center — তাৎক্ষণিক প্রশ্নের জন্য একটি pinned FAQ surface, সবসময় এক tap দূরে। নিচে দেখুন।
• Product পাওয়ার দুটি উপায়। হাতে সাজানো একটি storefront একটি পরিপাটি catalog + lead-capture surface: product আপনি নিজে লেখেন, আর সেটি কোনো payment, inventory বা shipping করে না; আপনার inbox-এ একজন মানুষের সাথে এটিকে যুক্ত করুন এবং আপনার একটি সম্পূর্ণ sales loop হয়ে যাবে। Catalog-এর সাথে জোড়া একটি storefront আপনার যুক্ত Shopify বা WooCommerce store থেকে product নেয় এবং ক্রেতাদের আপনার আসল checkout-এ পাঠায়। নিচে দেখুন।

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

কেউ যখন আপনার Telegram bot খোলে, তারা composer-এর পাশে menu button দেখে। এটিতে tap করলে আপনার storefront Telegram-এর ভেতরে full-screen খোলে। button label হলো:

• “Shop” — auto-set হয় যদি আপনার published storefront-এ কোনো product card বা product grid থাকে
• “Open” — অন্যথায় auto-set হয়
• আপনি যা টাইপ করেছেন — আপনি composer-এ একটি custom label সেট করলে (যেকোনো ১–৩২-অক্ষরের string আপনি এটি clear না করা পর্যন্ত প্রতিটি publish-এ টিকে থাকে)

storefront URL-এর আকার https://storefront.cuneiform.chat/{your-org-slug} (?i={integration_id} যোগ হয় শুধু যদি আপনার org-এর একাধিক Telegram bot থাকে)। QR code, ad-এর জন্য, বা একটি BotFather t.me/<bot>/<app> direct-launch link register করতে integration card থেকে এই URL copy করুন (bot card-এ BotFather playbook দেখুন)।

পূর্বশর্ত

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

Quick start (৫ মিনিট)

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

1. Integrations → আপনার Telegram bot → 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 করুন। আপনার একটি product থাকায় bot menu button স্বয়ংক্রিয়ভাবে “Shop”-এ relabel হয়।
7. Telegram-এ আপনার bot খুলুন। “Shop”-এ tap করুন। আপনার product-এ tap করুন। “Ask a question”-এ tap করুন। “Order this”-এ tap করুন। Submit করুন। কয়েক সেকেন্ডের মধ্যে আপনার Inbox-এ handoff আসতে দেখবেন।

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

AI দিয়ে একটি storefront তৈরি বা উন্নত করুন

একটি খালি canvas থেকে শুরু করতে চান না — অথবা আপনার যেটি আছে সেটি পুনর্গঠনে একটু সাহায্য চান? composer-এর AI button আপনার বর্তমান storefront পড়ে এবং খাপ খাইয়ে নেয়:

AI structure design করে — কোন page থাকবে, প্রতিটিতে কোন block যাবে, ক্রম, এবং একটি মানানসই theme — এবং প্রতিটি text field-এ একটি “fill me in” placeholder ফেলে (যেমন “Add your headline” বা “Product name”)। এটি আপনার আসল copy, price বা product name লেখে না; সেগুলো আপনি পূরণ করেন, ঠিক যেমন আপনি ইতিমধ্যেই নিজের image upload করেন। এটি ফলাফলকে দ্রুত, সৎ এবং শেষ করার জন্য আপনার রাখে।

• Empty storefront → Generate with AI। একটি একদম নতুন bot-এর storefront-এ এখনো কোনো page নেই, তাই AI আপনার brief থেকে পুরো জিনিসটি layout করে।
• Existing storefront → Enhance with AI। আপনার storefront-এ content থাকলে button-টি Enhance with AI হয়ে যায় — এটি আপনার request-এর ভিত্তিতে নতুন page ও section যোগ করে এবং আপনার ইতিমধ্যে যা আছে তা সম্পূর্ণ অস্পর্শিত রাখে। এটি কখনো আপনার বিদ্যমান page পুনর্লিখন বা মুছে দেয় না।

Generate (empty storefront)

Generate with AI-এ click করুন, তারপর হয়:

• এটি বর্ণনা করুন — একটি এক-অনুচ্ছেদের prompt টাইপ করুন: “একটি coffee shop-এর জন্য একটি 3-page storefront: একটি hero, পাঁচটি coffee সহ একটি product grid, একটি testimonial section ও একটি contact page — উষ্ণ editorial চেহারা।” AI page, block ও একটি মানানসই theme layout করে, আপনার পূরণের জন্য placeholder প্রস্তুত রেখে।
• একটি PDF upload করুন — একটি product catalog বা brochure PDF drop করুন এবং AI এটিকে storefront page ও product card-এ পরিণত করে।
• একটি image upload করুন — একটি বিদ্যমান storefront / flyer-এর screenshot বা photo drop করুন এবং AI তা থেকে একটি যুক্তিসঙ্গত layout draft করে।

ফলাফল সরাসরি composer-এ একটি unsaved draft হিসেবে আসে — প্রতিটি page, block ও theme সম্পূর্ণ editable। কোন block-গুলোতে এখনো content প্রয়োজন composer তা flag করে যাতে আপনি ঠিক কী পূরণ করতে হবে দেখতে পারেন। placeholder-গুলো আপনার আসল copy দিয়ে প্রতিস্থাপন করুন, আপনার image যোগ করুন, তারপর যথারীতি Save ও Publish করুন।

Enhance (existing storefront)

Enhance with AI-এ click করুন, আপনি যা যোগ করতে চান তা টাইপ করুন — “একটি customer-reviews page যোগ করো”, “একটি contact page যোগ করো”, “একটি FAQ section যোগ করো” — এবং submit করুন। (Enhance prompt-only; PDF/image upload নতুন করে generate করার জন্য।)

আপনার composer-এ কিছু স্পর্শ করার আগে, একটি review-changes panel খোলে যা AI যোগ করার প্রস্তাব দিচ্ছে এমন নতুন page ও block-এর সারসংক্ষেপ দেয়। আপনার বিদ্যমান page, block ও upload করা image ঠিক যেমন ছিল তেমনই রাখা হয়। গ্রহণ করতে Apply changes-এ click করুন, অথবা ফলাফল ফেলে দিতে Discard-এ। Apply করলে নতুন structure composer-এ আসে (fill-me-in placeholder flag করা সহ); আপনি এখনও copy পূরণ করেন, যথারীতি Save ও Publish করেন।

জানার মতো কয়েকটি জিনিস:

• এটি একটি layout, একটি সম্পূর্ণ store নয়। AI structure design করে এবং placeholder ফেলে; এটি আপনার আসল copy লেখে না এবং image generate করে না। “Add your headline” / “Product name” placeholder-গুলো আপনার আসল text দিয়ে প্রতিস্থাপন করুন, এবং নিজের image upload করুন — composer প্রতিটি block highlight করে যার এখনো content প্রয়োজন।
• Video ও image gallery যোগ করা আপনার কাজ। AI video ও gallery block বাদ দেয় কারণ তাদের content একটি আসল asset (একটি YouTube link, আপনার photo)। asset থাকলে composer থেকে নিজেই সেই block যোগ করুন।
• Enhance শুধু যোগ করে — এটি কখনো আপনার যা আছে তা স্পর্শ করে না। এটি নতুন page ও section append করে; এটি আপনার বিদ্যমানগুলো পুনর্লিখন, পুনর্বিন্যাস বা মুছে দেয় না। একটি বিদ্যমান page পুনর্গঠন করতে, composer-এ সরাসরি এটি edit করুন।
• English first। Generation ও enhancement English placeholder ও label তৈরি করে। অন্য ভাষা পূরণ করতে পরে composer-এর Translate flow ব্যবহার করুন।
• One shot। প্রতিটি click আপনার prompt থেকে একটি নতুন ফলাফল তৈরি করে — কোনো পাল্টাপাল্টি refine chat নেই। একটি ভিন্ন দিক চেষ্টা করতে, শুধু একটি নতুন prompt দিয়ে এটি আবার চালান।
• ব্যর্থ হলে, আপনি copy করা যায় এমন raw AI output সহ একটি error দেখবেন — সাধারণত একটি পরিষ্কার, ছোট prompt দিয়ে পুনরায় চেষ্টা করলে এটি ঠিক হয়ে যায়।

composer

composer থাকে Integrations → [আপনার Telegram bot] → Configure mini app-এ (bot card-এ three-dot menu-র মাধ্যমেও পৌঁছানো যায়)। এটি একটি 3-pane layout:

উপরে একটি sticky toolbar-এ রয়েছে: একটি status badge (Draft / Published), একটি ⋯ menu (Discard changes / Revert to published), Save as draft, ও Publish।

Draft বনাম Published

• Save as draft — আপনার edit save হয় কিন্তু customer-রা এখনও শেষ published version দেখে।
• Publish — আপনার draft live হয়; একটি frozen “published snapshot” স্বয়ংক্রিয়ভাবে save হয় যাতে আপনি পরে roll back করতে পারেন।
• Discard changes — unsaved local edit ফেলে দেয় এবং শেষ-saved version reload করে (কোনো server call নেই)।
• Revert to published — published snapshot আপনার working draft-এ ফেরত copy করে এবং তা republish করে। আগে কখনো publish করেনি এমন org-এর জন্য disabled।

আপনি বর্তমানে Published থাকা অবস্থায় Save as draft-এ click করলে, আপনি একটি “unpublish” confirmation dialog পাবেন (কীভাবে ফিরে যাবেন তার একটি hint সহ)।

১১টি block type

একটি storefront page-এ এগুলোর যেকোনোটি drop করুন:

প্রতিটি block per-block style override-ও সমর্থন করে — background color, text color, font size — page theme-এর সাথে গুণিত। এগুলো সংযতভাবে ব্যবহার করুন; default-ভাবে theme চেহারা সামলায়।

Theme

প্রতি page-এ একটি theme বেছে নিন। theme background, text color, accent color ও font নিয়ন্ত্রণ করে।

আপনি যেখানে একটি theme বেছে নেন না, সেখানে আপনি Telegram default পান — আপনার storefront সবসময় customer-এর Telegram app-এ native অনুভব করায়।

Per-integration control

প্রতিটি Telegram integration-এর স্বাধীন setting আছে, সেই একটি bot-এ scope করা। একই org-এ একটি দ্বিতীয় Telegram bot যোগ করলে তা নিজস্ব স্বাধীন toggle পায়। তিনটিই composer-এর বাম rail-এ Mini app settings-এর অধীনে থাকে।

Storefront on/off toggle

• Default: on।
• এটি off করা একসাথে দুটি কাজ করে:
  1. bot-এর menu button Telegram-এর default / command picker-এ reset হয় — storefront আর bot UI থেকে পৌঁছানো যায় না।
  2. একজন customer-এর কাছে এখনও storefront URL bookmark করা থাকলে এবং তারা সরাসরি এটি খুললে, shell একটি “currently unavailable” message দেখায় (server 410 Gone ফেরত দেয় যাতে stale cache off-switch পার করে content ফাঁস করতে না পারে)।
• toggle disable করার আগে একটি dialog দিয়ে একবার নিশ্চিত করে।
• এটি আবার on করলে bot menu button পুনরুদ্ধার হয় (auto-label বা আপনার override, যেটি সেট করা আছে)।

Menu-button label override

• Default: প্রতিটি publish-এ auto-derive — আপনার storefront-এ কোনো product block থাকলে “Shop”, অন্যথায় “Open”।
• button text freeze করতে একটি custom label (১–৩২ অক্ষর) সেট করুন — সেই বিন্দু থেকে auto-derive বাদ পড়ে, content পরিবর্তন বা republish-এর পরেও।
• auto-derive-এ ফিরতে field clear করুন (খালি string)।
• আপনার audience English না বললে একটি custom label ব্যবহার করুন — default auto-label শুধু English।

Storefront language

আপনার storefront একবার English-এ author করুন, তারপর WhatsApp-এর সমর্থিত যেকোনো ভাষার জন্য translation যোগ করুন। composer-এ language switcher খুলুন, একটি target ভাষা বেছে নিন, এবং হয় নিজে translation টাইপ করুন অথবা একটি এক-click AI draft-এর জন্য Translate-এ চাপুন যা আপনি edit করতে পারেন। Region-specific variant first-class — Brazilian বনাম European Portuguese, Simplified বনাম Traditional Chinese, ইত্যাদি — তাই আপনি প্রতিটি market-এর সাথে তার নিজস্ব রূপে কথা বলতে পারেন।

একটি storefront-এ একাধিক ভাষা থাকলে, visitor-দের জন্য একটি language switcher আসে, এবং storefront প্রতিটি visitor-এর device ভাষা স্বয়ংক্রিয়ভাবে detect করে (English-এ fallback করে)। Arabic-এর মতো right-to-left ভাষা সঠিকভাবে render হয়। এটি আপনার author করা content translate করে (hero headline, product name, FAQ, rich-text) — shell-এর নিজস্ব chrome (drawer, system button) visitor-এর device ভাষা আলাদাভাবে অনুসরণ করে।

Per-product AI chat

যেকোনো product card একটি chattable product হতে পারে। প্রতিটি product card-এ composer-এ এর chat-কে চালিত করা document পরিচালনার জন্য একটি দুই-button row থাকে:

• Attach docs — একটি picker খোলে যা আপনাকে আপনার knowledge base-এর যেকোনো folder থেকে বেছে নিতে দেয়। এই product-এ ইতিমধ্যে attach করা doc disabled দেখায় যাতে আপনি double-attach করতে না পারেন। একটি নতুন file প্রয়োজন? picker-এ inline Upload new action ব্যবহার করুন — এটি আপনার KB-এ আসে এবং auto-select হয়।
• Linked docs (N) — একটি manager খোলে যা বর্তমানে attach করা সবকিছু তালিকাভুক্ত করে। সেখান থেকে আপনি এই product থেকে একটি doc unlink করতে পারেন (doc আপনার KB-তে এবং এটি যেসব product-এ linked সেগুলোতে থাকে) অথবা এটি edit করতে Knowledge Base view-তে যেতে পারেন। একই doc অন্য product চালালে manager একটি “Also linked to: …” strip-ও দেখায়।

একজন customer যখন product-এ tap করে, একটি in-sheet chat খোলে। chat শুধু সেই একটি product-এর linked document-এ scope করা — assistant অন্য product-এর file থেকে উত্তর ফাঁস করবে না। কথোপকথন live (SSE) stream হয় এবং প্রতি integration-এ একটি নিবেদিত collection-এ সংরক্ষিত হয়।

জানার মতো কয়েকটি জিনিস:

• একটি doc একাধিক product চালাতে পারে। পাঁচবার upload করার বদলে প্রতিটি product জুড়ে একটি একক “Shipping & returns” PDF share করুন।
• Unlinking per-product। একটি product card থেকে একটি doc সরালে তা আপনার KB-তে এবং এটি যেসব product-এ link করে সেগুলোতে অক্ষত থাকে। একটি doc সর্বত্র delete করতে, Knowledge page থেকে এটি delete করুন — এর সব product link স্বয়ংক্রিয়ভাবে পরিষ্কার হয়।
• picker থেকে inline upload ব্যবহার করলে doc default-ভাবে একটি “Showcase Products” folder-এ আসে, কিন্তু আপনি এগুলো আপনার KB-তে যেকোনো জায়গায় সংগঠিত করতে স্বাধীন।

আপনি যত product doc attach করতে পারবেন তার মোট সংখ্যায় কোনো cap নেই (Tier limits দেখুন)।

Order inquiry ও cart (ঐচ্ছিক)

আপনি যেকোনো product card বা product grid-এ একটি Order CTA attach করতে পারেন। হাতে সাজানো একটি storefront-এ এটি সম্পূর্ণভাবে একটি structured-message handoff — কোনো payment নেই, কোনো inventory নেই, কোনো fulfillment নেই — আর সেটি একজন মানুষের তুলে নেওয়ার জন্য আপনার inbox-এ আসে। Catalog-এর সাথে জোড়া একটি storefront-এ সেই একই CTA বদলে ক্রেতাকে আপনার store-এর আসল checkout-এ নিয়ে যেতে পারে; দেখুন Catalog-এর সাথে জোড়া storefront।

দুটি mode

• inquiry mode — customer “Order this”-এ tap করে → product pre-filled সহ একটি form খোলে → তারা submit করে → একটি handoff আপনার inbox-এ আসে।
• cart mode — customer “Add to cart”-এ tap করে → product একটি local cart-এ যোগ হয় (শুধু তাদের browser-এ থাকে, আপনার integration-এ keyed) → তারা cart page-এ review করে (cart-mode CTA ব্যবহার করলে auto-injected — place করার মতো কোনো block নেই) এবং checkout করে → একটি multi-line handoff আপনার inbox-এ আসে।

Form field

name, phone, email, notes, delivery_address-এর যেকোনো subset বেছে নিন। আপনি যা-ই নির্বাচন করুন না কেন name সবসময় আবশ্যক।

Submit-এর পরে যা ঘটে

1. formatted order summary-কে প্রথম message হিসেবে নিয়ে আপনার inbox-এ একটি নতুন কথোপকথন তৈরি হয়।
2. একটি handoff তৈরি হয় — একজন মানব team সদস্যকে দায়িত্ব নিতে signal করা হয়। Line item ও contact info structured metadata হিসেবে attach করা হয়।
3. system তাৎক্ষণিকভাবে customer-এর Telegram DM-এ একটি localized “Got your order” message ফেরত পাঠায়, যা Telegram-এর ২৪-ঘণ্টার reply window খোলা রাখে যাতে আপনার team-এর inbox থেকে reply পরিষ্কারভাবে customer-এর কাছে route হয়।
4. inbox detail view line item, price, contact info ও notes পরিপাটিভাবে সাজিয়ে একটি নিবেদিত Order Request Panel render করে।

Anti-spam / anti-duplicate

• প্রতিটি customer সর্বোচ্চ প্রতি মিনিটে ১০টি order submit করতে পারে; প্রতিটি tenant সর্বোচ্চ প্রতি মিনিটে ১০০টি।
• একই হুবহু order-এ ৬০ সেকেন্ডের মধ্যে double-tap dedup করা হয়; ৬০ সেকেন্ডের মধ্যে দুটি ভিন্ন order পার হয়ে যায়।

Catalog-এর সাথে জোড়া storefront

উপরে বর্ণিত সবকিছু সেই storefront-এর জন্য যেটি আপনি হাতে সাজান: product, দাম ও প্রাপ্যতা আপনি নিজে লেখেন, আর order অনুরোধ হিসেবে আসে। একটি brochure, একটি পরিষেবার তালিকা বা একটি মেনুর জন্য এটিই এখনো সঠিক রূপ।

আপনার যদি একটি যুক্ত Shopify বা WooCommerce store থাকে, তাহলে storefront-টি বদলে সেই catalog-এর সাথে জোড়া দেওয়া যায়। তার product block আপনার আসল catalog থেকে আসে, দাম ও stock আপনার হাতে লেখা কিছু নয় বরং store থেকে আসে, আর তার order CTA কিনতে প্রস্তুত একজন ক্রেতাকে cart অক্ষত রেখে আপনার নিজের store-এর checkout-এ নিয়ে যেতে পারে — দেখুন Checkout।

একটি storefront একটি উৎসেই বাঁধা, আর তার উপর product block বসে গেলে সেই বাঁধন স্থির হয়ে যায় — তাই হাতে সাজানো একটি storefront নীরবে catalog-জোড়া storefront-এর মতো আচরণ করতে শুরু করতে পারে না, আর উল্টোটাও নয়। catalog-জোড়া আসার আগে তৈরি হওয়া storefront-গুলো কোনো উৎসে বাঁধা নয় এবং সেগুলো ঠিক আগের মতোই কাজ করে যায়।

Built-in Help Center

প্রতিটি storefront একটি ছোট Help Center নিয়ে আসে — page menu-র শেষে একটি pinned support page, যেসব customer-এর একটি FAQ প্রয়োজন বা bot-কে একটি প্রশ্ন জিজ্ঞাসা করতে চায় তাদের জন্য সবসময় এক tap দূরে। একটি নিবেদিত panel থেকে author করা (Integrations → bot card → Help Center), এটি drag-to-reorder সহ প্রায় ১০০টি পর্যন্ত entry বহন করে। দুটি entry mode: curated (markdown উত্তর inline render হয়, শূন্য LLM cost) ও agent (tap করলে একটি পূর্ব-লিখিত প্রশ্ন bot chat-এ fire হয়)। আপনি FAQ block-এর মাধ্যমে এই entry-গুলোর একটি subset একটি storefront page-এ inline-ও দেখাতে পারেন — product card-এর পাশে কয়েকটি মূল উত্তর রাখার জন্য উপযোগী।

বেশিরভাগ customer-এর কখনো এটি খোলার প্রয়োজন হয় না — product, gallery ও order CTA storefront-এই buying-flow-এর প্রশ্নগুলোর উত্তর দেয়।

Image

আপনি যখন composer-এ একটি image upload করেন:

• অনুমোদিত format: PNG, JPEG, WebP।
• সর্বোচ্চ upload size: ২ MB (original — যা store ও serve করা হয় তা অনেক ছোট)।
• Inline cropper স্বয়ংক্রিয়ভাবে খোলে, slot-এর জন্য সঠিক aspect ratio-তে locked (hero background-এর জন্য 16:9, product / gallery / testimonial avatar-এর জন্য 1:1)।
• Auto-compression: cropper output upload-এর আগে আপনার browser-এ WebP-তে compress হয় (hero ≤৫০০ KB, product/gallery ≤৩৫০ KB, avatar ≤১০০ KB)।
• প্রতিটি খালি dropzone-এর উপরে প্রস্তাবিত dimension-এর helper text দেখানো হয়।
• Image URL secure presigned URL-এর মাধ্যমে প্রতি ১৫ মিনিটে auto-refresh হয় — customer-রা কখনো আপনার raw storage path দেখে না।

২ MB cap আপনি যে original upload করেন তার উপর, customer-রা যা দেখে তার উপর নয়। একটি 12 MP ফোনের photo বা একটি print-resolution catalog shot যেমন আছে তেমন drop করুন — in-browser cropper দৃশ্যমান quality loss ছাড়াই scale-down সামলায়।

Tier limit

প্রতিটি plan-এ available, free trial সহ — এবং কোনো plan-এ page, প্রতি page-এ block বা product doc-এর কোনো cap নেই, free trial সহ।

নোট:

• একটি product grid বা carousel composer-এর block তালিকায় ১টি block হিসেবে গণ্য, এতে যত item বা slide-ই থাকুক না কেন।
• Pricing per-org, per-bot নয়। আপনার org-এ একটি দ্বিতীয় (বা পঞ্চম) Telegram bot যোগ করলে আপনার price পরিবর্তন হয় না। প্রতিটি bot একই plan-এর ভেতরে নিজস্ব storefront পায়।

Permission

composer-এর write action (save, publish, image upload, product doc upload, revert) সব Telegram-এর জন্য Integration manage permission প্রয়োজন। বাস্তবে এর মানে Owner ও Admin role storefront author করতে পারে; Member role view-only।

আজ কোনো “storefront-only” role নেই — Owner ও Admin দুজনই Billing-ও দেখে। আপনি যদি আপনার storefront তৈরিতে একজন contractor আনেন, আপনার বিকল্পগুলো হলো:

• তাদের Admin হিসেবে যোগ করুন (এই সতর্কতা সহ যে তারা Billing-ও দেখবে)।
• একটি screen-sharing session ব্যবহার করুন যেখানে আপনি logged in থাকেন এবং freelancer চালায়।
• তাদের offline-এ asset/copy প্রস্তুত করতে দিন (সব text + image সহ একটি doc) এবং আপনি Owner হিসেবে সেগুলো paste করুন।

একটি granular “Integration Editor” role roadmap-এ রয়েছে।

Performance ও freshness

• Server-side cache — public storefront response প্রতি integration-এ ৫ মিনিট-এর জন্য cache হয়।
• Publish-এ cache bust হয় — আপনি Publish (বা Revert)-এ click করার মুহূর্তেই, cache মুছে যায়, তাই customer-রা তাদের পরবর্তী page request-এর মধ্যে আপনার পরিবর্তন দেখে।
• ETag support — shell HTTP If-None-Match ব্যবহার করে এবং কিছু পরিবর্তন না হলে একটি দ্রুত 304 Not Modified পায়, mobile data usage কম রাখে।
• Image URL ১৫ মিনিটের জন্য valid; shell সেগুলোর মেয়াদ শেষ হওয়ার আগে স্বয়ংক্রিয়ভাবে re-fetch করে।

হাতে সাজানো storefront যা করে না

এই সীমাবদ্ধতাগুলো সেই storefront-এর জন্য যাতে product আপনি নিজে লিখেছেন। Catalog-এর সাথে জোড়া storefront প্রথম তিনটি তুলে দেয়, কারণ সে product — এবং checkout — আপনার যুক্ত store থেকেই নেয়।

• নিজস্ব কোনো payment নেই। Order CTA inquiry handoff, Stripe / WhatsApp Pay / Telegram Stars checkout নয়। (Catalog-জোড়া storefront বদলে আপনার store-এর checkout-এ handoff করে।)
• কোনো inventory tracking নেই। Availability badge হলো free-text label যা আপনি manually edit করেন। (Catalog-জোড়া storefront আপনার store থেকে আসল stock পড়ে।)
• কোনো shipping calculation / address validation নেই। Delivery address free-form text হিসেবে সংগ্রহ করা হয়। (Catalog-জোড়া storefront-এ shipping আপনার নিজের store-এরই shipping, তার checkout-এ হিসাব করা।)
• কোনো customer account নেই। Customer-দের তাদের Telegram user ID দিয়ে শনাক্ত করা হয়; কোনো login বা signup flow নেই।
• Order Inquiry / Cart Checkout-এর বাইরে কোনো form নেই। contact block static display; rich-text block কোনো form render করে না।
• Help Center-এর “ask the bot” ও order path একটি ভদ্র error সহ group / channel launch প্রত্যাখ্যান করে।

End-to-end customer flow

1. Customer Telegram-এ আপনার bot খোলে এবং menu button-এ tap করে — “Shop” (product block থেকে auto-derived) বা আপনি custom label হিসেবে যা সেট করেছেন তা দিয়ে labeled।
2. storefront Telegram-এর ভেতরে load হয়। তারা আপনার প্রথম page দেখে।
3. তারা আপনার gallery-তে swipe করে, আপনার video দেখে, একটি product-এ tap করে।
4. product একটি sheet-এ খোলে। তারা “Ask a question”-এ tap করে → সেই product-এর document-এ scope করা একটি AI chat খোলে। তারা একটি উত্তর পায়।
5. তারা “Order this”-এ tap করে → একটি form পপ আপ হয় → তারা name + phone পূরণ করে → submit করে।
6. তারা তাৎক্ষণিকভাবে তাদের Telegram DM-এ একটি “Got your order, we’ll reach out” message ফেরত পায়।
7. আপনার team Inbox-এ একটি নতুন handoff পায় order detail সহ। আপনার team inbox থেকে যে reply পাঠায় তা real time-এ customer-এর DM-এ আসে।

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

Menu button storefront খোলে না

1. storefront on/off toggle on আছে কিনা নিশ্চিত করুন (composer → বাম rail → Mini app settings)।
2. Telegram integration disconnect করে আবার reconnect করুন — chat-menu button connection step-এর সময় সেট হয়, এবং একটি stale bot-এ এটি অনুপস্থিত থাকতে পারে।
3. আপনি BotFather-এর মাধ্যমে একটি custom menu button সেট করলে, তা platform-এর auto-config override করে — BotFather-এর /setmenubutton-এর মাধ্যমে এটি clear করুন।

URL সরাসরি খোলার সময় customer-রা “currently unavailable” দেখে

storefront on/off toggle off — composer-এর বাম rail থেকে এটি আবার on করুন।

আমি সবেমাত্র save করা edit customer-দের জন্য দেখা যাচ্ছে না

আপনার edit এখনও Draft-এ। composer toolbar-এ Publish-এ click করুন — server cache সাথে সাথে bust হয়। আপনি ইতিমধ্যে publish করে থাকলে এবং customer-রা এখনও stale content দেখলে, তাদের storefront-এর ভেতরে pull-to-refresh করতে বলুন (Telegram WebView cache করে)।

Product chat একটি ভিন্ন product-এর doc থেকে উত্তর দেয়

product card-এ Linked docs manager দুবার check করুন — শুধু সেখানে স্পষ্টভাবে link করা doc chat চালায়। একটি doc না দেখালে, Attach docs picker-এর মাধ্যমে এটি attach করুন।

Custom menu label কার্যকর হয়নি

label input-এর নিজস্ব Save / Reset button আছে (on/off toggle-এর মতো নয়, যা auto-save হয়)। টাইপ করার পরে Save-এ click করুন — আংশিক keystroke কখনো Telegram-এ পৌঁছায় না।

Disconnect করা

storefront Telegram integration-এর অংশ, তাই আপনি bot disconnect করলে এটি চলে যায়:

• Integrations → Telegram card → three-dot menu → Delete

আপনি author করা storefront page, block ও help entry integration-এর সাথে delete হয়। bot সংযুক্ত রেখে শুধু storefront-টি offline করতে, এর বদলে storefront on/off toggle off করুন।

সম্পর্কিত

• Telegram — parent integration; storefront এর উপরে চলে
• Saba on Telegram — operator-facing Saba bot (ভিন্ন feature, এটিও Telegram-ভিত্তিক)
• Telegram Business — একজন Premium user-এর ব্যক্তিগত account-এ AI reply (ভিন্ন feature)