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

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

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

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

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

১. **কনটেন্ট** → **ইন-অ্যাপস**-এ যান।
২. **টেমপ্লেট যোগ করুন**-এ ক্লিক করুন।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-1.webp" alt="কনটেন্ট ইন-অ্যাপস পেজ যেখানে টেমপ্লেট তালিকার উপরে ডানদিকে 'টেমপ্লেট যোগ করুন' বোতামটি রয়েছে"/>

৩. একটি টেমপ্লেট নাম লিখুন।
৪. টেমপ্লেটটি কীভাবে তৈরি করবেন তা বেছে নিন:
   * **ZIP আপলোড করুন:** আপনার HTML ইন-অ্যাপ মেসেজ সহ একটি [ZIP ফাইল আপলোড করুন](/bn/developer/guides/content/rich-media-templates-syntax)।
   * **নতুন টেমপ্লেট তৈরি করুন:** বিল্ট-ইন এডিটরে একটি টেমপ্লেট তৈরি করুন।
৫. **নতুন টেমপ্লেট তৈরি করুন** নির্বাচন করুন।
৬. **টেমপ্লেট যোগ করুন**-এ ক্লিক করুন।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-2.webp" alt="নতুন টেমপ্লেট ফর্ম যেখানে নাম ফিল্ড, ZIP আপলোড অপশন এবং 'নতুন টেমপ্লেট তৈরি করুন' অপশনটি নির্বাচিত রয়েছে"/>


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

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

**টপ বার**

টেমপ্লেটের নাম পরিবর্তন করতে, ভুল সংশোধন করতে, আপনার কাজ সেভ করতে, অথবা মেসেজটি ডিভাইসে কীভাবে প্রদর্শিত হবে তা পরিবর্তন করার জন্য **ইন-অ্যাপ সেটিংস** খুলতে টপ বার ব্যবহার করুন। দেখুন [ডিভাইসে ইন-অ্যাপটি কেমন দেখাবে তা কনফিগার করুন](#configure-how-the-in-app-looks-on-device)।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-3.webp" alt="ইন-অ্যাপ এডিটরের টপ বার যেখানে টেমপ্লেটের নাম, আনডু, রিডু, ইন-অ্যাপ সেটিংস এবং সেভ অপশন রয়েছে"/>

**ক্যানভাস**

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-4.webp" alt="ইন-অ্যাপ এডিটরে খালি ক্যানভাস যার কেন্দ্রে 'একটি ব্লক দিয়ে শুরু করুন' প্রম্পট রয়েছে" width="480"/>

**লেয়ার**

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

<img src="/rich-media-create-rich-media-in-the-built-in-editor-5.webp" alt="লেয়ার প্যানেল যেখানে একটি ট্রি-তে কার্ড, ইমেজ, হেডিং, টেক্সট, টাইমার, বাটন এবং ফুটার তালিকাভুক্ত রয়েছে"/>

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

মেসেজে কনটেন্ট যোগ করতে ডান প্যানেলে **ব্লক** ব্যবহার করুন, এবং যখন আপনি এমন স্টাইলিং চান যা পুরো টেমপ্লেটে একবারে প্রয়োগ হবে তখন **সেটিংস** ব্যবহার করুন। দেখুন [টেমপ্লেট-ব্যাপী স্টাইলিং কনফিগার করুন](#configure-template-wide-styling)।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-6.webp" alt="ডান প্যানেলে ব্লকস ট্যাব যেখানে হেডিং, টেক্সট, বাটন, ইমেজ এবং অন্যান্য কনটেন্ট ব্লক রয়েছে" width="320"/>

### টেমপ্লেট তৈরি করা শুরু করুন

আপনি একটি টেমপ্লেট তৈরি করার পরে, এডিটরটি একটি খালি ক্যানভাস এবং ডানদিকে **ব্লক** ট্যাব সহ খোলে।

১. **ব্লক** প্যানেল থেকে একটি ব্লক ক্যানভাসে ড্র্যাগ করুন, অথবা প্যানেলে একটি ব্লকে ক্লিক করে এটি যোগ করুন।
২. লেআউট প্রস্তুত না হওয়া পর্যন্ত একই ভাবে ব্লক যোগ করতে থাকুন।
৩. যখন আপনার টেমপ্লেট-ব্যাপী স্টাইলিং প্রয়োজন হবে তখন **সেটিংস** ট্যাবটি খুলুন।


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

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

কনটেন্ট ব্লকগুলি বিল্ট-ইন এডিটরে একটি ইন-অ্যাপ টেমপ্লেটের বিল্ডিং পিস। আপনি হেডিং, টেক্সট, ছবি, বোতাম এবং অন্যান্য ব্লকগুলিকে একটি লেআউটে একত্রিত করেন।

**ব্লক** ট্যাবটি খুলুন এবং ক্যানভাসে একটি ব্লক ড্র্যাগ করুন, অথবা একটি ব্লক যোগ করতে ক্লিক করুন। উপলব্ধ ব্লকগুলি:

* **[হেডিং](#heading-and-text):** মেসেজের শিরোনাম এবং ছোট হেডলাইন
* **[টেক্সট](#heading-and-text):** বডি কপি এবং দীর্ঘ বর্ণনা
* **[বাটন](#button):** একটি ট্যাপযোগ্য কল টু অ্যাকশন
* **[ইমেজ](#image):** [মিডিয়া স্টোর](/bn/product/content/media-store/), আপলোড, বা URL থেকে ছবি
* **[ডিভাইডার](#divider):** একটি লাইন যা বিভাগগুলিকে দৃশ্যত আলাদা করে
* **[২ কলাম](#columns):** পাশাপাশি দুটি সমান কলাম
* **[৩ কলাম](#columns):** পাশাপাশি তিনটি সমান কলাম
* **[৪ কলাম](#columns):** পাশাপাশি চারটি সমান কলাম
* **[৩৩ / ৬৭](#columns):** দুটি কলাম যেখানে বামটি প্রায় ৩৩% প্রস্থ এবং ডানটি প্রায় ৬৭% নেয়
* **[৬৭ / ৩৩](#columns):** দুটি কলাম যেখানে বামটি প্রায় ৬৭% প্রস্থ এবং ডানটি প্রায় ৩৩% নেয়
* **[টাইমার](#countdown-timer):** অফার এবং সময়সীমার জন্য একটি কাউন্টডাউন
* **[মেনু](#menu):** লিঙ্কগুলির একটি সারি বা কলাম, যেমন নেভিগেশন বা পরিচিতি
* **[সোশ্যাল](#social):** আপনার সোশ্যাল প্রোফাইলগুলিতে লিঙ্ক করা আইকন
* **[HTML](#html):** কাস্টম HTML, যেমন একটি ফর্ম বা এমবেডেড ভিডিও

### হেডিং এবং টেক্সট

**হেডিং** এবং **টেক্সট** ব্লকগুলি ইন-অ্যাপ মেসেজে ব্যবহারকারীদের পড়া কপি ধারণ করে। ক্যানভাসে টেক্সট সম্পাদনা করুন এবং টুলবার দিয়ে এটি ফরম্যাট করুন।

ক্যানভাসে এর কপি সম্পাদনা করতে একটি **হেডিং** বা **টেক্সট** ব্লকে ক্লিক করুন। ফরম্যাটিং টুলবার আনতে কিছু টেক্সট নির্বাচন করুন: বোল্ড, ইটালিক, আন্ডারলাইন, অ্যালাইনমেন্ট, একটি লিঙ্ক বোতাম এবং একটি **টেক্সট স্টাইল** ড্রপডাউন।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-8.webp" alt="ক্যানভাসে হেডিং ব্লক নির্বাচিত যেখানে টেক্সট ফরম্যাটিং টুলবার স্টাইল এবং ফরম্যাটিং অপশন দেখাচ্ছে"/>

Merge Tags হলো প্লেসহোল্ডার যা ব্যবহারকারীর প্রোফাইল থেকে একটি [Tag](/bn/product/audience-data-and-segmentation/user-data-tags/tags/) ভ্যালু মেসেজে প্রবেশ করায়, যাতে প্রতিটি সাবস্ক্রাইবার ব্যক্তিগতকৃত কপি দেখতে পায়। একটি যোগ করতে, টেক্সট নির্বাচন করুন, টুলবারে **Merge Tags**-এ ক্লিক করুন এবং আপনার অ্যাকাউন্ট থেকে একটি Tag বেছে নিন। [ব্যক্তিগতকৃত ইন-অ্যাপ মেসেজ সম্পর্কে আরও জানুন](/bn/product/how-to-guides/how-to-send-a-personalized-message/how-to-send-a-personalized-in-app-message/)


### ইমেজ

একটি **ইমেজ** ব্লক ইন-অ্যাপ টেমপ্লেটে একটি ছবি প্রদর্শন করে। ডান প্যানেলে **ইমেজ** সেটিংস খুলতে ক্যানভাসে এটি নির্বাচন করুন।

* **ছবি যোগ করুন** / **ছবি প্রতিস্থাপন করুন:** ব্লকটি খালি থাকলে **ছবি যোগ করুন**-এ ক্লিক করুন, অথবা একটি ছবি ইতিমধ্যে সেট করা থাকলে **ছবি প্রতিস্থাপন করুন**-এ ক্লিক করুন। আপনি একটি ফাইল আপলোড করতে পারেন বা আপনার [মিডিয়া স্টোর](/bn/product/content/media-store/) থেকে একটি বেছে নিতে পারেন।
* **ছবির URL:** ছবির একটি হোস্ট করা লিঙ্ক পেস্ট করুন।
* **Alt টেক্সট:** অ্যাক্সেসিবিলিটির জন্য ছবিটি বর্ণনা করুন।
* **লিঙ্ক URL:** ছবিটি ট্যাপ করা হলে একটি ওয়েবসাইট খুলুন।
* **লিঙ্ক টার্গেট:** একই ট্যাবে বা একটি নতুন ট্যাবে লিঙ্কটি খুলুন।
* **ফাইল:** আপনি একটি ছবি যোগ করার পরে, ব্যবহৃত ফাইলের পাথ দেখায়।

**স্পেসিং**-এ, ছবির চারপাশে জায়গা যোগ করতে **প্যাডিং** চালু করুন। প্রতিটি দিকে একই প্যাডিংয়ের জন্য **সব দিকে** ব্যবহার করুন, অথবা প্রতিটি দিক আলাদাভাবে সেট করতে **আরও অপশন** চালু করুন।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-9.webp" alt="ক্যানভাসে খালি ইমেজ ব্লক যেখানে ইমেজ সেটিংসে ছবি যোগ করুন, ছবির URL, Alt টেক্সট, লিঙ্ক URL এবং স্পেসিং দেখাচ্ছে" width="600"/>

### বাটন

একটি **বাটন** ইন-অ্যাপ মেসেজে একটি ট্যাপযোগ্য কল টু অ্যাকশন। এটি একটি URL খুলতে, কাস্টম জাভাস্ক্রিপ্ট চালাতে, বা মেসেজটি বন্ধ করতে ব্যবহার করুন।

ক্যানভাসে এর লেবেল সম্পাদনা করতে একটি **বাটন** ব্লকে ক্লিক করুন। ফন্ট সাইজ, টেক্সট রঙ, বোল্ড, ইটালিক, আন্ডারলাইন এবং অ্যালাইনমেন্ট পরিবর্তন করতে টুলবার ব্যবহার করুন।

ব্যবহারকারী বোতামটি ট্যাপ করলে কী হবে তা সেট করতে:

১. **লিঙ্ক সন্নিবেশ/সম্পাদনা** খুলতে টুলবারে লিঙ্ক আইকনে ক্লিক করুন।
২. একটি **অ্যাকশন টাইপ** বেছে নিন।
৩. সেই অ্যাকশনের জন্য ফিল্ডগুলি পূরণ করুন (নীচে দেখুন)।
৪. **সেভ**-এ ক্লিক করুন।

#### একটি ওয়েবসাইট খুলুন

**ওয়েবসাইট খুলুন** ব্যবহারকারী বোতামটি ট্যাপ করলে একটি লিঙ্ক খোলে। **URL**-এ ঠিকানা লিখুন। আপনি যা লিখতে পারেন:

* একটি ওয়েবসাইট: `https://example.com`
* একটি অ্যাপ লিঙ্ক যা আপনার অ্যাপের ভিতরে একটি স্ক্রিন খোলে: `myapp://promo`
* জাভাস্ক্রিপ্ট ছাড়া ইন-অ্যাপ বন্ধ করুন: `pushwoosh://close`

<img src="/rich-media-create-rich-media-in-the-built-in-editor-10.webp" alt="একটি বাটনের জন্য লিঙ্ক সন্নিবেশ/সম্পাদনা ডায়ালগ যেখানে অ্যাকশন টাইপ ওয়েবসাইট খুলুন এবং একটি URL ফিল্ড রয়েছে"/>

#### কাস্টম জাভাস্ক্রিপ্ট চালান

**কাস্টম জাভাস্ক্রিপ্ট** ব্যবহারকারী বোতামটি ট্যাপ করলে কোড চালায়। **onClick** ফিল্ডে কোডটি লিখুন।

এটি ব্যবহার করুন যখন একটি ট্যাপ শুধুমাত্র একটি লিঙ্ক খোলার পরিবর্তে Pushwoosh-এ কিছু করা উচিত। অ্যাপের ব্যক্তিটি এখনও একটি সাধারণ বোতাম দেখে। তারা ট্যাগ বা ইভেন্ট দেখে না। আপনি সিদ্ধান্ত নেন স্ক্রিনে পরবর্তীতে কী ঘটবে: মেসেজটি খোলা রাখুন, অথবা একই **onClick**-এ এটি বন্ধ করুন।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-11.webp" alt="একটি বাটনের জন্য লিঙ্ক সন্নিবেশ/সম্পাদনা ডায়ালগ যেখানে অ্যাকশন টাইপ কাস্টম জাভাস্ক্রিপ্ট এবং onClick closeInApp-এ সেট করা আছে"/>

**onClick-এ উপলব্ধ মেথড**

* `pushwoosh.closeInApp()`: ইন-অ্যাপ মেসেজটি বন্ধ করুন। ট্যাপের পরে মেসেজটি খোলা রাখতে এটি বাদ দিন।
* `pushwoosh.sendTags({...})`: পরবর্তী ক্যাম্পেইনের জন্য মানগুলিকে [ডিভাইস ট্যাগ](/bn/product/audience-data-and-segmentation/user-data-tags/tags/) হিসেবে সেভ করুন।
* `pushwoosh.postEvent(...)`: একটি [কাস্টম ইভেন্ট](/bn/product/audience-data-and-segmentation/events/custom-events/) পাঠান, উদাহরণস্বরূপ একটি Customer Journey শুরু করতে।
* `pushwoosh.getTags(...)`: বর্তমান ট্যাগগুলি পড়ুন। মেসেজটি কী দেখায় তা পরিবর্তন করতে কাস্টম HTML-এ দরকারী।
* `pushwoosh.getCustomData()`: এই ইন-অ্যাপটি খোলা পুশ থেকে পাস করা কাস্টম ডেটা পড়ুন।

##### উদাহরণ: ব্যবহারকারীদের একটি আগ্রহ বেছে নিতে দিন এবং পরবর্তী ক্যাম্পেইনের জন্য তা সংরক্ষণ করুন

১. একটি **টেক্সট** বা **হেডিং** ব্লকে একটি প্রশ্ন যোগ করুন, উদাহরণস্বরূপ: "আপনি কোন খেলায় আগ্রহী?"
২. প্রতিটি বিকল্পের জন্য একটি **বাটন** যোগ করুন, উদাহরণস্বরূপ: **যোগব্যায়াম** এবং **জিম**।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-12.webp" alt="যোগব্যায়াম এবং জিম বোতাম সহ ইন-অ্যাপ টেমপ্লেট এবং যোগব্যায়াম বোতামের জন্য কাস্টম জাভাস্ক্রিপ্ট onClick"/>

৩. প্রতিটি বোতামের জন্য **অ্যাকশন টাইপ** **কাস্টম জাভাস্ক্রিপ্ট**-এ সেট করুন।
৪. **যোগব্যায়াম** বোতামের জন্য, এটি **onClick**-এ পেস্ট করুন:

```js
pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();
```

৫. **জিম** বোতামের জন্য, এটি **onClick**-এ পেস্ট করুন:

```js
pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();
```


যখন ব্যবহারকারী **যোগব্যায়াম** ট্যাপ করে, Pushwoosh তাদের ডিভাইসে `interest` ট্যাগটি লেখে এবং ইন-অ্যাপটি বন্ধ করে। আপনি তারপর সেই ব্যবহারকারীকে একটি [সেগমেন্ট](/bn/product/audience-data-and-segmentation/segmentation/) বা [Customer Journey](/bn/product/customer-journey/journey-elements/#in-app)-তে টার্গেট করতে পারেন।

<LinkCard title="জাভাস্ক্রিপ্ট দিয়ে কীভাবে ইন-অ্যাপ তৈরি করবেন সে সম্পর্কে আরও জানুন" href="/developer/guides/messaging-channels/inapp-with-javascript/" />

### ডিভাইডার

একটি **ডিভাইডার** কনটেন্ট ব্লকগুলির মধ্যে একটি অনুভূমিক রেখা। টেমপ্লেটে বিভাগগুলিকে দৃশ্যত আলাদা করতে এটি ব্যবহার করুন।

সেটিংস প্যানেলে **লাইন স্টাইল** (সলিড, ড্যাশড, ডটেড), **রঙ**, **পুরুত্ব** এবং **প্রস্থ** কনফিগার করুন।

### HTML

**HTML** ব্লক আপনাকে একটি ইন-অ্যাপ টেমপ্লেটে কাস্টম HTML পেস্ট করতে দেয়। যখন ইন-অ্যাপ মেসেজের জন্য কোনো ডেডিকেটেড ফর্ম ব্লক না থাকে তখন একটি কাস্টম ফর্ম, সার্ভে বা এমবেডেড ভিডিওর জন্য এটি ব্যবহার করুন।


##### উদাহরণ

নীচের উদাহরণগুলি একটি ইন-অ্যাপ টেমপ্লেটে HTML ব্লক ব্যবহারের সাধারণ উপায়গুলি দেখায়: একটি লিড ফর্ম, একটি সার্ভে এবং একটি এমবেডেড ভিডিও।

<Aside type="note">
ফর্ম এবং সার্ভের উদাহরণগুলি ডিভাইস ট্যাগ সেভ করে এবং Pushwoosh-এর মাধ্যমে ইভেন্ট পাঠায়। ক্যাম্পেইনে ব্যবহার করার আগে আপনার অ্যাকাউন্টে কাস্টম ইভেন্টগুলি তৈরি করুন।
</Aside>

<Tabs>
<TabItem label="লিড ফর্ম">

এই লিড ফর্মটি নাম এবং ইমেলকে ট্যাগ হিসেবে লেখে, একটি `promo_requested` ইভেন্ট পাঠায়, একটি ধন্যবাদ বার্তা দেখায়, তারপর ইন-অ্যাপটি বন্ধ করে।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-13.webp" alt="ইন-অ্যাপ এডিটরে HTML লিড ফর্ম যেখানে নাম এবং ইমেল ফিল্ড এবং একটি 'আমাকে কোড পাঠান' বোতাম রয়েছে" width="360"/>

<details>
<summary>HTML কোড</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>Get your 20% discount</h2>
<p>Leave your name and email — we'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>
```


</details>

</TabItem>
<TabItem label="সার্ভে">

এই সার্ভেটি নির্বাচিত ওয়ার্কআউটের সময়কে একটি ট্যাগ হিসেবে সেভ করে, একটি `schedule_survey_completed` ইভেন্ট পাঠায়, একটি ধন্যবাদ বার্তা দেখায়, তারপর ইন-অ্যাপটি বন্ধ করে।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-14.webp" alt="ইন-অ্যাপ এডিটরে HTML সার্ভে যেখানে ব্যবহারকারীকে চারটি সময়ের বিকল্প সহ কখন ওয়ার্কআউট করতে পছন্দ করে তা জিজ্ঞাসা করা হচ্ছে" width="360"/>

<details>
<summary>HTML কোড</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>
```


</details>

</TabItem>
<TabItem label="ভিডিও">

এই উদাহরণটি ইন-অ্যাপ মেসেজে একটি YouTube ভিডিও এম্বেড করে।

<details>
<summary>HTML কোড</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>
```


</details>

</TabItem>
</Tabs>



### মেনু

**মেনু** ব্লকটি একটি সারি বা কলামে বেশ কয়েকটি ক্লিকযোগ্য আইটেম রাখে। এটি একটি নেভিগেশন বার বা কোম্পানির পরিচিতিগুলির একটি তালিকার জন্য ব্যবহার করুন।

প্রতিটি মেনু আইটেমের জন্য, সেট করুন:

* **লেবেল:** ব্যবহারকারীরা যে টেক্সট দেখে
* **URL:** আইটেমটি কোথায় খোলে
* **টার্গেট:** একই ট্যাব বা একটি নতুন ট্যাব

ব্লক সেটিংসে, আপনি আরও সেট করতে পারেন:

* **দিক:** অনুভূমিক বা উল্লম্ব
* **অ্যালাইনমেন্ট:** বাম, কেন্দ্র, বা ডান
* **বিভাজক:** আইটেমগুলির মধ্যে একটি ঐচ্ছিক বিভাজক
* ফন্ট, আকার, ওজন, অক্ষর ব্যবধান, এবং লিঙ্ক/টেক্সট রঙ

### সোশ্যাল

**সোশ্যাল** ব্লকটি আপনার প্রোফাইলগুলিতে লিঙ্ক করা সোশ্যাল মিডিয়া আইকনগুলির একটি সারি প্রদর্শন করে। ইন-অ্যাপ মেসেজ থেকে ব্যবহারকারীদের Facebook, Instagram, X, এবং অন্যান্য প্ল্যাটফর্মে পাঠাতে এটি ব্যবহার করুন।

প্ল্যাটফর্ম এন্ট্রি যোগ করুন, তারপর অ্যালাইনমেন্ট, আইকনের আকার এবং আইকনগুলির মধ্যে ব্যবধান সেট করুন।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-15.webp" alt="সোশ্যাল ব্লক সেটিংস যেখানে TikTok, Instagram, এবং Facebook লিঙ্ক সহ অ্যালাইনমেন্ট, আইকনের আকার এবং ব্যবধান রয়েছে" width="320"/>

### কাউন্টডাউন টাইমার

**টাইমার** ব্লকটি ইন-অ্যাপ মেসেজে একটি কাউন্টডাউন। সীমিত সময়ের অফার, ফ্ল্যাশ সেল এবং ইভেন্ট রিমাইন্ডারের জন্য এটি ব্যবহার করুন।

এটি সেট আপ করতে:

১. **কাউন্টডাউন**-এ, **শেষ তারিখ** এবং **শেষ সময়** সেট করুন, তারপর টাইমার লেবেলের জন্য **টাইমজোন** এবং **ভাষা** বেছে নিন।
২. সংখ্যার নীচে "দিন / ঘন্টা / মিনিট / সেকেন্ড" ক্যাপশন দেখাতে **লেবেল** চালু করুন, অথবা শুধুমাত্র সংখ্যার জন্য বন্ধ করুন।
৩. **অ্যাপিয়ারেন্স**-এ, **পটভূমি**, **সংখ্যার রঙ**, **লেবেলের রঙ**, এবং সংখ্যার জন্য ফন্ট সাইজ (ডিফল্ট ৪০px) এবং লেবেলের জন্য (ডিফল্ট ১৬px) সেট করুন।
৪. প্রয়োজন অনুযায়ী **স্পেসিং** (প্যাডিং) সামঞ্জস্য করুন।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-16.webp" alt="টাইমার ব্লক সেটিংস যেখানে কাউন্টডাউন শেষ তারিখ এবং সময়, লেবেল, অ্যাপিয়ারেন্স এবং স্পেসিং অপশন রয়েছে"/>

### কলাম

**কলাম** ক্যানভাসকে পাশাপাশি বিভাগে বিভক্ত করে যাতে আপনি একটি সারিতে একে অপরের পাশে কনটেন্ট রাখতে পারেন।

ক্যানভাসে এই ব্লকগুলির মধ্যে একটি ড্র্যাগ করুন:

* **২ কলাম:** দুটি সমান কলাম
* **৩ কলাম:** তিনটি সমান কলাম
* **৪ কলাম:** চারটি সমান কলাম
* **৩৩ / ৬৭:** বাম কলাম প্রায় ৩৩% চওড়া, ডান প্রায় ৬৭%
* **৬৭ / ৩৩:** বাম কলাম প্রায় ৬৭% চওড়া, ডান প্রায় ৩৩%

তারপর প্রতিটি কলামে কনটেন্ট যোগ করুন। টেমপ্লেটে সমস্ত কলামের জন্য স্পেসিং পরিবর্তন করতে, **সেটিংস** → **কলাম ডিফল্ট** খুলুন এবং বাইরের প্যাডিং, কলাম প্যাডিং এবং কলামগুলির মধ্যে ব্যবধান সামঞ্জস্য করুন।

## টেমপ্লেট-ব্যাপী স্টাইলিং কনফিগার করুন

টেমপ্লেট সেটিংস পুরো ইন-অ্যাপ টেমপ্লেটের জন্য স্টাইলিং নিয়ন্ত্রণ করে: ডকুমেন্টের আকার এবং পটভূমি, পপআপের চেহারা এবং ব্লকগুলির জন্য ডিফল্ট স্টাইল।

ডানদিকের প্যানেলে **সেটিংস** ট্যাবটি খুলুন।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-17.webp" alt="সেটিংস ট্যাব যেখানে ডকুমেন্ট, পপআপ এবং ব্লক ও কলামের জন্য ডিফল্ট স্টাইল বিভাগ রয়েছে" width="320"/>

উপলব্ধ বিভাগ:

* **ডকুমেন্ট:** পুরো মেসেজ এলাকার আকার এবং চেহারা: প্রস্থ, প্যাডিং, পটভূমির রঙ বা ছবি, টেক্সটের রঙ, ফন্ট পরিবার এবং ব্লকগুলির মধ্যে ব্যবধান।
* **পপআপ:** মেসেজটি কীভাবে আবছা পটভূমিতে বসে: কোণার ব্যাসার্ধ, প্লাস ওভারলে রঙ এবং অস্বচ্ছতা।
* **ব্লক ডিফল্ট:** আপনি পরে যোগ করা ব্লকগুলির জন্য শেয়ার করা প্রারম্ভিক স্টাইল, যাতে নতুন কনটেন্ট টেমপ্লেটের সাথে মেলে যতক্ষণ না আপনি ক্যানভাসে একটি ব্লক ওভাররাইড করেন।
* **কলাম ডিফল্ট:** প্রতিটি কলাম লেআউটের জন্য স্পেসিং: বাইরের প্যাডিং, প্রতিটি কলামের ভিতরে প্যাডিং এবং কলামগুলির মধ্যে ব্যবধান।
* **কার্ড ডিফল্ট:** লেআউটে কনটেন্ট গ্রুপ করা কার্ড কন্টেইনারগুলির জন্য প্রারম্ভিক চেহারা, যতক্ষণ না আপনি একটি কার্ড পৃথকভাবে স্টাইল করেন ততক্ষণ প্রয়োগ করা হয়।
* **বাটন গ্রুপ ডিফল্ট:** যখন বেশ কয়েকটি বোতাম একটি গ্রুপ হিসেবে একসাথে বসে তখন স্পেসিং এবং অ্যালাইনমেন্ট।
* **বাটন ডিফল্ট:** নতুন বাটন ব্লকগুলির জন্য প্রারম্ভিক চেহারা যাতে CTA গুলি টেমপ্লেট জুড়ে সামঞ্জস্যপূর্ণ থাকে যতক্ষণ না আপনি একটি আলাদাভাবে স্টাইল করেন।
* **ডিভাইডার ডিফল্ট:** নতুন ডিভাইডার ব্লকগুলির জন্য প্রারম্ভিক লাইন স্টাইল, রঙ, পুরুত্ব এবং প্রস্থ।

ডিফল্টগুলি যেখানেই একটি পৃথক ব্লক তাদের ওভাররাইড করে না সেখানেই প্রয়োগ হয়।


<Aside type="note">
কোনো উচ্চতা সেটিং নেই। পপআপটি এর কনটেন্টের সাথে বৃদ্ধি পায়। একটি পূর্ণ-স্ক্রিন মেসেজের জন্য, **সেটিংস**-এ **প্রস্থ** সেট করুন এবং **ইন-অ্যাপ সেটিংস**-এ **পূর্ণ-স্ক্রিন** বেছে নিন।
</Aside>

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

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

বর্তমান ভাষার জন্য আপনি এখনও অনুবাদ করেননি এমন কনটেন্ট আবছা দেখায়। অনুবাদ তৈরি করতে টাইপ করা শুরু করুন। আপনি না করা পর্যন্ত ডিফল্ট ভাষা দেখানো হতে থাকবে।

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

## ডিভাইসে ইন-অ্যাপটি কেমন দেখাবে তা কনফিগার করুন

**ইন-অ্যাপ সেটিংস** মেসেজটি ডিভাইসে কীভাবে প্রদর্শিত হয় এবং আচরণ করে তা নিয়ন্ত্রণ করে: অবস্থান, অ্যানিমেশন, সোয়াইপ অঙ্গভঙ্গি এবং বন্ধ বোতাম। এই সেটিংস শুধুমাত্র iOS এবং Android Native-এ প্রযোজ্য।

টপ বারে **ইন-অ্যাপ সেটিংস**-এ ক্লিক করুন:

* **স্ক্রিনে অবস্থান:** পূর্ণ-স্ক্রিন, উপরে, কেন্দ্র, বা নীচে।
* **উপস্থাপন অ্যানিমেশন** / **বন্ধ অ্যানিমেশন:** কোনোটিই নয়, ফেইড, বাম, ডান, উপরে, বা নীচে, অথবা আপনার অ্যাপের SDK ডিফল্ট ব্যবহার করতে ডিফল্ট।

<Aside type="note">
**কোনোটিই নয়** এবং **ফেইড** বর্তমানে Android-এ কাজ করে। iOS-এ, মেসেজটি তাত্ক্ষণিকভাবে প্রদর্শিত হয় এবং অদৃশ্য হয়ে যায় (অ্যালাইনমেন্ট শীঘ্রই আসছে)।
</Aside>

* **অ্যানিমেশন সময়কাল (MS):** ১০০ থেকে ৩০০০ মিলিসেকেন্ড। SDK ডিফল্ট টাইমিং ব্যবহার করতে খালি রাখুন।
* **বন্ধ করতে সোয়াইপ করুন:** বাম, ডান, উপরে এবং নীচের যেকোনো সংমিশ্রণ সক্ষম করুন।
* **বন্ধ বোতাম দেখান:** বন্ধ নিয়ন্ত্রণ চালু বা বন্ধ করুন। চালু থাকলে, **অবস্থান** (উপরে ডান, উপরে বাম, নীচে ডান, নীচে বাম), **পটভূমি** (একটি রঙ, বা **স্বচ্ছ**), এবং **আইকনের রঙ** সেট করুন। এই মোডালের অন্যান্য সেটিংসের বিপরীতে, বন্ধ বোতামের চেহারা মেসেজটিতেই রেন্ডার করা হয় এবং শুধুমাত্র iOS এবং Android Native-এ নয়, প্রতিটি প্ল্যাটফর্মে দেখায়।

<img src="/rich-media-create-rich-media-in-the-built-in-editor-18.webp" alt="ইন-অ্যাপ সেটিংস মোডাল যেখানে অবস্থান, অ্যানিমেশন, বন্ধ করতে সোয়াইপ এবং বন্ধ বোতামের অপশন রয়েছে"/>

আপনার পছন্দগুলি সেভ করতে **প্রয়োগ করুন**-এ ক্লিক করুন, অথবা সেগুলি বাতিল করতে **বাতিল করুন**-এ ক্লিক করুন।

## টেমপ্লেটটি সেভ করুন

আপনার পরিবর্তনগুলি সেভ করতে টপ বারে **সেভ**-এ ক্লিক করুন। আপনার সম্পাদনাগুলির মধ্যে পিছনে এবং সামনে যেতে টপ বারে **আনডু**/**রিডু** ব্যবহার করুন।

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

## সেভ করা টেমপ্লেটটি ব্যবহার করুন

আপনি একটি ইন-অ্যাপ টেমপ্লেট সেভ করার পরে, আপনি এটি একটি Customer Journey-তে, এককালীন ইন-অ্যাপ হিসেবে, অথবা যখন একজন ব্যবহারকারী একটি পুশ ট্যাপ করে তখন ব্যবহারকারীদের দেখাতে পারেন।

* [একটি গ্রাহক যাত্রার অংশ হিসেবে একটি ইন-অ্যাপ দেখান](/bn/product/customer-journey/journey-elements/#in-app)
* [একটি পুশ পাঠান যা ক্লিক করলে একটি ইন-অ্যাপ খোলে](/bn/product/messaging-channels/push-notifications/send-push-notifications/one-time-push)
* [আপনার ব্যবহারকারীদের একটি একক ইন-অ্যাপ প্রদর্শন করুন](/bn/product/messaging-channels/in-apps/)