How to create dynamic community content using the inSidedData object
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!