# বিল্ট-ইন এডিটরে ইন-অ্যাপ মেসেজ তৈরি করুন

Pushwoosh বিল্ট-ইন এডিটরে কোড না লিখেই একটি ইন-অ্যাপ মেসেজ টেমপ্লেট তৈরি করুন। আপনি কন্টেন্ট ব্লক, ছবি, বোতাম এবং ব্যক্তিগতকৃত টেক্সট সহ একটি পুনঃব্যবহারযোগ্য লেআউট পাবেন যা আপনি একটি Customer Journey-তে, এককালীন ইন-অ্যাপ হিসাবে, বা একটি পুশ থেকে দেখাতে পারেন।

<Aside type="note">
শুরু করার আগে, Pushwoosh SDK ইন্টিগ্রেট করুন যাতে আপনার অ্যাপে ইন-অ্যাপ মেসেজ দেখা যায়। [আরও জানুন](/bn/product/messaging-channels/in-apps/)
</Aside>

## একটি নতুন ইন-অ্যাপ টেমপ্লেট তৈরি করুন

একটি ইন-অ্যাপ টেমপ্লেট হলো একটি পুনঃব্যবহারযোগ্য ডিজাইন যা আপনি একবার তৈরি করেন এবং তারপর ক্যাম্পেইনে ব্যবহারকারীদের দেখান। আপনি বিল্ট-ইন এডিটরে একটি তৈরি করতে পারেন, একটি কাস্টম HTML ZIP আপলোড করতে পারেন, অথবা একটি নেটিভ রিচ মিডিয়া টেমপ্লেট তৈরি করতে পারেন। এই নিবন্ধটি বিল্ট-ইন এডিটরে স্ক্র্যাচ থেকে একটি টেমপ্লেট তৈরি করার পদ্ধতি বর্ণনা করে। একটি বিদ্যমান টেমপ্লেট কাস্টমাইজ করতে একই ধাপ অনুসরণ করুন।

1. **Content** → **In-apps**-এ যান।
2. **Create in-app**-এ ক্লিক করুন। বিল্ট-ইন এডিটর সরাসরি খুলে যায়।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-1.webp" alt="টেমপ্লেট তালিকার উপরের ডানদিকে Create in-app বোতাম সহ Content In-apps পৃষ্ঠা"/>

টেমপ্লেট অন্যভাবে তৈরি করতে **Create in-app**-এর পাশের তীরচিহ্নে ক্লিক করুন:

* **Upload ZIP:** আপনার HTML ইন-অ্যাপ মেসেজ সহ একটি [ZIP ফাইল আপলোড করুন](/bn/developer/guides/content/rich-media-templates-syntax)।
* **Native in-app:** রেডিমেড লেআউট ব্যবহার করে একটি SDK-রেন্ডার করা মেসেজ তৈরি করুন। [আরও জানুন](/bn/product/content/in-apps/create-native-in-app-messages/)

## এডিটর লেআউটটি অন্বেষণ করুন

বিল্ট-ইন এডিটরের চারটি এলাকা রয়েছে। প্রত্যেকটির একটি স্পষ্ট কাজ আছে।

<span id="top-bar" />

### টপ বার

টপ বার হলো যেখানে আপনি টেমপ্লেটটিকে সামগ্রিকভাবে পরিচালনা করেন: এর নাম, আনডু হিস্ট্রি, সেভ স্ট্যাটাস, ডিভাইসে এটি কেমন দেখায় (**In-app settings**), ভাষা (**Auto-translate** এবং ভাষা সুইচার), ফোন বা ডেস্কটপ প্রিভিউ প্রস্থ (ফোন **360**, **390**, **393**, বা **430 px** অফার করে, যা সাধারণ ডিভাইসের প্রস্থের সাথে মেলে), এবং একটি লাইট/ডার্ক ক্যানভাস টগল (**sun/moon icon**)। দেখুন [ডিভাইসে ইন-অ্যাপ কেমন দেখাবে তা কনফিগার করুন](/bn/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/#configure-how-the-in-app-looks-on-device) এবং [টেমপ্লেটটি স্থানীয়করণ করুন](#localize-the-template)।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-3.webp" alt="ইন-অ্যাপ এডিটরের টপ বার যেখানে টেমপ্লেটের নাম, Undo, Redo, In-app settings, ভাষা সুইচার, Auto-translate, ফোন এবং ডেস্কটপ প্রিভিউ, লাইট/ডার্ক টগল এবং Saved দেখানো হচ্ছে"/>

আরও অ্যাকশনের জন্য টপ বারে **⋮** মেনুটি খুলুন:

<img src="/rich-media-create-rich-media-in-the-built-in-editor-54.webp" alt="ইন-অ্যাপ এডিটর টপ বারে প্রসারিত ⋮ মেনু যেখানে Preview, Check, Brand book, Download .zip, Apply brand book styles, এবং Reset custom styles রয়েছে" width="220"/>

#### Preview

**Preview** আপনাকে মেসেজটি সেভ করার আগে চেষ্টা করতে দেয়: বোতাম ট্যাপ করুন, মাল্টি-স্ক্রিন ফ্লো দিয়ে যান এবং ফোন বা ডেস্কটপে লেআউট পরীক্ষা করুন।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-44.webp" alt="ফোন এবং ডেস্কটপ টগল, লাইট এবং ডার্ক টগল, Restart, এবং একটি ইন-অ্যাপ মেসেজ যেখানে ছবি, অফার টেক্সট, টাইমার এবং Claim বোতাম দেখানো হচ্ছে, সহ প্রিভিউ প্যানেল" width="480"/>

প্রিভিউতে যা কাজ করে:

* বোতাম এবং মাল্টি-স্ক্রিন ফ্লো বাস্তবে চলে।
* লিঙ্ক এবং ডিপ লিঙ্ক রিপোর্ট করা হয়, খোলা হয় না।
* SDK কল এবং ওপেন/ক্লিক পরিসংখ্যান বন্ধ থাকে।
* ভাষা সুইচারের সাথে ভাষা মেলে। Merge Tags প্লেসহোল্ডার হিসাবে থাকে।

প্রিভিউ হেডারে, ফোন এবং ডেস্কটপের মধ্যে এবং লাইট ও ডার্কের মধ্যে স্যুইচ করে সমস্ত লেআউট দেখুন। মেসেজটি আবার শুরু থেকে দেখানোর জন্য **Restart** ক্লিক করুন। প্রিভিউ থেকে বের হতে, Esc চাপুন বা প্যানেলের বাইরে ক্লিক করুন।

#### Check

**Check** **Smart check** খোলে এবং সাধারণ সমস্যার জন্য টেমপ্লেটটি স্ক্যান করে।

Smart check যা যা খোঁজে:

* URL ছাড়া বোতাম, মেনু আইটেম এবং ইমেজ লিঙ্ক, অথবা এমন URL যা http(s), `mailto:`, `tel:`, বা ডিপ লিঙ্ক (উদাহরণস্বরূপ `myapp://promo`) ঠিকানা নয়
* অসম্পূর্ণ AI প্লেসহোল্ডার ব্লক
* খালি ছবি বা ভিডিও স্লট এবং অনুপস্থিত alt টেক্সট
* অনুপস্থিত বা অবৈধ লিঙ্ক সহ প্রোডাক্ট কার্ড
* টেক্সট কনট্রাস্ট যা WCAG AA পূরণ করে না
* অনূদিত কন্টেন্ট
* একটি কাউন্টডাউন টাইমার যার শেষ তারিখ ইতিমধ্যে পেরিয়ে গেছে
* একটি [ডিসপ্লে কন্ডিশন](#show-blocks-to-specific-users) যেখানে একটি ভাঙা বা খালি নিয়ম আছে, একটি শাখা যে ব্লকটির সাথে চেইন করা ছিল তা হারিয়েছে, অথবা একটি কন্ডিশন যা প্রয়োগ হবে না কারণ অ্যাকাউন্টের জন্য ডাইনামিক কন্টেন্ট নিষ্ক্রিয় করা আছে

<img src="/rich-media-create-rich-media-in-the-built-in-editor-53.webp" alt="Smart check প্যানেল একটি অনুপস্থিত বোতাম লিঙ্ক ত্রুটি এবং একটি খালি ইমেজ স্লট সতর্কতা তালিকাভুক্ত করছে" />

ক্যানভাসে প্রভাবিত এলিমেন্টে সরাসরি যেতে একটি ফাইন্ডিং-এ ক্লিক করুন। যদি কিছু ভুল না থাকে, প্যানেলটি দেখায় **All checks passed — the content looks ready to save.**

#### Brand book

* **Brand book:** এই অ্যাপ্লিকেশনের [Brand book](/bn/product/content/brand-book/) খুলুন।
* **Apply brand book styles:** আপনার Brand book-এর সাথে মেলানোর জন্য টেমপ্লেটটি পুনরায় স্টাইল করুন (একবার আপনি একটি সেট আপ করার পরে)।
* **Reset custom styles:** টেমপ্লেটের উপর স্টাইল ওভাররাইডগুলি সরিয়ে ডিফল্টে ফিরে যান।

#### Download .zip

**Download .zip** টেমপ্লেটটিকে একটি ZIP ফাইল হিসাবে সংরক্ষণ করে। এটি সর্বশেষ সংরক্ষিত সংস্করণটি ডাউনলোড করে, তাই প্রথমে আপনার পরিবর্তনগুলি সংরক্ষণ করুন। মেনু আইটেমটি কেবল টেমপ্লেটটি অন্তত একবার সংরক্ষণ করার পরেই উপস্থিত হয় — নতুন, অসংরক্ষিত টেমপ্লেটগুলিতে এটি দেখায় না।

### Canvas

ক্যানভাসে মেসেজটি সম্পাদনা করুন: টেক্সট, ছবি এবং বোতামগুলিতে ক্লিক করে সেগুলি পরিবর্তন করুন। প্রতিটি প্রস্থে লেআউটটি কেমন দেখায় তা পরীক্ষা করতে টপ বারে ফোন/ডেস্কটপ টগল ব্যবহার করুন। টগলটি কেবল প্রিভিউ পরিবর্তন করে, লেআউটটি নিজে নয়।

ক্যানভাসটি লাইট বা ডার্ক মোডে রেন্ডার করার সময় সম্পাদনা চালিয়ে যেতে টপ বারে **sun/moon icon** ব্যবহার করুন। এটি একটি **Dark mode variant** সেট আপ না থাকলেও কাজ করে — আপনি নিজের রঙ সেট না করা পর্যন্ত ডার্ক রঙগুলি স্বয়ংক্রিয়ভাবে উদ্ভূত হয়। এটি একটি লাইভ এডিটিং ভিউ, শুধুমাত্র পঠনযোগ্য **Preview** প্যানেল নয়।

### Layers

Layers প্যানেলটি আপনার টেমপ্লেটের প্রতিটি ব্লককে একটি ট্রি হিসাবে তালিকাভুক্ত করে, ক্যানভাসের মতো একই ক্রমে। একটি নেস্টেড ব্লক (উদাহরণস্বরূপ, একটি গ্রুপের ভিতরের একটি বোতাম) নির্বাচন করতে বা বিষয়বস্তু পুনরায় সাজাতে সারিগুলি টেনে আনতে বাম প্রান্ত থেকে এটি খুলুন।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-5.webp" alt="Layers প্যানেল যেখানে Card, Image, Heading, Text, Timer, Buttons, এবং Footer একটি ট্রি-তে তালিকাভুক্ত করা আছে"/>

### ডান প্যানেল

তিনটি ট্যাবের মধ্যে স্যুইচ করুন:

* **Blocks:** মেসেজে কন্টেন্ট যোগ করুন। দেখুন [ইন-অ্যাপ এডিটর ব্লক রেফারেন্স](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/)।
* **Settings:** একবারে পুরো টেমপ্লেটে স্টাইলিং প্রয়োগ করুন। দেখুন [ইন-অ্যাপ টেমপ্লেট সেটিংস কনফিগার করুন](/bn/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)।
* **AI:** একটি প্রম্পট থেকে কন্টেন্ট তৈরি বা সম্পাদনা করতে AI সহকারীর সাথে চ্যাট করুন।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-6.webp" alt="ডান প্যানেলে Blocks ট্যাব যেখানে Heading, Text, Button, Image, এবং অন্যান্য কন্টেন্ট ব্লক রয়েছে" width="320"/>

<span id="add-content-blocks" />

## কন্টেন্ট ব্লক যোগ করুন

1. ডান প্যানেলে **Blocks** ট্যাবটি খুলুন।
2. ক্যানভাসে একটি ব্লক টেনে আনুন, অথবা টেমপ্লেটের শেষে এটি যোগ করতে একটি ব্লকে ক্লিক করুন।
3. লেআউট প্রস্তুত না হওয়া পর্যন্ত ব্লক যোগ করতে থাকুন।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-7.webp" alt="খালি ইন-অ্যাপ এডিটর যেখানে ক্যানভাসে Start with a block এবং Blocks প্যানেল খোলা আছে"/>

প্রতিটি ব্লকের প্রকার মেসেজে একটি ভিন্ন উদ্দেশ্য পূরণ করে:

* **[Heading](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** শিরোনাম এবং ছোট হেডলাইন
* **[Text](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#heading-and-text):** বডি কপি এবং দীর্ঘ বিবরণ
* **[Button](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#button):** একটি ট্যাপযোগ্য কল টু অ্যাকশন
* **[Image](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#image):** [মিডিয়া স্টোরেজ](/bn/product/content/media-store/), আপলোড, বা URL থেকে ছবি
* **[Video](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#video):** একটি ট্যাপযোগ্য ভিডিও থাম্বনেইল যা একটি YouTube বা Vimeo ভিডিও খোলে
* **[Card](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#card):** একটি লেআউটে শিরোনাম, টেক্সট এবং বোতাম সহ একটি ছবি
* **[Divider](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#divider):** একটি রেখা যা বিভাগগুলিকে আলাদা করে
* **[Columns](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#columns):** পাশাপাশি লেআউট (২, ৩, বা ৪টি সমান কলাম, অথবা ৩৩/৬৭ এবং ৬৭/৩৩ বিভাজন)
* **[Timer](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#countdown-timer):** অফার এবং সময়সীমার জন্য একটি কাউন্টডাউন
* **[Menu](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#menu):** নেভিগেশন বা যোগাযোগের লিঙ্কগুলির একটি সারি বা কলাম
* **[Social](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#social):** আপনার সামাজিক প্রোফাইলগুলির সাথে লিঙ্ক করা আইকন
* **[HTML](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#html):** কাস্টম HTML, যেমন একটি ফর্ম, সমীক্ষা, বা এমবেডেড ভিডিও
* **[Products](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#products):** আপনার [প্রোডাক্ট ক্যাটালগ](/bn/product/content/product-catalog/) বা একজন ব্যবহারকারীর পরিত্যক্ত কার্ট থেকে প্রোডাক্ট কার্ডের একটি গ্রিড

প্রতিটি ব্লকের সেটিংসের জন্য [ইন-অ্যাপ এডিটর ব্লক রেফারেন্স](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/) এবং [কীভাবে ব্লকগুলি সংরক্ষণ এবং পুনরায় ব্যবহার করবেন](/bn/product/content/in-apps/no-code-in-app-editor/built-in-editor-blocks-reference/#save-and-reuse-blocks) দেখুন।

<span id="show-blocks-to-specific-users" />

### নির্দিষ্ট ব্যবহারকারীদের ব্লক দেখান

প্রত্যেক ব্যবহারকারীকে একই ব্লক দেখার প্রয়োজন নেই। একটি ব্লকে একটি **display condition** সেট করুন যাতে এটি ব্যবহারকারীর [Tags](/bn/product/audience-data-and-segmentation/user-data-tags/tags/)-এর উপর ভিত্তি করে দেখায় বা লুকায়। আপনি এখনও একটি টেমপ্লেট পাঠান, কিন্তু প্রত্যেক ব্যক্তি কেবল সেই অংশগুলি দেখে যা তাদের জন্য প্রযোজ্য।

ক্যানভাসে ব্লকটি নির্বাচন করুন, ডান প্যানেলে **Display condition** খুলুন, এবং **Show this block conditionally** চালু করুন। [আরও জানুন](/bn/product/content/in-apps/no-code-in-app-editor/show-in-app-content-to-specific-users/)

<span id="localize-the-template" />

## টেমপ্লেটটি স্থানীয়করণ করুন

একটি বহু-ভাষার টেমপ্লেট প্রতিটি ভাষার জন্য স্থানীয়কৃত কপি একটি ইন-অ্যাপ ডিজাইনে সংরক্ষণ করে। চ্যানেল জুড়ে বহু-ভাষার মেসেজিং কীভাবে কাজ করে তার জন্য, দেখুন [বহু-ভাষার মেসেজিং](/bn/product/personalization/multi-language/)।

<Aside type="note">
এখানকার ভাষা নির্বাচকটি কেবল সেই প্ল্যাটফর্মের ডিভাইসগুলি গণনা করে যা ইন-অ্যাপ কন্টেন্ট রেন্ডার করে। ব্যবহারকারী-স্তরের ট্যাগগুলির মাধ্যমে সেট করা ভাষার মানগুলি কোনও ডিভাইস প্ল্যাটফর্মের সাথে বাঁধা নয়, তাই সেগুলি এখানে দেখায় না।
</Aside>

বহু-ভাষার কন্টেন্ট সেট আপ করতে:

1. ভাষা তালিকা খুলতে টপ বারে ভাষা সুইচারে ক্লিক করুন।
2. আপনি যে ভাষাগুলি যোগ করতে চান তা নির্বাচন করুন, তারপর **Apply** ক্লিক করুন।
3. ভাষাগুলির মধ্যে সরানোর জন্য ভাষা সুইচার ব্যবহার করুন এবং নির্বাচিত ভাষার জন্য প্রতিটি ব্লকের কন্টেন্ট সম্পাদনা করুন।
4. অনুপস্থিত অনুবাদগুলি স্বয়ংক্রিয়ভাবে পূরণ করতে **Auto-translate** ক্লিক করুন — সংরক্ষণ করার আগে AI-জেনারেটেড টেক্সট পর্যালোচনা করুন।

<Aside type="note">
আপনি যে কোনও ব্লক যোগ করেন তা প্রতিটি ভাষার জন্য একই কন্টেন্ট সহ উপস্থিত হয়। আপনার টেমপ্লেটে ব্যবহৃত প্রতিটি ভাষার জন্য নতুন টেক্সট এবং বোতাম লেবেল অনুবাদ করতে ভুলবেন না।
</Aside>

## টেমপ্লেট সেটিংস কনফিগার করুন

মেসেজটি স্টাইল এবং স্থাপন করার জন্য দুটি জায়গা ব্যবহার করুন:

* **Settings** ট্যাব (ডান প্যানেল): ডকুমেন্টের আকার, রঙ, টাইপোগ্রাফি, এবং ব্লকগুলির জন্য ডিফল্ট স্টাইল।
* **In-app settings** (টপ বার): স্ক্রিনে অবস্থান, অ্যানিমেশন, এবং ক্লোজ বোতাম।

[আরও জানুন](/bn/product/content/in-apps/no-code-in-app-editor/configure-in-app-template-settings/)

<span id="save-the-template" />

## টেমপ্লেটটি সংরক্ষণ করুন

আপনার পরিবর্তনগুলি সংরক্ষণ করতে টপ বারে **Save** ক্লিক করুন। আপনার সম্পাদনাগুলির মধ্যে পিছনে এবং সামনে যেতে টপ বারে **Undo**/**Redo** ব্যবহার করুন।

<Aside type="note">
সংরক্ষণ করা আপনার ইন-অ্যাপ টেমপ্লেটটি **Content** → **In-apps**-এ সংরক্ষণ করে। সেখান থেকে আপনি টেমপ্লেটগুলি প্রিভিউ, সম্পাদনা এবং পরিচালনা করতে পারেন। [আরও জানুন](/bn/product/content/in-apps/#view-and-manage-your-in-app-content)
</Aside>

## আপনার নিজের সিস্টেম থেকে অনুবাদ আপডেট করুন

আপনার ডেভেলপমেন্ট টিম [Pushwoosh API](/bn/developer/api-reference/) বা [ManyMoney AI MCP server](/bn/product/pushwoosh-ai/manymoney-mcp-server/)-এর সাথে সংযুক্ত একটি AI ক্লায়েন্টের মাধ্যমে একটি সংরক্ষিত টেমপ্লেটের অনুবাদ আপডেট করতে পারে, টেমপ্লেটের HTML বা ডিজাইন পুনরায় না পাঠিয়ে।

এটি কেবল এমন একটি টেমপ্লেটে কাজ করে যা ইতিমধ্যে একবার সংরক্ষণ করা হয়েছে (উপরে [টেমপ্লেট সংরক্ষণ করুন](#save-the-template) দেখুন)। কোনও সংরক্ষিত কন্টেন্ট ছাড়া একটি টেমপ্লেটে অনুবাদ মার্জ করার কিছু নেই।

আপডেটটি কেবল `localization` ফিল্ডে পাঠানো ভাষা এবং টেক্সট কীগুলি মার্জ করে। অন্য সব ভাষা, কী এবং ভিজ্যুয়াল ডিজাইন যেমন সংরক্ষিত ছিল তেমনই থাকে।

- কোনও মান ছাড়া একটি কী পাঠালে সেই কীটি তার ভাষা থেকে সরিয়ে দেওয়া হয়।
- কোনও মান ছাড়া একটি ভাষা পাঠালে পুরো ভাষাটি টেমপ্লেট থেকে সরিয়ে দেওয়া হয়।
- ডিফল্ট ভাষা আপডেটের পরে টেমপ্লেটে থাকা যে কোনও ভাষায় স্যুইচ করতে পারে।
- আপডেটটি প্রত্যাখ্যান করা হয় যদি এটি টেমপ্লেট থেকে প্রতিটি ভাষা সরিয়ে দেয়, অথবা যদি অনুরোধ করা ডিফল্ট ভাষাটি মার্জের পরে থাকা ভাষাগুলির মধ্যে একটি না হয়।

এর জন্য, আপনার ডেভেলপমেন্ট টিমের সহায়তা প্রয়োজন হবে।