List, Add, Delete Custom Actions using JavaScript Object Model JSOM SharePoint Online (Classic)

The best way to add JS file to your SharePoint Online site is to use custom actions. Now, if you need to turn it on and off and need a page from where to be able to do so, keep reading below -

Throw the html code provided below on any page using content editor webpart after first updating the link to the js file you want to add and it would do the trick - 

Before adding custom action

After adding custom action

HTML Code - 

<div>

<div id="details">

<h2>Registered custom actions</h2>

</div>

<button id="addBOT" style="display:none" type="button">Add BOT User Action</button>

<button id="deleteBOT" style="display:none" type="button">Delete BOT User Action</button>

<script type="text/javascript">

    

    $(document).ready(function ()

{

    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveListItems);

}); 

function retrieveListItems() {

    

    var clientContext = new SP.ClientContext.get_current();

    

    this.userCustomActions = clientContext.get_site().get_userCustomActions();

    clientContext.load(this.userCustomActions);

    

clientContext.executeQueryAsync(Function.createDelegate(this, listCustomActions), Function.createDelegate(this, onQueryFailed));

    

    console.log('Libraries Loaded');

}

function listCustomActions(){

var customActionEnumerator = this.userCustomActions.getEnumerator();

var BOTadded = false;

    while (customActionEnumerator.moveNext()) 

    {

        var oUserCustomAction = customActionEnumerator.get_current();

        if(oUserCustomAction.get_title()=="BOTAction"){BOTadded = true;}

        $("#details").append("<p>"+ oUserCustomAction.get_title() +"</p>");           

    }

    

    if(BOTadded){

    $("#deleteBOT").show();

    }else{

    $("#addBOT").show();

    }

    

    $("#addBOT").click(function(){

    var clientContext = new SP.ClientContext.get_current();

    var userActions = clientContext.get_site().get_userCustomActions();

    var newUserAction = userActions.add();

    newUserAction.set_name("BOTAction");

    newUserAction.set_title("BOTAction");

    newUserAction.set_location("ScriptLink");

    newUserAction.set_scriptSrc("<<LINK TO YOUR JS FILE LOCATION OR CDN>>");

    newUserAction.set_sequence(20000);

    newUserAction.update();

clientContext.load(userActions);

    clientContext.executeQueryAsync(Function.createDelegate(this, onQuerySucceeded), Function.createDelegate(this, onQueryFailed));

    });

    

    $("#deleteBOT").click(function(){

    this.clientContext = new SP.ClientContext.get_current();

    this.userActions = this.clientContext.get_site().get_userCustomActions();

   

this.clientContext.load(this.userActions);

    this.clientContext.executeQueryAsync(Function.createDelegate(this, deleteCustomActions), Function.createDelegate(this, onQueryFailed));

    });

};

function deleteCustomActions(){

var customActionEnumerator = this.userActions.getEnumerator();

while (customActionEnumerator.moveNext()) 

    {

        var oUserCustomAction = customActionEnumerator.get_current();

        if(oUserCustomAction.get_title()=="BOTAction"){

        oUserCustomAction.deleteObject();

        this.clientContext.load(oUserCustomAction);

        this.clientContext.executeQueryAsync(Function.createDelegate(this, onQuerySucceeded), Function.createDelegate(this, onQueryFailed));

        }

                  

    }

}

function onQuerySucceeded() {

    console.log('Action Completed');

    document.location.reload(true)

}

function onQueryFailed(sender, args) {

        console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

}

</script>

Minimalistic Chatbot Webchat Implementation with just JQuery

This assumes you already have a chat bot and know its secret key and bot id. Also, you want a chat bot button on right hand corner of your screen to open and close the chat window.
There is a git-hub implementation of that but it is using react and full fledged solution. If you want a quick implementation, continue reading on.

Here is what it looks like -

Here is the link to download the full code. (Please remember to update the secret key and bot id)

Html for implementation -

<!DOCTYPE html>
<html>
<head>
    <style>
        #botDiv {
            height:500px;
        }


        #dialogContainer {
            right: 20px;
            background-color: hsla(0,0%,100%,.8);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            border-radius: 4px;
            box-shadow: 0 0 20px rgba(0,0,0,.2);
            border: 4px solid #39c;
            bottom: 80px;
            display: flex;
            flex-direction: column;
            max-width: 400px;
            min-width: 320px;
            position: absolute;
            /* top: 20px; */
            width: 30%;
            height: 500px;
        }


        #chatButton {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 2001;
        }

        .chat {
            height: 52px;
            width: 52px;
        }

        .chat {
            background-color: #414244 !important;
            box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
            color: white !important;
            height: 50px;
            width: 50px;
            border-radius: 50%;
            font-family: "TW Cen MT", "Segoe UI", Arial, sans-serif !important;
            text-decoration: none;
            border: 1px solid #ffffff;
            display: block;
        }

        .chat img {
            position: relative;
        }

        .chat img {
            display: inline-block;
            padding-bottom: 1px;
            background: transparent;
            width: 1.5em;
            left: 50%;
            top: 45%;
            -webkit-transform: translateX(-50%) translatey(-50%);
            -moz-transform: translateX(-50%) translatey(-50%);
            transform: translateX(-50%) translatey(-50%);
        }
    </style>
</head>
<body>
    <div id="webchat" role="main"></div>
    <div id="chatButton">
        <span class="bot-notification" style="display:none">1</span>
        <a class="chat" href="#" id="openDialog">
            <img alt="Chat Bubble" src="img/chat-bubble.svg">
        </a>
    </div>
    <div id="dialogContainer" style="display:none;"><div id="botDiv" role="main" /></div>


    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script>
        var INPEXBot = (function () {
            var _botOpened = false;

            $("#openDialog").click(function () {
                if (!_botOpened) {
                    openBotDialog();
                }
                else {
                    closeBotDialog();
                }
                return false;
            });

            function closeBotDialog() {
                _botOpened = false;
                $('#dialogContainer').hide();
            }

            function openBotDialog() {
                _botOpened = true;
                $('#dialogContainer').show();
                activateBot();
            }

            function activateBot() {
                window.WebChat.renderWebChat(
                   {
                      directLine: window.WebChat.createDirectLine({
                         token: 'YOUR SECRET KEY'
                      }),
                      userID: 'YOUR BOT ID'
                   },
                    document.getElementById('botDiv')
                );
            };

        })();
    </script>
</body>
</html>