বিষয়বস্তুতে যান
ডেভেলপার ডকুমেন্টেশন সাপোর্ট ডেমো অনুরোধ করুন সাইন ইন করুন
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 ক্লিক করুন।
নমুনা ডেটা ফিল্ড সহ টেস্ট ইমেল পাঠানোর কনফার্মেশন ডায়ালগ