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

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

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

একটি ইন-অ্যাপ টেমপ্লেট তৈরি করতে, Content → In-apps-এ যান এবং Add template-এ ক্লিক করুন:

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

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

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

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

নোট

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

বোতাম

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

নোট

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

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

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

নোট

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

ডিভাইডার

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

ফর্ম

নোট

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

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

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

• Field Type: ফিল্ডে যে ধরনের ডেটা পাঠানো উচিত;
• Field Name: যে প্যারামিটারে ফিল্ড থেকে ডেটা পাস করা হয় তার নাম;
• Field Label: ফিল্ডের উপরে প্রদর্শিত টেক্সট;
• Placeholder Text;
• চেকবক্স যা নির্দেশ করে যে ফর্ম জমা দেওয়ার জন্য ফিল্ডটি প্রয়োজনীয় কিনা।

আরেকটি ফিল্ড যোগ করতে, 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-এ ক্লিক করুন।

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

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