首页 > 解决方案 > 如何不向 Klaviyo 订阅者显示 JQuery 模式?

问题描述

我有一个运行良好的 JQuery Modal 弹出窗口,但我们需要为其添加额外的功能。我们需要它不显示给已经 Klaviyo 的订阅者。

这是弹出窗口的代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<script src="https://insideoutcreative.io/wp-content/themes/io-theme/css/jquery.cookie.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<style>
div#ex1 {
height: 415px;
    max-width: 650px !important;
}
a.close-modal {
    display: none !important;
}
/*for background image*/
img.bg-img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 0;
    height: 100%;
}
.close-btn {
    background: #da0000;
}
/*.img-txt {*/
/*    padding-top: 110px;*/
/*}*/
/*overrides klaviyo form*/
.kgtZbf.kgtZbf {
    align-items: center;
}
@media screen and (max-width:450px){
    .kgtZbf.kgtZbf {
    display: block;
}
.modal .gMGRIY.gMGRIY {
    justify-content: center;
    padding-bottom: 20px;
}
.img-txt {
    width: 100%;
}
}
</style>
<script type="text/javascript">
 $(document).ready(function() {
      if (window.location.pathname == '/testing-closing-of-popup') {
    if ($.cookie('modal_shown') == null) {
        $.cookie('modal_shown', 'yes', { expires: 30, path: '/' });
        $(function(){
            setTimeout(function(){   
    $('#modalButton').trigger('click');
            }, 15000);
});
    }
};


});
</script>
<!-- Modal HTML embedded directly into document -->
<div id="ex1" class="modal text-center position-relative">
    <img src="https://kryptek.com/asset/5f7f6f5f102c7" width="100%" class="bg-img" />
<img src="https://kryptek.com/asset/5f7f6d2b25139" width="80%" class="img-txt position-relative float-left" style="padding-top:20px;" />
  <img src="https://kryptek.com/asset/5f7f5b678fb56" width="250px" height="auto" class="position-relative" />
  <div class="klaviyo-form-SXGhkE"></div>
  <a href="#" rel="modal:close" class="position-relative close-btn text-white pl-4 pr-4 pt-1 pb-1">No Thank You, Close Popup</a>
</div>
<!-- Link to open the modal -->
<p style="position:fixed;z-index:-1;"><a id="modalButton" href="#ex1" rel="modal:open">Open Modal</a></p>

如前所述,弹出窗口工作正常,但我不确定如何添加额外功能以仅向“新”人而不是 Klaviyo 订阅者显示。您可以在此处查看弹出窗口的示例:https ://kryptek.com/testing-closing-of-popup

我尝试与他们聊天,他们所做的只是将我发送到这些关于他们的 API 集成的文章,我不太了解。

JavaScript API 入门:https ://www.klaviyo.com/docs/getting-started 服务器端 API 概述:https ://www.klaviyo.com/docs

任何帮助表示赞赏,如果您有任何问题,请告诉我。

标签: javascripthtmljquerycss

解决方案


推荐阅读