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

ইউটিউব ভিডিও: আমাদের সহজ-ব্যবহারযোগ্য এডিটরে কোডিং ছাড়াই ইন-অ্যাপ তৈরি করুন

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

একটি ইন-অ্যাপ টেমপ্লেট তৈরি করতে, কন্টেন্ট → ইন-অ্যাপস এ যান এবং টেমপ্লেট যোগ করুন-এ ক্লিক করুন:

এখানে, আপনার কাছে তিনটি বিকল্প আছে:

1. আপনার HTML ইন-অ্যাপ মেসেজ সহ একটি ZIP ফাইল আপলোড করুন।
2. আগে থেকে তৈরি টেমপ্লেটগুলির মধ্যে একটি বেছে নিন এবং কাস্টমাইজ করুন।
3. স্ক্র্যাচ থেকে আপনার নিজের টেমপ্লেট তৈরি করুন।

এই নিবন্ধে, আমরা স্ক্র্যাচ থেকে একটি টেমপ্লেট তৈরি করার পদ্ধতি দেখব। আপনার বিদ্যমান টেমপ্লেট কাস্টমাইজ করতে একই পদক্ষেপগুলি অনুসরণ করুন।

একটি টেমপ্লেটের নাম লিখুন, নতুন টেমপ্লেট তৈরি করুন নির্বাচন করুন, এবং টেমপ্লেট যোগ করুন-এ ক্লিক করুন:

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

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

লেআউট

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

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

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

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

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

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

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

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

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

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

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

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

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

নোট

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

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

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

হেডিং

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

নোট

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

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

টেক্সট

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

নোট

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

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

ছবি

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

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

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

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

নোট

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

বোতাম

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

নোট

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

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

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

নোট

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

ডিভাইডার

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

ফর্ম

নোট

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

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

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

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

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

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

HTML

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

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

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

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

এছাড়াও, আপনি আরও আকর্ষণীয় ব্যবহারকারীর অভিজ্ঞতার জন্য ভিডিও এম্বেড করে আপনার ইন-অ্যাপ মেসেজগুলিকে উন্নত করতে পারেন। এখানে 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>

মেনু

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

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

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

অনুভূমিক বা উল্লম্ব মেনু টাইপ চয়ন করুন এবং প্রয়োজনে আইটেমগুলির মধ্যে একটি বিভাজক যোগ করুন:

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

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

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

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

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

যদি কন্টেন্ট স্থানীয়করণ না করা হয়, তবে এটি ভাষা সেটিংস-এ ডিফল্ট হিসাবে নির্দিষ্ট ভাষায় প্রদর্শিত হবে।

নোট

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

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

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

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

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

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

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

1. স্ক্রিনের শীর্ষে সেটিংস-এ ক্লিক করুন।

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

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

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

বিকল্পগুলির মধ্যে রয়েছে: ফুলস্ক্রিন, শীর্ষ, কেন্দ্র, নিচ

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

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

বিকল্পগুলির মধ্যে রয়েছে: উপরে, নিচে, বামে, ডানে

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

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

বিকল্পগুলির মধ্যে রয়েছে: উপরে, নিচে, বামে, ডানে

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

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

বিকল্পগুলির মধ্যে রয়েছে: বামে, ডানে, উপরে, নিচে

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

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

পরিবর্তনগুলি প্রয়োগ করতে সংরক্ষণ করুন-এ ক্লিক করুন।

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

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