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 নেই। শুধু একটি 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 flow নেই। storefront Telegram-এর WebView-তে খোলে এবং user-এর theme, ভাষা ও login উত্তরাধিকার সূত্রে পায়।
• একটি chat থেকে এক tap। আপনি bot সংযুক্ত করলে composer-এর পাশের menu button স্বয়ংক্রিয়ভাবে আপনার storefront-এ wire হয়। আপনি একটি product publish করার মুহূর্তেই label স্বয়ংক্রিয়ভাবে “Shop”-এ flip হয় — কোনো BotFather config প্রয়োজন নেই।
• 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। Trial একটি ৫-page / প্রতি page-এ ২৫-block / ১০০-product-doc cap পায়; প্রতিটি paid plan cap সরিয়ে দেয়। Pricing per-org — একটি দ্বিতীয় Telegram bot যোগ করলে আপনার 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 (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 দূরে। নিচে দেখুন।
• কোনো payment নেই, কোনো inventory নেই, কোনো shipping নেই — এটি একটি পরিপাটি catalog + lead-capture surface, একটি সম্পূর্ণ e-commerce stack নয়। আপনার inbox-এ একজন মানুষের সাথে এটিকে যুক্ত করুন এবং আপনার একটি সম্পূর্ণ sales loop হয়ে যাবে।

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 থাকলে (প্রতিটি Telegram/Messenger storefront আপনি bot সংযুক্ত করার মুহূর্তেই একটি page দিয়ে শুরু হয়), 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 করতে পারবেন তার মোট সংখ্যায় Tier limit প্রযোজ্য (Tier limits দেখুন)।

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

আপনি যেকোনো product card বা product grid-এ একটি Order CTA attach করতে পারেন। এটি সম্পূর্ণভাবে একটি structured-message handoff — কোনো payment নেই, কোনো inventory নেই, কোনো fulfillment নেই।

দুটি 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 পার হয়ে যায়।

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 সহ। composer cap প্রয়োগ করে।

নোট:

• একটি product grid বা carousel per-page block limit-এর দিকে ১টি block হিসেবে গণ্য, এতে যত item বা slide-ই থাকুক না কেন।
• আপনি একটি limit-এ পৌঁছালে, composer একটি upgrade modal দেখায়।
• Pricing per-org, per-bot নয়। আপনার org-এ একটি দ্বিতীয় (বা পঞ্চম) Telegram bot যোগ করলে আপনার tier price পরিবর্তন হয় না। প্রতিটি bot একই plan-এর ভেতরে নিজস্ব storefront পায়; cap এক org-এর অধীনে আপনার সব bot জুড়ে shared।

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 করে।

এটি যা করে না

• কোনো payment নেই। Order CTA inquiry handoff, Stripe / WhatsApp Pay / Telegram Stars checkout নয়।
• কোনো inventory tracking নেই। Availability badge হলো free-text label যা আপনি manually edit করেন।
• কোনো shipping calculation / address validation নেই। Delivery address free-form text হিসেবে সংগ্রহ করা হয়।
• কোনো 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)