chatbox button

Code:

$(function() {
    var Rolltxt = '<div id="Rolled">ROLL MESSAGE</div>';
           $('#quick_reply input[value="Send"]').after('<input id="Roll" class="mainoption" style="margin-left:6px;" type="submit" value="Roll" name="post"></input>');
        $('#Roll').click(function() {
            $('#quick_reply textarea').val(Rolltxt);
            $('#quick_reply i-frame').contents().find('body').html(Rolltxt);
        });
   
});

lets take this coding and change so it shows up as a button on the chatbox i tried by just changing a few lines

Code:

$(function() {
    var Rolltxt = '<div id="Rolled">ROLL MESSAGE</div>';
           $('#chatbox input[value="Send"]').after('<input id="Roll" class="mainoption" style="margin-left:6px;" type="submit" value="Roll" name="post"></input>');
        $('#Roll').click(function() {
            $('#chatbox textarea').val(Rolltxt);
            $('#chatbox i-frame').contents().find('body').html(Rolltxt);
        });
   
});

where i want the button to show up http://prntscr.com/6reo7s

Your script isn't going to work, because the scripts installed via JS codes management don't affect the chatbox. You generally need to access the frame of the chatbox to manipulate its contents. Here's an example I can give you of accessing the frame, creating a button, and manipulating the frame contents :

Modules > JS codes management > new

Placement : In the index

Code:

$(function() {
  var frame = document.getElementById('frame_chatbox'), fa, bloc, button, msg; // define all our variables
 
  frame.onload = function() {
    frame.contentDocument ? fa = frame.contentDocument : fa = frame.contentWindow.document; // determine which method to use to access the frame
   
    // find and create our elements
    bloc = fa.getElementById('chatbox_messenger_form'), msg = fa.getElementById('message'), button = document.createElement('INPUT');
   
    button.type = 'button'; // input type
    button.value = 'myButton'; // button texte
   
    // code to be executed when our button is clicked
    button.onclick = function() {
      msg.value += ' myButton\'s text'; // adds to the current message value
    };
   
    bloc.appendChild(button); // append the button to the message form
  };
});

I've marked the code with comments to give an explanation.