{"id":560,"date":"2023-10-31T02:19:00","date_gmt":"2023-10-31T02:19:00","guid":{"rendered":"http:\/\/www.rumbletalk.com\/blog\/?p=560"},"modified":"2025-10-14T04:03:40","modified_gmt":"2025-10-14T04:03:40","slug":"chat-css-tricks","status":"publish","type":"post","link":"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/10\/31\/chat-css-tricks\/","title":{"rendered":"27 Easy Chat CSS Tricks for Designing your Own Chat Room (WEB & MOBILE)"},"content":{"rendered":"

Controlling your chat design using group chat with custom CSS is easy with our advanced design features.<\/p>\n

RumbleTalk sets itself apart from the competition by being the most customizable group chatroom available on the market. The latest custom css tips and tricks can be found in here<\/a>.<\/p>\n

A lot of our customization features are built into our settings menu, making this customization available to anyone at any tech-literate level, and or CSS experts. RumbleTalk group chat<\/a> with custom CSS can be completely transformed.<\/p>\n

But not everyone knows CSS, so we\u2019ve put together this list of easy chat CSS tricks that anyone can copy and paste into the advanced design tab of their RumbleTalk account to get the benefits of a fully customized group chat room. \u00a0(Note, for the mobile version, we have other CSS tricks<\/a>).<\/p>\n

All you have to do is:<\/p>\n

    \n
  1. Copy the chat CSS code from this list.<\/li>\n
  2. Log in to your RumbleTalk admin panel.<\/li>\n
  3. In the chat settings, under “Design”, click on “Add CSS for Web Browsers”.<\/li>\n
  4. Paste your code and close the box.<\/li>\n<\/ol>\n

    \"Group<\/p>\n

    In this post, we\u2019ll cover the following chat CSS tricks:<\/p>\n

    User Icons – Chat CSS tricks<\/h3>\n
      \n
    1. Change the default guest user icon image<\/li>\n
    2. Change the user icon size in the user list<\/li>\n
    3. Change the user icon size in the chat area<\/li>\n
    4. Hide the user icons in the user list<\/li>\n
    5. Hide the user icons in the chat area<\/li>\n<\/ol>\n

      Functions – Chat CSS tricks<\/h3>\n
        \n
      1. Hide system messages<\/li>\n
      2. Hide message date & time<\/li>\n
      3. Hide all option buttons<\/li>\n
      4. Hide specific option buttons<\/li>\n
      5. Insert a clear chat area button<\/li>\n
      6. Hide the number of viewers and listeners<\/li>\n
      7. Hide the “Go To Facebook Profile” button<\/li>\n
      8. Change the emojis<\/li>\n<\/ol>\n

        Text\u00a0– Chat CSS tricks<\/h3>\n
          \n
        1. Change the group chat administrators’ text color<\/li>\n
        2. Change the text displayed in the guest login button<\/li>\n
        3. Remove the login type label from the user profile<\/li>\n
        4. Add borders to the username text<\/li>\n
        5. Add borders to the message text<\/li>\n
        6. Add an element above the chat in full-screen<\/li>\n
        7. Hide the QR box<\/li>\n
        8. Add a closing icon to the floating bouncing icon<\/li>\n
        9. Remove the field image and description in the register<\/li>\n
        10. Set max image size in a chat<\/li>\n
        11. Set max YouTube size in a chat<\/li>\n
        12. Hide Twitter Link in Users Profile<\/li>\n
        13. Disable group chat and allow only private chats<\/li>\n
        14. Hide scrolling for non-moderators<\/li>\n<\/ol>\n

          1. Change the default guest user icon image<\/h2>\n

          You can change the guest user icon to any image by inserting the
          image URL into the following code.
          \n.guest-default-image {
          \nbackground: url(\"https:\/\/www.test.com\/storage\/usericon.png\");
          \n}
          \n<\/code><\/p>\n

          \"Group<\/p>\n

          2. Change the user icon size in the user list<\/h2>\n

          .user-image {
          \nwidth: 16px;
          \nheight: 16px;
          \n}
          \n<\/code><\/p>\n

          \"large<\/p>\n

          3. Change the user icon size in the chat area<\/h2>\n

          .message-user-image {
          \nwidth: 16px;
          \nheight: 16px;
          \n}
          \n<\/code><\/p>\n

          \"large<\/p>\n

          4. Hide the user icons in the user list<\/h2>\n

          .user-image { display: none; }
          \n<\/code><\/p>\n

          \"hide<\/p>\n

          5. Hide the user icons in the chat area<\/h2>\n

          .message-user-image { display: none; }
          \n<\/code><\/p>\n

          \"hide<\/p>\n

          Note, if you like to remove the white tooltip next to each message, you can use this code
          \n.main-message-container::before,
          \n.main-message-container::after { content: none; }
          \n<\/code><\/p>\n

          6. Hide system messages<\/h2>\n

          System messages such as \u201cuser joined the conversation\u201d and \u201cuser
          left the conversation\u201d appear in the group chat area.<\/p>\n

          .system-message-text { display: none; }
          \n<\/code><\/p>\n

          \"system<\/p>\n

          7. Hide message date & time<\/h2>\n

          Each message by default will be stamped with the date and time it
          was sent. Use this code to remove this feature.<\/p>\n

          .message-date { display: none; }
          \n<\/code><\/p>\n

          \"group<\/p>\n

          8. Hide all option buttons<\/h2>\n

          #options { display: none !important; }
          \n<\/code><\/p>\n

          \"Hide<\/p>\n

          9. Hide specific option buttons<\/h2>\n

          Choose the buttons you want to hide. Each of these lines of code
          can be copied and pasted individually.<\/code><\/code><\/p>\n

          .options-dialog .export {
          \n display: none !important;
          \n}<\/code>\"export<\/a>
          .options-dialog .popup {
          \n display: none !important;
          \n}<\/code>          \"chat<\/a>
          .options-dialog .toggle-sound {
          \n display: none;
          \n}<\/code>          \"chat<\/a><\/p>\n

          .options-dialog .qr-option { display: none !important; }<\/code><\/p>\n

          \"qr<\/a><\/code><\/code><\/code><\/code><\/p>\n

          .options-dialog .logout { display: none !important; }<\/code><\/p>\n

          \/* This option only applies to mobile *\/<\/code><\/p>\n

          \"logout<\/a><\/p>\n

          .options-dialog .toggle-private {
          \n display: none;
          \n}<\/code>          \"chat<\/a><\/p>\n

          .options-dialog .font-size {
          \n display: none;
          \n}<\/code>          \"chat<\/a><\/p>\n

          .options-dialog .admin-mode-switch {
          \n display: none !important;
          \n}<\/code><\/p>\n

          \/* This option can only be applied by admins *\/<\/code>\"chat<\/a><\/p>\n

          .options-dialog .clear-messages {
          \n display: none !important;
          \n}<\/code><\/code><\/code><\/code><\/code><\/p>\n

          \/* This option can only be applied by admins. *\/<\/code><\/code>\"clear<\/a><\/p>\n

          10. Insert a clear\u00a0chat area button<\/h2>\n

          By default, the clear all button is hidden. Insert this button if you
          want to have the option to clear all options without deleting them.<\/p>\n

          #options #clear { display: inline-block !important; }<\/code>\"Group<\/p>\n

          11. Hide the number of viewers and listeners<\/h2>\n

          By default, the number of viewers and listeners is displayed in the
          chat. Add this code to remove it.<\/p>\n

          #info { display: none !important; }<\/code><\/p>\n

          \"Group<\/p>\n

          12. Hide the “Go to Facebook Profile” button<\/h2>\n

          When a user uses Facebook to log into the chat, a button will by
          default appear in their group chat profile for others to go to their
          Facebook profile. Use this code to remove that option.<\/p>\n

          #user-info .facebook-button { display: none !important;}
          \n<\/code><\/p>\n

          \"Facebook<\/p>\n

          \"No<\/p>\n

          13. Change the emojis<\/h2>\n

          Use the following code for each emoji, where the number 10<\/strong> represents one of the emojis (from 1 to 33, excluding 6), and the URL represents the image you want to replace it with.<\/p>\n

          .smiley-10\u00a0{
          \nwidth: 0 !important;
          \npadding-right: 30px;
          \nbackground-image: url(\"https\/\/www.exampleurl.com\/smile2.gif\");
          \nheight: 30px;
          \n}
          \n<\/code><\/p>\n

          \"Customize<\/p>\n

          14. Change group chat administrators text color<\/h2>\n

          Set yourself apart as the group chat administrator by changing the
          color of your username and message text. By default the color is red.<\/p>\n

          \"Group<\/p>\n

          In the user list<\/strong><\/p>\n

          .admin .user-name { color: orange; }
          \n<\/code><\/p>\n

          In the group chat<\/strong><\/p>\n

          .admin .message-user-name { color: orange; }
          \n<\/code><\/p>\n

          15. Change the text displayed in the guest login button<\/h2>\n

          Replace the text “new name” but be certain to leave the (‘) marks
          around it.<\/p>\n

          “color: #000” is the color of the text. In this case, the text will
          be black. You can change this with any hex code.<\/p>\n

          “-20px” is the relative horizontal location of the text. Play with
          this value until the text sits in the center.<\/p>\n

          #login-guest span {
          \ncolor: transparent !important;
          \nposition: relative;
          \n}
          \n#login-guest span:after {
          \ncontent: 'Join Us!';
          \nposition: relative;
          \ncolor: #fff;
          \nleft: -20px;
          \n}
          \n<\/code><\/p>\n

          \"Custom<\/p>\n

          16. Remove the login type label from the user profile<\/h2>\n

          .login-type { display: none; }
          \n<\/code><\/p>\n

          \"Group<\/p>\n

          17. Add borders to the username text<\/h2>\n

          This code will add black and bold borders to the usernames in the chat message area.<\/p>\n

          .message-user-name{
          \nfont-weight: bold;
          \ncolor:rgba(0,150,245,1.00);
          \ntext-shadow: -1px 0 black, 0 1px black,
          \n1px 0 black, 0 -1px black;
          \n}
          \n<\/code><\/p>\n

          \"Bold<\/p>\n

          18. Add borders to the message\u00a0text<\/h2>\n

          This code will add black and bold borders to the text in the chat\u00a0area.<\/p>\n

          .message-text{
          \ncolor:#fff;
          \ntext-shadow: -1px 0 black, 0 1px black,
          \n1px 0 black, 0 -1px black;
          \nfont-weight: bold;
          \n}
          \n<\/code><\/p>\n

          \"Bold<\/p>\n

          19. Add an element above the chat in full screen<\/h2>\n

          Many ask us how I can add a player on top of the chat area.
          The following code will be added to your HTML (not on the RumbleTalk CSS area) in full screen.<\/p>\n

          <style>
          \n<inner element height> - the height of the extra element
          \n#wrapper { height: 100%; }
          \n#extra-element {
          \nwidth: 100%;
          \nheight: <inner element height><\/strong>;
          \npadding: 0px;
          \n}
          \n#chat-wrapper {
          \nposition: relative;
          \nwidth: 100%;
          \nheight: 100%;
          \n}
          \n<chat-iframe> {
          \nmax-height: calc(100% - <inner element height><\/strong>);
          \n}
          \n<\/style>
          \n<div id=\"wrapper\">
          \n<div id=\"extra-element\">THE CODE YOU WANT TO BE ON TOP OF THE PAGE\u00a0<\/strong><\/div>
          \n<div id=\"chat-wrapper\">THE CHAT CODE<\/strong><\/div>
          \n<\/div>
          \n<\/code><\/p>\n

          \"add<\/p>\n

          20. Hide the QR box<\/h2>\n

          When you want to hide the QR option in your chat.<\/p>\n

          \"QR<\/p>\n

          To remove the button, add the following:<\/p>\n

          <\/code><\/p>\n\n\n

          .options-dialog .qr-option {\n display: none !important;\n}\n<\/code><\/p>\n\n\n

          To keep the button for chat moderators only, add the following:<\/p>\n

          .moderator #options #opts { display: list-item; }<\/b><\/code><\/p>\n

          21. Add closing icon to the floating bouncing icon<\/h2>\n

          If you want to add a closing icon to the floating icon. You can add this code and make sure you change the hash code (in red).
          \n(function(){
          \nvar hash = 'YOUR_HASH<\/span>',
          \nhandle;
          \n<\/code>

          \nhandle = setInterval(
          \nfunction () {
          \nif (
          \n!window.RumbleTalkChat ||
          \n!window.RumbleTalkChat[hash] ||
          \n!window.RumbleTalkChat[hash].mainDiv
          \n) {
          \nreturn;
          \n}
          \n<\/code>

          \nclearInterval(handle);
          \nif (hash == 'YOUR_HASH') {
          \nthrow new Error('Someone forgot to replace the place holder \"YOUR_HASH\" with your chat\\'s hash');
          \nreturn;
          \n}
          \n<\/code>

          \nvar img = new Image();
          \nimg.src = 'https:\/\/d241b8qep9dzid.cloudfront.net\/20190625083406\/italic.png';
          \nimg.style.cursor = 'pointer';
          \nimg.style.position = 'absolute';
          \nimg.style.bottom = 0;
          \nimg.style.right = 0;
          \nimg.onclick = function () {
          \nwindow.RumbleTalkChat[hash].mainDiv.parentNode.removeChild(window.RumbleTalkChat[hash].mainDiv);
          \n};
          \n<\/code>

          \nwindow.RumbleTalkChat[hash].mainDiv.appendChild(img);
          \n},
          \n100
          \n);
          \n<\/code>

          \n}());
          \n<\/code><\/p>\n

          22. Remove the image and description of the field in the register dialog box<\/h2>\n

          Remove the field image and description from the registration form.
          \n.register-login-dialog form .row:nth-child(n+4) {
          \ndisplay: none;
          \n}
          \n<\/code><\/p>\n

          23. Set max image size in a chat<\/h2>\n

          Add the maximum size of an image to the chat conversation. Clicking on a small image will open it in its original size.
          \n.message-text a img {
          \nmax-width: 200px !important;
          \nmax-height: 200px;
          \n}
          \n<\/code><\/p>\n

          24. Set max YouTube size in a chat<\/h2>\n

          Add the maximum size of a YouTube video in a chat. Clicking on a small image will open it in its original size.<\/p>\n

          .message-text .youtubeWrapper {
          \nmax-width: 300px !important;
          \nmax-height: 300px;
          \n<\/span>  padding: 0;
          \nheight: auto;
          \n}
          \n.youtubeWrapper > iframe {
          \nheight: auto;
          \nposition: static;<\/b>
          \n}
          \n<\/code><\/p>\n

          25. Hide the Twitter Link in user profile<\/h2>\n

          Hide Twitter Link in user profile (when clicking on the gear icon in the private chat ).
          \n.twitter-button {
          \ndisplay: none;
          \n}
          \n<\/code><\/p>\n

          26. Disable group chat and allow only private chats<\/h2>\n

          If you want to allow only private chat discussion so all can talk in private but not have a group discussion then choose a chat type “Group chat”, and then add the following CSS to both the web and mobile CSS versions.
          \n#content,
          \n#text:not([readonly]),
          \n#chat-extra,
          \n#send-button
          \n{ display: none !important; }
          \n<\/code><\/p>\n

          27. Hide scrolling for non-moderators<\/h2>\n

          If you want to prevent the scrolling of the chat message area – which will prevent regular users from accessing old messages, add the following CSS code to both the web and mobile CSS versions:<\/p>\n

          body:not(.moderator) #chat {
          \noverflow-y: hidden;
          \n}
          \n<\/code><\/p>\n\n\n

          <\/p>\n","protected":false},"excerpt":{"rendered":"

          Controlling your chat design using group chat with custom CSS is easy with our advanced design features. RumbleTalk sets itself apart from the competition by being the most customizable group chatroom available on the market. The latest custom css tips and tricks can be found in here. A lot of our customization features are built […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"featured_image_url":"","seo_focus_kw":"","seo_meta_desc":""},"categories":[11,12,9,4],"tags":[49,216,223,50],"acf":[],"yoast_head":"\n26 Easy Chat CSS Tricks for Designing your Own Chat Room style<\/title>\n<meta name=\"description\" content=\"RumbleTalk group chat can be customized with CSS. Designers and CSS experts can customize chat css with ease. Now, you also can do it!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/10\/31\/chat-css-tricks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"26 Easy Chat CSS Tricks for Designing your Own Chat Room style\" \/>\n<meta property=\"og:description\" content=\"RumbleTalk group chat can be customized with CSS. Designers and CSS experts can customize chat css with ease. Now, you also can do it!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/10\/31\/chat-css-tricks\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Group Chat Room Plugin for Websites and Live events\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/rumbletalk\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-31T02:19:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-14T04:03:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d1pfint8izqszg.cloudfront.net\/blog\/posts\/chat-design-tab.png\" \/>\n<meta name=\"author\" content=\"Eyal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@rumbletalk\" \/>\n<meta name=\"twitter:site\" content=\"@rumbletalk\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eyal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/10\/31\/chat-css-tricks\/\",\"url\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/10\/31\/chat-css-tricks\/\",\"name\":\"26 Easy Chat CSS Tricks for Designing your Own Chat Room style\",\"isPartOf\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/#website\"},\"datePublished\":\"2023-10-31T02:19:00+00:00\",\"dateModified\":\"2025-10-14T04:03:40+00:00\",\"author\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/7c282b2a9db21e0889558ab4b26878ea\"},\"description\":\"RumbleTalk group chat can be customized with CSS. Designers and CSS experts can customize chat css with ease. Now, you also can do it!\",\"breadcrumb\":{\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/10\/31\/chat-css-tricks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/10\/31\/chat-css-tricks\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/10\/31\/chat-css-tricks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rumbletalk.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"27 Easy Chat CSS Tricks for Designing your Own Chat Room (WEB & MOBILE)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/#website\",\"url\":\"https:\/\/rumbletalk.com\/blog\/\",\"name\":\"Online Group Chat Plugin for Websites and Event\",\"description\":\"Embed a social group chat for communities and events. Grow your online audience with the next evolution of HTML chat room. Attach files, Mobile, Audio and Video calls.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rumbletalk.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/7c282b2a9db21e0889558ab4b26878ea\",\"name\":\"Eyal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9b59200128f5bfa60116c2dbfabf22d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9b59200128f5bfa60116c2dbfabf22d8?s=96&d=mm&r=g\",\"caption\":\"Eyal\"},\"sameAs\":[\"http:\/\/www.rumbletalk.com\"],\"url\":\"https:\/\/rumbletalk.com\/blog\/index.php\/author\/eyal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"26 Easy Chat CSS Tricks for Designing your Own Chat Room style","description":"RumbleTalk group chat can be customized with CSS. Designers and CSS experts can customize chat css with ease. Now, you also can do it!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/10\/31\/chat-css-tricks\/","og_locale":"en_US","og_type":"article","og_title":"26 Easy Chat CSS Tricks for Designing your Own Chat Room style","og_description":"RumbleTalk group chat can be customized with CSS. Designers and CSS experts can customize chat css with ease. Now, you also can do it!","og_url":"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/10\/31\/chat-css-tricks\/","og_site_name":"Online Group Chat Room Plugin for Websites and Live events","article_publisher":"https:\/\/www.facebook.com\/rumbletalk","article_published_time":"2023-10-31T02:19:00+00:00","article_modified_time":"2025-10-14T04:03:40+00:00","og_image":[{"url":"https:\/\/d1pfint8izqszg.cloudfront.net\/blog\/posts\/chat-design-tab.png"}],"author":"Eyal","twitter_card":"summary_large_image","twitter_creator":"@rumbletalk","twitter_site":"@rumbletalk","twitter_misc":{"Written by":"Eyal","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/10\/31\/chat-css-tricks\/","url":"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/10\/31\/chat-css-tricks\/","name":"26 Easy Chat CSS Tricks for Designing your Own Chat Room style","isPartOf":{"@id":"https:\/\/rumbletalk.com\/blog\/#website"},"datePublished":"2023-10-31T02:19:00+00:00","dateModified":"2025-10-14T04:03:40+00:00","author":{"@id":"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/7c282b2a9db21e0889558ab4b26878ea"},"description":"RumbleTalk group chat can be customized with CSS. Designers and CSS experts can customize chat css with ease. Now, you also can do it!","breadcrumb":{"@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/10\/31\/chat-css-tricks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rumbletalk.com\/blog\/index.php\/2023\/10\/31\/chat-css-tricks\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rumbletalk.com\/blog\/index.php\/2023\/10\/31\/chat-css-tricks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rumbletalk.com\/blog\/"},{"@type":"ListItem","position":2,"name":"27 Easy Chat CSS Tricks for Designing your Own Chat Room (WEB & MOBILE)"}]},{"@type":"WebSite","@id":"https:\/\/rumbletalk.com\/blog\/#website","url":"https:\/\/rumbletalk.com\/blog\/","name":"Online Group Chat Plugin for Websites and Event","description":"Embed a social group chat for communities and events. Grow your online audience with the next evolution of HTML chat room. Attach files, Mobile, Audio and Video calls.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rumbletalk.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/7c282b2a9db21e0889558ab4b26878ea","name":"Eyal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rumbletalk.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9b59200128f5bfa60116c2dbfabf22d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9b59200128f5bfa60116c2dbfabf22d8?s=96&d=mm&r=g","caption":"Eyal"},"sameAs":["http:\/\/www.rumbletalk.com"],"url":"https:\/\/rumbletalk.com\/blog\/index.php\/author\/eyal\/"}]}},"_links":{"self":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/560"}],"collection":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=560"}],"version-history":[{"count":148,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/560\/revisions"}],"predecessor-version":[{"id":18712,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/560\/revisions\/18712"}],"wp:attachment":[{"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rumbletalk.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}