try {
    var options = {
        chatPanel:
        {
            header:
            {
                filters: {
                    filterValues: ["Spain","Web"]
                }

            },
            settings:
            {
                conversationId: sessionStorage.getItem("myConversationId"),
                startLanguage: "es-ES",
                enableProactivityForSmallDevices: true,
                requestFeedback: false
            }
        },
    };
    var boost = window.boostInit("sectoralarm", options);
    var chatPanel = boost.chatPanel;
    var hasSentMessage = false;
    let btn = document.createElement("button");
    btn.id = "boostai";
    btn.type = "button";
    btn.className = "button button__small boost_button";
    var el = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 301 301" style="float:right; margin: 2.5px -5px 0 2.5px; width: 35px" xml:space="preserve"> <style type="text/css"> 	.st0{fill:#FFFFFF;} </style> <path class="st0" d="M220.5,167.4c0-22.4-18.2-40.6-40.6-40.6c-22.4,0-40.6,18.1-40.6,40.6c-5.2,0-9.4,4.2-9.4,9.4V208 c0,5.2,4.2,9.4,9.4,9.4h18.7c1.7,0,3.1-1.4,3.1-3.1v-21.8c0-3.4-1.2-8.8-2.8-11.8l-6.6-13.1c0-15.5,12.6-28.1,28.1-28.1 c15.5,0,28.1,12.6,28.1,28.1l-6.6,13.1c-1.5,3.1-2.8,8.4-2.8,11.8V215c-5.5,3.6-12,5.5-18.7,5.5h-6.2v9.4h6.2 c12,0,22.8-4.8,30.7-12.5h9.8c5.2,0,9.4-4.2,9.4-9.4v-31.2C229.8,171.6,225.6,167.4,220.5,167.4z"></path> <path class="st0" d="M179.9,117.5c2.1,0,4.2,0.2,6.2,0.4V92.6c0-6.9-5.6-12.5-12.5-12.5H92.6c-6.9,0-12.5,5.6-12.5,12.5V130 c0,6.9,5.6,12.5,12.5,12.5v18.7l31.2-18.7h13C145.4,127.6,161.5,117.5,179.9,117.5z M155,105c3.4,0,6.2,2.8,6.2,6.2 c0,3.5-2.8,6.2-6.2,6.2c-3.4,0-6.2-2.8-6.2-6.2C148.7,107.8,151.5,105,155,105z M111.3,117.5c-3.4,0-6.2-2.8-6.2-6.2 c0-3.4,2.8-6.2,6.2-6.2c3.5,0,6.2,2.8,6.2,6.2C117.5,114.7,114.7,117.5,111.3,117.5z M126.9,111.3c0-3.4,2.8-6.2,6.2-6.2 c3.4,0,6.2,2.8,6.2,6.2c0,3.5-2.8,6.2-6.2,6.2C129.7,117.5,126.9,114.7,126.9,111.3z"></path> </svg>';
    btn.innerHTML = "Chatea con nosotros" + el;
    btn.onclick = function () { openChat(); };
    document.body.appendChild(btn);

    let div = document.createElement("div");
    div.id = "csatmodal";
    div.className = "csatmodal";
    div.innerHTML =
        "<div class='csatmodalcontent'>"
        + "<div class='csatmodalheader'>"
        + "<div class='modal-box__exit-button'>"
        + "<svg focusable='false' xlmns='http://www.w3.org/2000/svg' aria-hidden='true' class='Icon__k-eErMln crnwNf TitleBarButton__StyledIcon-hGwpEw fvWVJL' color='currentColor' viewBox='0 0 384 512' style='position: absolute;top: 10px;right: 10px;height:30px;'><path d='M217.5 256l137.2-137.2c4.7-4.7 4.7-12.3 0-17l-8.5-8.5c-4.7-4.7-12.3-4.7-17 0L192 230.5 54.8 93.4c-4.7-4.7-12.3-4.7-17 0l-8.5 8.5c-4.7 4.7-4.7 12.3 0 17L166.5 256 29.4 393.2c-4.7 4.7-4.7 12.3 0 17l8.5 8.5c4.7 4.7 12.3 4.7 17 0L192 281.5l137.2 137.2c4.7 4.7 12.3 4.7 17 0l8.5-8.5c4.7-4.7 4.7-12.3 0-17L217.5 256z'></path></svg></div>"
        + "<span style='color: white;font-size: 18px;padding-right:160px'>Chatea con Sector Alarm</span></div>"
        + "<div id='modalbody' class='csatmodalbody'></div></div>";
    div.style.display = "none";
    document.body.appendChild(div);

    const closeModalsBtn = document.querySelectorAll(".modal-box__exit-button");
    closeModalsBtn.forEach(closeBtn => {
        closeBtn.addEventListener('click',
            (e) => {
                e.currentTarget.parentElement.parentElement.parentElement.style.display = 'none'
            });
    });

    var modalbody = document.getElementById("modalbody");
    var html = '<div id="csat">'
        + '<div class="rating">'
        + '<form id="csat-form" style="line-height:100px;">'
        + '<div class="star-rating">'
        + '<input id="star-6" type="radio" name="rating" value="1">'
        + '<label for="star-6" title="1 star" style="height:70px;">'
        + '<img class="Icon--pageNav" style="height:40px;" src="/WebChat/img/6.svg" alt="Search Icon">'
        + '</label>'
        + '<input id="star-5" type="radio" name="rating" value="2">'
        + '<label for="star-5" title="2 stars" style="height:70px;">'
        + '<img class="Icon--pageNav" style="height:40px;" src="/WebChat/img/5.svg" alt="Search Icon">'
        + '</label>'
        + '<input id="star-4" type="radio" name="rating" value="3">'
        + '<label for="star-4" title="3 stars" style="height:70px;">'
        + '<img class="Icon--pageNav" style="height:40px;" src="/WebChat/img/4.svg" alt="Search Icon">'
        + '</label>'
        + '<input id="star-3" type="radio" name="rating" value="4">'
        + '<label for="star-3" title="4 stars" style="height:70px;">'
        + '<img class="Icon--pageNav" style="height:40px;" src="/WebChat/img/3.svg" alt="Search Icon">'
        + '</label>'
        + '<input id="star-2" type="radio" name="rating" value="5">'
        + '<label for="star-2" title="5 stars" style="height:70px;">'
        + '<img class="Icon--pageNav" style="height:40px;" src="/WebChat/img/2.svg" alt="Search Icon">'
        + '</label>'
        + '<input id="star-1" type="radio" name="rating" value="6">'
        + '<label for="star-1" title="6 stars" style="height:70px;">'
        + '<img class="Icon--pageNav" style="height:40px;" src="/WebChat/img/1.svg" alt="Search Icon">'
        + '</label>'
        + '<span class="commentslbl" id="comments" title="comments">Si hay algo que quieras compartir con nosotros, puedes dejarnos un comentario.</span>'
        + '<textarea dir="ltr" name="message" rows="8" cols="30" id="message" style="padding-right:75px;padding-top:10px;padding-left:10px;font-size:12px;border-width: thin;"></textarea>'
        + '<input class="button  button__small" type="submit" value="Enviar" name="submit" style="border:none;" />'
        + '</form>'
        + '</div>'
        + '</div>';


    modalbody.innerHTML =
        "<p style='font-family:metric-bold;'>¡Valora tu experiencia en el chat!</p>" + html;

    form = document.getElementById('csat-form');
    form.onsubmit = function (e) {
        var country = "ES";
        e.preventDefault();

        if (form.rating.value !== "" || form.message.value !== "") {
            sendfeedback(reference, conversationId, form.rating.value, form.message.value, country);
            var modal = document.getElementById("csatmodal");
            modal.style.display = "none";
        }
    };

}
catch (ex){

}


function openChat() {
    boost.chatPanel.addEventListener("conversationIdChanged", function (event) {
        if (typeof event.detail.conversationId === 'string' && event.detail.conversationId !== "") {
            //only change if it has a value
            sessionStorage.setItem("myConversationId", event.detail.conversationId);
            conversationId = event.detail.conversationId;
        }
    });
    boost.chatPanel.addEventListener('conversationReferenceChanged', function (ev) {
        reference = ev.detail.conversationReference;
    });

    boost.chatPanel.addEventListener("chatPanelClosed", function (event) {
        sessionStorage.removeItem("myConversationId");
        if (hasSentMessage) {
            opencsatmodal();
        }
    });
    boost.chatPanel.addEventListener("messageSent", function () {
        hasSentMessage = true;
    });

    boost.chatPanel.show();
}

function opencsatmodal() {
    const modal = document.getElementById("csatmodal");
    modal.style.display = "block";
}

function closecsatmodal() {
    const modal = document.getElementById("csatmodal");
    modal.style.display = "none";
}

function sendfeedback(reference, conversationId, csat, comments, country) {
    console.log("Feedback - " + reference + " " + conversationId + " " + csat + " " + comments + " " + country);

    var rating = 1;
    var csatscore = parseInt(csat);
    if (csatscore < 4) {
        rating = 0;
    }

    var data = {
        command: "FEEDBACK",
        conversation_id: conversationId,
        value: {
            rating: rating,
            text: "CSAT Score : " + csat + " - " + comments
        }
    };

    $.ajax({
        type: 'POST',
        xhrFields: { withCredentials: true },
        url: "https://sectoralarm.boost.ai/api/chat/v2",
        headers: {
            "Content-Type": "application/json"
        },
        data: JSON.stringify(data),
        success: function (data, textStatus, xhr) {
            console.log("Success - " + xhr.status);
        },
        error: function (xhr, ajaxOptions, throwError) {
            //Error block
            console.log("Fail - " + xhr.status);
        }
    });
}