WordPress.org
Get WordPress

Plugin Directory

Changeset 3114478


Ignore:
Timestamp:
07/08/2024 04:28:50 PM (20 months ago)
Author:
taboolawordpress
Message:

Revert the changes

Location:
taboola
Files:
3 deleted
4 edited

Legend:

Unmodified
Added
Removed

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

    r3114473 r3114478  
    1 
    21function insertAfter(e, t) {
    32    t.parentNode.insertBefore(e, t.nextSibling)

  • taboola/trunk/readme.txt

    r3114473 r3114478  
    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.5.5
     5Tested up to: 6.3.2
    66Stable tag: trunk
    77License: GNU General Public License v3.0
    … …  
    5959
    6060== Changelog ==
    61 
    62 = 2.2.0 =
    63 * Added the webPush integration functionality.
    6461
    6562= 2.1.1 =

  • taboola/trunk/settings.php

    r3114473 r3114478  
    77
    88<style>
    9     <?php include 'css/main.css'; ?>
     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
    10415</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
    11426
    12427<div class="taboola-container">
    … …  
    15430    </div>
    16431
    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>
     432    <h2 style="font-size:1.7em;">Taboola WordPress Plugin 2</h2>
    23433
    24434<!-- errors/success message -->
    … …  
    67477</script>
    68478
    69 <!-- tab-switching JQuery -->
    70 <script>
    71 jQuery(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 
    106479<script>
    107480$(document).ready(function(){
    … …  
    156529        }
    157530    });
     531
    158532});
    159533</script>
    160534
    161535
     536
    162537<!-- Welcome Massage -->
    163538
    164539    <div class="publisher_welcome_massage">
    165         <h2 class="welcome_heading">Welcome to Taboola WordPress Plugin</h2>
     540        <h2 class="welcome_heading">Welcome to Taboola WordPress Plugin 2!</h2>
    166541        <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>
    167542        <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>
    … …  
    173548<!--  Welcome Massage-->
    174549
    175 <form method="POST">
    176 <?php
     550    <form method="POST">
     551
     552  <?php 
    177553    // Generate a nonce and pass it via a hidden field
    178554    $my_nonce = wp_create_nonce( 'my_plugin_update_field_action' );
    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">
     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">
    211659            <div class="switch_style">
    212660                <label class="switch">
    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>
     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>
    215663                </label>
    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.
     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>
    243676                    </div>
    244677                </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>
     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>
    296704                                </g>
    297                             </svg>
    298                             <div>Your <i>mid-article</i> Mode (Widget ID), as provided by Taboola.</div>
     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>).
    299713                        </div>
    300714                    </div>
    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>
     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>
    306731                                </g>
    307                             </svg>
    308                             <div>Your <i>mid-article</i> Placement Name, as provided by Taboola.</div>           
     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".
    309737                        </div>
    310738                    </div>
    311739                </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>
     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>
    386744    </div>
     745<!-- Mid Article Widget -->
    387746
    388747<!-- Right Rail Article Widget -->
    389748
     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
    390767<!-- Homepage mid widget -->
     768
    391769
    392770<div id="homepage" class="settings_block widget_settings_block">
    … …  
    495873            </div>
    496874</div>
    497 
    498 <!-- Homepage mid widget -->
    499 
    500875<div id="advanced-settings-main">
    501876    <a id="show-advanced-settings">Show advanced settings >></a>
    … …  
    505880</div>
    506881
    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>
     882<!-- Homepage mid widget -->
    547883
    548884    </form>
    … …  
    569905    setEnabledDisabled('#mid_article', document.getElementById("mid_enabled"));
    570906    setEnabledDisabled('#homepage', document.getElementById("home_enabled"));
    571     setEnabledDisabled('#web_push', document.getElementById("web_push_enabled"));
    572907
    573908</script>

  • taboola/trunk/taboola_widget.php

    r3114473 r3114478  
    44 * Plugin URI: https://developers.taboola.com/web-integrations/docs/wordpress-plugin
    55 * Description: Taboola
    6  * Version: 2.2.0
     6 * Version: 2.1.1
    77 * Author: Taboola
    88 */
    99
    10 define ("TABOOLA_PLUGIN_VERSION","2.2.0"); // => UPDATE THIS FOR *EVERY* RELEASE (USED FOR TRACKING)
    11 define ("TABOOLA_MIN_VER","2.2.0"); // => UPDATE THIS *ONLY* IF THIS RELEASE HAS *DB CHANGES*
     10define ("TABOOLA_PLUGIN_VERSION","2.1.1"); // => UPDATE THIS FOR *EVERY* RELEASE (USED FOR TRACKING)
     11define ("TABOOLA_MIN_VER","2.0.1"); // => 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         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()
     35
     36        function __construct()
    5537        {
    5638            global $wpdb;
    … …  
    8971                add_action( 'admin_menu', array(&$this, 'admin_generate_menu') );
    9072                add_filter('plugin_action_links', array(&$this, 'plugin_action_links'), 10, 2 );
    91             }elseif ($this->settings != NULL){
     73            }else if ($this->settings != NULL){
    9274                    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                     }
    11175                    add_action('wp_footer', array(&$this, 'taboola_footer_loader_js'));
    11276                    add_filter('the_content', array(&$this, 'load_taboola_content'));
    11377                    add_filter('the_content', array(&$this, 'load_taboola_content_mid'));
    11478                    add_filter('the_content', array(&$this, 'load_taboola_content_home'));
    115             }           
     79            }
    11680    }
    11781
    … …  
    193157                $head_string = $scriptWrapper->getScriptMarkupString();
    194158            }
     159
    195160            return $head_string;
    196161        }
    … …  
    202167        }
    203168
    204         // adding webpush loader
    205         function taboola_webpush_loader_js() {
    206             if($this->is_widget_on_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         }
    214169
    215170        function taboola_footer_loader_js() {
    216171
    217172            // Only adding flush script if a widget is going to be placed on the page.
    218             if ($this->is_widget_on_page()){
     173            if ( $this->is_widget_on_page() ){
    219174                $flushInjectionScript = new JavaScriptWrapper('flushInjectionScript.js',array());
    220175                echo $flushInjectionScript->getScriptMarkupString();
    … …  
    484439        function admin_generate_menu(){
    485440            global $current_user;
    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);
     441            add_menu_page('Taboola', 'Taboola', 'manage_options', 'taboola_widget', array(&$this, 'admin_taboola_settings'), $this->plugin_url.'img/taboola_icon.png', 110);
    487442        }
    488443
    489444        function admin_taboola_settings(){
     445
    490446            global $wpdb;
    491447            $settings = $wpdb->get_row("select * from ".$wpdb->prefix."_taboola_settings limit 1");
    … …  
    497453                }
    498454
    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 
    505455                if(isset($_POST['first_bc_enabled'])) {
    506456                    if (trim(strip_tags($_POST['first_bc_widget_id'])) == '') {
    … …  
    569519               
    570520                if(count($taboola_errors) == 0){
     521
    571522                    $data = array(
    572523                        "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']) : '',
    576524
    577525                        "first_bc_enabled" => isset($_POST['first_bc_enabled']) ? true : false,
    … …  
    612560                        }
    613561                    }
     562
    614563                }
    615564                $settings = $wpdb->get_row("select * from ".$wpdb->prefix."_taboola_settings limit 1");
    616565            }
     566
    617567            include_once('settings.php');
    618568        }
    619            
     569
    620570        function is_mid_location_string_valid($mid_location_string){
    621571            // TODO:: validate the location string
    … …  
    643593            return false;
    644594        }
    645 
    646595        function columnExists($column_name) {
    647596            global $wpdb;
    … …  
    786735                    `id` INT NOT NULL AUTO_INCREMENT ,
    787736                    `publisher_id` VARCHAR(255) DEFAULT NULL,
    788                     `web_push_enabled` TINYINT(1) NOT NULL DEFAULT FALSE,
    789                     `publisher_id_push` INT(15) DEFAULT NULL,
    790737                    `first_bc_enabled` TINYINT(1) NOT NULL DEFAULT FALSE,
    791738                    `first_bc_widget_id` VARCHAR(255) DEFAULT NULL,
Note: See TracChangeset for help on using the changeset viewer.