Adding Six New Quick Interaction Buttons to the Chat Box Without Needing to Click the "Send" Button

The chat box interface can be enhanced by adding new functions and innovative features. In this topic, we will discuss how to add six new buttons to the chat box for quick interaction, allowing members to quickly and effectively enter short texts, hyperlinks, videos, and GIFs without needing to click the "Send" button.  

1: Pen Button
This button allows users to enter short and quick texts, facilitating the immediate sharing of information without the need for lengthy writing. You can add more icons and texts as you wish.

2: GIF Button
This button enables the insertion of animated images (GIFs) that add a fun spirit to conversations and help express emotions more dynamically. You can add more images as you wish.

3: YouTube Button
This button allows users to preview videos directly in the chat box, making it easier to share visual content and enhancing interaction among members.

4: Text Link Button
This button allows users to create direct text links, facilitating the exchange of information and content more smoothly and easily.

5: Background Image Button
Chat users can use this button to set custom backgrounds for texts, making conversations more attractive and creative.

6:Text Size Increase Button
This button allows users to increase the text size, making it easier to read and enabling members to highlight important messages.
-----

Note...
The buttons appear within a single button named "More," and when clicked, the six buttons will appear.
__________


On all versions

CSS

Code:

 button#show-lead-pencil,#show-GIF,button#show-youtube,button#show-url,button#show-large-text,button#show-background {
margin-left: 7px;
    border: 0 !important;
    float: right;
    font-size: 0;
    height: 25px;
    width: 25px;
   cursor: pointer;
}
button#show-lead-pencil {
    background: url(https://i.servimg.com/u/f30/20/35/61/89/collec10.png);
    background-size: 100% 100%;
  margin-right: 7px;
}
#show-GIF {
    background: url(https://i.servimg.com/u/f30/20/35/61/89/video-10.png);
    background-size: 100% 100%;
    position: relative;
}
button#show-youtube {
    background: url(https://i.servimg.com/u/f20/16/85/77/67/ocia_a15.jpg);
}
button#show-url {
    background: url(https://i.servimg.com/u/f20/16/85/77/67/ocia_a16.jpg);
}
button#show-large-text {
    background: url(https://i.servimg.com/u/f20/16/85/77/67/ocia_a17.jpg);
}
button#show-background {
    background: url(https://i.servimg.com/u/f20/16/85/77/67/360_f_10.jpg);
   background-size: 100% 100%;
}
        #GIF-list {
            position: fixed;
            background-color: #fff;
            padding: 10px;
            display: none;
            z-index: 999;
            list-style: none;
            margin: 0;
            padding: 0;
            width: 400px;
            max-height: 80vh;
            overflow-y: auto;
            top: 55%;
            left: 66%;
            transform: translate(-50%, -50%);
        }
        #GIF-list li {
            display: inline-block;
            margin: 5px;
        }
      #GIF-list img {
    height: 60px;
    width: 60px;
    cursor: pointer;
}


#GIF-list li {
    margin-top: 25px !important;
    display: inline-block;
    margin: 3px;
}

ul#GIF-list:before {
    font-weight: bold;
    font-size: 17px;
    color: #fffdfd;
    background: #2196F3;
    right: 0;
    left: 0;
    position: absolute;
    display: flex;
    content: "صور متحركة";
    justify-content: center;
    align-content: center;
}

  #lead-pencil-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        max-width: 400px;
    }
    #GIF-list img {
    height: 60px;
    width: 60px;
    cursor: pointer;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}            
    .lead-pencil {
        display: block;
        text-align: center;
        background-color: #f9f9f9;
        cursor: pointer;
        border-radius: 4px;
    }
    .lead-pencil:hover {
        background-color: #e0e0e0;
    }
button#show-more {
    border: 0 !important;
    background: #e3e5e5 !important;
    padding: 2px;
   cursor: pointer;
}

@media  (max-width: 768px) {
    #GIF-list {
        width: 80% !important;
        transform: translate(-70%,-50%)!important;
    }
}

Don't forget to save

Javascript

Title : As you like
Placement : In the ChatBox

Code:

$(document).ready(function() {  
    function setupButtons() {
        if ($(window).width() < 4768) {
            $('#nb-users-connected').after('<button id="show-more" type="button">More</button>');
        }
    }

    setupButtons();
    $('body').append(`
        <div id="button-popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; padding: 20px; background: white; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.5); z-index: 1000;">
            <button class="popup-button" id="show-lead-pencil" type="button">Show Symbols</button>
            <button class="popup-button" id="show-youtube" type="button">YouTube</button>
            <button class="popup-button" id="show-url" type="button">Text Link</button>
            <button class="popup-button" id="show-large-text" type="button">Large Text</button>
            <button class="popup-button" id="show-background" type="button">Background</button>
            <button class="popup-button" id="show-GIF" type="button">Show GIF</button>
            <button id="close-button-popup">Close</button>
        </div>
    `);

    $('#show-more').on('click', function(event) {
        event.preventDefault();
        event.stopPropagation();
        $('#button-popup').toggle();
    });

    $('#close-button-popup').on('click', function() {
        $('#button-popup').hide();
    });

    // Setup symbols popup
    $('body').append(`
        <div id="popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; padding: 20px; background: white; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.5); z-index: 1000;">
            <div id="lead-pencil-list" style="margin-bottom: 10px;"></div>
            <button id="close-popup">Close</button>
        </div>
    `);

    var symbols = [
        "hello all of you", "How are you?", "I am fine, thank God", "Hello and welcome",
        "Hahahaha", "I'm going to sleep", "Good night", "Goodbye",
        "^_^", "◕.◕", "(❁´◡`❁)", "(★‿★)",
        "X_X", "^_~", "（〇_ｏ）", "(>▂<)",
        "(＠_＠;)", "(￣﹏￣；)", "(►__◄)", "(︶^︶)"
    ];

    var uniqueSymbols = Array.from(new Set(symbols));
    uniqueSymbols.forEach(function(symbol) {
        $('#lead-pencil-list').append(`<span class="lead-pencil" data-symbol="${symbol}">${symbol}</span>`);
    });
    
    $(document).on('click', '#show-lead-pencil', function() {
        $('#popup').show();
        $('#button-popup').hide();
    });

    $('#close-popup').on('click', function() {
        $('#popup').hide();
    });

    $(document).on('click', '.lead-pencil', function() {
        var symbol = $(this).data('symbol');
        var currentText = $('#chatbox_footer #message').val();
        if (!currentText.includes(symbol)) {
            $('#message').val(currentText + symbol);
            $('#message').focus();
            $('button[name="submit_button"],input#submit_button').click();
        }
        $('#popup').hide();
    });

    // Setup other buttons
    $(document).on('click', '.popup-button', function() {
        handleButtonClick($(this).attr('id'));
        $('#button-popup').hide();
    });

    function handleButtonClick(buttonId) {
        if (buttonId === 'show-youtube') {
            var youtubeUrl = prompt("Enter YouTube link:");
            if (youtubeUrl) {
                $('#message').val(function(index, value) {
                    return value + `[youtube]${youtubeUrl}[/youtube]`;
                });
                $('button[name="submit_button"],input#submit_button').click();
            }
        } else if (buttonId === 'show-url') {
            var url = prompt("Enter the link:");
            var description = prompt("Enter link description:");
            if (url && description) {
                $('#message').val(function(index, value) {
                    return value + `[url=${url}]${description}[/url]`;
                });
                $('button[name="submit_button"],input#submit_button').click();
            }
        } else if (buttonId === 'show-large-text') {
            var largeText = prompt("Enter large text:");
            if (largeText) {
                $('#message').val(function(index, value) {
                    return value + `[size=24]${largeText}[/size]`;
                });
                $('button[name="submit_button"],input#submit_button').click();
            }
        } else if (buttonId === 'show-background') {
            var imageUrl = prompt("Enter image link:");
            var backgroundText = prompt("Enter text:");
            if (imageUrl && backgroundText) {
                $('#message').val(function(index, value) {
                    return value + `[table][tr][td style="background: url(${imageUrl});background-repeat: no-repeat;background-size: 100% 100%;height: 88px;"]${backgroundText}[/td][/tr][/table]`;
                });
                $('button[name="submit_button"],input#submit_button').click();
            }
        } else if (buttonId === 'show-GIF') {
            $('#popup').hide();
            $('#GIF-list').toggle();
        }
    }

    $(document).on('click', function(event) {
        if (!$(event.target).closest('#popup, #button-popup, #show-more').length) {
            $('#popup').hide();
            $('#button-popup').hide();
        }
    });

    // Setup GIF button
    var $imageList = $('<ul>').attr('id', 'GIF-list').hide();

    var GIF = [
        { src: 'https://i.servimg.com/u/f30/20/35/61/89/35664d10.gif', alt: 'Boy dancing' },
        { src: 'https://i.servimg.com/u/f30/20/35/61/89/animat24.gif', alt: 'Dancing banana' },
        { src: 'https://i.servimg.com/u/f30/20/35/61/89/sponge10.gif', alt: 'SpongeBob' },
        { src: 'https://i.servimg.com/u/f30/20/35/61/89/goku-d10.gif', alt: 'Goku' },
        { src: 'https://i.servimg.com/u/f30/20/35/61/89/detect10.gif', alt: 'Conan' },
        { src: 'https://i.servimg.com/u/f30/20/35/61/89/emoji-10.gif', alt: 'Surprised' },
        { src: 'https://i.servimg.com/u/f20/16/85/77/67/tom-an10.gif', alt: 'Tom wants to sleep' },
        { src: 'https://i.servimg.com/u/f20/16/85/77/67/d6bd4210.gif', alt: 'Tom and Jerry' },
        { src: 'https://i.servimg.com/u/f20/16/85/77/67/kuroo-10.gif', alt: 'Laughing' },
        { src: 'https://i.servimg.com/u/f20/16/85/77/67/c18xku10.gif', alt: 'huh' },
        { src: 'https://i.servimg.com/u/f20/16/85/77/67/cat-gi10.gif', alt: 'Cat' },
        { src: 'https://i.servimg.com/u/f20/16/85/77/67/2ded2410.gif', alt: 'haha' }
    ];

    GIF.forEach(function(image) {
        var $listItem = $('<li>');
        var $img = $('<img>').attr('src', image.src).attr('alt', image.alt);
        $listItem.append($img);
        $imageList.append($listItem);
    });

    $('body').append($imageList);

    $imageList.on('click', 'img', function() {
        var src = $(this).attr('src');
        $('#message').val(src);
        $('button[name="submit_button"],input#submit_button').click();
        $imageList.hide();
    });

    $(document).on('click', function(event) {
        if (!$(event.target).closest('#show-GIF, #GIF-list').length) {
            $imageList.hide();
        }
    });
});

Don't forget to save

Will test tomorrow but this is probably one of your best tutorials so far.

good job
i use a similar code but older

@Wizzard
I'm glad you found this helpful! If you run into any issues while testing, let me know. Good luck!

@skouliki
Thank you

I will definitely use this once I get back ok my desktop!! Thank you!!

Great job  @كونان2000

@Beyonder @TonnyKamper
Thank you both