วิธีสร้างไลท์บ็อกซ์ป๊อปอัปบนไซต์ของคุณ (ทีละขั้นตอน)

เผยแพร่แล้ว: 2021-12-31

กำลังมองหาวิธีสร้างป๊อปอัปไลท์บ็อกซ์สำหรับไซต์ของคุณหรือไม่?

ป๊อปอัปไลท์บ็อกซ์มีประสิทธิภาพอย่างเหลือเชื่อสำหรับการจับลูกค้าเป้าหมาย พวกเขาออกแบบมาเพื่อโน้มน้าวใจและเปลี่ยนใจเลื่อมใส

แต่การต้องเขียนโค้ดตั้งแต่เริ่มต้นเป็นความเจ็บปวดอย่างแท้จริง ประการหนึ่ง คุณต้องรู้ HTML, CSS และ Javascript มากเพียงพอเพื่อสร้างป๊อปอัปพร้อมกับกฎทริกเกอร์สำหรับเวลาที่จะแสดง จากนั้น คุณจะต้องสร้างการรวมด้วยตนเองกับผู้ให้บริการอีเมลของคุณ และสุดท้าย คุณต้องจัดการกับปัญหาความเป็นส่วนตัวและความปลอดภัย

ข่าวดี: มีวิธีที่ง่ายกว่ามาก

ในบทความนี้ เราจะแสดงวิธีเปิดป๊อปอัปไลท์บ็อกซ์โดยไม่มีการเข้ารหัสภายในเวลาไม่ถึง 10 นาที

มาดำดิ่งกัน

ไลท์บ็อกซ์ป๊อปอัปคืออะไร

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

ตัวอย่างป๊อปอัปไลท์บ็อกซ์

ในขั้นต้น แนวคิดของไลท์บ็อกซ์มาจากการโฆษณากลางแจ้ง:

โฆษณาไลท์บ็อกซ์

จากนั้น นักพัฒนาบางคนคิดว่านี่เป็นเอฟเฟกต์ที่ยอดเยี่ยมจริงๆ และพวกเขาสร้างไลบรารี Javascript เพื่อสร้างเอฟเฟกต์เดียวกันบนเนื้อหาเว็บ ต่อมา แนวคิดในการใช้ป๊อปอัปไลท์บ็อกซ์ก็เข้ามามีบทบาท

ทำไมไลท์บ็อกซ์ป๊อปอัปจึงทำงาน

ป๊อปอัปไลท์บ็อกซ์จับอีเมลมากกว่าแบบฟอร์มการเลือกอีเมลแบบเดิม

แต่ทำไมพวกเขาถึงทำงาน?

มาดูเหตุผลหลักว่าทำไมป๊อปอัปไลท์บ็อกซ์จึงทำงานได้ดี

#1. ป๊อปอัปไลท์บ็อกซ์มีคำกระตุ้นการตัดสินใจที่ชัดเจน

คนส่วนใหญ่เชื่อว่าการให้ทางเลือกมากมายแก่ลูกค้าเป็นเรื่องดี

แต่นั่นไม่เป็นความจริงเลย

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

ดังนั้น อัตราการแปลงจึงค่อนข้างดี

#2. ป๊อปอัปไลท์บ็อกซ์ไม่สามารถเพิกเฉยได้

ป๊อปอัปไลท์บ็อกซ์จะกินพื้นที่ทั้งหน้าจอและเบลอทุกอย่างที่เหลือ ดังนั้นจึงแทบจะเป็นไปไม่ได้เลยที่จะเพิกเฉยต่อพวกเขา

โดยเฉพาะอย่างยิ่งหากเป็นภาพเคลื่อนไหว:

เอฟเฟกต์แอนิเมชั่นป๊อปอัพ

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

#3. ป๊อปอัปไลท์บ็อกซ์มีทริกเกอร์ส่วนบุคคล

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

สำหรับลูกค้าใหม่ คุณสามารถเรียกใช้แคมเปญต้อนรับ:

ป๊อปอัปคูปอง

แต่สำหรับลูกค้าที่กลับมาซื้อซ้ำ คุณอาจต้องการส่งข้อเสนออื่นให้พวกเขา:

ป๊อปอัปคูปองงานหมั้น

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

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

ป๊อปอัปทางออกการใช้ชีวิตในชนบท

#4. ป๊อปอัปไลท์บ็อกซ์สามารถจับภาพผู้เยี่ยมชมที่ถูกละทิ้งได้

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

ออกจากป๊อปอัปเจตนา

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

วิธีสร้างป๊อปอัปไลท์บ็อกซ์

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

บ้าน OptinMonster

Jared Ritchey เป็นชุดเครื่องมือการแปลงอันดับ 1 ของโลกและเราใช้มันเอง OptinMonster ทำให้การสร้างป๊อปอัปทรงพลังที่แปลงเป็นเรื่องง่ายสุด ๆ และคุณจะไม่ต้องใช้การเข้ารหัสใดๆ เลย

เรายังเขียนรีวิวฉบับสมบูรณ์ของ OptinMonster

คุณสามารถตรวจสอบหรือเริ่มต้นแคมเปญของคุณได้ทันที สิ่งที่คุณต้องทำคือลงชื่อสมัครใช้ Jared Ritchey และปฏิบัติตามส่วนที่เหลือของบทความนี้

ขั้นตอนที่ #1: สร้างแคมเปญ

ตรงไปที่แดชบอร์ด OptinMonster ของคุณและกดปุ่ม สร้าง :

สร้างแคมเปญป๊อปอัปใหม่

เลือกประเภทแคมเปญ ไลท์บ็อกซ์ป๊อปอัป :

สร้างไลท์บ็อกซ์ป๊อปอัป

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

เลือกธีมแคมเปญป๊อปอัป

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

นอกจากนี้คุณยังสามารถใช้ Jared Ritchey กับหลาย ๆ ไซต์ได้ขึ้นอยู่กับแผนของคุณ ดังนั้น เลือกเว็บไซต์ที่คุณต้องการแสดงแคมเปญของคุณด้วย

สร้างเอกลักษณ์ของแคมเปญ

กด เริ่มสร้าง เมื่อคุณทำเสร็จแล้ว

ขั้นตอนที่ #2: แก้ไขป๊อปอัปของคุณ

ด้วย Jared Ritchey คุณจะได้รับเครื่องมือสร้างป๊อปอัปแบบลากและวาง เมื่อคุณสร้างแคมเปญเสร็จแล้ว คุณจะสามารถแก้ไขรายละเอียดที่เล็กน้อยที่สุดเกี่ยวกับป๊อปอัปของคุณได้ เริ่มต้นด้วยการแก้ไขพาดหัวป๊อปอัปของคุณ:

แก้ไขพาดหัวของคุณ

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

จากนั้น ปรับข้อความปุ่มและลักษณะที่ปรากฏเพื่อสร้างคำกระตุ้นการตัดสินใจที่ชัดเจน:

ปรับแต่ง CTAs

เมื่อคุณพอใจกับลักษณะที่ปรากฏของป๊อปอัปแล้ว คุณสามารถไปยังการตั้งค่าขั้นสูงเพิ่มเติมได้

ขั้นตอนที่ #3: ตั้งกฎการแสดงผล

กฎการแสดงผลมีขึ้นเพื่อกำหนดว่าเมื่อใดที่แคมเปญของคุณจะปรากฏบนไซต์ของคุณและใครที่มองเห็น

กฎการแสดงป๊อปอัป

คำแนะนำของเราคือให้คุณเปลี่ยนเงื่อนไขทริกเกอร์เป็นความตั้งใจออก:

ป็อปอัพไลท์บ็อกซ์แบบตั้งใจออก

คลิก ขั้นตอนต่อไป เพื่อเลือกการ ดำเนินการ ที่นี่ เราขอแนะนำให้คุณตั้งค่า แสดงมุมมองแคมเปญ เป็น Optin View ตั้งค่าการ แสดงด้วย MonsterEffect เป็นแอนิเมชั่นรายการใดก็ได้ที่คุณชอบ และ เล่นเอฟเฟกต์เสียง เป็นเอฟเฟกต์เสียงสำหรับป๊อปอัปของคุณ

การตั้งค่าการดำเนินการของแคมเปญ

จากนั้นให้คลิกปุ่ม ขั้นตอนถัดไป คุณสามารถดูการตั้งค่าทั้งหมดของคุณได้ในแท็บสรุป

ขั้นตอนที่ #4: ตั้งค่าการรวมอีเมลของคุณ

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

การรวม OptinMonster

เราขอแนะนำให้ใช้ Drip สำหรับการตลาดผ่านอีเมลของคุณ หากคุณยังไม่มีผู้ให้บริการอีเมล

ขั้นตอนที่ #5: เผยแพร่ไลท์บ็อกซ์ป๊อปอัปของคุณ

เมื่อคุณสร้างแคมเปญใหม่ แคมเปญจะถูก หยุดชั่วคราว โดยค่าเริ่มต้น

ไปที่แท็บ เผยแพร่ จากเมนูด้านบนเพื่อดู ตัวเลือกการเผยแพร่ จากนั้นตั้งค่าสถานะเป็น เผยแพร่ และเลือกแพลตฟอร์มเว็บไซต์:

เผยแพร่แคมเปญ OptinMonster

หากคุณกำลังใช้งานไซต์ WordPress ปลั๊กอิน OptinMonster จะจัดการการตั้งค่าที่เหลือโดยอัตโนมัติ มันเหมือนกันสำหรับ Shopify และ BigCommerce สำหรับไซต์อื่นๆ ให้คลิกที่ ไซต์ใดๆ แล้ววางโค้ดสำหรับฝังลงในส่วนหัวของเว็บไซต์ของคุณ:

Global Embed

และคุณทำเสร็จแล้ว!

ห่อ

นั่นคือทั้งหมดสำหรับสิ่งนี้ คน!

แจ้งให้เราทราบหากบทความนี้ช่วยได้ การสร้างป๊อปอัปบนไซต์ของคุณสามารถช่วยให้คุณแปลงปริมาณการใช้งานของคุณให้เป็นสมาชิกอีเมลและนำไปสู่ธุรกิจที่แท้จริงได้ และเราขอแนะนำให้คุณเริ่มสร้างป๊อปอัปไลท์บ็อกซ์ทันที

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

ไม่มั่นใจ? ตรวจสอบแหล่งข้อมูลเหล่านี้:

  • 7 กลยุทธ์อันชาญฉลาดเพื่อเพิ่มการมีส่วนร่วมของลูกค้า
  • การแจ้งเตือนแบบพุชมีผลหรือไม่ 7 สถิติ + 3 คำแนะนำจากผู้เชี่ยวชาญ
  • วิธีตั้งค่าการแจ้งเตือนแบบพุชของรถเข็นที่ถูกละทิ้ง (บทช่วยสอนอย่างง่าย)

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