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

একটি নতুন টেমপ্লেট যোগ করুন

Content → In-apps-এ যান এবং Add template-এ ক্লিক করুন:

একটি টেমপ্লেট নাম দিন, Create new template নির্বাচন করুন, এবং Add template-এ ক্লিক করুন:

আপনি একটি ডিফল্ট টেমপ্লেটের উপর ভিত্তি করে একটি নতুন ইন-অ্যাপ মেসেজ পেজ তৈরি করতে পারেন অথবা একটি ফাঁকা টেমপ্লেট নির্বাচন করে স্ক্র্যাচ থেকে শুরু করতে পারেন।

কন্টেন্ট যোগ করুন

লেআউট

টেমপ্লেটের বডিতে প্রয়োজনীয় কন্টেন্ট ব্লকগুলো ড্র্যাগ এবং ড্রপ করে টেমপ্লেটের লেআউট নির্ধারণ করুন। আপনি ছবি, টেক্সট, বোতাম, ডিভাইডার, পূরণযোগ্য ফর্ম, HTML ব্লক এবং মেনু যোগ করতে পারেন।

আপনি যদি একটি সারিতে একাধিক কন্টেন্ট উপাদান রাখতে চান, তাহলে টেমপ্লেটে Columns উপাদানটি যোগ করুন। প্রয়োজনীয় ব্লক টাইপ নির্বাচন করুন এবং প্রতিটি কলামে কন্টেন্ট যোগ করুন:

একটি লেআউটের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে, এর বাইরের মার্জিনে ক্লিক করুন। নিশ্চিত করুন যে পুরো লেআউটটি নির্বাচিত হয়েছে এবং রঙটি বেছে নিন:

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

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

Pushwoosh পোর্ট্রেট এবং ল্যান্ডস্কেপ উভয় ওরিয়েন্টেশনে ইন-অ্যাপ মেসেজ কন্টেন্ট তৈরি করার সুবিধা প্রদান করে। এটি নিশ্চিত করে যে আপনার ক্যাম্পেইনগুলো সব ডিভাইসে দৃশ্যত আকর্ষণীয় এবং কার্যকর হয়।

পোর্ট্রেট ইন-অ্যাপ মেসেজ

পোর্ট্রেট ওরিয়েন্টেশনের জন্য ডিজাইন করা ইন-অ্যাপ মেসেজ তৈরি করতে, যা সাধারণত মোবাইল ডিভাইসে ব্যবহৃত হয়, এডিটরের Mobile tab-এ নেভিগেট করুন। এখানে, আপনি স্মার্টফোন স্ক্রিনের জন্য উপযুক্ত একটি ভার্টিকাল লেআউটে আপনার কন্টেন্ট ডিজাইন করতে পারেন।

ল্যান্ডস্কেপ ইন-অ্যাপ মেসেজ

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

ল্যান্ডস্কেপ ইন-অ্যাপ মেসেজে কলাম যোগ করা

আপনার ল্যান্ডস্কেপ ইন-অ্যাপ মেসেজে কলাম যোগ করার প্রয়োজন হলে, প্রথমে Column উপাদানটি যোগ করুন। আপনার প্রয়োজনীয় কলামের সংখ্যা এবং লেআউট নির্ধারণ করুন।

কলাম সহ আপনার ল্যান্ডস্কেপ ইন-অ্যাপ মেসেজ ডিজাইন করার পরে, Mobile tab-এ স্যুইচ করুন। সেটিংস প্যানেলের নীচে পাওয়া RESPONSIVE DESIGN বিভাগে স্ক্রোল করুন এবং Do Not Stack on Mobile অপশনটি সক্রিয় করুন।

নোট

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

Pushwoosh আপনাকে আপনার ইন-অ্যাপ মেসেজে কলাম লেআউট মিশ্রিত এবং ম্যাচ করার অনুমতি দেয়। আপনি নির্দিষ্ট কলামগুলোকে ভার্টিকালি স্ট্যাক করার জন্য কনফিগার করতে পারেন এবং অন্যগুলোকে হরাইজন্টাল রাখতে পারেন। এটি করার জন্য, প্রতিটি কলাম ব্লক প্রয়োজন অনুযায়ী সামঞ্জস্য করুন।

কন্টেন্ট উপাদান

হেডিং

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

নোট

আপনি যদি প্রতিটি ব্যবহারকারীর জন্য হেডিং ব্যক্তিগতকৃত করতে চান, তাহলে এতে ট্যাগ যোগ করুন।

আপনি AI দ্বারা আপনার জন্য হেডিং টেক্সট তৈরি করতে দিয়ে সময়ও বাঁচাতে পারেন। Smart Headings বিভাগে বোতামে ক্লিক করুন, কিছু কীওয়ার্ড লিখুন, এবং Get Suggestions-এ ক্লিক করুন:

টেক্সট

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

নোট

আপনি যদি প্রতিটি ব্যবহারকারীর জন্য টেক্সট ব্যক্তিগতকৃত করতে চান, তাহলে এতে ট্যাগ যোগ করুন।

আপনি Smart Text অপশন ব্যবহার করে আপনার টেক্সট উন্নত করতে পারেন:

ছবি

একটি ছবি যোগ করতে, ইমেজ ব্লকে ক্লিক করুন এবং আপনার ফাইলটি এডিটর প্যানেলে ড্র্যাগ করুন:

বিকল্পভাবে, আপনি একটি ফাইল আপলোড করার পরিবর্তে Image URL নির্দিষ্ট করতে পারেন।

আপনি AI ইমেজ জেনারেশন নিয়েও পরীক্ষা করতে পারেন। এটি করার জন্য, Magic Image বিভাগে বোতামে ক্লিক করুন, আপনি যে ছবিটি তৈরি করতে চান তার বর্ণনা দিন, এবং Generate Images-এ ক্লিক করুন:

Action বিভাগে, আপনি ছবিতে ক্লিক করার সময় যে কাজটি করা উচিত তা সেট করতে পারেন। আপনি একটি ওয়েবসাইট খুলতে পারেন (অথবা আপনার অ্যাপের মধ্যে একটি পেজের জন্য একটি ডিপ লিঙ্ক) অথবা পপআপটি বন্ধ করতে পারেন। আপনি ইমেজ ক্লিক অ্যাকশন সেট করতে একটি কাস্টম জাভাস্ক্রিপ্ট হ্যান্ডলার অ্যাট্রিবিউটও সন্নিবেশ করতে পারেন। যদি কোনো অ্যাকশনের প্রয়োজন না হয়, তাহলে এই সেটিংটি উপেক্ষা করুন।

নোট

আপনি যদি ছবিতে ক্লিক করার সময় আপনার মোবাইল অ্যাপে একটি পেজ খুলতে চান, তাহলে Open Website অপশনটি নির্বাচন করুন এবং একটি ডিপ লিঙ্ক সন্নিবেশ করুন।

বোতাম

একবার আপনার টেমপ্লেটে একটি বোতাম যোগ করা হলে, আপনি এর টেক্সট, রঙ, প্যাডিং এবং বর্ডার কাস্টমাইজ করতে পারেন।

নোট

আপনি যদি প্রতিটি ব্যবহারকারীর জন্য বোতামের টেক্সট ব্যক্তিগতকৃত করতে চান, তাহলে এতে ট্যাগ যোগ করুন।

AI আপনাকে বোতামের টেক্সট তৈরি করতে সাহায্য করতে পারে। শুধু Smart Buttons বিভাগে বোতামে ক্লিক করুন, কীওয়ার্ড লিখুন, এবং Get Suggestions-এ ক্লিক করুন:

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

নোট

আপনি যদি বোতামে ক্লিক করার সময় আপনার মোবাইল অ্যাপে একটি পেজ খুলতে চান, তাহলে Open Website অপশনটি নির্বাচন করুন এবং একটি ডিপ লিঙ্ক সন্নিবেশ করুন।

ডিভাইডার

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

ফর্ম

নোট

এই উপাদানটি কনফিগার করতে, আপনার একজন ডেভেলপারের সাহায্যের প্রয়োজন হবে।

ফর্ম আপনাকে ব্যবহারকারীদের ইমেল, ফোন নম্বর, পছন্দ এবং অন্যান্য তথ্য সংগ্রহ করতে দেয় যা ভবিষ্যতের যোগাযোগের জন্য দরকারী হতে পারে। এই উপাদানটি একটি স্ট্যান্ডার্ড HTML ফর্ম হিসাবে কনফিগার করা হয়েছে: ডেটা URL ফিল্ডে নির্দিষ্ট করা ঠিকানায় GET বা POST অনুরোধে পাঠানো হয়।

এর প্যারামিটারগুলো কনফিগার করতে ফিল্ডের নামের উপর ক্লিক করুন:

• ফিল্ড টাইপ: ফিল্ডে যে ধরনের ডেটা প্রেরণ করা উচিত;
• ফিল্ডের নাম: যে প্যারামিটারে ফিল্ড থেকে ডেটা পাস করা হয় তার নাম;
• ফিল্ড লেবেল: ফিল্ডের উপরে প্রদর্শিত টেক্সট;
• প্লেসহোল্ডার টেক্সট;
• ফর্ম জমা দেওয়ার জন্য ফিল্ডটি প্রয়োজনীয় কিনা তা নির্দেশক চেকবক্স।

আরেকটি ফিল্ড যোগ করতে, Add New Field-এ ক্লিক করুন এবং ডেটা টাইপ নির্বাচন করুন:

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

HTML

HTML ব্লক আপনাকে একটি টেমপ্লেটে আপনার নিজস্ব কাস্টম HTML কোড যোগ করার অনুমতি দেয়।

এটি আপনার ইন-অ্যাপ মেসেজকে ইন্টারেক্টিভ বা দৃশ্যত আকর্ষণীয় উপাদান দিয়ে উন্নত করার জন্য বিশেষভাবে কার্যকর হতে পারে। উদাহরণস্বরূপ, আপনি যদি সমীক্ষার জন্য কাস্টম ফর্ম তৈরি করতে চান, তাহলে আপনি আপনার নিজের ডিজাইন করা ফর্মগুলো অন্তর্ভুক্ত করতে HTML ব্লক ব্যবহার করতে পারেন।

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

ডিফল্ট টেমপ্লেটগুলোতে একটি কাস্টম সমীক্ষা ফর্ম সহ একটি পূর্ব-ডিজাইন করা ইন-অ্যাপ মেসেজ টেমপ্লেট রয়েছে। আপনি এটিকে আপনার নিজের সমীক্ষা ফর্মের জন্য একটি রেফারেন্স বা সূচনা পয়েন্ট হিসাবে ব্যবহার করতে পারেন।

এছাড়াও, আপনি আরও আকর্ষণীয় ব্যবহারকারী অভিজ্ঞতার জন্য ভিডিও এম্বেড করে আপনার ইন-অ্যাপ মেসেজ উন্নত করতে পারেন। এখানে HTML ব্যবহার করে একটি YouTube ভিডিও কীভাবে এম্বেড করবেন তার একটি উদাহরণ দেওয়া হলো:

<!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 উপাদানটি আপনাকে একটি সারি বা কলামে বেশ কয়েকটি ক্লিকযোগ্য আইটেম স্থাপন করার অনুমতি দেয়। উদাহরণস্বরূপ, আপনি একটি নেভিগেশন বার বা কোম্পানির পরিচিতি যোগ করতে পারেন।

একটি মেনু আইটেম যোগ করতে, Add New Item-এ ক্লিক করুন:

আইটেমের টেক্সট যোগ করুন এবং আইটেমটিতে ক্লিক করার সময় যে কাজটি করা উচিত তা সেট করুন:

হরাইজন্টাল বা ভার্টিকাল মেনু টাইপ বেছে নিন এবং প্রয়োজনে আইটেমগুলোর মধ্যে একটি সেপারেটর যোগ করুন:

কন্টেন্ট ব্যক্তিগতকরণ

আপনার কন্টেন্টকে আরও প্রাসঙ্গিক এবং আকর্ষণীয় করতে মূল টেক্সট, হেডার বা বোতামের টেক্সট ব্যক্তিগতকৃত করুন। উদাহরণস্বরূপ, আপনি ব্যবহারকারীদের নাম ধরে সম্বোধন করতে পারেন বা তাদের পছন্দ উল্লেখ করতে পারেন।

প্রথমে, আপনাকে ট্যাগ সেট আপ করতে হবে এবং ব্যবহারকারীদের কাছ থেকে ডেটা সংগ্রহের কনফিগার করতে হবে (উদাহরণস্বরূপ, একটি ফিডব্যাক ফর্মের মাধ্যমে)। ইন-অ্যাপ মেসেজ তৈরি করার সময়, প্রয়োজনীয় কন্টেন্ট ব্লক নির্বাচন করুন, Merge Tags-এ ক্লিক করুন, এবং আপনি যে ট্যাগটি ব্যবহার করতে চান তা নির্বাচন করুন:

বহু-ভাষিক টেমপ্লেট

আপনি আপনার ব্যবহারকারীদের প্রতিটি ভাষার জন্য আপনার ইন-অ্যাপ মেসেজ টেমপ্লেটের টেক্সট স্থানীয়করণ করতে পারেন। এটি করার জন্য, Editable language তালিকায় ভাষাগুলোর মধ্যে স্যুইচ করুন এবং প্রতিটি ভাষায় আলাদাভাবে কন্টেন্ট সম্পাদনা করুন:

যদি কন্টেন্ট স্থানীয়করণ না করা হয়, তবে এটি Language settings-এ default হিসাবে নির্দিষ্ট করা ভাষায় প্রদর্শিত হবে।

নোট

আপনি টেমপ্লেটে যে কোনো উপাদান যোগ করেন তা সব ভাষার জন্য একই কন্টেন্ট সহ প্রদর্শিত হয়। আপনার টেমপ্লেটে ব্যবহৃত সব ভাষার জন্য যোগ করা টেক্সট (বোতামের টেক্সট সহ) স্থানীয়করণ করতে ভুলবেন না।

সাধারণ টেমপ্লেট সেটিংস

Popup ট্যাবে, আপনি সাধারণ টেমপ্লেট সেটিংস কনফিগার করতে পারেন:

• স্ক্রিনে পপআপের অবস্থান সেট করুন;
• পপআপের প্রস্থ এবং উচ্চতা পরিবর্তন করুন;
• বর্ডারের রাউন্ডিং সামঞ্জস্য করুন;
• পুরো টেমপ্লেটের জন্য কন্টেন্ট সেটিংস কনফিগার করুন: অ্যালাইনমেন্ট, প্রস্থ, ফন্ট এবং রঙ;
• ব্যাকগ্রাউন্ডের রঙ সেট করুন বা একটি ব্যাকগ্রাউন্ড ছবি যোগ করুন;
• বন্ধ করার বোতামের অবস্থান এবং চেহারা কাস্টমাইজ করুন।

ইন-অ্যাপ মেসেজের চেহারা এবং আচরণ কাস্টমাইজ করুন (iOS এবং Android নেটিভ)

আপনার ইন-অ্যাপ মেসেজগুলো নেটিভ iOS এবং Android অ্যাপে কেমন দেখাবে এবং আচরণ করবে তা নিয়ন্ত্রণ করতে In-App Settings ব্যবহার করুন। আপনি স্ক্রিনের অবস্থান সামঞ্জস্য করতে, অ্যানিমেশন বেছে নিতে এবং সোয়াইপ-টু-ডিসমিস জেসচার সক্রিয় করতে পারেন।

ইন-অ্যাপ সেটিংস কনফিগার করতে:

1. স্ক্রিনের উপরে Settings-এ ক্লিক করুন।

2. সেটিংস উইন্ডোতে, উপলব্ধ অপশনগুলো সামঞ্জস্য করে আপনার ইন-অ্যাপ মেসেজটি কেমন দেখাবে এবং আচরণ করবে তা বেছে নিন:

স্ক্রিনে মেসেজের অবস্থান সেট করুন

মেসেজটি কোথায় প্রদর্শিত হবে তা বেছে নিন।

অপশনগুলোর মধ্যে রয়েছে: Fullscreen, Top, Center, Bottom

এন্ট্রি অ্যানিমেশন নির্বাচন করুন

মেসেজটি স্ক্রিনে কীভাবে প্রদর্শিত হবে তা বেছে নিন।

অপশনগুলোর মধ্যে রয়েছে: Up, Down, Left, Right

এক্সিট অ্যানিমেশন নির্বাচন করুন

মেসেজটি কীভাবে অদৃশ্য হবে তা বেছে নিন।

অপশনগুলোর মধ্যে রয়েছে: Up, Down, Left, Right

সোয়াইপ-টু-ক্লোজ সক্রিয় করুন (ঐচ্ছিক)

ব্যবহারকারীদের এক বা একাধিক দিকে সোয়াইপ করে মেসেজটি বাতিল করার অনুমতি দিন।

অপশনগুলোর মধ্যে রয়েছে: Left, Right, Up, Down

3. আপনার পছন্দগুলো নির্বাচন করার পরে, পরিবর্তনগুলো সংরক্ষণ করতে Apply-এ ক্লিক করুন অথবা সেগুলো বাতিল করতে Cancel-এ ক্লিক করুন।

টেমপ্লেট সংরক্ষণ করুন এবং ব্যবহার করুন

পরিবর্তন প্রয়োগ করতে Save-এ ক্লিক করুন।

এখন আপনি আপনার ইন-অ্যাপ মেসেজ টেমপ্লেটটি নিম্নলিখিত উপায়গুলোর মধ্যে একটিতে ব্যবহার করতে পারেন:

• একটি কাস্টমার জার্নির অংশ হিসাবে একটি ইন-অ্যাপ দেখান;
• একটি পুশ পাঠান যা ক্লিক করলে একটি ইন-অ্যাপ খোলে;
• আপনার ব্যবহারকারীদের একটি একক ইন-অ্যাপ প্রদর্শন করুন।