Skip to main content



In this topic you can share cool third party scripts so we can learn from each other!

Format of the posts
Image
When you have a script that produces a visual outcome, add a screenshot! In Holland some people say 'Met plaatjes maak je maatjes', which translated to English means 'Images creates friends'.

Purpose
Why did you need the script? What problem were you trying to solve, or what cool idea did you have?

Code
The third party code itself. Please be so kind to add some comments so that other people also know what you have done.

Style
The custom styling you've added to make thinks look nice and position them.



Sidenote:
Third party scripts work for the version of the Insided software it was created for. When Insided changes its code, the scripts can fail. This is not the responsibility of Insided :)

Sidenote 2:
When copy/pasting my scripts I noticed that the text editor removes some html texts. So keep in mind that if you see
code:
jQuery : variable.html('this could be your text');

or
code:
Vanilla javascript: variable.innerHTML = 'this could be your text';

there could be missing some html tags. But I think adding html that way is kind of like bad practice (which I sometimes use as well) anyway.


Purpose
We received feedback from our users that they would like to see their topics and reactions. Those are hidden beneath the user icon. We figured that we could at some links to the new quick links to make acces easier.

Code
code:
  function createUserTile()
  {
    //get the user profile link. It only exists when the user is logged in
    var objUserLink = document.querySelector('.main-navigation--profile-link');
    
    //if there is a user profile link, continue
    if (objUserLink)
    {
      //if there are quick links on the page, continue
      var quickLinks = document.querySelector('.quicklink__container.content--centered');
      if (quickLinks)
      {
        //create a new tile
        var newTile = document.createElement('li');
        //give it the class that other tiles also have
        newTile.className = 'featured-topic quicklink__box has-border infoland';


        //add the border radius you configured for your tiles
        newTile.style.borderRadius =  '10px';


        //get the user image
        var img = document.querySelector('.profilepicture.profile--dropdown-trigger img');


        //create the image container and add it tot the tile
        var avatar = document.createElement('div');
        avatar.className = "padding__icon quicklink__hero";
        newTile.insertBefore(avatar, null);


        //add the the image to the image container
        var newImage = document.createElement('img');


        //add a className for custom styling
        newImage.className = 'InfolandAvatar';


        //link the image to the file of the user link
        newImage.src = img.getAttribute('src');


        //add it to the image
        avatar.insertBefore(newImage, null);      


        //get the my topics link from the user menu
        var myTopicLink = document.querySelector('.list__item.qa-menu-user-topics a');


        //create the my topics link
        var myTopics = document.createElement('div');
        myTopics.className = 'quicklink__title infolandSub';


        //add the text. Mijn topics is dutch for 'my topics'.
        myTopics.innerHTML = 'Mijn topics';


        //add a click function to the link
        myTopics.onclick = function() { location.href = myTopicLink.getAttribute('href'); }      
        newTile.insertBefore(myTopics, null);


        //do the same for the my reactions link
        var myReactionLink = document.querySelector('.list__item.qa-menu-user-reactions a');


        var myReactions = document.createElement('div');
        myReactions.className = 'quicklink__title infolandSub';
        myReactions.innerHTML = 'Mijn reacties';
        myReactions.onclick = function() { location.href = myReactionLink.getAttribute('href'); }    
        newTile.insertBefore(myReactions, null);    
        
        var intPosition = 1;


        //add the new tile to the quick links. The intPosition is 0 based so:
        //0 = first position
        //1 = middle position
        //2 = right position
        //3 = next row first position, etc.
        quickLinks.insertBefore(newTile, quickLinks.childNodes[intPosition]);
      }
    }
  }




Styling
code:
 .InfolandAvatar
  {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-top: 10px;
  }
  
  
  .infoland .quicklink__title.infolandSub:hover
  {
   	 color: #126ede;
  }
  
  .infoland .quicklink__title.infolandSub
  {
   	 display: inline-block;
    width: 50%;
    cursor: pointer;
  }
  
    .infoland .quicklink__title.infolandSub:last-child
  {
   	 border-left: 1px solid #dbdad9;
  }
  
  .quicklink__box.infoland
  {
   	cursor: default; 
  }


Purpose
Due to the European privacy law (GDPR or AVG in Dutch) users should be able to go to the privacy policy easily. We have a community page with our policy, but wasn't easily find-able. We first wanted to add a link to the topic in a header or footer, but we have a nice place to add it. It would feel out of place. So we decided to add a link to the topic to the menu.


code:
   function createPrivacyLink()
  {
   	var menu = document.querySelector('.main-navigation-btn-forum'); 
    var menuList = menu.querySelector('.js-collapse-content');
    
    //check if the menu is there
    if (menu && menuList)
    {
      	//create a new category
   		var newGroup = document.createElement('li');
   		newGroup.className = 'group_item'    
        menuList.insertBefore(newGroup, null);
    
    	var itemList = document.createElement('ul');
    	newGroup.insertBefore(itemList, null);
    	
    	var header = document.createElement('li');
    	header.className = 'group_link-label';
    	itemList.insertBefore(header, null);
    
      	//give the new category a name. In this case 'Overig', which means 'Misc.'
    	var headerText = document.createElement('span');
    	headerText.innerText = 'Overig';
    	header.insertBefore(headerText, null);
    
      	//add the link button for the privacy policy
    	var privacylistitem = document.createElement('li');
        privacylistitem.className = 'main-navigation--wrapper__link';
    	itemList.insertBefore(privacylistitem, null);
    	
      	//create the link to the actual privacy policy page
    	var privacylink = document.createElement('a');
    	privacylink.className = 'link qa-menu-subforum';
    	privacylink.href = 'https://community.infoland.nl/site/terms';
    	privacylistitem.insertBefore(privacylink, null);
    
      	//give the link a name (Privacyverklaring, privacy policy in English)
    	var privacyLinkText = document.createElement('span');
    	privacyLinkText.innerText = 'Privacyverklaring';
    	privacyLinkText.className = 'subforum-title';
    	privacylink.insertBefore(privacyLinkText, null);  
    }
   
  }


Purpose:
Our community members have a hard time finding their own topics and reactions. Given the new quick links part, we are experimenting with adding a quick link when the user is logged in, with buttons to their topics and reactions.

code:
 function createUserTile()
  {
    //get the user profile link. It only exists when the user is logged in
    var objUserLink = document.querySelector('.main-navigation--profile-link');
    
    //if there is a user profile link, continue
    if (objUserLink)
    {
      //if there are quick links on the page, continue
      var quickLinks = document.querySelector('.quicklink__container.content--centered');
      if (quickLinks)
      {
        //create a new tile
        var newTile = document.createElement('li');
        //give it the class that other tiles also have
        newTile.className = 'featured-topic quicklink__box has-border infoland';


        //add the border radius you configured for your tiles
        newTile.style.borderRadius =  '10px';


        //get the user image
        var img = document.querySelector('.profilepicture.profile--dropdown-trigger img');


        //create the image container and add it tot the tile
        var avatar = document.createElement('div');
        avatar.className = "padding__icon quicklink__hero";
        newTile.insertBefore(avatar, null);


        //add the the image to the image container
        var newImage = document.createElement('img');


        //add a className for custom styling
        newImage.className = 'InfolandAvatar';


        //link the image to the file of the user link
        newImage.src = img.getAttribute('src');


        //add it to the image
        avatar.insertBefore(newImage, null);      


        //get the my topics link from the user menu
        var myTopicLink = document.querySelector('.list__item.qa-menu-user-topics a');


        //create the my topics link
        var myTopics = document.createElement('div');
        myTopics.className = 'quicklink__title infolandSub';


        //add the text. Mijn topics is dutch for 'my topics'.
        myTopics.innerHTML = 'Mijn topics';


        //add a click function to the link
        myTopics.onclick = function() { location.href = myTopicLink.getAttribute('href'); }      
        newTile.insertBefore(myTopics, null);


        //do the same for the my reactions link
        var myReactionLink = document.querySelector('.list__item.qa-menu-user-reactions a');


        var myReactions = document.createElement('div');
        myReactions.className = 'quicklink__title infolandSub';
        myReactions.innerHTML = 'Mijn reacties';
        myReactions.onclick = function() { location.href = myReactionLink.getAttribute('href'); }    
        newTile.insertBefore(myReactions, null);    
        
        var intPosition = 1;


        //add the new tile to the quick links. The intPosition is 0 based so:
        //0 = first position
        //1 = middle position
        //2 = right position
        //3 = next row first position, etc.
        quickLinks.insertBefore(newTile, quickLinks.childNodes[intPosition]);
      }
    }
  }



code:
  .InfolandAvatar
  {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-top: 10px;
  }
  
  
  .infoland .quicklink__title.infolandSub:hover
  {
   	 color: #126ede;
  }
  
  .infoland .quicklink__title.infolandSub
  {
   	 display: inline-block;
    width: 50%;
    cursor: pointer;
  }
  
    .infoland .quicklink__title.infolandSub:last-child
  {
   	 border-left: 1px solid #dbdad9;
  }
  
  .quicklink__box.infoland
  {
   	cursor: default; 
  }
Awesome stuff Koen! Really nice to the cool applications you found and sharing the code for others to adopt!
Great examples Koen! 🙌👏
A request from @ErikT!


Purpose
We have our own document management system containing a lot of documentation. Because we want to use our own system and presentation options, we don't want to convert the content to a community topic. But we don't think it is user friendly to let the user go to a topic, to let them visit another link directly. So I made a script that embeds the linked pages (from specified URLS) to the topic.

code:
//strFind is a variable I use to say how the link should look, f.i.
//a[href*="community.insided.com"]
//the above example returns all hyperlinks that have community.insided.com in them.
function checkForInPageMaterial(strFind)
  {
//get the first post of the topic
      var divTopic = document.querySelector('div.js-toggle-target'); 
//if the topic is available, proceed
    if (divTopic)
    {
//get all hyperlinks that we are looking for
      var aTrainings = divTopic.querySelectorAll(strFind);
//only continue when there is only 1 hyperlink found, otherwise it would be messy
      if (aTrainings.length > 1)
        return;
      else
      {
    	var aTrainingLink = aTrainings[0];
      if (aTrainingLink)
      {
//get the topic post content element
        var divTopicContent = divTopic.querySelector('div.post__content');

//create a new iFrame, with some styling
        var newIFrame = document.createElement('iframe');
        newIFrame.className = 'infolandTraining'

//set the source target for the iFrame with the link from the post (and always replace http:// with https:// because our system demands https for embedding)
        newIFrame.src = aTrainingLink.getAttribute('href').replace('http://', 'https://');
//remove the border of the frame
        newIFrame.setAttribute('frameBorder', '0')

//set the height of the frame to the half of your window height
        newIFrame.style.height = ($(window).height() / 1.5) + "px";

//add the iFrame to the topic
        divTopicContent.insertBefore(newIFrame, null);
        
//create a fullscreen link in case someone would like to open the page fullscreen.
        var fullScreen = document.createElement('a');
        fullScreen.href = aTrainingLink.getAttribute('href');
        fullScreen.innerText = 'Open in nieuw venster';
        fullScreen.className = 'infolandFullScreen';
        fullScreen.setAttribute('target', '_blank');
        
        divTopicContent.insertBefore(fullScreen, newIFrame);
      }
    }
    }
  }


code:
   .infolandTraining
  {
    width: calc(100%);    
  }


  .infolandFullScreen
  {
    margin-top: 20px;
   display: block;
    text-align: right;
    font-size: 0.75em !important;
  }

 

Purpose

We wanted to provide a shortcut to create a new conversation directly. In an attempt to promote the different actions available to members as we prepared the launch of the community. We created 2 call to actions:

  1. Ask a question which pointed to “/topic/new”
  2. Start a conversation which pointed to “/topic/new?convo”

So to get this to work we added a short Third Party script to look for the appearance of “new?convo” and both check the Conversation radio button and change the “is-active” status from Question box to the Conversation box. 

 

<script> 
  if (inSidedData.page.url.includes("/topic/new?convo")) {
    var discussionLabel = document.getElementById("topic_content_type_discussion");
	discussionLabel.setAttribute("checked", "checked");
    var discussionWrapper = document.getElementsByClassName("qa-radio-button-topic-type-discussion");
    discussionWrapper[0].setAttribute("class", "tooltip tooltip--day radio-box-button qa-radio-button-topic-type-discussion is-active");
    var questionWrapper = document.getElementsByClassName("qa-radio-button-topic-type-question");
    questionWrapper[0].setAttribute("class", "tooltip tooltip--day radio-box-button qa-radio-button-topic-type-discussion");
  }
</script>

 

Curious to hear if there is a built in way to do this, I couldn’t find it!

Hi @Koen Sterken, really cool topic!

 

This one caught my interest the most:

 

 

 

I wonder if this could be a good idea for us, too.
i just signed up to your community but didn’t see it in place.

Since this topic is quite old, I wonder why you discontinued it?
Did it work well? Or did you just want to switch it up after a while?

 

Best,
Dani

Promote “Get Started” content from the sidebar or anywhere you want to people with specific ranks.

 

Purpose: Get noobs to get engaged with relevant content (Based on their rank)

 

Code:

Script

<!-- Show New user Sidebar if rank means a new member -->
<script>
  var noobSidebarElement = document.getElementById("noob");
  if (inSidedData.user.rank === "2") {
    noobSidebarElement.setAttribute('class', ''); } 
  }
</script>

Front End:

<div id="noob" class="dont-show">
<h2 class="spacer">Get Started Checklist:</h2>
<a class="checklist" href="/site/terms">Code of conduct
</a><br />
<a class="checklist" href="TBC">Community overview
</a><br />
<a class="checklist" href="/settings/profile">Setup your profile
</a><br />
<a class="checklist" href="TBC">Introduce yourself
</a><br /><br />
</div>

CSS:

.dont-show {
  display:none; 
}

 

Sidenote:  The beauty is that all of it disappears saving valuable homepage/ sidebar space as soon as a higher rank is reached. (I used rank 2, but this needs to be adjusted per each community it is implemented in.

@SmartlyGreg could you do something similar to your n00b use case above based on a customer user role # instead of a rank? 

Is user role exposed in the data and able to be isolated similarly? 

cc: @inSided CSM 

@DannyPancratz absolutely! I’ve done this on a few occasions actually.

This is the script:

<!-- Determine which HTML element is shown to what role -->
<script> 	
  if (inSidedData.user.role == 'Member') {
  	$('#memberContent').removeClass().removeAttr('style'); 
  } else if (inSidedData.user.role == 'Customer') {
    $('#customerContent').removeClass().removeAttr('style'); 
  } else if (inSidedData.user.role == 'Smartlie' || inSidedData.user.role == 'Service Ops') {
    $('#smartlieContent').removeClass().removeAttr('style'); 
  } else {
    $('#defaultContent').removeClass().removeAttr('style'); 
  }
</script>

And then you just need to have the top HTML element for each have the following:
1. The ids:

  • memberContent for role Member
  • customerContent for role Customer
  • smartlieContent for role Smartlie or Service Ops
  • defaultContent for all other roles

2. Have attribute ‘style=”display:none;”’

This will ensure nothing is displlayed unless you match a rule and the display none is removed by the script!

 

Note: Obviously you can change the ids you use and the roles need to match your own, but it should give you a pretty good sample of what is possible!

UPDATE: After I started using a secondary role for some users this meant the rule above did not work so I had to update it to use “includes()” instead of “==” as below:

if (inSidedData.user.role.includes('Customer')) { SCRIPT HERE }

 

Thanks, @SmartlyGreg! 



​​​​How to hide the 0 replies box

 

Here’s a script for hiding the 0 replies box for all topic types and move the Reply editor/composer WYSIWYG widget right below the original post. The amazing @matt enbar helped me implement this based on the conversation on this idea: 

 

@DannyPancratz for your previous request of doing things by custom role or role I have learnt that actually it might be safer/ more scalable to use “includes()” instead of “==”. This change allows for the cases where multiple roles are assigned to still work. (This was something we had not intended on doing at first but the discreet nature of roles actually allows us to use it as a kind of Tag now.)

So one role determines the users’ permissions and the other is just for back-end filtering/ analytics. This has resulted in breaking the role based rules I’d written with “==” because a Customer can have more than just one role, so using the “includes()” means we can catch any user with the role of customer without caring for the secondary role we added.

if (inSidedData.user.role.includes('Customer')) { SCRIPT HERE }

Update added to the content above too!

Hope this helps!

Terms & ConditionsCookie settingsAccessibility statement