Adding a direct/private message button to posts

By default a "Message" button is shown on the user information card that is shown when hovering over (on desktop) or clicking on (on touch devices) a user's username or avatar. The button allows a user to directly and privately message another user. You can follow the instructions below to add a "Direct Message" button within the posts so that users can message other users without first having to view the user information card.

Preview:

1. Log in to your Website Toolbox account.
2. Click the Integrate link at the top of the page.
3. Click the HTML link.
4. Insert the following code into the Forum Head Tag HTML Code.

   <style>
   @media (max-width: 480px) {
   	#body-wrapper .post-options a.directMessage {
   		display: block;
   		margin: 20px 0 0;
   		text-align: center;
   	}
   }
   #send_message {
   	font-size: 13px;
   	font-weight: bold;
   	line-height :1;
   	padding: 8px 10px;
   	width: auto;
   	border-radius: 4px;
   }
   #send_message:hover {
   	background: #e1e1e1;
   }
   </style>
   

5. Insert the following code into the Forum Footer HTML Code.

   <script>
      var message = "Direct Message";
      var lang = getForumLanguage();
      if(lang == 'en') {
   	  message = "Direct Message";
      } else if(lang == 'es') {
     	  message = "Mensaje directo";
      } else if(lang == 'fr') {
         message = "Message direct";    
      } else if(lang == 'de') {
   	  message = "Direct bericht";    
      } else if(lang == 'id') {
   	  message = "Pesan langsung";    
      }  else if(lang == 'cs') {
   	  message = "Přímá zpráva";    
      } else if(lang == 'nl') {
   	  message = "Direct bericht";    
      } else if(lang == 'nb') {
   	  message = "Direkte melding";    
      } else if(lang == 'ar') {
   	  message = "رسالة مباشرة";    
      } else if(lang == 'sv') {
   	  message = "Direkt meddelande";    
      } else if(lang == 'pt') {
   	  message = "Mensagem direta";    
      } else if(lang == 'zh') {
   	  message = "直接留言";    
      } else if(lang == 'ko') {
   	  message = "직접 메시지";    
      } else if(lang == 'ja') {
   	  message = "ダイレクトメッセージ";    
      } else if(lang == 'vi') {
   	  message = "Tin nhắn trực tiếp";    
      } 
    
      addDirectMessageButton();  
    
      window.addEventListener("load", function(){
   	 
        jQ('#posts-list').bind('DOMSubtreeModified', function(e) {
   		  if (e.target.innerHTML.length > 0) {            
   			   updateMessageSendButton();     
   		  }
        })
     
      }); 
   
     function updateMessageSendButton() {
   	if(global_hash.enable_pms && jQ('#private_message_notification').length && jQ('#posts-list').length) {
   		jQ("#posts-list").find("[id^='post_list_']").each(function () {    
   			var postUserID = jQ(this).data('post-userid');
   			if(jQ(this).find('.display_username').hasClass('username')) {     
   				var postUserName = jQ(this).find('.display_username').text();           
   				var userName = jQ(this).find(".display_username");
   				var posterDisplayUserName = '';
   				for (j = 0; j < userName.length; j++) {
   					postUserName = userName[j].getAttribute('data-username');
   					posterDisplayUserName = userName[j].getAttribute('data-displayname');      
   				}         
   				if(postUserID && postUserName) {          
   					if(!jQ(this).find('.directMessage').length) {
   						var messageBox = document.createElement('a');          
   						messageBox.setAttribute('href','javascript:void(0);');
   						messageBox.setAttribute('id','send_message');
   						messageBox.setAttribute('class','text-muted login_dialog directMessage');
   						messageBox.setAttribute('data-userid',postUserID);
   						messageBox.setAttribute('data-username',postUserName);
   						messageBox.setAttribute('data-displayname',posterDisplayUserName);  
   						messageBox.setAttribute('style','text-transform: none;');
   						messageBox.innerHTML = ' '+message; 
   						jQ(this).find('.post-options').append(messageBox);          
   					} else if(jQ(this).find('.post-options').length && !jQ(this).find('.directMessage').length) {                		jQ(this).find('.post-options').append(' '+message+'');    
   					}             
   				}         
   			}       
   		}); 
   	}
     }
     function addDirectMessageButton () { 
       var postListingPage = document.getElementById("private_message_notification");
       var privateMessageNotification = document.getElementById("private_message_notification"); 
       if(privateMessageNotification && global_hash.enable_pms && postListingPage) {
   
   		  var postsList = document.querySelectorAll('DIV[id^="post_list_"]');
   		  for (i = 0; i < postsList.length; i++) {    
   		  var postUserID = postsList[i].getAttribute("data-post-userid");        
   		  var userName = postsList[i].getElementsByClassName("display_username");
   		  var postUserName = '';
   		  var posterDisplayUserName = '';
   		  for (j = 0; j < userName.length; j++) {
   		    postUserName = userName[j].getAttribute('data-username');
   		    posterDisplayUserName = userName[j].getAttribute('data-displayname');      
   		  }
   		  if(postUserID && postUserName) {
   		    var postOptions  = postsList[i].getElementsByClassName('post-options');      
   		    var messageBox = document.createElement('a');          
   		    messageBox.setAttribute('href','javascript:void(0);');
   		    messageBox.setAttribute('id','send_message');
   		    messageBox.setAttribute('class','text-muted login_dialog directMessage');
   		    messageBox.setAttribute('data-userid',postUserID);
   		    messageBox.setAttribute('data-username',postUserName);
   	        messageBox.setAttribute('data-displayname',posterDisplayUserName);          
   		    messageBox.setAttribute('style','text-transform: none;');   
   		    messageBox.innerHTML = ' '+message;        
   		    for (m = 0; m < postOptions.length; m++) {  
   			  postOptions[m].appendChild(messageBox); 
   		    }  
   		  }
   	    }
       }
     } 
   
     function getCookie(cname) {
       var name = cname + "=";
       var ca = document.cookie.split(';');
       for(var i = 0; i < ca.length; i++) {
   	  var c = ca[i];
   	  while (c.charAt(0) == ' ') {
   	    c = c.substring(1);
   	  }
   	  if (c.indexOf(name) == 0) {
   	    return c.substring(name.length, c.length);
   	  }
       }
       return "";
     } 
     function getForumLanguage() {
       var forumLanguage = getCookie('forumLanguage');
       if(forumLanguage && verifyLanguage(forumLanguage)){
   	  forumLanguage = forumLanguage.split('-')[0];
       } else if (navigator && typeof navigator.language === 'string' && verifyLanguage(navigator.language)) {
   	  forumLanguage = navigator.language.split('-')[0];
       } else {
   	  forumLanguage = "en";
       }
       return forumLanguage;
     }
    
    
       function verifyLanguage(lan){
         var languages = ['en', 'es', 'de', 'nl', 'nb', 'fr', 'ar', 'ja', 'pt', 'zh', 'vi', 'ko', 'ru', 'id', 'sv', 'cs'];
         var validLanguage=0;
         languages.forEach(function(element) {
           if(lan.split('-')[0] == element) {
             validLanguage = 1;
           }
         });
         return validLanguage;
       } 
   </script>
   

6. Save your changes.

If you still need help, please contact us.