Awesome third party scripts






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.

14 replies



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!
Userlevel 2
Badge +2
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;
}
Badge

 

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!

Userlevel 2
Badge +1

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

Badge

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.

Userlevel 5
Badge +4

@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 

Badge

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

 

Userlevel 5
Badge +4

Thanks, @SmartlyGreg

Userlevel 5
Badge +4


​​​​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: 

 

Badge

@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!

Reply