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>

 

Reply


Terms & ConditionsCookie settings