ইন-অ্যাপ এডিটর ব্লক রেফারেন্স

বিল্ট-ইন এডিটর ক্যানভাসে আপনি যোগ করতে পারেন এমন প্রতিটি ব্লকের জন্য রেফারেন্স।

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

• হেডিং: টাইটেল এবং ছোট হেডলাইন
• টেক্সট: বডি কপি এবং দীর্ঘ বিবরণ
• বাটন: একটি ট্যাপযোগ্য কল টু অ্যাকশন
• ইমেজ: মিডিয়া স্টোর, আপলোড, বা URL থেকে ছবি
• ভিডিও: একটি ট্যাপযোগ্য ভিডিও থাম্বনেইল যা একটি YouTube বা Vimeo ভিডিও খোলে
• কার্ড: একটি লেআউটে হেডিং, টেক্সট এবং বাটন সহ একটি ছবি
• ডিভাইডার: একটি লাইন যা বিভাগগুলিকে আলাদা করে
• কলাম: পাশাপাশি লেআউট (২, ৩, বা ৪টি সমান কলাম, অথবা ৩৩/৬৭ এবং ৬৭/৩৩ বিভাজন)
• টাইমার: অফার এবং ডেডলাইনের জন্য একটি কাউন্টডাউন
• বারকোড: একটি স্ক্যানযোগ্য Code 128, EAN-13, EAN-8, UPC-A, বা QR কোড যা একটি পার্সোনালাইজেশন ভ্যালু থেকে তৈরি হয়, যেমন একটি ভাউচার
• মেনু: নেভিগেশন বা কন্টাক্ট লিঙ্কের একটি সারি বা কলাম
• সোশ্যাল: আইকন যা আপনার সোশ্যাল প্রোফাইলে লিঙ্ক করে
• HTML: কাস্টম HTML, যেমন একটি ফর্ম, সার্ভে, বা এমবেডেড ভিডিও
• প্রোডাক্টস: আপনার প্রোডাক্ট ক্যাটালগ বা একজন ব্যবহারকারীর পরিত্যক্ত কার্ট থেকে প্রোডাক্ট কার্ডের একটি গ্রিড

এডিটর ব্লক কীভাবে কনফিগার করবেন

Blocks ট্যাব থেকে ক্যানভাসে একটি ব্লক টেনে আনুন, অথবা শেষে যোগ করার জন্য এটিতে ক্লিক করুন। ব্লকটি সিলেক্ট করে ডান প্যানেলে এর সেটিংস খুলুন এবং কন্টেন্ট, লিঙ্ক, সাইজ এবং স্পেসিং কনফিগার করুন।

টিপ

প্রতিটি ব্লকের Visibility এবং Display condition সেটিংসও রয়েছে। ফোন বা ডেস্কটপে একটি ব্লক লুকাতে, অথবা শুধুমাত্র নির্দিষ্ট ব্যবহারকারীদের কাছে এটি দেখাতে এগুলি ব্যবহার করুন। আরও জানুন

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

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

একটি Heading বা Text ব্লকে ক্লিক করে ক্যানভাসে এর কপি এডিট করুন। কিছু টেক্সট সিলেক্ট করলে ফরম্যাটিং টুলবার আসবে: বোল্ড, ইটালিক, আন্ডারলাইন, অ্যালাইনমেন্ট, একটি লিঙ্ক বাটন, এবং একটি text style ড্রপডাউন।

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

ইমেজ

একটি Image ব্লক ইন-অ্যাপ টেমপ্লেটে একটি ছবি প্রদর্শন করে।

ডান প্যানেলে Image সেটিংস খুলতে ক্যানভাসে এটি সিলেক্ট করুন।

• Add image / Replace image: ব্লকটি খালি থাকলে Add image ক্লিক করুন, অথবা একটি ছবি সেট করা থাকলে Replace image ক্লিক করুন। আপনি একটি ফাইল আপলোড করতে পারেন বা আপনার মিডিয়া স্টোর থেকে একটি বেছে নিতে পারেন।
• Image URL: ছবির একটি হোস্ট করা লিঙ্ক পেস্ট করুন।
• Alt text: অ্যাক্সেসিবিলিটির জন্য ছবির বর্ণনা দিন।
• Prompt: Generate with AI দিয়ে তৈরি করা ছবির জন্য AI জেনারেশন প্রম্পট।
• Width (px) / Height (px): ছবিটিকে একটি পিক্সেল সাইজে ফিক্স করুন। স্বয়ংক্রিয়ভাবে সাইজ করার জন্য একটি ফিল্ড খালি রাখুন। এই ফিল্ডগুলির নিচে, একটি ইঙ্গিত দেখায় যে ছবিটি কোন সাইজে রেন্ডার হচ্ছে এবং কোন সাইজে আপলোড করতে হবে: রেন্ডার করা সাইজের ২×, যাতে ছবিটি ফোনের স্ক্রিনে শার্প থাকে। যদি আপলোড করা ফাইলটি কোনো অক্ষে রেন্ডার করা সাইজের চেয়ে ছোট হয়, একটি সতর্কতা আপনাকে জানাবে যে এটি আপস্কেল করা হবে এবং পিক্সেলযুক্ত দেখাবে।
• Corner radius (px): ছবির কোণগুলি গোল করুন।
• Alignment: বাম, কেন্দ্র, বা ডান।

Link এ, একটি Action Type (উদাহরণস্বরূপ Open Website বা URL or Deeplink) এবং এর URL সেট করুন যাতে ছবিটি ট্যাপ করলে কিছু খোলে, এবং একটি Link target সেট করুন যাতে এটি একই ট্যাবে বা একটি নতুন ট্যাবে খোলে।

Spacing এ, ছবির চারপাশে জায়গা যোগ করতে Padding চালু করুন। প্রতিটি দিকে একই প্যাডিংয়ের জন্য All sides ব্যবহার করুন, অথবা প্রতিটি দিক আলাদাভাবে সেট করতে More options চালু করুন।

প্রস্তাবিত ছবির আকার

Width (px) / Height (px) এর নিচের ইঙ্গিতটি যে আকার দেখায় তার ২× আকারের একটি ছবি আপলোড করুন। এটিই সেই সংখ্যা যা পরীক্ষা করতে হবে, কারণ এটি আপনার নিজের Width/Height এবং ক্রপ সেটিংস প্রতিফলিত করে। যখন আপনি এখনও একটি ব্লক সেট করেননি, তখন এই সাধারণ স্লট প্রস্থগুলি একটি সূচনা বিন্দু হিসাবে ব্যবহার করুন:

ছবিটি যেখানে বসে	রেন্ডার হয়	কমপক্ষে আপলোড করুন
ডিফল্ট পপআপে পূর্ণ-প্রস্থের ছবি	৬০০ পিক্সেল পর্যন্ত চওড়া	১২০০ পিক্সেল চওড়া
ফোন প্রিভিউ	৩৬০–৪৩০ পিক্সেল চওড়া, ডিভাইসের উপর নির্ভর করে	৮৬০ পিক্সেল পর্যন্ত চওড়া
ট্যাবলেট/ডেস্কটপ প্রিভিউ	৭৬৮ পিক্সেল চওড়া	১৫৩৬ পিক্সেল চওড়া

অ্যাসপেক্ট রেশিও আপনার উপর নির্ভর করে। লেআউটটি প্রতিক্রিয়াশীল, তাই উচ্চতা আপনার সেট করা Height (px) বা ক্রপ অনুসরণ করে। ডিফল্ট পপআপের প্রস্থ পরিবর্তন করতে ডকুমেন্ট এবং পপআপের আকার দেখুন।

নোট

এই টেবিলটি বিল্ট-ইন এডিটরের ইমেজ ব্লকগুলি কভার করে। নেটিভ ইন-অ্যাপস (মোডাল, ফুলস্ক্রিন, স্টোরিজ, শীট, ক্যারোসেল, ব্যানার, ভিডিও) এর জন্য এখনও কোনো প্রস্তাবিত কভার সাইজ নেই।

ভিডিও

একটি Video ব্লক মেসেজে একটি YouTube বা Vimeo ভিডিও একটি ট্যাপযোগ্য থাম্বনেইল হিসাবে যোগ করে। মেসেজটি একটি ▶ ওভারলে সহ একটি স্থির ছবি দেখায়। এটি ট্যাপ করলে YouTube বা Vimeo অ্যাপ বা ব্রাউজারে ভিডিওটি খোলে।

এর সেটিংস খুলতে ক্যানভাসে ব্লকটি সিলেক্ট করুন:

• Video URL: একটি YouTube বা Vimeo লিঙ্ক পেস্ট করুন। এডিটর স্বয়ংক্রিয়ভাবে একটি থাম্বনেইল নিয়ে আসে।
• Alt text: অ্যাক্সেসিবিলিটির জন্য ভিডিওটির বর্ণনা দিন।
• Thumbnail URL: স্বয়ংক্রিয়ভাবে আনা থাম্বনেইলটি রাখুন, অথবা মিডিয়া স্টোর থেকে একটি বেছে নিতে Add thumbnail / Replace thumbnail ক্লিক করুন, অথবা সরাসরি একটি হোস্ট করা লিঙ্ক পেস্ট করুন।
• Play button overlay: ডিফল্টরূপে চালু থাকে। ▶ ওভারলে ছাড়া প্লেইন থাম্বনেইল দেখাতে বন্ধ করুন।
• Width (px), Corner radius (px), এবং Alignment: থাম্বনেইলটি কেমন দেখাবে এবং লেআউটে কোথায় বসবে তা নিয়ন্ত্রণ করুন।

কার্ড

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

• Layout: ছবিটি কন্টেন্টের তুলনায় কোন দিকে বসবে তা বেছে নিন, অথবা Wrap text around image চালু করুন।
• Image: ছবিটি যোগ করুন বা প্রতিস্থাপন করুন, অল্ট টেক্সট সেট করুন, AI জেনারেশন Prompt এডিট করুন, Padding যোগ করুন, এবং Corner radius (px) সেট করুন।
• Size & fit: ছবির Width, Height, Crop (Original বা একটি নির্দিষ্ট অনুপাত), এবং Fit (Cover বা একটি ফোকাল পয়েন্ট) সেট করুন। সঠিক ফিল্ডগুলি আপনার বেছে নেওয়া Layout এর উপর নির্ভর করে।
• Link: পুরো কার্ডটি ট্যাপ করলে একটি URL খুলবে।

কার্ডের হেডিং, টেক্সট এবং বাটন একইভাবে এডিট করুন যেভাবে আপনি স্বতন্ত্র হেডিং, টেক্সট, এবং বাটন ব্লকগুলি এডিট করেন।

বাটন

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

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

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

1. Insert/Edit Link খুলতে টুলবারে লিঙ্ক আইকনে ক্লিক করুন।
2. একটি Action type বেছে নিন: Open Website, URL or Deeplink, বা Custom Javascript।
3. সেই অ্যাকশনের জন্য ফিল্ডগুলি পূরণ করুন (নিচে দেখুন)।
4. Save ক্লিক করুন।

Open Website

Open Website ব্যবহারকারী বাটনটি ট্যাপ করলে একটি ওয়েব পেজ খোলে। URL এ ঠিকানা লিখুন, উদাহরণস্বরূপ https://example.com।

URL or Deeplink

URL or Deeplink ব্যবহারকারী বাটনটি ট্যাপ করলে একটি লিঙ্ক বা ডিপ লিঙ্ক খোলে। URL এ ঠিকানা লিখুন, উদাহরণস্বরূপ একটি অ্যাপ স্ক্রিন: myapp://screen।

Run custom JavaScript

Custom Javascript ব্যবহারকারী বাটনটি ট্যাপ করলে কোড চালায়। onClick ফিল্ডে কোডটি লিখুন।

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

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

• pushwoosh.closeInApp(): ইন-অ্যাপ মেসেজটি বন্ধ করুন। ট্যাপের পরে মেসেজটি খোলা রাখতে এটি বাদ দিন।
• pushwoosh.sendTags({...}): পরবর্তী ক্যাম্পেইনের জন্য ডিভাইস ট্যাগ হিসাবে ভ্যালু সেভ করুন।
• pushwoosh.postEvent(...): একটি কাস্টম ইভেন্ট পাঠান, উদাহরণস্বরূপ একটি কাস্টমার জার্নি শুরু করতে।
• pushwoosh.getTags(...): বর্তমান ট্যাগগুলি পড়ুন। মেসেজটি কী দেখায় তা পরিবর্তন করতে কাস্টম HTML-এ দরকারী।
• pushwoosh.getCustomData(): এই ইন-অ্যাপটি খোলা পুশ থেকে পাস করা কাস্টম ডেটা পড়ুন।
• pushwoosh.registerForPushNotifications(): প্ল্যাটফর্মের নেটিভ পুশ পারমিশন ডায়ালগ ট্রিগার করুন, উদাহরণস্বরূপ একটি প্রি-পারমিশন ইন-অ্যাপ থেকে।

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

1. একটি Text বা Heading ব্লকে একটি প্রশ্ন যোগ করুন, উদাহরণস্বরূপ: “আপনি কোন খেলায় আগ্রহী?”
2. প্রতিটি বিকল্পের জন্য একটি Button যোগ করুন, উদাহরণস্বরূপ: Yoga এবং Gym।

3. প্রতিটি বাটনের জন্য Action type কে Custom Javascript এ সেট করুন।
4. Yoga বাটনের জন্য, এটি onClick এ পেস্ট করুন:

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

5. Gym বাটনের জন্য, এটি onClick এ পেস্ট করুন:

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

যখন ব্যবহারকারী Yoga ট্যাপ করে, Pushwoosh তাদের ডিভাইসে interest ট্যাগটি লেখে এবং ইন-অ্যাপটি বন্ধ করে। আপনি তখন সেই ব্যবহারকারীকে একটি সেগমেন্ট বা কাস্টমার জার্নিতে টার্গেট করতে পারেন।

JavaScript দিয়ে কীভাবে ইন-অ্যাপ তৈরি করবেন সে সম্পর্কে আরও জানুন

ডিভাইডার

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

সেটিংস প্যানেলে line style (Solid, Dashed, Dotted), color, thickness, এবং width কনফিগার করুন।

HTML

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

উদাহরণ

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

নোট

ফর্ম এবং সার্ভের উদাহরণগুলি ডিভাইস ট্যাগ সেভ করে এবং Pushwoosh এর মাধ্যমে ইভেন্ট পাঠায়। ক্যাম্পেইনে ব্যবহার করার আগে আপনার অ্যাকাউন্টে কাস্টম ইভেন্টগুলি তৈরি করুন।

লিড ফর্ম

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

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>

সার্ভে

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

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>

ভিডিও

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

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>

মেনু

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

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

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

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

• Direction: Horizontal বা Vertical
• Alignment: Left, Center, বা Right
• Separator: আইটেমগুলির মধ্যে একটি ঐচ্ছিক বিভাজক
• ফন্ট, সাইজ, ওয়েট, লেটার স্পেসিং, এবং লিঙ্ক/টেক্সট কালার

সোশ্যাল

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

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

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

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

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

1. Countdown এ, End date এবং End time সেট করুন, তারপর টাইমার লেবেলের জন্য Timezone এবং Language বেছে নিন।
2. ডিজিটের নিচে “দিন / ঘন্টা / মিনিট / সেকেন্ড” ক্যাপশন দেখাতে Labels চালু করুন, অথবা শুধুমাত্র সংখ্যার জন্য বন্ধ করুন।
3. Appearance এ, Background, Digits color, Labels color, এবং ডিজিটের জন্য ফন্ট সাইজ (ডিফল্ট 40px) এবং লেবেলের জন্য (ডিফল্ট 16px) সেট করুন।
4. প্রয়োজন অনুযায়ী Spacing (প্যাডিং) সামঞ্জস্য করুন।

বারকোড

Barcode ব্লকটি একটি পার্সোনালাইজেশন ভ্যালু থেকে একটি স্ক্যানযোগ্য বারকোড বা QR কোড রেন্ডার করে, প্রায়শই একটি ভাউচার।

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

1. Code এ, ডিভাইস ট্যাগ {Coupon|String|} রাখুন, অথবা Merge tag ক্লিক করুন এবং অন্য একটি ডিভাইস ট্যাগ বেছে নিন যা প্রতিটি প্রাপকের কোড সংরক্ষণ করে। ইন-অ্যাপগুলি লিকুইড মূল্যায়ন করে না। SDK ইন-অ্যাপ দেখানোর আগে ডিভাইসে ট্যাগটি পূরণ করে। এটি ইমেল বারকোড ব্লক থেকে ভিন্ন, যা {{voucher}} ব্যবহার করে।

2. Symbology বেছে নিন:
   • QR: একটি বর্গাকার 2D কোড যা ফোন স্ক্যান করতে পারে। WELCOME2025-A1 এর মতো আলফানিউমেরিক কোড সহ যেকোনো টেক্সট গ্রহণ করে
   • Code 128: একই আলফানিউমেরিক কোড সহ যেকোনো টেক্সটের জন্য একটি লিনিয়ার বারকোড
   • EAN-13: ইউরোপ এবং অন্যান্য অনেক অঞ্চলে সাধারণ খুচরা বারকোড। শুধুমাত্র ডিজিট, ১২-১৩ অক্ষর
   • EAN-8: ছোট প্যাকেজিংয়ের জন্য একটি ছোট খুচরা বারকোড। শুধুমাত্র ডিজিট, ৭-৮ অক্ষর
   • UPC-A: উত্তর আমেরিকায় সাধারণ খুচরা বারকোড। শুধুমাত্র ডিজিট, ১১-১২ অক্ষর
3. যদি আপনি QR বেছে নেন, Error correction সেট করুন। এটি অতিরিক্ত ডেটা যোগ করে যাতে কোডের কিছু অংশ ঢাকা, জীর্ণ, বা দেখতে কঠিন হলেও কোডটি স্ক্যান করা যায়। L, M, Q, বা H (ডিফল্ট M) বেছে নিন। উচ্চ স্তরগুলি আরও ক্ষতি সহ্য করতে পারে তবে প্যাটার্নটি ঘন করে তোলে, যা ছোট আকারে পড়া কঠিন হতে পারে। অন্যান্য সিম্বলজির জন্য এই ফিল্ডটি এড়িয়ে যান।
4. ঐচ্ছিকভাবে কোডের নিচে ভ্যালুটি দেখাতে Print the code in digits চালু করুন।

5. Appearance এ, Bars color কে Background এর চেয়ে গাঢ় সেট করুন — বেশিরভাগ স্ক্যানার একটি অন্ধকার পটভূমিতে হালকা বার পড়তে পারে না। Width (px) এবং Height (px) কমপক্ষে ৬০০×২০০ সেট করুন যাতে কোডটি সাধারণ ফোন-ক্যামেরা পরিসরে স্ক্যানযোগ্য থাকে। ডিফল্ট মার্জিনের জন্য Quiet zone, modules কে Auto তে ছেড়ে দিন।

নোট

ক্যানভাসে ব্লকটি একটি নমুনা বারকোড দেখায়, আসল প্রাপকের কোড নয়। একটি ডিভাইস ট্যাগ যেমন {Coupon|String|} শুধুমাত্র ডিভাইসে পূরণ করা হয়, তাই প্রিভিউ আসল ছবিটিও তৈরি করতে পারে না। প্রকাশ করার আগে একটি আসল ডিভাইসে বারকোডটি পরীক্ষা করুন। EAN-13, EAN-8, বা UPC-A শুধুমাত্র একটি ট্যাগ ভ্যালুর জন্য ব্যবহার করুন যা শুধুমাত্র ডিজিট, প্রতিটি প্রত্যাশিত দৈর্ঘ্যে। WELCOME2025-A1 এর মতো আলফানিউমেরিক কোডের জন্য, পরিবর্তে Code 128 বা QR ব্যবহার করুন।

কলাম

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

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

• 2 columns: দুটি সমান কলাম
• 3 columns: তিনটি সমান কলাম
• 4 columns: চারটি সমান কলাম
• 33 / 67: বাম কলাম প্রায় ৩৩% চওড়া, ডান প্রায় ৬৭%
• 67 / 33: বাম কলাম প্রায় ৬৭% চওড়া, ডান প্রায় ৩৩%

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

প্রোডাক্টস

একটি Products ব্লক একটি শেয়ার্ড টেমপ্লেট থেকে প্রোডাক্ট কার্ডের একটি গ্রিড দেখায়। প্রতিটি কার্ডে একটি ছবি, টাইটেল, বিবরণ, মূল্য এবং একটি কেনার বাটন থাকতে পারে। টেমপ্লেটটি প্রতিটি প্রোডাক্টের জন্য পুনরাবৃত্তি হয়।

সেটিংস প্যানেলে, Source এর অধীনে, প্রোডাক্টগুলি কোথা থেকে আসে তা বেছে নিন:

• Manual: হাতে করে প্রোডাক্ট লিখুন, অথবা আপনার প্রোডাক্ট ক্যাটালগ থেকে আইডি দ্বারা নির্দিষ্ট আইটেম নির্বাচন করতে Pick from catalog… ক্লিক করুন। আপনি একই ব্লকে উভয়ই মিশ্রিত করতে পারেন।
• Catalog rule: বিভাগ এবং সাজানোর ক্রম দ্বারা স্বয়ংক্রিয়ভাবে প্রোডাক্টগুলি টানুন, মেসেজটি দেখানোর সময় ক্যাটালগ থেকে নতুন করে সমাধান করা হয়।
• Cart: প্রতিটি ব্যবহারকারীর বর্তমান পরিত্যক্ত কার্ট থেকে আইটেমগুলি দেখান। একটি পরিত্যক্ত কার্ট ক্যাম্পেইন কীভাবে সেট আপ করবেন

নোট

Catalog rule এবং Cart এর জন্য আপনার প্ল্যানে Content Templates এবং একটি API অ্যাক্সেস টোকেন (Settings → API Access) প্রয়োজন। যদি Source নির্বাচক তাদের একটিতে স্যুইচ না করে, বা ব্লকটি প্রোডাক্ট রেন্ডার না করে, তাহলে সাপোর্ট বা আপনার অ্যাকাউন্ট ম্যানেজারের সাথে যোগাযোগ করুন, অথবা একটি টোকেন তৈরি করুন এবং উৎসটি পুনরায় নির্বাচন করুন।

একবার আপনি একটি উৎস বেছে নিলে, এই সেটিংসগুলি গ্রিড এবং এর কার্ডগুলি কেমন দেখাবে তা নিয়ন্ত্রণ করে:

• Number of products (বা Cart এর জন্য Max products shown): কতগুলি কার্ড দেখাতে হবে।
• Columns: প্রতি সারিতে ১, ২, বা ৩টি কার্ড।
• Gap: কার্ডগুলির মধ্যে স্থান।
• Description limit: বিবরণের টেক্সট যে অক্ষর সীমায় ছাঁটা হয়, যাতে কার্ডগুলি একটি সামঞ্জস্যপূর্ণ আকারে থাকে।
• Card template: একটি লেআউট বেছে নিন, তারপর প্রতিটি কার্ডের জন্য Card background, Card corner radius, এবং Content padding সেট করুন।

ব্লক সেভ এবং পুনরায় ব্যবহার করুন

একটি ব্লককে এই বা অন্যান্য ইন-অ্যাপ টেমপ্লেটে পুনরায় ব্যবহার করার জন্য সেভ করুন, প্রতিবার এটি পুনর্নির্মাণ করার পরিবর্তে।

1. ক্যানভাসে ব্লকটি সিলেক্ট করুন।
2. ব্লকের টুলবারে বুকমার্ক আইকনে (Save block for reuse) ক্লিক করুন এবং এটিকে একটি নাম দিন।

সেভ করা ব্লকগুলি Blocks ট্যাবের নিচে Saved blocks এর অধীনে উপস্থিত হয়।

• একটি সেভ করা ব্লককে ক্যানভাসে টেনে আনুন, অথবা টেমপ্লেটের শেষে যোগ করার জন্য এটিতে ক্লিক করুন।
• একটি সেভ করা ব্লকের টাইল থেকে এটি ডিলিট করতে × ক্লিক করুন।

কপিগুলি সিঙ্কে রাখুন

যখন আপনি একটি ব্লক সেভ করেন, তখন প্রতিটি ঢোকানো কপিকে একই উৎসের সাথে লিঙ্ক করতে Keep copies in sync চালু করুন। উৎসটি একবার এডিট করুন, এবং পরিবর্তনটি যেখানেই সেই ব্লকটি ব্যবহৃত হয়েছে সেখানে প্রযোজ্য হবে।

একটি সিঙ্ক করা কপি ক্যানভাসে লক করা থাকে। আপনি এটি সরাসরি এডিট করতে পারবেন না। এর সেটিংস খুলতে কপিটি সিলেক্ট করুন:

• Edit synced block: এই কপিটি আনলক করুন যাতে আপনি এটি পরিবর্তন করতে পারেন। উপরে একটি ব্যানার উপস্থিত হবে। আপনার পরিবর্তনগুলি উৎসে এবং অন্য সব কপিতে সেভ করতে Apply to all ক্লিক করুন, অথবা সেগুলি বাতিল করতে Cancel ক্লিক করুন। আপনি একবারে শুধুমাত্র একটি সিঙ্ক করা ব্লক আনলক করতে পারেন।
• Update from source: এই কপিটিকে উৎস থেকে সর্বশেষ সংস্করণ দিয়ে প্রতিস্থাপন করুন।
• Detach from source: এই কপিটিকে উৎস থেকে আনলিঙ্ক করুন যাতে আপনি এটি নিজে এডিট করতে পারেন।

নোট

প্রতিবার যখন আপনি একটি ইন-অ্যাপ টেমপ্লেট খোলেন, Pushwoosh এর সিঙ্ক করা কপিগুলি পরীক্ষা করে এবং যেগুলি পুরানো হয়ে গেছে সেগুলি আপডেট করে। একটি টোস্ট দেখায় কতগুলি রিফ্রেশ করা হয়েছে। যদি উৎসের নতুন কন্টেন্ট থাকে, তাহলে কপির সেটিংসে একটি সতর্কতা দেখায় যতক্ষণ না আপনি টেমপ্লেটটি পুনরায় খোলেন বা Update from source ক্লিক করেন। যদি উৎসটি ডিলিট করা হয়ে থাকে, তাহলে কপিটি তার শেষ কন্টেন্ট রাখে এবং আপনি শুধুমাত্র Detach from source করতে পারেন।