I want to create chatbot widget plugin in nopcommerce 4.1 or above

Question

I am new to nopcommerce,I understood all the basic code flow of nopcommerce.So Now i started replicating plugins (widgets).I created a plugin can install and uninstall but no idea how to create a widget and add it commonly in all pages.what i am trying to achieve is call the iframe component inside the chat bar.I'll add the code of view in this question

Now i added this code in nop.web/shared/_root.cshtml. So now chat bar comes in all pages

<div>
        <a class="float" id="button" onclick="openForm()">
            <img src="~/files/chatbotv4/VertChat.png" class="my-float">
        </a>
        <div class="chat-popup" id="myForm">
            <div class="chathead">
                <div class="btn-close">
                    <button type="button" class="close" onclick="closeForm()">_</button>
                </div>
                <div class="btn-max" id="max">
                    <div type="button" class="fa fa-window-maximize" style="background-color:#16c886; font-size:21px;" onclick="max_chat()">&square;</div>
                </div>
                <div class="btn-min" id="min">
                    <div type="button" class="fa fa-window-restore" style="background-color:#16c886;  font-size:21px;" onclick="min_chat()">&#10064;</div>
                </div>
            </div>
            <iframe src='~/files/chatbotv4/botchat.html?name=@customerName&id=@customerId' style='min-width: 100%; width: 100%; min-height: 100%;'></iframe>
        </div>
    </div>
    <script>
        function openForm() {
            document.getElementById("myForm").style.display = "block";
            document.getElementById("button").style.display = "none";
            document.getElementsByClassName("header")[0].style.zIndex = "0";
            document.getElementsByClassName("header-menu")[0].style.zIndex = "0";
            document.getElementsByClassName("footer-lower")[0].style.zIndex = "-1";
            //$(".header").css("csstext", " z-index: 0 ;");
            //$(".header-menu").css("csstext", " z-index: 0;");
        }
        function closeForm() {
            document.getElementById("myForm").style.display = "none";
            document.getElementById("button").style.display = "block";
            document.getElementsByClassName("header")[0].style.zIndex = "1";
            document.getElementsByClassName("header-menu")[0].style.zIndex = "1";
            document.getElementsByClassName("footer-lower")[0].style.zIndex = "1";
        }
        function max_chat() {
            document.getElementById("max").style.display = "none";
            document.getElementById("min").style.display = "block";
            // $(".chat-popup").css("cssText", " width: 50%;");
            document.getElementsByClassName("chat-popup")[0].style.width = "50%";
        }
        function min_chat() {
            document.getElementById("min").style.display = "none";
            document.getElementById("max").style.display = "block";
            document.getElementsByClassName("chat-popup")[0].style.width = "30%";
        }

    </script>
<style>

    body {
        font-family: Arial, Helvetica, sans-serif;
    }

    * {
        box-sizing: border-box;
    }
    /* Button used to open the chat form - fixed at the bottom of the page */
    .open-button {
        background-color: #555;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        opacity: 0.8;
        position: fixed;
        bottom: 23px;
        right: 28px;
        width: 280px;
    }
    /* The popup chat - hidden by default */
    .chat-popup {
        display: none;
        position: fixed;
        bottom: 0;
        right: 15px;
        border: 3px solid #f1f1f1;
        z-index: 1;
        height: 100%;
        width: 30%;
    }

    iframe {
        background-color: white;
        min-height: 95% !important;
        min-width: 100%
    }

    .btn-close {
        padding-left: 95%;
        position: absolute;
        z-index: 1032;
    }

    .close {
        background: transparent;
        border: none;
    }

    .float {
        position: fixed;
        width: 60px;
        height: 60px;
        bottom: 20px;
        right: 20px;
        background-color: #0C9;
        //color:#FFF;
        border-radius: 50px;
        text-align: center;
        box-shadow: 2px 2px 3px #999;
        z-index: 1030;
    }

    .my-float {
        margin-top: 1px;
        margin-left: auto;
        height: 58px;
        width: 58px;
    }

    .btn-max {
        padding-left: 87%;
        position: absolute;
        margin-top: 0.2%;
        z-index: 1032;
        cursor: pointer;
    }

    .btn-min {
        padding-left: 90%;
        position: absolute;
        margin-top: 0.2%;
        z-index: 1032;
        display: none;
        cursor: pointer;
    }

    .chathead {
        height: 5%;
        width: 100%;
        position: relative;
        background-color: #16c886;
    }

</style>

now i want to add it as a seperate widget.

Answer 1

The widget is a defined area where a developer can inject his/her expected functionality. There are already a lot of widgets define by the core team, one of a good example of the widget plugin is NivoSlider. In your plugin you have to implement IWidgetPlugin and need to define expected viewcomponent name of your plugin at "GetPublicViewComponent" method and the name of the widget of nopcommerce at "GetWidgetZones" method where you want to show the viewcomponent at a public site. If you want to know more about the widget plugin, you can visit DEVELOP AND UNDERSTAND WIDGET PLUGIN IN NOPCOMMERCE 4.10 WITH REAL-TIME COMMUNICATION