Mailchimp-এ custom HTML template আনলে আপনি নিজের ডিজাইন, ব্র্যান্ডের টাইপোগ্রাফি এবং নির্দিষ্ট content area রেখে ভবিষ্যতের campaign দ্রুত বানাতে পারেন। তবে এটি কেবল HTML upload করার কাজ নয়। Email client-এর সীমাবদ্ধতা, Mailchimp-এর template language, merge tag, ZIP-এর গঠন এবং draft campaign-এর নিরাপত্তা—সব একসঙ্গে ভাবতে হয়। এই টিউটোরিয়ালে শুরু থেকে শেষ পর্যন্ত একটি পুনর্ব্যবহারযোগ্য, সম্পাদনাযোগ্য template তৈরির পদ্ধতি দেখানো হয়েছে। উদাহরণটি ইচ্ছাকৃতভাবে ছোট; এর লক্ষ্য কোনো প্রতিষ্ঠানের template নকল করা নয়, বরং ধারণাটি নিরাপদে পরীক্ষা করার একটি মৌলিক ভিত্তি দেওয়া।
শুরু করার আগে: plan এবং account
প্রথমে নিজের লক্ষ্য লিখে নিন। আপনার দরকার কি শুধু designer-এর বানানো fixed newsletter upload করা, নাকি প্রতিটি campaign-এ subject-এর পরের লেখা, ছবি, button এবং footer বদলাবেন? প্রথমটি হলে সাধারণ HTML import যথেষ্ট হতে পারে। দ্বিতীয়টি হলে editable region পরিকল্পনা করতে হবে। খুব বেশি অংশ editable করলে layout ভেঙে যাওয়ার সুযোগ বাড়ে; আবার খুব কম অংশ দিলে campaign builder-এ বারবার code খুলতে হয়। তাই header, প্রধান body, একটি image, একটি call-to-action এবং footer—এমন পাঁচটি স্পষ্ট zone দিয়ে শুরু করা বাস্তবসম্মত।
Mailchimp-এর custom HTML template সুবিধাটি advanced এবং Standard plan বা তার বেশি স্তরের account-এ পাওয়া যায়। আপনার account-এ menu না দেখা গেলে প্রথমে plan এবং permission পরীক্ষা করুন; এটিকে browser-এর cache সমস্যা ধরে নেওয়া ঠিক নয়। Mailchimp নিজেও custom coding জানা ব্যবহারকারীর জন্য এই পথটি সুপারিশ করে। HTML email-এর জন্য developer নেওয়া বা Mailchimp-এর built-in template ব্যবহার করাও বৈধ বিকল্প। এই গাইডে কোনো plan upgrade, publishing বা campaign send করা হবে না; কেবল template import, draft preview এবং test-এর প্রস্তুতি দেখানো হবে।
একটি আলাদা staging audience বা অন্তত test contact রাখুন। বাস্তব subscriber list-এ অসম্পূর্ণ footer, ভাঙা link বা placeholder text পাঠানো উচিত নয়। Template-এর version নামেও তারিখ ও পরিবর্তনের ধরন রাখুন, যেমন brand-newsletter-2026-10। একই saved template বহু draft-এ ব্যবহৃত হলে পরে template builder-এ code বদলানোর প্রভাব বোঝা কঠিন হতে পারে। তাই import-এর আগে original HTML ও ZIP নিজের version-control folder-এ রেখে দিন।
Email HTML-এর ভিত্তি
ওয়েবসাইটের মতো flexbox, grid বা external stylesheet-এর উপর নির্ভর না করে email-এ সাধারণত nested table layout ব্যবহার করা হয়। কারণ নানা mail client CSS আংশিকভাবে সমর্থন করে এবং desktop, webmail ও mobile rendering এক নয়। Table-কে layout-এর জন্য ব্যবহার করলে তাকে semantic data table হিসেবে ঘোষণা করা উচিত নয়; সে কারণেই উদাহরণে role="presentation" আছে। একটি outer table পুরো viewport-এর background ধরে, আর ভেতরের 600px-এর মতো সীমিত table পাঠযোগ্য content রাখে। 600px কোনো গ্যারান্টি নয়; আপনার design ও testing অনুযায়ী প্রস্থ ঠিক করুন।
CSS যতটা সম্ভব inline রাখুন। font-family, line-height, padding, color এবং width একই element-এ থাকলে style হারানোর ঝুঁকি কমে। একটি ছোট style block সহায়ক হতে পারে, কিন্তু external CSS file বা JavaScript email-এ ভরসা করবেন না। সব গুরুত্বপূর্ণ ছবি alt text পাবে, link-এ অর্থবহ label থাকবে এবং color contrast পড়ার উপযোগী হবে। ছবির width সীমিত করুন, কারণ বড় ছবি mobile-এ horizontal scroll আনতে পারে।
ফাইলের encoding UTF-8 রাখুন। Bengali লেখা, curly punctuation বা বিশেষ চিহ্ন ভুল encoding-এ প্রশ্নবোধক বা অদ্ভুত অক্ষর হয়ে আসতে পারে। HTML validator syntax-এর ভুল ধরতে সাহায্য করবে, কিন্তু validator সব mail client-এর visual আচরণ নিশ্চিত করে না। HTML সঠিক হওয়া এবং inbox-এ সুন্দর দেখা—দুইটি আলাদা পরীক্ষা। ছবির জন্য JPG, JPEG, PNG বা GIF ব্যবহার করুন; WebP-কে production email-এর default ধরে নেবেন না, কারণ সব recipient-এর client সমানভাবে তা দেখাবে না। PDF বা অন্য document link করলে সেটি Mailchimp-এ host করার ব্যবস্থা করুন।
একটি ছোট, নিরাপদ starter
নিচের নমুনাটি ইচ্ছাকৃতভাবে minimal। এখানে layout table, inline style, UTF-8 declaration, একটি editable body এবং unsubscribe link আছে। এটি সরাসরি কোনো commercial campaign-এর সম্পূর্ণ template নয়। Code block-এর HTML escape করা হয়েছে যাতে এই article-এ markup হিসেবে execute না হয়।
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mailchimp custom template</title>
</head>
<body style="margin:0;padding:0;background:#f3f5f7;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background:#f3f5f7;">
<tr><td align="center" style="padding:24px 12px;">
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;background:#ffffff;">
<tr><td style="padding:28px;font-family:Arial,sans-serif;color:#17212b;">
<h2 style="margin:0 0 12px;font-size:24px;line-height:1.25;">নতুন আপডেট</h2>
<div mc:edit="main_body"><p style="margin:0;line-height:1.6;">এখানে আপনার মূল বার্তা বসবে।</p></div>
<p style="margin:24px 0 0;font-size:12px;line-height:1.5;color:#66727d;"><a href="*|UNSUB|*">আনসাবস্ক্রাইব</a> · *|HTML:LIST_ADDRESS_HTML|*</p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>নমুনায় main_body একবার এসেছে এবং footer-এর merge tag পাঠযোগ্য text-এর সঙ্গে আছে। বাস্তবে আপনার logo, preheader, CTA এবং fallback text যোগ করতে পারেন। তবে প্রতিটি নতুন element editable করার আগে প্রশ্ন করুন: campaign author কি সত্যিই এটি বদলাবেন? Logo-কে editable image করা দরকার হলে আলাদা নাম দিন, কিন্তু editable container-এর ভেতরে editable image গুঁজে দিলে editor-এর আচরণ জটিল হতে পারে।
Editable area এবং mc:edit
Mailchimp Template Language-এর সবচেয়ে ব্যবহারিক চিহ্ন হলো mc:edit="section_name"। যে element-এর content campaign builder-এর Design অংশ থেকে বদলাতে চান, তার উপর এই attribute বসান। নামটি কেবল label নয়; এটি template-এর পরিচয়। একই template-এ প্রতিটি mc:edit-এর value unique রাখুন। একটি নাম দুবার ব্যবহার করলে কোন region-এ edit লাগবে তা অস্পষ্ট হতে পারে এবং template বদলালে content হারানোর ঝুঁকি বাড়ে। নাম lowercase, সংক্ষিপ্ত এবং উদ্দেশ্যবোধক রাখুন—যেমন header_text, hero_image, main_body, primary_cta।
সাধারণ content area-র জন্য একটি td বা div-তে attribute বসানো যায়। Header image-এর জন্য image element-এ আলাদা editable নাম দিন। একই সঙ্গে body এবং তার ভেতরের প্রতিটি heading editable করার দরকার নেই; এতে user একটি ছোট বাক্য বদলাতে গিয়ে nested editor পেতে পারে। একটি zone-এর ভেতরে পুরো content দেওয়া, অথবা দুইটি স্পষ্ট sibling zone রাখা—এই দুই পদ্ধতির একটি বেছে নিন। HTML-এ region-এর সীমা যেন চোখে পড়ে, যাতে পরের developer সহজে বুঝতে পারেন।
mc:repeatable এমন block-এর জন্য, যা campaign author একাধিকবার যোগ করতে পারবেন। যেমন article card-এ title ও description আছে। সেখানে parent-এ mc:repeatable এবং child content-এ আলাদা, unique mc:edit name দিতে হয়। দুইটি আলাদা repeatable parent-এর block পরস্পরের মধ্যে ইচ্ছামতো reorder করা যায় না। তাই একই ধরনের layout-এর একাধিক variant থাকলে একই repeatable নামের সঙ্গে mc:variant ব্যবহারের পরিকল্পনা করুন। প্রথম version-এ repeatable না দিয়ে fixed region দিয়ে layout স্থির করা নিরাপদ।
mc:hideable দিয়ে কোনো editable area campaign builder-এ hide/show করার সুযোগ দেওয়া যায়। এটি mc:repeatable-এর সঙ্গে একসঙ্গে ব্যবহার করা উচিত নয়। Hide করা block editor-এ ফিকে হয়ে থাকতে পারে, কিন্তু send-এর সময় না-ও দেখা যেতে পারে; তাই preview mode-এ ফল দেখুন। mc:variant layout বদলানোর জন্য এবং এটি repeatable-এর সঙ্গে লাগে। এসব feature একসঙ্গে জোড়া লাগানোর আগে ছোট staging template-এ একটি করে পরীক্ষা করুন। একসঙ্গে অনেক special attribute দিলে failure-এর উৎস আলাদা করা কঠিন হবে।
Template language ব্যবহার করলে naming convention লিখে রাখুন। ভবিষ্যৎ designer যেন জানেন main_body মানে পূর্ণ article, আর cta_label মানে কেবল button text। Existing campaign-এর content নতুন template-এ নিলে name বদলানো বিপজ্জনক। Mailchimp-এর guidance-ও names consistent রাখার পরামর্শ দেয়। Template export করে original code-এ comments দিন, যেমন <!-- editable: main_body -->; তবে comment-এ subscriber data বা secret রাখবেন না।
HTML তৈরি ও import
পথ ১: Code your own-এ paste
Mailchimp-এ Campaigns থেকে Email templates-এ যান। Code your own নির্বাচন করে Continue চাপুন। Edit code field-এ UTF-8 HTML paste করে Save করুন। এই route-এ asset আলাদা করে Content Studio থেকে বসানো যায়। Code প্রথমে plain text editor-এ খুলে paste করুন, যাতে word processor-এর smart quote বা অদৃশ্য formatting ঢুকে না যায়। Save করার পর Mailchimp syntax validator চালাবে। Error এলে প্রথমে unclosed tag, quote, ampersand, duplicate attribute এবং merge tag-এর বানান পরীক্ষা করুন। Validator pass করলেই editor-এর visual preview দেখুন।
Edit Design অংশে Page, Preheader, Header, Body, Footer, Mobile Styles বা Referral Badge-এর available setting দেখা যেতে পারে। আপনি code-এর সঙ্গে design control মিশিয়ে ব্যবহার করলে কোন setting code বদলায়, তা নোট করুন। Preview and Test menu-তে desktop ও mobile preview দেখুন এবং একটি নিজের test address-এ পাঠান। Test email-এ merge tag কখনো placeholder বা blank দেখাতে পারে, কারণ merge tag send-এর সময় audience data থেকে পূরণ হয়। সেটিকে final subscriber rendering বলে ধরে নেবেন না।
পথ ২: Import HTML file
Campaigns → Email templates → Code your own → Import HTML বেছে Add file দিয়ে একটি HTML file দিন। এটি তখনই সুবিধাজনক যখন designer মূল file-টি আগে থেকেই বানিয়েছেন এবং asset upload আলাদা করে করতে চান। Filename সহজ রাখুন। Import-এর পর Edit Code-এ খুলে প্রথমে character encoding, broken link, missing image এবং mc:edit name দেখে নিন। এরপর Save and Exit করে template-এর অর্থপূর্ণ নাম দিন। Saved tab থেকে template খুলে Create email না চাপলেও আপনি edit ও preview পর্যায়ে কাজ করতে পারবেন।
ZIP প্রস্তুতির নিয়ম
অনেক image থাকলে Import ZIP সুবিধাজনক। ZIP অবশ্যই 1MB-এর কম হবে এবং তার মধ্যে কেবল একটি HTML file থাকবে। একাধিক HTML থাকলে Mailchimp প্রথম যে file পায় সেটি ব্যবহার করতে পারে; কোনটি প্রথম হবে সেই অনিশ্চয়তা এড়িয়ে একটিই রাখুন। HTML file, image এবং linked asset ZIP-এর root directory-তে রাখুন, subfolder-এ নয়। Import-এর সময় Mailchimp asset Content Studio-তে upload করে code-এ absolute path তৈরি করতে পারে।
ZIP file-এর নামে কেবল letters, numbers এবং hyphen ব্যবহার করুন। space, underscore, বাংলা অক্ষর বা অস্বাভাবিক punctuation সমস্যার কারণ হতে পারে। ভিতরের HTML ও image filename-ও সরল রাখুন, যেমন newsletter.html, hero.jpg, logo.png। Upload case-sensitive, তাই code-এ hero.jpg লিখে file-এ Hero.JPG রাখলে path ভাঙতে পারে। Local computer-এ কাজ করলেও এই mismatch সবসময় চোখে পড়ে না; Linux-style case-sensitive check করা ভালো।
ZIP বানানোর আগে archive খুলে দেখুন: root-এ সরাসরি newsletter.html আছে কি, নাকি পুরো project folder ঢুকে গেছে? দ্বিতীয়টি হলে Mailchimp root-এ HTML খুঁজে নাও পেতে পারে। Hidden file, backup HTML, PSD, অপ্রয়োজনীয় font এবং বিশাল uncompressed photo বাদ দিন। Image format JPG, JPEG, PNG বা GIF রাখুন। Email asset-এর জন্য WebP বাদ দেওয়াই নিরাপদ। ZIP ছোট করতে image resize করুন, কিন্তু এমন compression নয় যাতে logo পড়া যায় না।
Import ZIP-এর পরে Mailchimp যে absolute URL বসিয়েছে তা দেখে অন্ধভাবে বদলাবেন না। Image path-এ domain, query string বা content identifier থাকতে পারে। Preview-তে broken image দেখলে প্রথমে Content Studio asset উপস্থিত কি না দেখুন, তারপর code-এর spelling ও case মেলান। Relative path রাখতে চাইলে তা import process-এর সঙ্গে বিরোধ করতে পারে। প্রতিবার ZIP বদলালে নতুন version name দিন, যেন কোন asset কোন template-এ ছিল বোঝা যায়।
Unsubscribe ও address merge tag
Custom template-এ *|UNSUB|* রাখা বাধ্যতামূলক। এটি subscriber-কে unsubscribe করার সুযোগ দেয় এবং Mailchimp-এর terms ও প্রযোজ্য আইনগত requirement পূরণে সহায়তা করে। Tag-টি শুধু plain text হিসেবে রেখে দেবেন না; Mailchimp-এর নির্দেশনা অনুযায়ী link tool দিয়ে clickable করুন। নমুনায় <a href="*|UNSUB|*"> ব্যবহার করা হয়েছে। আপনার account-এর footer requirement ও jurisdiction অনুযায়ী footer-কে যথেষ্ট দৃশ্যমান রাখুন। Unsubscribe link লুকিয়ে color background-এর সঙ্গে মিশিয়ে দেওয়া ব্যবহারকারীর আস্থা নষ্ট করে।
ঠিকানা ও audience context-এর জন্য *|HTML:LIST_ADDRESS_HTML|* ব্যবহার করতে পারেন। এটি mailing address এবং address-book link-সহ HTML content দেয়। Plain text দরকার হলে *|LIST:ADDRESS|* বা এক লাইনের *|LIST:ADDRESSLINE|* ব্যবহার করা যায়। Audience-এর নামের জন্য *|LIST:NAME|*, contact-এর email দেখাতে *|EMAIL|* এবং preference update-এর জন্য *|UPDATE_PROFILE|* উপযোগী হতে পারে। কোন tag কোথায় বসবে তা footer content-এর সঙ্গে মিলিয়ে নিন; নিজের hard-coded placeholder যেমন “123 Example Road” রেখে পাঠাবেন না।
Merge tag send-এর সময় resolve হয়। Preview-তে blank বা raw tag দেখা গেলে audience-এর default value, test contact এবং tag spelling পরীক্ষা করুন। Tag-এর চারপাশে অযথা HTML entity বা extra space দেবেন না। একটি link-এর href-এ tag বসালে visible label-ও স্পষ্ট রাখুন। Legal footer-কে campaign-এর প্রতিটি variant-এ রাখুন; repeatable block-এর ভিতরে শুধু unsubscribe রাখলে কোনো variant বাদ পড়লে compliance ও user experience দুটোই দুর্বল হতে পারে।
Staging, draft এবং test
Import শেষে কাজকে তিন স্তরে ভাগ করুন। প্রথম স্তর হলো code check: validator error নেই, সব tag বন্ধ, UTF-8 অক্ষর ঠিক, unique mc:edit আছে এবং unsubscribe link আছে। দ্বিতীয় স্তর হলো editor check: Design tab-এ প্রতিটি region দেখা যায় কি, body বদলালে table width বা padding ভাঙে কি, repeatable block থাকলে দ্বিতীয় instance যোগ করা যায় কি। তৃতীয় স্তর হলো delivery check: নিজের test address-এ email পাঠিয়ে link, image, alt text, mobile width, footer এবং merge result দেখুন।
Test করার সময় বাস্তব content দিয়ে একটি দীর্ঘ heading, দুই paragraph, একটি বড় image এবং button ব্যবহার করুন। শুধু “Hello” দিয়ে layout pass করানো অর্থহীন। Empty state-ও দেখুন: image না থাকলে alt text আসে কি, body না থাকলে blank white box থাকে কি। Dark mode, Gmail-style clipping এবং narrow phone width সম্পর্কে আলাদা করে সতর্ক থাকুন; সব client-এর pixel-perfect ফল গ্যারান্টি করা যায় না। কোনো ranking বা delivery guarantee এই template দেয় না।
Template builder-এ code edit করলে সেই template ব্যবহার করা existing draft এবং ongoing campaign-এ প্রভাব পড়তে পারে। তাই production template-এ edit করার আগে duplicate বা নতুন version বানিয়ে staging draft-এ পরীক্ষা করুন। “Save and Exit” মানেই send নয়, কিন্তু shared template-এ পরিবর্তন অন্য user-এর draft-এ দেখা যেতে পারে। Team-এর জন্য একটি ছোট change log রাখুন: date, version, changed region, asset names, test result। কাজ শেষ হলে original ZIP ও rendered test image সংরক্ষণ করুন।
Legacy ও new builder-এর পার্থক্য
mc:edit, mc:repeatable, mc:hideable এবং mc:variant-এর এই template-language workflow Mailchimp-এর legacy email builder-কেন্দ্রিক। New email builder-এর template model ও editing surface আলাদা হতে পারে। তাই legacy documentation দেখে new builder-এ একই button বা region দেখা যাবে—এমন অনুমান করবেন না। Account-এ campaign তৈরি করার সময় কোন builder খুলেছে তা লক্ষ্য করুন। পুরোনো custom template ব্যবহার করতে হলে Mailchimp যে Saved Templates বা legacy path দেখায়, সেই path অনুসরণ করুন।
New builder-এর জন্য design system আলাদা করে বানাতে হতে পারে। Legacy template-কে জোর করে নতুন builder-এর native block ধরে নেওয়া, অথবা migration না বুঝে code replace করা, content হারানোর ঝুঁকি বাড়ায়। আপনার দলের editorial workflow যদি নতুন builder নির্ভর হয়, আগে একটি non-production template import করে heading, image, CTA, footer এবং mobile style পরীক্ষা করুন। Documentation-এর version ও account UI সময়ের সঙ্গে বদলাতে পারে; বর্তমান help article-এর সঙ্গে screen মিলিয়ে নিন।
FAQ ও troubleshooting
Import menu নেই কেন?
Custom HTML advanced feature এবং Standard বা তার বেশি plan প্রয়োজন। Account role, plan এবং builder availability যাচাই করুন। কোনো plan সম্পর্কে অনুমান না করে Mailchimp-এর pricing ও account settings দেখুন।
ZIP upload হয়, কিন্তু ছবি আসে না কেন?
Archive root, একটিমাত্র HTML, 1MB-এর কম size, image format, filename case এবং code-এর exact spelling পরীক্ষা করুন। Nested folder ও uppercase mismatch সবচেয়ে সাধারণ কারণগুলোর মধ্যে পড়ে।
দুইটি region একসঙ্গে বদলে যাচ্ছে কেন?
দুটি element-এ একই mc:edit value আছে কি না দেখুন। প্রতিটি editable name unique করে নতুন template version বানান। Existing campaign-এ নাম পাল্টানোর আগে content backup নিন।
Raw *|UNSUB|* দেখা যাচ্ছে কেন?
Merge tag send-এর সময় কাজ করে। Test-এ raw tag থাকলে বানান, audience context, link tool এবং test method দেখুন। Footer-এ required address ও permission reminder-ও আছে কি না যাচাই করুন।
আমি কি WebP ব্যবহার করব?
Production email asset হিসেবে WebP সুপারিশ করছি না। JPG, JPEG, PNG বা GIF রাখুন এবং গুরুত্বপূর্ণ information alt text-এ দিন।
Code validator pass করলেও design ভাঙে কেন?
Validator syntax দেখে; inbox rendering দেখে না। Table width, inline CSS, long copy, missing image এবং client-specific behavior আলাদা করে test করুন। কোনো single preview-কে সব recipient-এর নিশ্চয়তা ভাববেন না।
শেষে একটি পরিষ্কার handoff checklist রাখুন: UTF-8 HTML, একবারের unique editable names, valid unsubscribe link, audience address merge tag, supported image formats, clean ZIP, staging preview, test email এবং version backup। এই তালিকা import-এর চেয়ে গুরুত্বপূর্ণ, কারণ template সফলভাবে account-এ ঢুকলেও recipient-এর কাছে খারাপ হলে কাজের উদ্দেশ্য পূরণ হয় না। Mailchimp-এর built-in template আপনার প্রয়োজন মেটালে সেটিই বেছে নিন; custom code তখনই ব্যবহার করুন যখন তার নিয়ন্ত্রণের মূল্য maintenance-এর দায়ের চেয়ে বেশি।
No comments:
Post a Comment