Step-by-step example

With the script.js you have a simple tool for interacting with the DOM and performing cross-domain requests, in addition to creating simple text widgets, you can change the design of page elements, create your own information blocks based on external data, or vice versa, send data to external services, and all this works immediately for all users of your account.

For example, let’s create a method for checking consent to data transfer in the widget.

First of all, in manifest.json, a custom field should be added to the settings parameter, which is mandatory, for example, agreement.

"settings": {
        "agreement": {
                "name": "settings.agreement",
                "type": "custom",
                "required": true
            }
}

This field will by default be hidden. Clicking on Install will not install, as this field is blank at this stage.

Next, you need to insert a block with a checkbox (layout) in the right part of the widget modal window and, when the checkbox is checked, write an arbitrary value in the agreement field, and when the checkbox is unchecked, clear the value. In addition, the user should be informed of the need to consent to the transfer of data before installing the widget. If the user clicks the Install button without consent, display a warning message. For example, you can use the following code.

Place the layout with the checkbox in the templates/agreement.twig template

<div class = "agreement">
<label for = "agreement_check" class = "agreement_title">Confirm consent to the transfer of account data to a third-party server</label>
<input type= "checkbox" name= "agreement_check" />
<div class = "agreement_error hidden" >User consent is required</div>
</div>

In the script.js

define(['jquery'], function ($) {
    var CustomWidget = function () {
        var self = this;
        // Add a method for getting twig templates
        self.getTemplate = function (template, params, callback) {
            params = (typeof params == 'object') ? params : {};
            template = template || '';

            return self.render({
                href: '/templates/' + template + '.twig', // path to template
                base_path: self.params.path, // the widget will return to the object /widgets/#WIDGET_NAME#
                load: callback //calling the callback function
            }, params); // template parameters
        }

        this.callbacks = {
            render: function () {
                return true;
            },
            init: function () {
                return true;
            },
            bind_actions: function () {

                return true;
            },
            settings: function ($modal_body) { // $modal_body is a jquery object of the block on the right side of the widget's modal window
                self.getTemplate(
                    'agreement',
                    {},
                    function (template) {
                        $modal_body.find('input[name="agreement"]').val(''); // clear the offer field forcibly                     
                        $modal_body.find('.widget_settings_block').append(template.render()); // draw the template and add it to the widget settings block
                        var $install_btn = $('button.js-widget-install'),
                            $agreement_error = $('div.agreement_error');
                        $modal_body.find('input[name="agreement_check"]').on('change', function (e) {

                            var $checkbox = $(e.currentTarget);
                            if ($checkbox.prop('checked')) {
                                $modal_body.find('input[name="agreement"]').val('1'); //fill in the offer field if the checkbox is checked
                                //$agreement_error.addClass('hidden'); // clear the agreement field if the checkbox is not checked

                            } else {
                                $modal_body.find('input[name="agreement"]').val(''); // clear the agreement field if the checkbox is not checked
                            }
                        });
                        // when user clicks on the "Install" button, if the checkbox is not checked, we display a warning
                        $install_btn.on('click', function () {
                            if (!$modal_body.find('input[name="agreement"]').val()) {
                                $agreement_error.removeClass('hidden');
                            }
                        });
                    }
                );
                return true;
            },
            onSave: function () {
                return true;
            },
            destroy: function () {
                return true;
            },
            contacts: {
                selected: function () {
                    return true;
                }
            },
            leads: {
                selected: function () {
                    return true;
                }
            },
            tasks: {
                selected: function () {
                    return true;
                }
            }
        };
        return this;
    };

    return CustomWidget;
});

A checkbox in the right part of the integration window is added to the settings for the user to give their consent on transfering data

After assuring the consent, the save button will be active and the settings can be saved