Tagging Members in ChatBox

Can you please help me to tag members in the chatbox: https://gabfest.forumotion.com/

Gabfest wrote:Can you please help me to tag members in the chatbox: https://gabfest.forumotion.com/

Hello @Gabfest This is not an easy thing to do but I think @tikky could help you as he did this for my forum but he maybe really busy.

Ape wrote:

Gabfest wrote:Can you please help me to tag members in the chatbox: https://gabfest.forumotion.com/

Hello @Gabfest This is not an easy thing to do but I think @tikky could help you as he did this for my forum but he maybe really busy.

Thank you so much for your quick reply. I'll just wait for tikky. Have a great day!

Hello @Gabfest,

Create a new JavaScript Page placement in the Chatbox and use the following code:

Code:

(function($) {
    'use strict';

    $(function() {

        var overrided = Chatbox.prototype.refresh;

        Chatbox.prototype.refresh = function(data) {

            overrided.call(this, data);

            $('.user-msg')
                .filter(function() {
                    return $(this).find('.msg').length && $(this).find('.msg').text().toUpperCase().includes('@' + my_infos.username.toUpperCase()) === true;
                })
                .each(function() {

                    if ($(this).find('.msg').attr('data-chatbox-mention')) {
                        return;
                    }

                    $(this)
                        .find('.msg')
                        .attr('data-chatbox-mention', my_infos.username)
                        .prepend(
                            [
                                '<div style="background-color: #cceec7; border-radius: 3px; padding-left: .25rem; padding-right: .25rem; font-weight: 700; color: #6da265; display: inline-flex; text-transform: uppercase; margin-right: .25rem;user-select: none;-webkit-user-select: none;">',
                                '  Mentioned you!',
                                '</div>'
                            ].join('\n')
                        );

                });
        };

        $('<div>', {
                'id': 'divmention',
                'class': 'fontbutton',
                'html': '&commat;'

            })
            .css({
                'border': '1px solid #aaa',
                'border-radius': '3px',
                'box-shadow': 'inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05)',
                'height': '18px',
                'line-height': '16px',
                'text-align': 'center',
                'width': '18px'
            })
            .insertBefore('#divsmilies')
            .on('click', function(event) {
                event.preventDefault();

                var mention = prompt('Mention a user', '');

                if (!mention || mention == null || mention == '') {
                  console.warn('You cannot leave the "username" empty.');
                  return;
                }
                                   
                    $('#message').val('@' + mention + ' ');
                    $('#message').focus();
             

            });


    });

})(jQuery);

Ape's explanation of the mention
To Mention a user you will see a new button on the editor of the chat box.

 Screen shot:

when you press this button you will see a little popup at the top of your screen

 Screen shot:

type in the mane of the member you want to Mention and press ok now the text will show up in your Type box then just type what you want after the @USERNAME.

 Screen Shot:

then press send or enter. Your message will look like a basic comment to you but to the member it will look like this.

 Screen shot:

tikky wrote:Hello @Gabfest,

Create a new JavaScript Page placement in the Chatbox and use the following code:

Code:

(function($) {
    'use strict';

    $(function() {

        var overrided = Chatbox.prototype.refresh;

        Chatbox.prototype.refresh = function(data) {

            overrided.call(this, data);

            $('.user-msg')
                .filter(function() {
                    return $(this).find('.msg').length && $(this).find('.msg').text().toUpperCase().includes('@' + my_infos.username.toUpperCase()) === true;
                })
                .each(function() {

                    if ($(this).find('.msg').attr('data-chatbox-mention')) {
                        return;
                    }

                    $(this)
                        .find('.msg')
                        .attr('data-chatbox-mention', my_infos.username)
                        .prepend(
                            [
                                '<div style="background-color: #cceec7; border-radius: 3px; padding-left: .25rem; padding-right: .25rem; font-weight: 700; color: #6da265; display: inline-flex; text-transform: uppercase; margin-right: .25rem;user-select: none;-webkit-user-select: none;">',
                                '  Mentioned you!',
                                '</div>'
                            ].join('\n')
                        );

                });
        };

        $('<div>', {
                'id': 'divmention',
                'class': 'fontbutton',
                'html': '&commat;'

            })
            .css({
                'border': '1px solid #aaa',
                'border-radius': '3px',
                'box-shadow': 'inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05)',
                'height': '18px',
                'line-height': '16px',
                'text-align': 'center',
                'width': '18px'
            })
            .insertBefore('#divsmilies')
            .on('click', function(event) {
                event.preventDefault();

                var mention = prompt('Mention a user', '');

                if (!mention || mention == null || mention == '') {
                  console.warn('You cannot leave the "username" empty.');
                  return;
                }
                                   
                    $('#message').val('@' + mention + ' ');
                    $('#message').focus();
             

            });


    });

})(jQuery);

Ape's explanation of the mention
To Mention a user you will see a new button on the editor of the chat box.

 Screen shot:

when you press this button you will see a little popup at the top of your screen

 Screen shot:

type in the mane of the member you want to Mention and press ok now the text will show up in your Type box then just type what you want after the @USERNAME.

 Screen Shot:

then press send or enter. Your message will look like a basic comment to you but to the member it will look like this.

 Screen shot:

Works great and thank you so very much!

Glad you liked this and i am so happy it works for you.

Thank you @tikky for your help and post.

Have a great weekend both of you.

Problem solved & topic archived. Please read our forum rules: ESF General Rules