「自訂彈跳視窗」

• 精準溝通：可依裝置、來源、瀏覽行為設定不同內容，傳遞對的人

• 提升轉換率：快速導引用戶註冊、領券或下單，有效促進成交

• 操作彈性高：支援多種樣式與時機設定，靈活搭配行銷活動使用



✎ 重點拆解：



一、「自訂彈跳視窗」設定路徑

二、「自訂彈跳視窗」語法

▪︎ 彈跳視窗文字內容

▪︎ 彈跳視窗滿版圖片連結

二、「自訂彈跳視窗」其他應用方式

▪︎ 未滿18歲警告視窗



一、「自訂彈跳視窗」設定路徑


設定路徑：擴充 > HTML自訂語法區塊。



 

 二、「自訂彈跳視窗」語法


▪︎ 彈跳視窗文字內容



<div id="pop-welcome-content" style="display:none;">
<h2>Hello! 彈跳視窗</h2>
</div>
<script>
setTimeout(function(){
$.fancybox.open({
src : '#pop-welcome-content',
type : 'inline'
});
}, 1000);
</script>

 


\ 紅字部分放入，需彈跳的內容 /

 

▪︎ 彈跳視窗滿版圖片連結 



<style type="text/css">

  #pop-welcome-content{padding:0}

  /*去除圖片連結框線*/

  #pop-welcome-content a:focus{outline:none}

</style>

<div id="pop-welcome-content" style="display:none;"><a href="連結放這邊"><img onerror="imgError(this);" data-fr-src="圖片連結放這邊" /></a></div>

</script>



\ 紅字部分放入，需放圖片連結 /

  



二、「自訂彈跳視窗」其他應用方式


▪︎ 未滿18歲警告視窗

＊可貼在需要的頁面裡




<div id="pop-welcome-content" style="display:none;">

  <h2>請注意 未滿18歲，不能購買！</h2>

  <a class="button" href="/">離開</a>

  <a class="button" data-fancybox-close href="javascript:;">我已滿18歲</a>

</div>

<style type="text/css">

  .fancybox-close-small {

    display:none;

  }

</style>

</script>