เทมเพลตอีเมลธุรกรรมโอเพนซอร์ส

เมื่อคุณตั้งค่าบัญชี SendGrid ใหม่ การสร้างชุดเทมเพลตอีเมลสำหรับบัญชีของคุณถือเป็นงานที่สำคัญที่สุดงานหนึ่งที่ต้องทำ หากคุณกำลังวางแผนที่จะส่งอีเมลผ่าน API ของเราสำหรับแอปหรือบริการของคุณ คุณจะต้องมีเทมเพลตอีเมลหลายประเภท ที่พบบ่อยที่สุดคือการรีเซ็ตรหัสผ่าน การยืนยันอีเมล และใบเสร็จ

แม้ว่าจะมีเทมเพลตอีเมลที่สร้างไว้ล่วงหน้าให้เลือกมากมายบนเว็บ การค้นหาชุดที่ปรับแต่งได้ง่ายเพื่อให้เข้ากับแบรนด์ของคุณนั้นไม่ใช่เรื่องง่ายเสมอไป

สิ่งสำคัญคือต้องทดสอบเทมเพลตในโปรแกรมรับส่งเมลทั่วไปอย่างละเอียด กระบวนการนี้อาจใช้เวลานานและทำให้ขั้นตอนการตั้งค่าบัญชี SendGrid ของคุณช้าลงและเริ่มส่งอีเมล

ฉันตระหนักว่าทีมงานที่ SendGrid สามารถมอบคุณค่าให้กับลูกค้าของเราโดยการสร้างชุดเทมเพลตอีเมลโอเพนซอร์สที่ผู้ใช้สามารถใช้ประโยชน์ได้เพื่อให้ครอบคลุมกรณีการใช้งานทั่วไปเหล่านี้ ไม่เพียงแต่เทมเพลตจะปรับแต่งได้ง่ายเท่านั้น แต่คุณยังพร้อมใช้และส่งได้อย่างรวดเร็ว!

ชุดเทมเพลตของเราซึ่งเราเรียกว่า "วาง" ครอบคลุมกรณีการใช้งาน 5 กรณี:

• รีเซ็ตรหัสผ่าน
• อีเมลยืนยัน
• จดหมายต้อนรับ
• รายรับ
• ข้อมูลย่อย (รายวัน รายสัปดาห์ หรือรายเดือน)

ดาวน์โหลดเทมเพลตบน GitHub

ในการเริ่มต้นใช้งานเทมเพลต Paste ให้ไปที่ GitHub และโคลนที่เก็บหรือดาวน์โหลดโฟลเดอร์ Paste templates นอกจากนี้ ยังควรกล่าวอีกว่าเทมเพลตเหล่านี้อยู่ในที่เก็บโอเพนซอร์สของเทมเพลตอีเมลที่ผู้ใช้ SendGrid คนอื่นๆ ได้ช่วยเหลือในช่วงงาน Hacktoberfest ครั้งล่าสุดของเรา

การปรับแต่งเทมเพลต วาง

เมื่อคุณมีเทมเพลต Paste ในเครื่องแล้ว ให้เปิดในโปรแกรมแก้ไขโค้ดที่คุณต้องการ (ฉันขอแนะนำ VSCode หรือ Atom ทั้งสองแบบฟรี)

ฉันขอแนะนำให้เริ่มต้นด้วย base.html เนื่องจากมีส่วนประกอบที่นำกลับมาใช้ใหม่ได้เกือบทั้งหมดที่พบในเทมเพลตอื่นๆ มากมาย เทมเพลตเหล่านี้ล้วนมีโครงสร้างร่วมกันสำหรับ HTML และแม้ว่าจะมีสไตล์พื้นฐานสองสามแบบในเอกสาร แต่สไตล์ส่วนใหญ่จะอยู่ในบรรทัด

เมื่อคุณรวม HTML คุณจะสังเกตเห็นความคิดเห็น HTML จำนวนมากเพื่อระบุว่าบล็อกเริ่มต้นและสิ้นสุดที่ใด นี่เป็นบันทึกสำคัญที่จะช่วยคุณเมื่อคุณสแกนดูเทมเพลตและเริ่มแก้ไข

นอกจากนี้ คุณจะสังเกตเห็นสไตล์บนองค์ประกอบ HTML สำหรับสีพื้นหลัง การพิมพ์ การเว้นวรรค ฯลฯ เราขอแนะนำให้คุณทดลองกับองค์ประกอบเหล่านี้เพื่อทำความเข้าใจว่าพวกเขาเปลี่ยนรูปลักษณ์และความรู้สึกของเทมเพลตเหล่านี้อย่างไร

เพิ่มโลโก้ของคุณไปยังเทมเพลต

สิ่งแรกที่คุณต้องทำคือแทนที่โลโก้ Paste templates ด้วยโลโก้ของคุณเอง คุณสามารถค้นหาบล็อกโลโก้ได้อย่างรวดเร็วด้วยการค้นหาความคิดเห็น HTML โดยระบุว่าเป็นจุดเริ่มต้น:

ภายในบล็อกนี้ คุณจะต้องค้นหาแท็ก anchor (<a> ) และเปลี่ยน HREF เป็น URL ของคุณ เทมเพลตควรเชื่อมโยงกับหน้าแรกของ SendGrid โดยค่าเริ่มต้น

หลังจากปรับ URL แล้ว ให้แทนที่โลโก้ Paste ด้วยของคุณเอง ฉันแนะนำให้เก็บโลโก้ของคุณไว้ที่ใดที่หนึ่งที่คุณสามารถลิงก์ไปได้อย่างง่ายดาย เช่น เว็บเซิร์ฟเวอร์หรือ CDN เมื่อคุณเปลี่ยนโลโก้ src แล้ว ให้ปรับรูปแบบอินไลน์เพื่อให้ความกว้าง/ความสูงถูกต้อง ซึ่งจะขึ้นอยู่กับอัตราส่วนกว้างยาวของโลโก้ของคุณ โดยค่าเริ่มต้น โลโก้วางจะเป็นสี่เหลี่ยมจัตุรัส 48px ดังนั้นเราจึงกำหนดรูปแบบความกว้างเป็น 48px

ตัวอย่าง:

ในตัวอย่างนี้ URL ของโลโก้วางถูกอ้างอิงพร้อมกับรูปแบบความกว้างบางส่วนเพื่อตั้งค่าให้เป็นขนาด 48px ที่ต้องการ ปรับค่าเหล่านี้สำหรับโลโก้ของคุณเองเพื่อให้ดูคมชัด

การปรับแต่งสีพื้นหลัง

ดังที่กล่าวไว้ข้างต้น สีพื้นหลังถูกกำหนดบนบล็อกต่างๆ เพื่อสร้างรูปแบบเริ่มต้นของเทมเพลต Paste (สีเทาและสีขาว) คุณสามารถเปลี่ยนสิ่งนี้ (และควร) ได้อย่างง่ายดายเพื่อให้เข้ากับสีของแบรนด์ของคุณ

วิธีที่ง่ายที่สุดในการข้ามไปมาระหว่างสไตล์เหล่านี้คือการใช้ตัวแก้ไขของคุณเพื่อค้นหาสไตล์อินไลน์ bgcolor และสีพื้นหลัง ค่าของคุณสมบัติเหล่านี้สามารถแทนที่ด้วยค่าฐานสิบหก (เช่น #000000) หรือชื่อสี (เช่น สีดำ) ในขณะที่คุณดำเนินการเปลี่ยนแปลงเหล่านี้ จะเป็นเรื่องง่ายที่จะคอยดูสิ่งต่างๆ หากคุณเปิดเทมเพลตใดเทมเพลตหนึ่งในเบราว์เซอร์ที่คุณต้องการและรีเฟรชเมื่อคุณทำการเปลี่ยนแปลง

ตัวอย่าง:

ในตัวอย่างนี้ แท็ก body ถูกกำหนดสไตล์ด้วยสีพื้นหลังสีเทาอ่อน ค่าสีนี้และอื่นๆ ภายในเทมเพลตควรปรับแต่งให้เข้ากับแบรนด์ของคุณ

ปรับแต่งปุ่ม

ปุ่มเป็นหนึ่งในองค์ประกอบอินเทอร์เฟซที่พบบ่อยที่สุดในเทมเพลตอีเมล คุณจะใช้สิ่งเหล่านี้เป็นคำกระตุ้นการตัดสินใจ โดยเน้นการดำเนินการที่สำคัญที่สุดที่คุณต้องการให้ผู้ใช้ดำเนินการ เช่น การยืนยันที่อยู่อีเมลของพวกเขา

ตามค่าเริ่มต้น ปุ่มของ Paste จะถูกจัดรูปแบบเป็นบล็อคสีน้ำเงินที่มีรัศมีเส้นขอบที่ละเอียดรอบมุม การปรับแต่งปุ่มเหล่านี้ให้เข้ากับแบรนด์ของคุณนั้นคล้ายกับการดัดแปลงที่เราได้ทำกับสีพื้นหลังของเทมเพลตของเราแล้ว ค้นหาบล็อกโดยใช้ความคิดเห็น HTML ที่เราเพิ่มให้คุณ:

เรามีเซลล์ตารางหลายเซลล์ที่ใช้พื้นหลังสีขาว (#ffffff) เพื่อสร้างบล็อกรอบๆ ปุ่ม แต่คุณจะต้องการค้นหาเซลล์ตารางที่มีสไตล์ดังต่อไปนี้

ตัวอย่าง:

ในตัวอย่างนี้ <td> มี bgcolor ที่ใช้ในการกำหนดสีของปุ่ม พร้อมด้วยรัศมีเส้นขอบเพื่อปัดเศษมุมอย่างละเอียด ทดลองใช้สไตล์เหล่านี้เพื่อให้ได้รูปลักษณ์ที่ไม่เหมือนใครสำหรับปุ่มที่เข้ากับแบรนด์ของคุณ

ส่วนที่สองของปุ่มของเราคือจุดยึด (<a> ) ภายในเซลล์ตารางที่แสดงด้านบน

จุดยึดนี้ควบคุม URL ที่ปุ่มของคุณจะไปเมื่อคลิก แต่ยังรวมถึงรูปแบบข้อความสำหรับป้ายกำกับด้วย คุณสามารถปรับสไตล์เพื่อปรับป้ายกำกับตามความต้องการและสิ่งที่ตรงกับแบรนด์ของคุณได้

การปรับแต่งตัวอักษร

ตามค่าเริ่มต้น เทมเพลต Paste จะโหลดในเว็บฟอนต์ Source Sans Pro ผ่าน Google Fonts คุณสามารถใช้แบบอักษรเว็บอื่นจากคอลเล็กชันของ Google หรือใช้ชุดแบบอักษรมาตรฐานที่พบในคอมพิวเตอร์ส่วนใหญ่ในปัจจุบัน (Arial, Georgia, Times ฯลฯ)

หากคุณกำลังวางแผนที่จะใช้เว็บฟอนต์อื่น โปรดดูคำแนะนำและเคล็ดลับการพัฒนาอีเมลของฉันสำหรับคำแนะนำที่เป็นประโยชน์ ตรวจสอบให้แน่ใจว่าคุณรวม HTML สำหรับสไตล์อินไลน์ที่อ้างอิงตระกูลฟอนต์และปรับตามความต้องการของคุณ

ตัวอย่าง:

ในตัวอย่างนี้ <td> มีการตั้งค่ารูปแบบแบบอักษรให้ใช้ Source Sans Pro โดยมีการถอยกลับไปใช้แบบอักษรมาตรฐานในกรณีที่ไม่สามารถโหลดแบบอักษรของเว็บได้

จบความคิด

ฉันหวังว่าคำแนะนำเหล่านี้จะช่วยคุณปรับแต่งเทมเพลตเหล่านี้ให้เหมาะกับแบรนด์ของคุณและช่วยให้คุณเริ่มต้นใช้งานบนแพลตฟอร์มของ SendGrid ในอนาคต ฉันหวังว่าจะขยายพื้นที่เก็บข้อมูลเทมเพลตอีเมลของเราด้วยเทมเพลตเพิ่มเติม แต่ยังเป็นเครื่องมือสร้างที่จะทำให้กระบวนการปรับแต่งเร็วขึ้นมาก

หากคุณประสบปัญหาใดๆ ระหว่างทาง โปรดส่งปัญหาเกี่ยวกับ repo GitHub และหากคุณต้องการมีส่วนร่วม โปรดส่งคำขอดึง กำลังมองหาเทมเพลตเพิ่มเติมเพื่อทดลองใช่หรือไม่ ลองใช้เทมเพลตอีเมล HTML ที่ตอบสนองได้ฟรีของ SendGrid