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

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

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

• হেডিং: শিরোনাম এবং ছোট হেডলাইন
• টেক্সট: বডি কপি এবং দীর্ঘ বর্ণনা
• বাটন: একটি ট্যাপযোগ্য কল টু অ্যাকশন
• ইমেজ: মিডিয়া স্টোর থেকে ছবি, আপলোড, বা URL
• ভিডিও: একটি ট্যাপযোগ্য ভিডিও থাম্বনেইল যা একটি YouTube বা Vimeo ভিডিও খোলে
• কার্ড: একটি লেআউটে হেডিং, টেক্সট এবং বাটন সহ একটি ইমেজ
• ডিভাইডার: একটি লাইন যা বিভাগগুলিকে আলাদা করে
• কলাম: পাশাপাশি লেআউট (২, ৩, বা ৪টি সমান কলাম, অথবা ৩৩/৬৭ এবং ৬৭/৩৩ বিভাজন)
• টাইমার: অফার এবং ডেডলাইনের জন্য একটি কাউন্টডাউন
• মেনু: নেভিগেশন বা কন্টাক্ট লিঙ্কের একটি সারি বা কলাম
• সোশ্যাল: আপনার সোশ্যাল প্রোফাইলে লিঙ্ক করা আইকন
• 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 চালু করুন।

ভিডিও

একটি 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: ছবি যোগ করুন বা প্রতিস্থাপন করুন, alt টেক্সট সেট করুন, AI জেনারেশন Prompt সম্পাদনা করুন, Padding যোগ করুন, এবং Corner radius (px) সেট করুন।
• Size & fit: ছবির Width, Height, Crop (Original বা একটি নির্দিষ্ট অনুপাত), এবং Fit (Cover বা একটি ফোকাল পয়েন্ট) সেট করুন। সঠিক ক্ষেত্রগুলি আপনার বেছে নেওয়া Layout এর উপর নির্ভর করে।
• Link: ট্যাপ করলে পুরো কার্ডটি একটি URL খুলবে।

কার্ডের হেডিং, টেক্সট এবং বাটন সম্পাদনা করুন ঠিক যেমন আপনি স্বতন্ত্র Heading, Text, এবং Button ব্লকগুলি সম্পাদনা করেন।

বাটন

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

ক্যানভাসে এর লেবেল সম্পাদনা করতে একটি 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(...): একটি কাস্টম ইভেন্ট পাঠান, উদাহরণস্বরূপ একটি Customer Journey শুরু করতে।
• pushwoosh.getTags(...): বর্তমান ট্যাগগুলি পড়ুন। কাস্টম HTML এ মেসেজটি কী দেখাবে তা পরিবর্তন করতে দরকারী।
• pushwoosh.getCustomData(): এই ইন-অ্যাপটি খোলা পুশ থেকে পাস করা কাস্টম ডেটা পড়ুন।

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

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 ট্যাগটি লেখে এবং ইন-অ্যাপটি বন্ধ করে দেয়। আপনি তখন সেই ব্যবহারকারীকে একটি সেগমেন্ট বা Customer Journey এ টার্গেট করতে পারেন।

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

ডিভাইডার

একটি 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 (প্যাডিং) সামঞ্জস্য করুন।

কলাম

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 access token (Settings → API Access) প্রয়োজন। যদি Source নির্বাচক তাদের একটিতে স্যুইচ না করে, বা ব্লকটি প্রোডাক্ট রেন্ডার না করে, তাহলে সাপোর্ট বা আপনার অ্যাকাউন্ট ম্যানেজারের সাথে যোগাযোগ করুন, অথবা একটি টোকেন তৈরি করুন এবং উৎসটি পুনরায় নির্বাচন করুন।

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

• Number of products (বা Max products shown Cart এর জন্য): কতগুলি কার্ড দেখানো হবে।
• 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 করতে পারেন।