WordPress.org
Get WordPress

Plugin Directory

Changeset 3128733


Ignore:
Timestamp:
07/31/2024 11:51:19 AM (19 months ago)
Author:
taboolawordpress
Message:

Added the web push integration functionality and enabled push notifications

Location:
taboola
Files:
25 added
4 edited

Legend:

Unmodified
Added
Removed

  • taboola/trunk/js/js_inject.min.js

    r3114478 r3128733  
     1
    12function insertAfter(e, t) {
    23    t.parentNode.insertBefore(e, t.nextSibling)

  • taboola/trunk/readme.txt

    r3114478 r3128733  
    33Tags: content recommendations, taboola, discovery,ad networks, ads, advertising, affiliate, content ads, contextual ads, Contextual Advertising, engagement, income, monetization, monetize, pay per click, popular posts, posts, ppc, related, Related Content, related post thumbnails, related posts, relevant ads, revenue, similar posts, text ads, widgets,recommendations,thumbnails, traffic, widget
    44Requires at least: 5.2
    5 Tested up to: 6.3.2
     5Tested up to: 6.6.0
    66Stable tag: trunk
    77License: GNU General Public License v3.0
    … …  
    6060== Changelog ==
    6161
     62= 2.2.2 =
     63* Added the web push integration functionality and enabled push notifications
     64
     65= 2.2.1 =
     66* The webPush scripts have been added to all pages, including Home, Category, and Article pages.
     67
     68= 2.2.0 =
     69* Placed the Service Worker in the root directory
     70
     71= 2.1.0 =
     72* Resolved the error and warnings
     73
     74= 2.0.0 =
     75* Added the SDK script on the blog pages
     76
    6277= 2.1.1 =
    63 * Fixed a bug that sometimes caused the creation of the settings table to fail, for certain MySQL versions.
     78* Fixed a bug that sometimes caused the creation of the settings table to fail, for certain MySQL versions
    6479
    6580= 2.1.0 =

  • taboola/trunk/settings.php

    r3114478 r3128733  
    77
    88<style>
    9 
    10     a {
    11         color: rgb(68,114,196);
    12         text-decoration: none;
    13         font-weight: bold;
    14     }
    15 
    16     .taboola-container {
    17         padding: 20px;
    18         padding-left: 0;
    19         font-size: 14px;
    20         background-color: #FAF9F6;
    21         font-family: Roboto,Lato,Hind -apple-system,Helvetica Neue,sans-serif;
    22     }
    23 
    24     .settings_block {
    25         background-color: #fff;
    26         border: 1px solid #d4d9df;
    27         border-radius: 8px;
    28         margin-top: 10px;
    29         width: 50%;
    30     }
    31 
    32     .settings_block.widget_settings_block { /* Give the widget settings block some extra space at the end */
    33         padding-bottom: 15px;
    34     }
    35 
    36     .settings_block input {
    37         border-color: #ccc; /* Most of the inputs are styled via jQuery. This is for any others - e.g. #publisher-id */
    38     }
    39 
    40     .publisher_welcome_massage{
    41         float: right;
    42         width: 36%;
    43         padding: 20px 10px 10px 0px;
    44         margin: 40px 6% 0 0;
    45         background: #FFFACD;
    46         border: 1px solid #d4d9df;
    47         border-radius: 20px;
    48     }
    49 
    50     .switch_style{
    51         margin : 10px 10px 20px 10px;
    52     }
    53 
    54     .style_box1, .pub_id{
    55         padding: 10px 10px 0px 20px;
    56     }
    57 
    58     .statement{
    59         padding: 10px 10px 10px 20px;
    60     }
    61 
    62     .widget_below, .widget_below_mid, .widget_below_mid_selector, .widget_below_home, .widget_below_home_selector{
    63         width: 50%;
    64         float: left;
    65         padding: 5px 0px 0px 20px;
    66     }
    67    
    68     .mode_style, .mode_style_mid, .mode_style_home, .mode_style_home_selector{
    69         width: 50%;
    70         padding: 0px 0px 3px 20px;
    71         float:left;
    72     }
    73 
    74     .placement_style, .placement_style_mid, .placement_style_home_occurrence,.placement_style_home {
    75         padding: 0px 0px 8px 0px;
    76         width: 50%;
    77         float: right;
    78     }
    79 
    80     .widget_below_mid_selector{
    81         padding: 8px 0px 0px 0px;
    82     }
    83 
    84     .placement_below_mid_occurrence,.mode_style_mid_selector {
    85         padding: 0px 0px 8px 20px;
    86     }
    87 
    88     .heading_mid_home{
    89         padding: 20px 0px 8px 20px;
    90     }
    91 
    92     #mid_occurrence_div, #mid_css_selector_div {
    93         width: 50%;
    94         float: left;
    95         margin: 19px 0px 0px 0px;
    96     }
    97 
    98     /* slider button CSS */
    99 
    100     .switch {
    101         position: relative;
    102         display: inline-block;
    103         width: 45px;
    104         height: 20px;
    105         float: right;
    106     }
    107 
    108     .switch input {
    109         opacity: 0;
    110         width: 0;
    111         height: 0;
    112     }
    113 
    114     .slider {
    115         position: absolute;
    116         cursor: pointer;
    117         top: 0;
    118         left: 0;
    119         right: -1px;
    120         bottom: 0;
    121         background-color: #ccc;
    122         -webkit-transition: .4s;
    123         transition: .4s;
    124     }
    125 
    126     .slider:before {
    127         position: absolute;
    128         content: "";
    129         height: 18px;
    130         width: 18px;
    131         left: 1px;
    132         bottom: 1px;
    133         background-color: white;
    134         -webkit-transition: .4s;
    135         transition: .4s;
    136     }
    137 
    138     input:checked + .slider {
    139         background-color: #0f4c81;
    140     }
    141 
    142     input:focus + .slider {
    143         box-shadow: 0 0 1px #0f4c81;
    144     }
    145 
    146     input:checked + .slider:before {
    147         -webkit-transform: translateX(26px);
    148         -ms-transform: translateX(26px);
    149         transform: translateX(26px);
    150     }
    151 
    152     /* Rounded sliders */
    153 
    154     .slider.round {
    155         border-radius: 34px;
    156     }
    157 
    158     .slider.round:before {
    159         border-radius: 50%;
    160     }
    161 
    162     /* slider button CSS */
    163 
    164     .request_link {
    165         float: right;
    166         margin-right: 10px;
    167         line-height: 26px;
    168     }
    169 
    170 /* hide and position tooltip */
    171 
    172     .tooltip div{
    173         visibility: hidden;
    174         width: auto;
    175         display: inline-block;
    176         background: #0f4c81;
    177         color: #ffffff;
    178         font-weight: normal;
    179         font-size: 12px;
    180         border-radius: 6px;
    181         padding: 5px;
    182         margin-left: 5px;
    183         max-width: 350px;
    184         position: absolute;
    185         z-index: 999;
    186         transition-delay: 0.25s;
    187     }
    188 
    189     .tooltip div a:hover{
    190         text-decoration: underline;
    191     }
    192 
    193     .tooltip{
    194         opacity: 1 !important;
    195         font-size: 13px !important;
    196         display: contents !important;
    197     }
    198 
    199     .tooltip:hover div{
    200         visibility: visible;
    201         transition-delay: 0.5s;
    202     }
    203 
    204     .tooltip div a{
    205         text-decoration: none;
    206         font-weight: bold;
    207         color: #fff;
    208     }
    209 
    210     .label-success {
    211         background: #a4fba6 !important;
    212         border: 1px solid #d2f2d4;
    213         border-radius: 10px;
    214         padding: 10px 30px 20px 10px;
    215         font-size: 14px;
    216         display: block;
    217         margin-top: 10px;
    218         color: green;
    219         width: 50%;
    220     }
    221     .label-error {
    222         background: #ffbaba;
    223         border: 1px solid #ffbaba;
    224         border-radius: 10px;
    225         padding: 10px 30px 20px 10px;
    226         font-size: 14px;
    227         display: block;
    228         margin-top: 10px;
    229         color: red;
    230         width: 50%;
    231     }
    232 
    233     .label-error ul {
    234         list-style-position: inside;
    235         list-style-type: disc;
    236         text-indent: 2em;
    237     }
    238 
    239     .label-error p {
    240         font-size: 14px;
    241     }
    242 
    243     .change_button{
    244         float: right;
    245     }
    246 
    247     .apply_button{
    248         /* margin-top: 20px; */
    249         background-color: #0f4c81;
    250         color: #fff;
    251         padding: 0.8rem 1rem;
    252         border-radius: 7px;
    253         border: transparent;
    254         float: right;
    255     }
    256 
    257     .apply_button:hover {
    258         background-color: #1261A0;
    259         cursor: pointer;
    260     }
    261 
    262     .helpTooltip__icon___1XWGN,
    263     .helpTooltip__icon___1XWGN_read{
    264         color: #b8c1ca;
    265         width: 1em;
    266         height: 1em;
    267         margin: 4px;
    268     }
    269 
    270     .helpTooltip__icon___1XWGN_read{
    271         margin-top: 4px;
    272     }
    273 
    274     .helpTooltip__icon___1XWGN_first{
    275         color: #b8c1ca;
    276         width: 1em;
    277         height: 1em;
    278     }
    279 
    280     .checkbox_read{
    281         padding: 0px 0px 5px 20px;
    282         float: left;
    283     }
    284 
    285     label:hover{
    286         cursor: default;
    287     }
    288 
    289     ::placeholder{
    290         color: #DEDEDE;
    291     }
    292 
    293     .widget_h2,.general_h2{
    294         font-size: 18px;
    295         font-weight: 500;
    296     }
    297 
    298     .list_l1{
    299         border-top: 1px solid #DEDEDE;
    300         margin: 30px 20px 0px 0px;
    301         margin-left: 14%;
    302     }
    303 
    304     .theme_image{
    305         width: 50%;
    306     }
    307 
    308     .welcome_heading{
    309         margin-left: 8%;
    310         font-size: 1.5em;
    311     }
    312 
    313     .first_p,
    314     .second_p{
    315         margin-left: 14%;
    316         font-size: 14px;
    317     }
    318 
    319     .list_l1 p{
    320         font-size: 13px;
    321     }
    322 
    323     input#publisher-id,
    324     input#first_bc_placement,
    325     input#mid_placement,
    326     input#home_placement{
    327         width: 36%;
    328     }
    329 
    330     input#first_bc_widget_id,
    331     input#mid_widget_id,
    332     input#mid_location_string,
    333     input#home_widget_id,
    334     input#home_location_string{
    335         width: 77%;
    336     }
    337    
    338     label{
    339         font-weight: normal !important;
    340     }
    341 
    342     label#pub_id{
    343         color: #000000;
    344     }
    345 
    346     input#out_of_content_enabled {
    347         height: 16px;
    348         width: 16px;
    349     }
    350 
    351     input[type=checkbox]:checked::before {
    352         width: 1.8rem !important;
    353     }
    354 
    355     input[type=checkbox]:focus {
    356         outline: none !important;
    357         outline-offset: 0px !important;
    358     }
    359 
    360     input[type=checkbox]{
    361         margin: -5px 0 0;
    362     }
    363 
    364     #homepage{
    365         display: none;
    366     }
    367 
    368     #show-advanced-settings{
    369         text-decoration: none;
    370         color: #666666;
    371         margin-top: 5px;
    372         cursor: pointer;
    373         float: left;
    374         width: 50%;
    375         font-family: Roboto, Lato, "Hind -apple-system", "Helvetica Neue", sans-serif;
    376         font-style: italic;
    377     }
    378 
    379     #advanced-settings-main{
    380         margin: 10px 0px 0px 10px;
    381         width: 49%;
    382     }
    383 
    384     div#mid_article {
    385         padding-bottom: 100px;
    386     }
    387 
    388     #mid_css_selector_div{
    389         display: none;
    390     }
    391 
    392     input.highlight {
    393         border: 1px solid orange !important;
    394     }
    395 
    396     #rightrail-banner{
    397         border: 1px solid #d4d9df;
    398         border-radius: 10px;
    399         background: rgba(51, 125, 247, 0.1);
    400         padding: 10px;
    401 
    402         width: 95%;
    403         margin: auto;
    404         /* color: #0f4c81; */
    405     }
    406 
    407     #right-rail{
    408         padding-top: 10px;
    409     }
    410 
    411     hr {
    412         border-top: 1px solid lightgray;
    413     }
    414 
     9    <?php include 'css/main.css'; ?>
    41510</style>
    416 
    417 <?php
    418 
    419 // $short_version =strlen(TABOOLA_PLUGIN_VERSION) == 5 ? substr(TABOOLA_PLUGIN_VERSION,0,3) : ""; // E.g. '2.1.0' => '2.1' (else '')
    420 
    421 ?>
    422 
    423   <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    424   <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> -->
    425 
    42611
    42712<div class="taboola-container">
    … …  
    43015    </div>
    43116
    432     <h2 style="font-size:1.7em;">Taboola WordPress Plugin 2</h2>
     17    <h2 style="font-size:1.7em;">Taboola WordPress Plugin</h2>
     18
     19    <h2 class="nav-tab-wrapper">
     20        <a href="#tab1" class="nav-tab" id="tab1-link">Web</a>
     21        <a href="#tab2" class="nav-tab" id="tab2-link">Web Push</a>
     22    </h2>
    43323
    43424<!-- errors/success message -->
    … …  
    47767</script>
    47868
     69<!-- tab-switching JQuery -->
     70<script>
     71jQuery(document).ready(function($) {
     72    function showTab(tabId) {
     73        $('.nav-tab').removeClass('nav-tab-active');
     74        $('.tab-content').removeClass('active').hide();
     75       
     76        $('a[href="' + tabId + '"]').addClass('nav-tab-active');
     77        $(tabId).addClass('active').show();
     78    }
     79
     80    // On tab click, update the URL hash and hidden input value
     81    $('.nav-tab').click(function(e) {
     82        e.preventDefault();
     83        var tabId = $(this).attr('href');
     84        window.location.hash = tabId;
     85        $('#active_tab').val(tabId);
     86        showTab(tabId);
     87    });
     88
     89    // On page load, show the tab from the URL hash or default to the first tab
     90    var hash = window.location.hash;
     91    if (hash) {
     92        showTab(hash);
     93        $('#active_tab').val(hash);
     94    } else {
     95        showTab('#tab1');
     96    }
     97
     98    // Set the active tab before form submission
     99    $('form').submit(function() {
     100        var activeTab = $('.nav-tab.nav-tab-active').attr('href');
     101        $('#active_tab').val(activeTab);
     102    });
     103});
     104</script>
     105
    479106<script>
    480107$(document).ready(function(){
    … …  
    529156        }
    530157    });
    531 
    532158});
    533159</script>
    534160
    535161
    536 
    537162<!-- Welcome Massage -->
    538163
    539164    <div class="publisher_welcome_massage">
    540         <h2 class="welcome_heading">Welcome to Taboola WordPress Plugin 2!</h2>
     165        <h2 class="welcome_heading">Welcome to Taboola WordPress Plugin</h2>
    541166        <p class="first_p">For detailed instructions, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements" target='_blank'>Taboola Dev Center.</a></p>
    542167        <p class="second_p"><b>Stuck? Need a hand?</b> Feel free to reach out via our <a href="https://developers.taboola.com/web-integrations/discuss" target='_blank'>Online Community</a>.</p>
    … …  
    548173<!--  Welcome Massage-->
    549174
    550     <form method="POST">
    551 
    552   <?php 
     175<form method="POST">
     176<?php
    553177    // Generate a nonce and pass it via a hidden field
    554178    $my_nonce = wp_create_nonce( 'my_plugin_update_field_action' );
    555   ?>
    556 
    557   <input type="hidden" name="my_plugin_nonce" value="<?php echo esc_attr( $my_nonce ); ?>"/>
    558 
    559         <h2 class="general_h2">General Settings</h2>
    560    
    561         <div class="settings_block">
    562             <div class="style_box1"><label id="pub_id">Publisher ID :</label>
    563              <div class="tooltip">
    564                     <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
    565                     <!-- <img class="helpTooltip__icon___1XWGN" src='<?php echo $this->plugin_url.'img/tooltip_image.svg' ?>'/> -->
    566                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first">
    567                             <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
    568                         </g>
    569                     </svg>
    570                     <!-- <div id="arrow" ></div> -->
    571                     <div>Your Publisher ID, as provided by Taboola.</div>
    572                 </div>
    573             </div>
    574             <div class="pub_id">
    575                 <input id="publisher-id" type="text" name="publisher_id" placeholder="publisher" value="<?php echo !empty($settings->publisher_id) ? strip_tags($settings->publisher_id) : '' ?>"/>
    576             </div>
    577             <div class="statement">
    578             <label style="color: #000000; padding-">
    579                 Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started.
    580             </label>
    581             </div>
    582         </div>
    583 
    584 
    585 <!-- Below Article Widget -->
    586     <h2 class="widget_h2">Taboola Units</h2>
    587     <div id="below_article" class="settings_block widget_settings_block">
    588           <div class="switch_style">
    589             <label class="switch">
    590               <input id="first_bc_enabled" type="checkbox" <?php echo !empty($settings->first_bc_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#below_article', this)" name="first_bc_enabled" />
    591               <span class="slider round"></span>
    592             </label>
    593             <b style="font-size:15px;">Below-article</b>
    594           </div>
    595           <div class="label_below">
    596             <div class="mode_style">
    597               <label id="first_bc_widget_id_label" style="float:left;">Mode (Widget ID):</label>
    598               <div class="tooltip">
    599                 <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
    600                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
    601                   <g fill="none" fill-rule="evenodd">
    602                     <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
    603                   </g>
    604                 </svg>
    605                 <div>Your <i>below-article</i> Mode (Widget ID), as provided by Taboola. </div>
    606               </div>
    607             </div>
    608             <div class="placement_style">
    609               <label id="first_bc_placement_label" style="float:left;">Placement Name:</label>
    610               <div class='tooltip'>
    611                 <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
    612                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
    613                   <g fill="none" fill-rule="evenodd">
    614                     <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
    615                   </g>
    616                 </svg>
    617                 <div>Your <i>below-article</i> Placement Name, as provided by Taboola. <br>
    618                   <br> When upgrading from v1, fill in 'below-article'. <br>
    619                   <br> For more information, reach out via our <a href="https://developers.taboola.com/web-integrations/discuss" target='_blank'>Online Community</a>, or contact Taboola Support.
    620                 </div>
    621               </div>
    622             </div>
    623           </div>
    624           <div class="input_below">
    625             <div class="widget_below">
    626               <input id="first_bc_widget_id" type="text" value="<?php echo !empty($settings->first_bc_widget_id) ? strip_tags($settings->first_bc_widget_id) : "" ?>" name="first_bc_widget_id" placeholder="Widget ID" />
    627             </div>
    628             <div class="placement_below">
    629               <input type="text" id="first_bc_placement" value="<?php echo !empty($settings->first_bc_placement) ? strip_tags($settings->first_bc_placement) : "" ?>" name="first_bc_placement" placeholder="Placement Name" />
    630             </div>
    631           </div>
    632 
    633           <!-- Below Article Widget -->
    634           <!-- Advanced Settings -->
    635           <br />
    636           <div class='location_section'>
    637             <div class='checkbox_read'>
    638               <input id="out_of_content_enabled" type="checkbox" <?php echo !empty($settings->out_of_content_enabled) ? "checked='checked'" : "" ?> name="out_of_content_enabled" />
    639               <label id="out_of_content_enabled_label">Place the feed/widget just after the article container (required for <b>Read More</b>)</label>
    640             </div>
    641             <div class='tooltip'>
    642               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_read">
    643                 <g fill="none" fill-rule="evenodd">
    644                   <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
    645                 </g>
    646               </svg>
    647               <div>
    648                 Required in order for Taboola to activate <i>Read More</i>.<br><br>
    649                 Read More buttons can boost audience engagement significantly, especially on mobile devices.<br><br>
    650                 For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements#below-article-widget" target='_blank'>Taboola Dev Center</a>.</div>
    651             </div>
    652           </div>
    653         </div>
    654 <!-- Advanced Settings -->
    655 
    656 <!-- Mid Article Widget -->
    657 
    658 <div id="mid_article" class="settings_block widget_settings_block">
     179?>
     180<input type="hidden" name="my_plugin_nonce" value="<?php echo esc_attr( $my_nonce ); ?>"/>
     181
     182<div id="tab1" class="tab-content">
     183            <h2 class="general_h2">General Settings</h2>
     184       
     185            <div class="settings_block">
     186                <div class="style_box1"><label id="pub_id">Publisher ID :</label>
     187                <div class="tooltip">
     188                        <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
     189                        <!-- <img class="helpTooltip__icon___1XWGN" src='<?php echo $this->plugin_url.'img/tooltip_image.svg' ?>'/> -->
     190                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first">
     191                                <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
     192                            </g>
     193                        </svg>
     194                        <!-- <div id="arrow" ></div> -->
     195                        <div>Your Publisher ID, as provided by Taboola.</div>
     196                    </div>
     197                </div>
     198                <div class="pub_id">
     199                    <input id="publisher-id" type="text" name="publisher_id" placeholder="publisher" value="<?php echo !empty($settings->publisher_id) ? strip_tags($settings->publisher_id) : '' ?>"/>
     200                </div>
     201                <div class="statement">
     202                <label style="color: #000000; padding-">
     203                    Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started.
     204                </label>
     205                </div>
     206            </div>
     207
     208    <!-- Below Article Widget -->
     209        <h2 class="widget_h2">Taboola Units</h2>
     210        <div id="below_article" class="settings_block widget_settings_block">
    659211            <div class="switch_style">
    660212                <label class="switch">
    661                 <input id="mid_enabled" type="checkbox" <?php echo !empty($settings->mid_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#mid_article', this)" name="mid_enabled"/>
    662                     <span class="slider round"></span>
     213                <input id="first_bc_enabled" type="checkbox" <?php echo !empty($settings->first_bc_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#below_article', this)" name="first_bc_enabled" />
     214                <span class="slider round"></span>
    663215                </label>
    664                 <b style="font-size:15px;">Mid-article</b>
    665             </div>
    666 
    667             <div>
    668                 <div class="mode_style_mid"><label id="mid_widget_id_label" style="float:left;">Mode (Widget ID):</label>
    669                     <div class='tooltip'>
    670                         <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
    671                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
    672                                 <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
    673                              </g>
    674                          </svg>
    675                         <div>Your <i>mid-article</i> Mode (Widget ID), as provided by Taboola.</div>
    676                     </div>
    677                 </div>
    678                 <div class="placement_style_mid"><label id="mid_placement_label" style="float:left;">Placement Name:</label>
    679                     <div class='tooltip'>
    680                         <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
    681                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
    682                                 <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
    683                              </g>
    684                          </svg>
    685                         <div>Your <i>mid-article</i> Placement Name, as provided by Taboola.</div>           
    686                     </div>
    687                 </div>
    688             </div>
    689             <div>
    690                 <div class="widget_below_mid">
    691                     <input id="mid_widget_id" type="text" value="<?php echo !empty($settings->mid_widget_id) ? strip_tags($settings->mid_widget_id) : "" ?>" name="mid_widget_id" placeholder="Widget ID" />
    692                 </div>
    693                 <div class="placement_below_mid">
    694                     <input id = "mid_placement" type="text" value="<?php echo !empty($settings->mid_placement) ? strip_tags($settings->mid_placement) : "" ?>" name="mid_placement" placeholder="Placement Name" />
    695                 </div>
    696             </div>
    697 
    698             <div id="mid_occurrence_div">
    699                 <div class="mode_style_mid_selector"><label id="mid_location_string_label" style="float:left;">Position the widget below:</label>
    700                     <div class='tooltip'>
    701                         <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
    702                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
    703                                 <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
     216                <b style="font-size:15px;">Below-article</b>
     217            </div>
     218            <div class="label_below">
     219                <div class="mode_style">
     220                <label id="first_bc_widget_id_label" style="float:left;">Mode (Widget ID):</label>
     221                <div class="tooltip">
     222                    <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
     223                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
     224                    <g fill="none" fill-rule="evenodd">
     225                        <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
     226                    </g>
     227                    </svg>
     228                    <div>Your <i>below-article</i> Mode (Widget ID), as provided by Taboola. </div>
     229                </div>
     230                </div>
     231                <div class="placement_style">
     232                <label id="first_bc_placement_label" style="float:left;">Placement Name:</label>
     233                <div class='tooltip'>
     234                    <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
     235                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
     236                    <g fill="none" fill-rule="evenodd">
     237                        <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
     238                    </g>
     239                    </svg>
     240                    <div>Your <i>below-article</i> Placement Name, as provided by Taboola. <br>
     241                    <br> When upgrading from v1, fill in 'below-article'. <br>
     242                    <br> For more information, reach out via our <a href="https://developers.taboola.com/web-integrations/discuss" target='_blank'>Online Community</a>, or contact Taboola Support.
     243                    </div>
     244                </div>
     245                </div>
     246            </div>
     247            <div class="input_below">
     248                <div class="widget_below">
     249                <input id="first_bc_widget_id" type="text" value="<?php echo !empty($settings->first_bc_widget_id) ? strip_tags($settings->first_bc_widget_id) : "" ?>" name="first_bc_widget_id" placeholder="Widget ID" />
     250                </div>
     251                <div class="placement_below">
     252                <input type="text" id="first_bc_placement" value="<?php echo !empty($settings->first_bc_placement) ? strip_tags($settings->first_bc_placement) : "" ?>" name="first_bc_placement" placeholder="Placement Name" />
     253                </div>
     254            </div>
     255
     256            <!-- Below Article Widget -->
     257            <!-- Advanced Settings -->
     258            <br />
     259            <div class='location_section'>
     260                <div class='checkbox_read'>
     261                <input id="out_of_content_enabled" type="checkbox" <?php echo !empty($settings->out_of_content_enabled) ? "checked='checked'" : "" ?> name="out_of_content_enabled" />
     262                <label id="out_of_content_enabled_label">Place the feed/widget just after the article container (required for <b>Read More</b>)</label>
     263                </div>
     264                <div class='tooltip'>
     265                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_read">
     266                    <g fill="none" fill-rule="evenodd">
     267                    <path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
     268                    </g>
     269                </svg>
     270                <div>
     271                    Required in order for Taboola to activate <i>Read More</i>.<br><br>
     272                    Read More buttons can boost audience engagement significantly, especially on mobile devices.<br><br>
     273                    For more information, see the <a href="https://developers.taboola.com/web-integrations/docs/wordpress-plugin-managing-placements#below-article-widget" target='_blank'>Taboola Dev Center</a>.</div>
     274                </div>
     275            </div>
     276            </div>
     277    <!-- Advanced Settings -->
     278
     279    <!-- Mid Article Widget -->
     280
     281    <div id="mid_article" class="settings_block widget_settings_block">
     282                <div class="switch_style">
     283                    <label class="switch">
     284                    <input id="mid_enabled" type="checkbox" <?php echo !empty($settings->mid_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#mid_article', this)" name="mid_enabled"/>
     285                        <span class="slider round"></span>
     286                    </label>
     287                    <b style="font-size:15px;">Mid-article</b>
     288                </div>
     289
     290                <div>
     291                    <div class="mode_style_mid"><label id="mid_widget_id_label" style="float:left;">Mode (Widget ID):</label>
     292                        <div class='tooltip'>
     293                            <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
     294                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
     295                                    <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
    704296                                </g>
    705                          </svg>
    706                          <div>
    707                             Enter the paragraph number to target. <br>
    708                             E.g. To target the <b>5th</b> paragraph, fill in <i>5</i>.<br><br>
    709                             ----<br>
    710                             <i>Advanced</i> - to use a <b>custom</b> selector:<br><br>
    711                             1) Choose 'Other'. <br>
    712                             2) Fill in a selector (<i>right</i>), and an occurrence (<i>left</i>).
     297                            </svg>
     298                            <div>Your <i>mid-article</i> Mode (Widget ID), as provided by Taboola.</div>
    713299                        </div>
    714300                    </div>
    715                 </div>
    716                 <div class="placement_below_mid_occurrence">
    717                     <select name="mid_paragraph_ui_mode" id="mid_paragraph_ui_mode">
    718                         <option value="Paragraph" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Paragraph") ? "selected" : ""?> >Paragraph</option>
    719                         <option value="Other" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Other") ? "selected" : ""?>>Other</option>
    720                     </select>&nbsp;
    721                     <input type="number" id="mid_occurrence" value="<?php echo !empty($settings->mid_location_string_occurrence) ? $settings->mid_location_string_occurrence : "1" ?>" name="mid_location_string_occurrence" placeholder="" style="width:65px;">
    722                 </div>
    723 
    724             </div>
    725             <div id="mid_css_selector_div">
    726 
    727                 <div class="placement_style_mid_occurrence"><label id="mid_occurrence_label" style="float:left;">CSS selector :</label>
    728                     <div class='tooltip'>
    729                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
    730                                 <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
     301                    <div class="placement_style_mid"><label id="mid_placement_label" style="float:left;">Placement Name:</label>
     302                        <div class='tooltip'>
     303                            <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
     304                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
     305                                    <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
    731306                                </g>
    732                          </svg>
    733                          <div>
    734                             <i>Advanced</i> - fill in a selector to target - e.g.:<br><br>
    735                             <i>#my-id</i> - to target an <i>ID</i> of "my-id".<br>
    736                             <i>.my-class</i> - to target a <i>class</i> of "my-class".
     307                            </svg>
     308                            <div>Your <i>mid-article</i> Placement Name, as provided by Taboola.</div>           
    737309                        </div>
    738310                    </div>
    739311                </div>
    740                 <div class="widget_below_mid_selector">
    741                     <input id = "mid_location_string" type="text" value="<?php echo !empty($settings->mid_location_string) ? strip_tags($settings->mid_location_string) : "p" ?>" name="mid_location_string" placeholder="E.g. p for paragraph" />
    742                 </div>
    743             </div>
     312                <div>
     313                    <div class="widget_below_mid">
     314                        <input id="mid_widget_id" type="text" value="<?php echo !empty($settings->mid_widget_id) ? strip_tags($settings->mid_widget_id) : "" ?>" name="mid_widget_id" placeholder="Widget ID" />
     315                    </div>
     316                    <div class="placement_below_mid">
     317                        <input id = "mid_placement" type="text" value="<?php echo !empty($settings->mid_placement) ? strip_tags($settings->mid_placement) : "" ?>" name="mid_placement" placeholder="Placement Name" />
     318                    </div>
     319                </div>
     320
     321                <div id="mid_occurrence_div">
     322                    <div class="mode_style_mid_selector"><label id="mid_location_string_label" style="float:left;">Position the widget below:</label>
     323                        <div class='tooltip'>
     324                            <!-- <i class="fa fa-question-circle" aria-hidden="true"></i> -->
     325                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
     326                                    <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
     327                                    </g>
     328                            </svg>
     329                            <div>
     330                                Enter the paragraph number to target. <br>
     331                                E.g. To target the <b>5th</b> paragraph, fill in <i>5</i>.<br><br>
     332                                ----<br>
     333                                <i>Advanced</i> - to use a <b>custom</b> selector:<br><br>
     334                                1) Choose 'Other'. <br>
     335                                2) Fill in a selector (<i>right</i>), and an occurrence (<i>left</i>).
     336                            </div>
     337                        </div>
     338                    </div>
     339                    <div class="placement_below_mid_occurrence">
     340                        <select name="mid_paragraph_ui_mode" id="mid_paragraph_ui_mode">
     341                            <option value="Paragraph" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Paragraph") ? "selected" : ""?> >Paragraph</option>
     342                            <option value="Other" <?php echo (!empty($settings->mid_paragraph_ui_mode) && $settings->mid_paragraph_ui_mode == "Other") ? "selected" : ""?>>Other</option>
     343                        </select>&nbsp;
     344                        <input type="number" id="mid_occurrence" value="<?php echo !empty($settings->mid_location_string_occurrence) ? $settings->mid_location_string_occurrence : "1" ?>" name="mid_location_string_occurrence" placeholder="" style="width:65px;">
     345                    </div>
     346
     347                </div>
     348                <div id="mid_css_selector_div">
     349
     350                    <div class="placement_style_mid_occurrence"><label id="mid_occurrence_label" style="float:left;">CSS selector :</label>
     351                        <div class='tooltip'>
     352                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN">
     353                                    <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
     354                                    </g>
     355                            </svg>
     356                            <div>
     357                                <i>Advanced</i> - fill in a selector to target - e.g.:<br><br>
     358                                <i>#my-id</i> - to target an <i>ID</i> of "my-id".<br>
     359                                <i>.my-class</i> - to target a <i>class</i> of "my-class".
     360                            </div>
     361                        </div>
     362                    </div>
     363                    <div class="widget_below_mid_selector">
     364                        <input id = "mid_location_string" type="text" value="<?php echo !empty($settings->mid_location_string) ? strip_tags($settings->mid_location_string) : "p" ?>" name="mid_location_string" placeholder="E.g. p for paragraph" />
     365                    </div>
     366                </div>
     367        </div>
     368    <!-- Mid Article Widget -->
     369
     370    <!-- Right Rail Article Widget -->
     371
     372    <div id="right-rail" class="settings_block widget_settings_block">
     373        <label id="right-rail-label"><b style="font-size:15px;margin-left: 10px;">Right-rail (sidebar)</b> </label>
     374        <div style="font-size:14px;margin: 5px 10px 10px 10px;">You can insert a <b>Taboola</b> unit in your website <b>sidebar</b> (if your <b>WordPress</b> theme provides one):</div>
     375
     376        <div id="rightrail-banner">
     377            1. In the <b>sidebar menu</b> (<i>left</i>) select <b>Appearance</b> > <b>Widgets</b>, or click <a href="widgets.php" target="_blank">here</a> to open the <b>Widgets</b> panel. </br>
     378            2. Click on the <span style="font-size: 18px; font-weight:bold">+</span> icon (<i>top, left</i>) and type in <b>"Taboola".</b></br>   
     379            3. Drag the <b>Taboola</b> widget to the desired position in the sidebar (<i>right</i>).</br> 
     380            4. Enter the <b>Widget ID (Mode)</b>, as provided by <b>Taboola</b>.</br>
     381            5. Click on <b>Update</b> (<i>top, right</i>) to save your changes.</br>
     382            6. Browse to your website and verify that the newly added unit displays correctly.</br>
     383            <hr>
     384            To <b>watch a demo</b> of the above steps, see our <a href="https://developers.taboola.com/web-integrations/docs/sidebar-widget" target="_blank">online docs</a>.
     385        </div>
    744386    </div>
    745 <!-- Mid Article Widget -->
    746387
    747388<!-- Right Rail Article Widget -->
    748389
    749 <div id="right-rail" class="settings_block widget_settings_block">
    750     <label id="right-rail-label"><b style="font-size:15px;margin-left: 10px;">Right-rail (sidebar)</b> </label>
    751     <div style="font-size:14px;margin: 5px 10px 10px 10px;">You can insert a <b>Taboola</b> unit in your website <b>sidebar</b> (if your <b>WordPress</b> theme provides one):</div>
    752 
    753     <div id="rightrail-banner">
    754         1. In the <b>sidebar menu</b> (<i>left</i>) select <b>Appearance</b> > <b>Widgets</b>, or click <a href="widgets.php" target="_blank">here</a> to open the <b>Widgets</b> panel. </br>
    755         2. Click on the <span style="font-size: 18px; font-weight:bold">+</span> icon (<i>top, left</i>) and type in <b>"Taboola".</b></br>   
    756         3. Drag the <b>Taboola</b> widget to the desired position in the sidebar (<i>right</i>).</br> 
    757         4. Enter the <b>Widget ID (Mode)</b>, as provided by <b>Taboola</b>.</br>
    758         5. Click on <b>Update</b> (<i>top, right</i>) to save your changes.</br>
    759         6. Browse to your website and verify that the newly added unit displays correctly.</br>
    760         <hr>
    761         To <b>watch a demo</b> of the above steps, see our <a href="https://developers.taboola.com/web-integrations/docs/sidebar-widget" target="_blank">online docs</a>.
    762     </div>
    763 </div>
    764 
    765 <!-- Right Rail Article Widget -->
    766 
    767390<!-- Homepage mid widget -->
    768 
    769391
    770392<div id="homepage" class="settings_block widget_settings_block">
    … …  
    873495            </div>
    874496</div>
     497
     498<!-- Homepage mid widget -->
     499
    875500<div id="advanced-settings-main">
    876501    <a id="show-advanced-settings">Show advanced settings >></a>
    … …  
    880505</div>
    881506
    882 <!-- Homepage mid widget -->
     507</div>
     508
     509<div id="tab2" class="tab-content" style="display: none;">
     510<h2 class="general_h2">General Setting</h2>
     511<div id="web_push" class="settings_block widget_settings_block">
     512        <div class="style_box1"><label id="pub_id">Web Push Account ID:</label>
     513            <div class="tooltip">
     514                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="helpTooltip__icon___1XWGN_first">
     515                        <g fill="none" fill-rule="evenodd"><path fill="currentColor" d="M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2zm-1 15.505v.99c0 .291.226.505.505.505h.99c.291 0 .505-.226.505-.505v-.99a.497.497 0 0 0-.505-.505h-.99a.497.497 0 0 0-.505.505zm4.07-6.255c.57-.57.93-1.37.93-2.25 0-2.21-1.79-4-4-4S8 6.79 8 9h2c0-1.1.9-2 2-2s2 .9 2 2c0 .55-.22 1.05-.59 1.41l-1.24 1.26C11.45 12.4 11 13.4 11 14.5v.5h2c0-1.5.45-2.1 1.17-2.83l.9-.92z"></path>
     516                    </g>
     517                </svg>
     518                <!-- <div id="arrow" ></div> -->
     519                <div>Your SC web-push numeric account ID, as provided by Taboola.<br>
     520                    This integration is only for sponsored web-push <br> <br>
     521                    The header script and service worker will only be injected if the publisher already has the taboola widget running on their site.
     522                </div>
     523            </div>
     524            <div class="switch_style_push">
     525                <label class="switch">
     526                <input id="web_push_enabled" type="checkbox" <?php echo !empty($settings->web_push_enabled) ? "checked='checked'" : "" ?> onclick="setEnabledDisabled('#web_push', this)" name="web_push_enabled" />
     527                <span class="slider round"></span>
     528                </label>
     529            </div>
     530        </div>
     531        <div class="web_push_id">
     532            <input type="number" id="publisher_id_push" value="<?php echo !empty($settings->publisher_id_push) ? strip_tags($settings->publisher_id_push) : "" ?>" name="publisher_id_push" placeholder="Publisher ID Web Push" />
     533        </div>
     534        <div class="statement">
     535            <label style="color: #000000; padding-">
     536                Don't have an account with taboola? <a href='http://taboola.com/contact' target='_blank'>Contact us</a> to get started.
     537            </label>
     538        </div>
     539</div>
     540
     541    <div id="advanced-settings-main">
     542        <div class="change_button">
     543            <input class='apply_button' type="submit" value="Apply Changes"/>
     544        </div>
     545    </div>
     546</div>
    883547
    884548    </form>
    … …  
    905569    setEnabledDisabled('#mid_article', document.getElementById("mid_enabled"));
    906570    setEnabledDisabled('#homepage', document.getElementById("home_enabled"));
     571    setEnabledDisabled('#web_push', document.getElementById("web_push_enabled"));
    907572
    908573</script>

  • taboola/trunk/taboola_widget.php

    r3114478 r3128733  
    44 * Plugin URI: https://developers.taboola.com/web-integrations/docs/wordpress-plugin
    55 * Description: Taboola
    6  * Version: 2.1.1
     6 * Version: 2.2.2
    77 * Author: Taboola
    88 */
    99
    10 define ("TABOOLA_PLUGIN_VERSION","2.1.1"); // => UPDATE THIS FOR *EVERY* RELEASE (USED FOR TRACKING)
    11 define ("TABOOLA_MIN_VER","2.0.1"); // => UPDATE THIS *ONLY* IF THIS RELEASE HAS *DB CHANGES*
     10define ("TABOOLA_PLUGIN_VERSION","2.2.2"); // => UPDATE THIS FOR *EVERY* RELEASE (USED FOR TRACKING)
     11define ("TABOOLA_MIN_VER","2.2.2"); // => UPDATE THIS *ONLY* IF THIS RELEASE HAS *DB CHANGES*
    1212define ("TABOOLA_DEBUG_MODE", false); // => SET THIS TO 'FALSE' FOR *EVERY* RELEASE (USED TO SUPRESS DEBUGGING LOGS)
    1313
    … …  
    3333        public $_is_widget_on_page;
    3434        public $_is_head_script_loaded = false;
    35 
    36         function __construct()
     35        private $tpl_sw = 'importScripts("https://cdn.taboola.com/webpush/tsw.js");';
     36
     37        private $msg_sw_error = <<<SWE
     38        <p>
     39        The file sw.js in the root directory of Wordpress is not writable.
     40        Please change its permissions and try again. Otherwise replace its contents manually:
     41        </p>
     42        <pre><code>{{SW}}</code></pre>
     43        <p>
     44        Also make sure that the file is accessible at {{DOMAIN}}/sw.js       
     45        </p>
     46        SWE;
     47
     48        public $plugin_name;
     49        public $plugin_directory;
     50        public $plugin_url;
     51        public $settings;
     52        public $tbl_taboola_settings;
     53
     54        public function __construct()
    3755        {
    3856            global $wpdb;
    … …  
    7189                add_action( 'admin_menu', array(&$this, 'admin_generate_menu') );
    7290                add_filter('plugin_action_links', array(&$this, 'plugin_action_links'), 10, 2 );
    73             }else if ($this->settings != NULL){
     91            }elseif ($this->settings != NULL){
    7492                    add_action('wp_head', array(&$this, 'taboola_header_loader_inject'));
     93                    if (!empty($this->settings->publisher_id_push)) {
     94                        add_action('wp_head', array(&$this, 'taboola_webpush_loader_js'));
     95
     96                        $sw = 'sw.js';
     97                        $sw_path = ABSPATH . $sw;
     98                       
     99                        $content = file_exists($sw_path) ? file_get_contents($sw_path) : '';
     100                       
     101                        if (strpos($content, $this->tpl_sw) === false) {
     102                            if (!is_writable(ABSPATH) || (file_exists($sw_path) && !is_writable($sw_path))) {
     103                                return $this->notice($this->msg_sw_error);
     104                            }
     105                            $content = $this->tpl_sw . PHP_EOL . $content;
     106                            if (file_put_contents($sw_path, $content) === false) {
     107                                return $this->notice($this->msg_sw_error);
     108                            }
     109                        }
     110                    }
    75111                    add_action('wp_footer', array(&$this, 'taboola_footer_loader_js'));
    76112                    add_filter('the_content', array(&$this, 'load_taboola_content'));
    77113                    add_filter('the_content', array(&$this, 'load_taboola_content_mid'));
    78114                    add_filter('the_content', array(&$this, 'load_taboola_content_home'));
    79             }
     115            }           
    80116    }
    81117
    … …  
    112148            if (!$this->is_db_updated_for_min_ver("2.0.0"))
    113149                return false;
    114             $retVal2 = ((trim($this->settings->publisher_id) != '') && is_front_page() && $this->settings->home_enabled && trim($this->settings->home_widget_id) != '');
     150            $retVal2 = ((trim($this->settings->publisher_id) != '') && (is_front_page() || is_home()) && $this->settings->home_enabled && trim($this->settings->home_widget_id) != '');
    115151            return $retVal2;
    116152        }
    … …  
    157193                $head_string = $scriptWrapper->getScriptMarkupString();
    158194            }
    159 
    160195            return $head_string;
    161196        }
    … …  
    167202        }
    168203
     204        // adding webpush loader
     205        function taboola_webpush_loader_js() {
     206            if(is_single() || is_home() || is_category() || is_front_page()){
     207                    $stringParamsWeb = array(
     208                        '{{PUBLISHER_ID}}' => $this->settings->publisher_id_push
     209                    );
     210                $webpushInjectionScript = new JavaScriptWrapper("webPush.js",$stringParamsWeb);
     211                echo $webpushInjectionScript;
     212            }
     213        }
    169214
    170215        function taboola_footer_loader_js() {
    171216
    172217            // Only adding flush script if a widget is going to be placed on the page.
    173             if ( $this->is_widget_on_page() ){
     218            if ($this->is_widget_on_page()){
    174219                $flushInjectionScript = new JavaScriptWrapper('flushInjectionScript.js',array());
    175220                echo $flushInjectionScript->getScriptMarkupString();
    … …  
    439484        function admin_generate_menu(){
    440485            global $current_user;
    441             add_menu_page('Taboola', 'Taboola', 'manage_options', 'taboola_widget', array(&$this, 'admin_taboola_settings'), $this->plugin_url.'img/taboola_icon.png', 110);
     486            add_menu_page(__('Taboola','taboola_widget'), __('Taboola','taboola_widget'), 'manage_options', 'taboola_widget', array(&$this, 'admin_taboola_settings'), $this->plugin_url.'img/taboola_icon.png', 110);
    442487        }
    443488
    444489        function admin_taboola_settings(){
    445 
    446490            global $wpdb;
    447491            $settings = $wpdb->get_row("select * from ".$wpdb->prefix."_taboola_settings limit 1");
    … …  
    453497                }
    454498
     499                if(isset($_POST['web_push_enabled'])) {
     500                    if (trim(strip_tags($_POST['publisher_id_push'])) == '') {
     501                        $taboola_errors[] = "Publisher Push ID";
     502                    }
     503                }
     504
    455505                if(isset($_POST['first_bc_enabled'])) {
    456506                    if (trim(strip_tags($_POST['first_bc_widget_id'])) == '') {
    … …  
    519569               
    520570                if(count($taboola_errors) == 0){
    521 
    522571                    $data = array(
    523572                        "publisher_id" => trim($_POST['publisher_id']),
     573
     574                        "web_push_enabled" => isset($_POST['web_push_enabled']) ? true : false,
     575                        "publisher_id_push" => !empty($_POST['publisher_id_push']) ? trim($_POST['publisher_id_push']) : '',
    524576
    525577                        "first_bc_enabled" => isset($_POST['first_bc_enabled']) ? true : false,
    … …  
    560612                        }
    561613                    }
    562 
    563614                }
    564615                $settings = $wpdb->get_row("select * from ".$wpdb->prefix."_taboola_settings limit 1");
    565616            }
    566 
    567617            include_once('settings.php');
    568618        }
    569 
     619           
    570620        function is_mid_location_string_valid($mid_location_string){
    571621            // TODO:: validate the location string
    … …  
    593643            return false;
    594644        }
     645
    595646        function columnExists($column_name) {
    596647            global $wpdb;
    … …  
    620671                return false;
    621672            }
    622 
    623673        }
    624674
    … …  
    706756            // If we are up to date, then skip this method...
    707757            if ($this->is_db_updated_for_min_ver(TABOOLA_MIN_VER)) {
    708                //tb_write_log("All up to date!");
     758                //tb_write_log("All up to date!");
    709759                return;
    710760            }
    … …  
    735785                    `id` INT NOT NULL AUTO_INCREMENT ,
    736786                    `publisher_id` VARCHAR(255) DEFAULT NULL,
     787                    `web_push_enabled` TINYINT(1) NOT NULL DEFAULT FALSE,
     788                    `publisher_id_push` INT(15) DEFAULT NULL,
    737789                    `first_bc_enabled` TINYINT(1) NOT NULL DEFAULT FALSE,
    738790                    `first_bc_widget_id` VARCHAR(255) DEFAULT NULL,
Note: See TracChangeset for help on using the changeset viewer.