I customized your ShoutBox script

Hellо, Tutorialzine. I fell in love with your shoutbox script https://tutorialzine.com/2015/01/shoutbox-php-jquery and decided to create something special and more advanced. Just check out the image. I'm planning to submit my new code to Github. I think people will like it more than the original version. What I wanna ask is: do you mind adding a link to my github repository with updated shoutbox to your article? Thanks. :)



Ver. 1.3.0 has finally been introduced. Tons of improvements and fixes. Formatting-tags, image uploading and separate CSS file.

Comments 24

  • I love it! Perfect timing, I was just looking for something like this. Mind sharing the github link?

  • Yes, sure.
    this is the older version, https://github.com/C3La-NS/ChatX/
    the new one with formatting tags and a photo uploader is coming soon, just need to complete some few updates.

  • Awesome, just one thing: when I uploaded the folder directly from github to my blank website, it seems to be missing the css or something. Check it out: http://chatembed.freecluster.eu/ChatX-master/

  • Strange. Check if the CSS file exists (/assets/css/).
    Try to rename it so that it no longer contained "_" character. Don't forget to update the file name in Index.html

  • Didn't work... I even tried using the actual web address, so http://chatembed.freecluster.eu/ChatX-master/assets/css/chatxstyles.css

  • I suppose there's something with your hosting, it shows a message: "The website's configuration prevents you from accessing this page."
    May be you need to specify permissions?
    So, you may try to use my CSS link https://celans.ru/files/chatx/demo/assets/css/chatx_styles.css
    But it's temporal, you better find out why there's a problem or search for another source to load the CSS.

  • How can I disable the feature allowing you to move the chat window around? I plan on using it in an iframe, unless you know of a better way to embed it into a website, so I can't let people move it past the edge of the iframe.

  • I think there's no need for iframes to embed the chat app to your web-site. Check out README https://github.com/C3La-NS/ChatX#installation you just need to add few lines of code to your website and then edit script.js file so that it contained the absolute link to your chat application.

    Tell me if you still need to disable the draggable feature.

  • Yeah, now I got it working as you recomended, but I want to disable the movement and stuff so it just acts like a normal div. How could I do that? If it helps, the website is http://openweb.gdn

  • add this code to script.js

    Then you may like to get rid of movable cursor. Open chatx_styles.css, find the following lines:

    .chat header {
      cursor: move;

    and delete them.

    This is the easiest way without deleting the entire library.

  • It seems to be working, except for it seems to be positioned wrong. Here's a screenshot. https://i.imgur.com/yGqS6Fv.png

  • Ok, I figured out the problem. script.js was overwriting my css. The only other problem I have, is that when the chat message I am writing is longer than one line, the text box starts to cover up elements below. Ideally, the div would resize with it, so that it will push the other elements down when it gets larger than usual.

  • Do you have any idea how I could go about adding a name filter, so people can't pretend to be me?

  • Also, how could I add a filter to the chat messages?

  • what kind of filter?

  • one that deletes messages if they contain certain words. Either that, or a secret username that allows you to delete chat messages without opening up a ftp client and deleting files.

  • hello, I have a plan to make some kind of authentication but it's kinda difficult for me (backend is a totally new area for me). Also it's complicated because the chat doesn't use mySQL, so I need somehow to write username and password in plain txt files, more or less secure.

  • Sounds good. When you release the new version, is there any way I could just edit the files, because I customized the html, css, and php to suit my needs and I don't want to have to replace it.

  • You should check out the google sign in. https://developers.google.com/identity/sign-in/web/sign-in

  • Interesting, thanks. I will consider implementing google authorization.
    Do you have a working solution of this?

  • No, I started to research it for my website, but didn't get very far.

  • New version 1.5.0 is released. Biggest update ever introduces Moderator Panel and Authentication!


    For more, check out my GitHub repository: https://github.com/C3La-NS/ChatX/