Skip to main content

What is the inSidedData object?


The inSidedData object is a powerful dynamic front end element that can be used to return lots of information about a particular community page or user. Lets explore the object in more detail and then see how it can be used:

Looking into the top level properties of the object on this community:

insidedData.communityId: "gainsight-us"
insidedData.device: "desktop"
inSidedData.environment: "production"
inSidedData.language: "en"


Within the inSidedData object are a number of nested objects that dynamically provide much more detail on the page you are on, lets dive into the objects for this community:

inSidedData.content {
	category: {
		id: 38,
		title: "Got a question?"
	}
	path: "Got a question?:Tips for self diagnosing platform issues"
	post: {
		id: null
	}
	topic: {
		id: 1672,
		title: "Tips for self diagnosing platform issues",
		type: "discussion",
		created: 1564131222,
		replies: 0
	}
}
inSidedData.form {
	name: "",
	step: ""
}
inSidedData.page {
	firstRender: false name: "Search: "
	roadmap ""
	pageNumber: 1,
	name: "Search: "
	roadmap "",
	path: "inSpired:Search:Search: "
	roadmap "",
	section: "Search",
	site: "inSpired"
}
insidedData.search {
	phrase: "roadmap",
	count: 62
}
inSidedData.user {
	userid: "571",
	rank: "1",
	role: "roles.administrator, inSided",
	name: "Frank"
}

 

Now this is just a very brief overview of the inSidedData object - feel free to explore the object in more detail by opening the console in your web browser and typing in 'inSidedData' and hitting return!

 

 

Ok this is great but what can I use this for?


We've created these quick examples to show you how to dynamically configure content in your community. Lets create a dynamic widget asking unregistered users to create a community profile and engage with other users. This widget will only show up :

HTML code - create a new HTML Block widget add this code to the newly created widget (make sure not to fill out the title as we're going to create the title in the widget itself):
 

<div id="register-side-widget" class="" style="display:none;">
   <h4 class="h4">Register now</h4>
   <div class="html">
    <a href="/member/register" class="btn--cta btn--new-topic qa-topic-new-button">Make an account now!</a> 
   </div>
</div>



JS scripts (relies on jQuery to unhide the widget):
1. Only show the widget for non logged in users, any one logged in will not see it

<script> 
  if (inSidedData.user.role == 'roles.guest') { 
    // Make the widget visible 
  	$('#register-side-widget').removeClass().removeAttr('style'); 
  } 
</script>


2. Only show the widget for a certain topic

<script> 
	if (inSidedData.content.topic.id == 1701) { 
		// Make the widget visible 
		$('#register-side-widget').removeClass().removeAttr('style'); 
	} 
</script>


3. Only show the widget for topics within certain categories

<script> 
 if (inSidedData.content.category.id == 117) { 
 	// Make the widget visible 
 	$('#register-side-widget')
     .removeClass()
     .removeAttr('style');
 } 
</script>


4. Only show the widget for mobile users on topics created within the last 24 hours

<script>
 var hours = 24; 
 if (inSidedData.content.topic.created != null) { 
	 if ((inSidedData.content.topic.created > (Date.now() + hours * 60 * 60 * 1000) / 1000) && inSidedData.device == 'mobile') { 
	 	// Make the widget visible
	 	$('#register-side-widget').removeClass().removeAttr('style'); 
	 } 
 }
 </script>


This is just a small sample of what is possible (we will constantly be updating this page and adding more). Alternatively if you don't want to use CSS to show/hide content, you can inject the content into the page instead - just create a unique HTML element in a widget and then use .append() or .html() to inject the markup. Also please note that the inSidedData object can only be used in the last code panel of the third party scripts page - this is because it is only initialised towards at the end of page load.

Happy coding!

 

 

No worries @Onomatopoeia  always happy to help where possible! :grin:

I can’t seem to get this to work with roles other than “guest”. I’ve tried variations of the word administrator, tried adding the extra roles, tried using what’s shown above with the user ID, rank, role, name, etc. 

I can get the following to work: specific page, specific category, specific topic. But for the life of me I can’t make it visible only to specific roles (besides guest) or users.

Is there something specific that I might be missing here?

UPDATE: I figured out that I need to use this:

if (inSidedData.user.mainRole == 'roles.administrator')

But I still can’t get it to be user-specific, despite finding this and trying it:

I’m close!

Salut @victorlacombe !
Maybe ​​​​​​@alex.timmermann can confirm this theory but I think a latest release might enable you to do this in a much simpler way, but completely untested! (I’ve been thinking about this myself as we’d love for account managers to be able to organise mini events for small groups of clients.) Here goes:

Hidden Groups

  1. Grunt Work: You create a hidden groups for every account manager with their name as the group name
  2. Untested Step: You use the CSV import step to invite these people to the relevant group in just a few uploads

The result is quite nice in terms of usability but the maintenance would likely be highly time consuming.
Anyway, it was just a thought, I would indeed love to see a  built in solution for this!

Not a dev, more of a tinkerer lol. I’m wanting to embed specific videos on specific category pages, but it’s not working. I have been able to embed the videos to display on all category pages, but I can’t figure out how to get them to ONLY show on specific pages. 

Script (Before </Body>)

HTML (Posted under General Sidebar)

I have also tried if (insidedData.content.category.id == 1), (insidedData.content.category.id < ‘10’) in the script, I’ve even tried combining the script and the HTML in the sidebar html block as well as in the script, and I cannot get it to work. Please help! 

Hi @JSmith ,

Few tweaks I’d make to your code and one thing I’d change in your practice in general :)

  1. in general, try and separately test functionalities. Currently it’s not clear if the if statement isn’t working, the targeting of the element, or the removing of the div-style. So first test your if-statement to see if it fires on the right categories, with e.g. a console.log(“test”); then test the targeting of the div by e.g. setting the background to bright red; then remove the class; and only then you can test the whole thing 😊
  2. you cannot use a <body> tag inside a <div>, there can only be one body tag on the page and it should contain all content :)
  3. I would avoid using jquery where possible, instead of $(‘video1’) use document.getElementById("video1")
  4. in the same vein, you can use style.removeProperty("display");
  5. I’d use inSidedData.content.category.id instead of doing string matching on the url

Let me know if this works! I’d be happy to dive a bit deeper if needed.

@Alistair FIeld this might warrant separating out to a new topic, what do you think?

Sorry to ‘re-open’ this discussion after so much time. What is described is literally the solution to my current problem, however, I’m really struggling to get this to work properly.

I’m trying to make it so that a div element appears under the Topic Sidebar when the category ID is 42. I’ve confirmed with the inSidedData area of the page that the ID is correct but the div still refuses to appear.

Taking the ‘if’ statement away shows that the script works so there’s something about that statement which is causing the problem.

What could I be doing wrong here? Any advice would be very much appreciated!

<script> 
 if (inSidedData.content.category.id == 42) { 
  var element = document.getElementById('register-side-widget');
  element.style.display = null;
 }
</script> 

<body>
<div id="register-side-widget" class="" style="display:none;">
   <h4>Register now</h4>
   <div class="html">
    <a href="/member/register" class="btn--cta btn--new-topic qa-topic-new-button">Make an account now!</a> 
   </div>
</div>
</body>

 

Hey! Love these tricks!

I am using them to only display items to guest users, and hide them once a user is logged in. But this means that it also hides these items when I am editing the layout… is there a way to make them appear when I am in edit mode of the page? (i could show them for users with role admin but that will show them also in the public view for these users)

​@jvdc - Hmm I think you have a few options.  When creating widgets for non-authenticated visitors, you could flip it around and hide the widget by default and then have bit of script that overrides and makes it visible for visitors that aren’t logged-in.  I think that’s how I’ve mostly seen it done.  You can then tweak the code while testing to only make it visible to admins instead.  If you have a sandbox, that’d be the easiest place to test the layout, of course.

Hi there,
If I wanted to have an HTML widget that only shows when the topic creation date is e.g. more than 2 years old, how would I model the code?

Context for my use case:

 

​@Daniele Cmty the ‘created’ value in content > topic section of the inSidedData object is a unix timestamp that tells you when the topic was created: 

inSidedData.content.topic.created

I am not a developer, but if you want to control the visibility of another element with that value, you could use some javascript to compare the timestamp to today’s date. The result of that comparison could determine whether the HTML vidget gets displayed. 

So, for example, you could add the widget to the page but have it hidden by default, using “displaly: none;” in the stylesheet. 

When the page loads you can check the ‘created’ value. It’s a unix timestamp, so convert that to a regular date first, then compare it to today’s date value. If that shows it is more than two years old, update the widgets css to ‘display: block’. 

	const posted = new Date(inSidedData.content.topic.created * 1000); // this converts the timestamp to a regular date format
	const now = new Date();
	const twoYearsAgo = new Date ();
	twoYearsAgo.setFullYear(now.getFullYear() - 1);

	if (posted < twoYearsAgo) {
		const widget = document.getElementsByClassName('html-widget'); // this would be the classname of your html widget that you want to show for old posts
		widget.css.display('block');
	}
}

If you only want it to run on certain pages, you can also use the inSidedData object for that. You could only run it on topic pages, for example, by wrapping the whole thing in another condition:

if(inSidedData.page.name=='Topic') { // only run on topic pages

const posted = new Date(inSidedData.content.topic.created * 1000); // this converts the timestamp to a regular date format
	const now = new Date();
	const twoYearsAgo = new Date ();
	twoYearsAgo.setFullYear(now.getFullYear() - 1);

	if (posted < twoYearsAgo) {
		const widget = document.getElementsByClassName('html-widget'); // this would be the classname of your html widget that you want to show for old posts
		widget.css.display('block');
	}
  }

We are just in the process of migrating our community to Gainsight CC so I am not very familiar with all the different content areas yet, so that example may not be as relevant as I think it is, but hopefully it illustrates the idea.

This could be improved I’m sure by an actual developer, but it might be good enough for what you need. 

Reply


Terms & ConditionsCookie settings