Helper ⭐️⭐️

Awesome third party scripts

Forum|Forum|7 years ago
April 19, 2019
15 replies
1344 views

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');

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.

Koen SterkenAuthor

Helper ⭐️⭐️

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; 
  }

Koen SterkenAuthor

Helper ⭐️⭐️

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);  
    }
   
  }

Koen SterkenAuthor

Helper ⭐️⭐️

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; 
  }

Pascal

Gainsight Employee ⭐️

Awesome stuff Koen! Really nice to the cool applications you found and sharing the code for others to adopt!

Yoeri

Gainsight Employee ⭐️⭐️⭐️

Great examples Koen! 🙌👏

Group Product Manager, Customer Communities

Koen SterkenAuthor

Helper ⭐️⭐️

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;
  }

SmartlyGreg

Helper ⭐️⭐️⭐️

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:

Ask a question which pointed to “/topic/new”
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!

Daniele Cmty

Helper ⭐️⭐️

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

SmartlyGreg

Helper ⭐️⭐️⭐️

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.

DannyPancratz

VIP ⭐️⭐️⭐️⭐️⭐️

@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

FYI: I am no longer active in this community

Show more replies

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

Didn't find what you were looking for?

Sign up

Welcome to the Gainsight Community