বিষয়বস্তুতে যান
ডেভেলপার ডকুমেন্টেশনসাপোর্ট ডেমো অনুরোধ করুন সাইন ইন করুন
Pushwoosh.com

HTML কোড এডিটর দিয়ে ইমেল কন্টেন্ট তৈরি করুন

ইউটিউব ভিডিও: HTML দিয়ে স্ক্র্যাচ থেকে আপনার ইমেল কন্টেন্ট তৈরি করুন

আপনি যদি HTML-এ পারদর্শী হন এবং নিজের কোড লিখতে পছন্দ করেন, তাহলে আপনি Pushwoosh HTML কোড এডিটর ব্যবহার করে ইমেল তৈরি করতে পারেন।

ইমেল কন্টেন্ট তৈরি করুন

Anchor link to

ইমেল কন্টেন্ট তৈরি করা শুরু করতে, আপনার HTML কোডটি HTML ট্যাবে পেস্ট করুন। আপনি যখন কাজ করছেন তখন এডিটরটি রিয়েল-টাইম ইমেল প্রিভিউ প্রদান করে।

বিকল্পভাবে, আপনি নীচের প্যানেলে অবস্থিত Upload HTML File-এ ক্লিক করে একটি HTML ফাইল আপলোড করতে পারেন।

আপনার ইমেলগুলিতে একটি ব্যক্তিগতকৃত ছোঁয়া যোগ করতে, কাস্টম ট্যাগ ব্যবহার করুন। এর জন্য:

  1. এডিটরের নীচে অবস্থিত Tag আইকনে ক্লিক করুন।
  2. পছন্দসই ট্যাগ এবং এর মডিফায়ার নির্বাচন করুন এবং প্রয়োজনে একটি ডিফল্ট মান প্রদান করুন।
  3. আপনার ইমেল কন্টেন্টে কাস্টম ট্যাগ অন্তর্ভুক্ত করতে Insert-এ ক্লিক করুন।
কাস্টম ট্যাগ সন্নিবেশ ইন্টারফেস যা ট্যাগ নির্বাচন এবং ডিফল্ট মান বিকল্পগুলি দেখাচ্ছে

আপনার ইমেলে একটি ইমোজি অন্তর্ভুক্ত করতে, এডিটরের নীচে অবস্থিত Emoji আইকনে ক্লিক করুন।

ছবি যোগ করুন

Anchor link to

আপনার ইমেলে একটি ছবি যোগ করতে, আপনার HTML-এ একটি <img> ট্যাগ অন্তর্ভুক্ত করুন এবং src অ্যাট্রিবিউটটি ছবির URL-এ সেট করুন।

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

<img src="YOUR-MEDIA-STORE-URL" alt="Summer sale banner" width="600" style="display:block;max-width:100%;height:auto;" />

YOUR-MEDIA-STORE-URL-কে মিডিয়া স্টোর থেকে কপি করা URL দিয়ে প্রতিস্থাপন করুন।

লোকালাইজেশন ব্যবহার করুন

Anchor link to

লোকালাইজেশন আপনাকে বিভিন্ন ভাষার ব্যবহারকারীদের ব্যক্তিগতকৃত অভিজ্ঞতা প্রদান করার ক্ষমতা দেয়।

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

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

{
  "default": {
    "button": "Shop now",
    "description": "For a limited time, you can enjoy a 20% discount on all our premium coffee blends",
    "subtitle": "Don't miss it",
    "title": "☕ Coffee Promotion Alert!"
  },
  "de": {
    "button": "Jetzt einkaufen",
    "description": "Für kurze Zeit erhalten Sie einen Rabatt von 20% auf alle unsere Premium-Kaffeemischungen",
    "subtitle": "Verpassen Sie es nicht",
    "title": "☕ Kaffee-Promotion Benachrichtigung!"
  },
  "es": {
    "button": "Comprar ahora",
    "description": "Por tiempo limitado, puedes disfrutar de un descuento del 20% en todas nuestras mezclas de café premium",
    "subtitle": "No te lo pierdas",
    "title": "☕ ¡Alerta de Promoción de Café!"
  }
}

একবার আপনার লোকালাইজেশন ডেটা গঠন করা হয়ে গেলে এবং এডিটরের Localization Tab-এ যোগ করা হলে, প্লেসহোল্ডার ব্যবহার করে এটিকে আপনার HTML কন্টেন্টে অন্তর্ভুক্ত করুন। প্লেসহোল্ডারগুলি ব্যবহারকারীর ভাষার পছন্দের উপর ভিত্তি করে আপনার কন্টেন্টে স্থানীয়করণ করা টেক্সট গতিশীলভাবে প্রবেশ করায়। আপনার HTML-এ এটি কীভাবে প্রয়োগ করবেন তা এখানে দেওয়া হল

{{title|text|}}
{{subtitle|text|}}
{{description|text|}}
{{button|text|}}

এই পরিস্থিতিটি বিবেচনা করুন: আপনি কফি ব্লেন্ডে সীমিত সময়ের জন্য ছাড়ের বিজ্ঞাপন দিচ্ছেন। উপরে উল্লিখিত লোকালাইজেশন কাঠামো ব্যবহার করে, আপনি বিভিন্ন ভাষায় কথা বলা ব্যবহারকারীদের কাছে আপনার প্রচারমূলক বার্তা কার্যকরভাবে পৌঁছে দিতে পারেন। প্রচারের জন্য আপনার HTML কোডটি এইরকম হতে পারে:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>☕ Coffee Promotion Alert</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .container {
    background-color: #fff;
    padding: 20px;
    margin: 10px auto;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #ff6f61;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  .button:hover {
    background-color: #ff5733;
  }
  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>{{title|text|}}</h1>
    <p>{{description|text|}}</p>
    <a href="https://www.example.com/promotion" class="button">{{button|text|}}</a>


  </div>
</body>
</html>

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

ইমেল কন্টেন্ট ব্লক ইনসার্ট এবং একত্রিত করুন

Anchor link to

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

উদাহরণস্বরূপ, যদি আপনার কাছে ইমেল কন্টেন্ট A (একটি হেডার) এবং ইমেল কন্টেন্ট B (একটি নিউজলেটার) থাকে, তবে আপনি প্রতিবার ম্যানুয়ালি কন্টেন্ট কপি না করে ইমেল কন্টেন্ট B-এর মধ্যে ইমেল কন্টেন্ট A প্রবেশ করাতে পারেন।

সিনট্যাক্স

Anchor link to

একটি কন্টেন্টের মধ্যে অন্য একটি কন্টেন্ট প্রবেশ করাতে, নিম্নলিখিত সিনট্যাক্স ব্যবহার করুন:

{% email_content "AAAAA-BBBBB" %}

যেখানে “AAAAA-BBBBB” হল সেই ইমেল কন্টেন্টের আইডি যা আপনি প্রবেশ করাতে চান। আপনি আপনার ইমেল কন্টেন্টের তালিকায় কন্টেন্টের নামের নীচে অবস্থিত আইডিটি খুঁজে পেতে পারেন।

ইমেল কন্টেন্ট আইডি প্রদর্শন যা কন্টেন্টের নাম এবং অনন্য শনাক্তকারী দেখাচ্ছে

উদাহরণ

ধরা যাক আপনার কাছে দুটি কন্টেন্ট আছে:

  • হেডার কন্টেন্ট (আইডি: “AAAAA-BBBBB”) একটি পূর্বনির্ধারিত হেডার ডিজাইন সহ।
  • নিউজলেটার কন্টেন্ট, যেখানে আপনি হেডারটি অন্তর্ভুক্ত করতে চান।

নিউজলেটারে হেডারটি প্রবেশ করাতে, আপনি নিম্নলিখিতটি ব্যবহার করবেন:

{% email_content "AAAAA-BBBBB" %}

এটি আপনাকে একাধিক ইমেল প্রচারাভিযানে একটি পূর্বনির্ধারিত হেডার সহজেই পুনরায় ব্যবহার করার অনুমতি দেয়। এটি সময় বাঁচায় এবং আপনার ইমেল জুড়ে সামঞ্জস্যতা নিশ্চিত করে।

একটি আনসাবস্ক্রাইব লিঙ্ক যোগ করুন

Anchor link to

আপনার ইমেলে একটি আনসাবস্ক্রাইব লিঙ্ক অন্তর্ভুক্ত করুন যাতে প্রাপকরা নিয়মাবলী এবং তাদের পছন্দ অনুযায়ী অপ্ট আউট করতে পারে। Pushwoosh তিনটি ভেরিয়েবল সরবরাহ করে যা আপনি আপনার HTML-এ ব্যবহার করতে পারেন।

আনসাবস্ক্রাইব লিঙ্ক

Anchor link to

এই লিঙ্কটি যোগ করুন যাতে ব্যবহারকারীরা তাদের প্রাপ্ত বার্তা থেকে অপ্ট আউট করতে পারে:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Unsubscribe </a>

আপনি যখন ইমেল পাঠান তখন ভেরিয়েবলটি Pushwoosh আনসাবস্ক্রাইব URL দিয়ে প্রতিস্থাপিত হয়।

  • যখন সাবস্ক্রিপশন প্রেফারেন্স সেন্টার সক্রিয় থাকে, তখন প্রাপকরা শুধুমাত্র সেই ইমেলের জন্য নির্ধারিত বিভাগ থেকে আনসাবস্ক্রাইব হন (যেমন, নিউজলেটার)। একটি নিশ্চিতকরণ স্ক্রিন প্রদর্শিত হয় যেখানে তারা সেই বিভাগে পুনরায় সাবস্ক্রাইব করতে পারে বা সমস্ত ইমেল বিভাগ সামঞ্জস্য করতে পছন্দগুলি পরিচালনা করতে পারে। আরও জানুন

  • যখন সাবস্ক্রিপশন প্রেফারেন্স সেন্টার সক্রিয় থাকে না, তখন প্রাপকরা সমস্ত মার্কেটিং ইমেল থেকে আনসাবস্ক্রাইব হন।

মেসেজ হিস্ট্রি-তে সেই বার্তার জন্য আনসাবস্ক্রাইব হারে ক্লিকগুলি গণনা করা হয়।

সমস্ত বিভাগ থেকে আনসাবস্ক্রাইব করুন

Anchor link to

একটি লিঙ্ক যোগ করুন যা ব্যবহারকারীকে একবারে সমস্ত ইমেল বিভাগ থেকে আনসাবস্ক্রাইব করে:

<a href=%%PW_EMAIL_UNSUBSCRIBE_ALL%%> Unsubscribe from all emails </a>

প্রেফারেন্স সেন্টার লিঙ্ক

Anchor link to

যেখানে ব্যবহারকারীরা কোন কোন বিভাগগুলি গ্রহণ করবে তা পরিচালনা করে, সেই প্রেফারেন্স সেন্টার-এর একটি সরাসরি লিঙ্ক যোগ করুন:

<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Manage preferences </a>

প্রেফারেন্স সেন্টার কীভাবে কাজ করে তা জানুন

নীচের স্ক্রিনশটটি একটি ফুটার দেখায় যা তিনটি লিঙ্কের প্রকারই ব্যবহার করে।

ইমেল ফুটারের উদাহরণ যেখানে তিনটি আনসাবস্ক্রাইব লিঙ্ক রয়েছে: আনসাবস্ক্রাইব, পছন্দগুলি পরিচালনা করুন, সমস্ত ইমেল থেকে আনসাবস্ক্রাইব করুন

ইমেল কন্টেন্ট সেভ করুন

Anchor link to

আপনি আপনার ইমেল তৈরি করা শেষ করার পরে, এডিটরের শীর্ষে অবস্থিত Save বোতামে ক্লিক করুন।

ইমেল কন্টেন্ট সেভ করার ডায়ালগ যা নাম এবং লেবেল ফিল্ড দেখাচ্ছে

যে নতুন উইন্ডোটি প্রদর্শিত হবে, সেখানে আপনার ইমেলকে একটি স্পষ্ট নাম দিন, যা আপনার বিষয় লাইনের সমান হতে পারে। এছাড়াও, একটি লেবেল তৈরি করুন যা আপনাকে আপনার ইমেলের তালিকায় সহজেই খুঁজে পেতে সহায়তা করবে।

আপনি যদি এখনও প্রেরকের বিবরণ সেট আপ না করে থাকেন, তবে নিশ্চিত করুন যে আপনি সেটিও করেছেন। তারপর, Save-এ ক্লিক করুন।

এখন যেহেতু আপনার ইমেল কন্টেন্ট প্রস্তুত, এটি ইমেল প্রচারাভিযানে ব্যবহার করা যেতে পারে। আরও জানুন

একটি টেস্ট ইমেল পাঠান

Anchor link to

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

একটি টেস্ট ইমেল পাঠাতে, ইমেল এডিটরে Test email-এ ক্লিক করুন।

ইমেল এডিটর ইন্টারফেসে টেস্ট ইমেল বোতাম

যে উইন্ডোটি খুলবে:

  1. Email address ফিল্ডে, আপনি যেখানে টেস্ট ইমেলটি পেতে চান সেই ইমেল ঠিকানাটি লিখুন।

যদি KYC সম্পন্ন না হয়ে থাকে, তাহলে আপনাকে একটি ইমেল প্রবেশ করানোর পরিবর্তে টেস্ট ঠিকানাগুলির তালিকা থেকে একটি যাচাইকৃত ইমেল ঠিকানা নির্বাচন করতে হবে।

যাচাইকৃত টেস্ট ইমেল ঠিকানা নির্বাচন ড্রপডাউন
  1. যদি আপনার ইমেলে ডাইনামিক কন্টেন্ট (ব্যক্তিগতকৃত ডেটার জন্য প্লেসহোল্ডার) থাকে, তাহলে পরীক্ষার উদ্দেশ্যে নমুনা মান যোগ করুন।

উদাহরণস্বরূপ:

  • Age (integer): বয়স প্লেসহোল্ডার প্রতিনিধিত্ব করার জন্য একটি সংখ্যা লিখুন (যেমন, 21)।
  • FirstName (string): একটি নমুনা প্রথম নাম লিখুন (যেমন, David)।

এই মানগুলি টেস্ট ইমেলে প্রকৃত প্রাপকের ডেটা প্রতিস্থাপন করবে, যা আপনাকে ডাইনামিক কন্টেন্ট কীভাবে প্রদর্শিত হয় তা যাচাই করার অনুমতি দেবে।

  1. আপনি প্রয়োজনীয় বিবরণ পূরণ করার পরে, প্রদত্ত ইমেল ঠিকানায় টেস্ট বার্তাটি পাঠাতে Send test email-এ ক্লিক করুন।
নমুনা ডেটা ফিল্ড সহ টেস্ট ইমেল পাঠানোর নিশ্চিতকরণ ডায়ালগ