Inserting scripts
into pages

Expanding the features and functions of your website
You can add any script to a page by using the block 'Insert the HTML code' (T123, category Other). Here's a selection of code samples you can use to add new features to your website.
Please note that you are responsible for making changes to the examples of code used in the article. Ideally, you need to know Javascript to proceed. Unfortunately, we do not provide support on issues relating to third-party code.
Intercepting events
on a webpage
Interception may be needed if we want to track a pop-up event, a link click or data transfers to a third-party after a successful form submission and much more (it depends on your imagination and needs).
Intercepting link click
<script>
$(document).ready(function () {
    $('a').click(function () {
        /* script body */
    });
});
</script>
Intercepting link click in a specific block
Intercepting link click in the block #rec123456789
<script>
$(document).ready(function () {
    $('#rec123456789 a').click(function () {
        /* script body */
    });
});
</script>
where #rec123456789 is the ID of the block where the weather widget will be added;
Block ID can be found in Block settings
Example of sending events when a button is clicked
There are two buttons, one leading to a block with text on the same page, the other – to a different page. The first button has an anchor for the block # rec12345678, and the second has a link to the external page http://help-ru.tilda.ws/
<script> 
$(document).ready(function () {
    $("[href='#rec123456789']").click(function () {
        yaCounterXXXXXX.reachGoal('CLICK1');
    });

    $("[href='http://help-ru.tilda.ws/']").click(function () {
        yaCounterXXXXXX.reachGoal('CLICK2');
    });
});
</script>
where XXXXXX is the tag ID;
Sending information to Google Analytics about link / button clicks
The script tracks a click on any link / button, the address of which contains the "value in the url". If such a click occurs, information about the click will be sent. Below is a sample code. Values that need to be replaced appear in UPPERCASE.
<script> 
$(document).ready(function () {
    $("a").click(function (e) {
        var url = $(this).attr('href');
        if (url.indexOf('ЗНАЧЕНИЕ В URL') != -1) {
            e.preventDefault();
            ga('send', {
                'hitType': 'pageview',
                'page': '/click' + window.location.pathname,
                'title': 'НАЗВАНИЕ ВИРТУАЛЬНОЙ СТРАНИЦЫ'
            });

            setTimeout(
                function () {
                    window.location = url;
                },
                200
            );
        }
    });
});
</script>
URL VALUE – any word found in the link should be inserted here. For example, when clicking on a button, the visitor enters the registration page at: http://mysite.com/registration. In this case, instead of the VALUE In the URL, specify registration.

VIRTUAL PAGE NAME. In Google Analytics, information about a button click appears in the form of a virtual page viewing statistics.

LINK — the link found on a button. For example, http://mysite.com/registration

To track a click on a button as a goal is achieved, create a goal in Google Analytics: Own Goal → Landing Page → Begins with / click /
Sending the form to your resource after its transfer to the Tilda data receiver
Go through every form and insert the name of the function which the form will call after a successful data transfer
<script>
$(document).ready(function () {
    window.mySuccessFunction = function ($form) {
        /* $form is a jquery object linked to a form */

        /* code for data sending */
    }

    $('.js-form-proccess').each(function () {
        $(this).data('success-callback', 'window.mySuccessFunction');
    });
});
</script>
Performing its function before moving from the cart to the site of the payment system
If you need to add information about the contents of the cart to cookies or send e-commerce events to Google Analytics or Yandex.Metrica, use the script described above. The script is called right before transferring to the payment system or calling the payment widget.
<script>
$(document).ready(function () {
    window.myAfterSendedFunction = function ($form) {
        /* $form is a jquery object linked to a form */

        /* code for data sending */
    }

    $('.t706 form').each(function () {
        $(this).data('formsended-callback', 'window.myAfterSendedFunction');
    });
});
</script>
How to connect own or third-party services
Third-party service which responds to buttons / links with a specific class
For example, if the required service opens a special dialog when clicking on a button, then it is important to follow the method of working with the service script. To avoid problems, first add classes for the buttons, and then insert the script:
<script type="text/javascript">
$(document).ready(function () {
    /* change the button classes */
    $('.t-btn').addClass('superclass');

    /* adding a service script */
    var service = document.createElement('script');
    service.src = "https://superservice.com/script.js";
    service.type = "text/javascript";
    service.charset = "UTF-8";
    document.documentElement.appendChild(service);
});
</script>
How to place a special widget above a block
Sometimes you want to add something extra special to existing blocks. For example, place a form in Zero Block or place a weather widget on the webpage cover. Tilda makes even this possible. In Tilda, and it is possible. For this we use the great HTML block.

Weather widget over the block
Add the HTML block to the page. Go to the site pogoda.yandex.ru, copy the widget code from there, open [Content] and create magic. This code will insert into the block, with the specified number, the weather widget, just to the right of the center of the block.
<script>
$(document).ready(function () {
    var widget = $('<a href="https://clck.yandex.ru/redir/dtype=stred/pid=7/cid=1228/*https://pogoda.yandex.ru/213" target="_blank"><img src="//info.weather.yandex.net/213/1_white.ru.png?domain=ru" border="0" alt="Яндекс.Погода"/><img width="1" height="1" src="https://clck.yandex.ru/click/dtype=stred/pid=7/cid=1227/*https://img.yandex.ru/i/pix.gif" alt="" border="0"/></a>');
    widget.attr('style', 'display: block;left: 50%;margin-left: 20%;position: absolute;top: 100px;');
    $('#rec123456789').append(widget);
});
</script>
where # rec123456789 is the number of the block where the weather widget will be added; Block number can be found in Block Settings
Launching various widgets for mobile and desktop clients
Sometimes you need to insert a bulky widget for the desktop, with a small widget for the mobile version. To do this, we will come to the aid of the variable window.isMobile
<script>
$(document).ready(function () {
    if (window.isMobile == true) {
        /* for mobile*/
    } else {
        /* for desktop*/
    }
});
</script>
Mixed widget insertion example
Instead of window.isMobile, you can use screen sizes, for example, $(window).width () <960
<div id="widgetbox" style="text-align: center;">
 <div class="left" id="_bn_widget_"><a href="http://bnovo.ru/" id="_bnovo_link_" target="_blank">Bnovo</a></div>
 <script type="text/javascript" src="http://widget.bnovo.ru/v2/js/bnovo.js"></script>    
</div>

<script type="text/javascript">
$(document).ready(function () {
    var html = '';
    if (window.isMobile == true) {
        /* for mobile*/
        html = '<script>';
        html += 'Bnovo_Widget.init(function(){Bnovo_Widget.open("_bn_widget_", {type: "vertical",lcode: "1234567890",lang: "ru",width: "230",background: "#ffda4a",bg_alpha: "100",padding: "18",font_type: "arial",font_color: "#222222",font_size: "16",title_color: "#222222",title_size: "18",inp_color: "#222222",inp_bordhover: "#3796e5",inp_bordcolor: "#cccccc",inp_alpha: "100",btn_background: "#f8f8f8",btn_background_over: "#ffffff",btn_textcolor: "#222222",btn_textover: "#222222",btn_bordcolor: "#cccccc",btn_bordhover: "#cccccc"});});';
        html += '</script' + '>';
    } else {
        /* for desktop */
        html = '<script>' +
            'Bnovo_Widget.init(function(){Bnovo_Widget.open("_bn_widget_", {type: "horizontal",lcode: "1234567890",lang: "ru",width: "960",background: "#ffda4a",bg_alpha: "100",padding: "20",font_type: "arial",font_color: "#222222",font_size: "16",title_color: "#222222",title_size: "18",inp_color: "#222222",inp_bordhover: "#3796e5",inp_bordcolor: "#cccccc",inp_alpha: "100",btn_background: "#f8f8f8",btn_background_over: "#ffffff",btn_textcolor: "#222222",btn_textover: "#222222",btn_bordcolor: "#cccccc",btn_bordhover: "#cccccc"});});' +
            '</script' + '>';
    }
    $('#widgetbox').append(html);
});
</script>
How to create a menu in Zero Block
In order for the menu created in Zero Block to behave like a normal menu — that is, superimposed on the next block and fixed on scroll, add code to the page, replacing rec000000000 with the number of your Zero Block.
<style>
    .floating {
        width: 100%;
        position: fixed;
        top: 0px;
        z-index: 999;
    }
</style>

<script>
$(document).ready(function () {
    /*  replace rec00000000 with Zero block ID*/
    var blockMenuID = '#rec00000000';
    $(blockMenuID).addClass('floating');
});
</script>
Disabling automatic lead data transfer to Facebook Pixel
If you install Facebook Pixel, then an fbq object will appear on the page, which sends the Lead event when sending a form to Facebook. If you need a custom Facebook pixel, you can disable this behaviour using this code:
<script>
$(document).ready(function (){
    $("#allrecords").data("fb-event", "nosend");
});
</script>
Interaction of the third-party script with the form in Zero Block
If you'd like the code to work for elements in Zero Block, delay code execution for 3 seconds. Here's an example of this type of code:
<script>
$(document).ready(function () {
    window.mySuccessFunctionZero = function ($form) {
        /* $form is a jquery object linked to a from */
        var formArr = $form.serializeArray();

        /* sending data with POST */
        $.ajax({
            url: "https://yourwebhook.ru/form.php",
            type: "POST",
            data: formArr,
            async: false,
            success: function (response) {
                /* some actions after success о== */
                if (response) {
                    /* page redirect */
                    window.location.href = "https://yoursite.ru/succsess-page";
                }

            }
        });
    }

    setTimeout(function () {
        $(".js-form-proccess").each(function () {
            $(this).data("success-callback", "window.mySuccessFunctionZero");
        });
        /* your code for work in Zero Block */
    }, 3000);
});
</script>
Please note that you are responsible for modifying examples of code used above. Ideally, you need to know Javascript to proceed. Unfortunately, we do not provide support on issues relating to third-party code.
Made on
Tilda