Tutorial

How to create dynamic community content using the inSidedData object


Userlevel 6
Badge +1
  • Product Guru
  • 26 replies posted

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: "inspired-en"
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 (/settings/widgets) 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> 
var hours = 24;
if (inSidedData.content.topic.created > (Date.now() + hours * 60 * 60 * 1000) / 1000) {
// 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!

 

 


22 replies

Userlevel 3
Badge +1

This is very cool. @Frank is there any way to access custom fields on a user profile from the insidedData.user object? It looks like the data within that object is limited to:

{

	userid: "571",  	rank: "1",  	role: "roles.administrator, 	inSided",  	name: "Frank"

}

 

Thanks!

Mike

Userlevel 5
Badge +1

Hi @mstone yep you are correct in that the user object in the wider inSidedData object doesn’t contain the custom profile fields. Its limited to just the fields you posted above - im wondering though can you describe your use case for it? Would you be able to achieve what you wanted via the setting of a custom role, as this is retrievable via the inSidedData object? These custom roles could even be assigned to users on an automated basis if the ranking system is used to assign them.

Let me know though, am happy to help out!

Userlevel 3
Badge +1

Hey Tom, thanks for the response. We would like to pass custom fields into the InSided user profile so that we can present the user with account information when they login. For example -- we are commonly asked by customers who their customer success manager is. If we could expose this ‘customer success manager’ information within the insidedData object then we’d be able to display it on the page as described above. 

Userlevel 5
Badge +1

Hi @mstone  great use case! The only way you’d be able to retrieve the custom profile fields is to to make an api call. In theory you could grab the user id from the inSidedData object, make a call and then render the result on screen. However I do realise this is quite a lot of effort for only a small alteration for the front end, but im not sure of the complexity of adding this to the inSidedData object - @Yoeri perhaps we can perform a small investigation internally to see if this is a quick win? :grin:

Userlevel 5
Badge +1

Hi @mstone so i’ve actually just realised the custom profile fields can be read from the front end - if you append something like: /member/memberProfile?memberId=149 after your community URL, you’ll see you get a JSON object of the user profile, which also includes the custom profile fields you set up. You could in theory use an ajax request via javascript in a third party script to get this information and then render on screen. You might be able to achieve what you need to straight away using this method, let me know if anything doesnt make sense!

Userlevel 5
Badge +3

Some nice options here, I am not a dev person so a little cautious if I decide to apply to my community. Might be helpful to have some short tutorial videos to helps folks like me who are considering applying these :slight_smile:

Userlevel 3
Badge +1

Hey @tom.shaddock I messed around with this a bit and it looks like it could work! One thing I noticed was that only ‘Public’  profile fields are made available on the front end. In my case the ‘Customer Success Field’ fields is a ‘Private’ field (only visible to user & moderators) and doesn’t appear in the object. Any thoughts on how we’d be able to make it available without making it ‘Public’?

Userlevel 5
Badge +1

Hey @mstone hmm unfortunately only the public profile fields will be displayed here (or any where on the public front end) - is there any possibility to make this a public field instead?

If this is not possible - then a workaround I can think of would be to make this profile field public, then to apply a new HTML class/id to this public profile field (just this one and no other). You could then in theory just apply a CSS rule to hide this on the profile page if you don’t want it to be displayed there, or/and apply a javascript rule to remove this element from the page on load (via the third party scripts part of the control backend).

I think this way should be able to get you the result you want - but its just a thought off the top of my head though :)

Userlevel 3
Badge +1

That makes sense, I’ll give that a shot. Thanks @tom.shaddock 

Userlevel 5
Badge +3

I have a couple of related questions @Frank or anyone else:

 

  1. Does Insided allow for custom HTML to be inserted anywhere for example allowing banner ads to be used?
  2. If we can insert things like banner ads, would the methods outlined above be the best way to segment and target these at certain audiences? 

 

Userlevel 5
Badge +1

Now that’s some magic trickery there @timcavey !

I suspect it depends on exactly how you’d like to insert that sort of thing, but given that inSided have something similar on the homepage of the inSpired Community - in the form of a review invite that caused you loads of fun with getting an Amazon Gift Card currency converted and migrated to Amazon UK :wink: - it should be possible - but only as a widget since you probably don’t want to be modifying the entire page.

As for the audiences… It depends on what you’re after there. The examples in the OP could probably be used as a baseline and then tweaked a little. So if you wanted a giant button that would go to your Inbox for example, and only show it for Admins… I think this might work.

HTML

<div id="admin-inbox" class="" style="display:none;">
<h4 class="h4">Tim's Sekrit Inbox Shortcut!</h4>
<div class="html">
<a href="/inbox/overview">This is Tim's Sekrit PM Inbox Shortcut</a>
</div>
</div>

JS

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

Given that I’m pretty rusty with this stuff however, I’ve almost certainly created a bug in that somehow that will cause it to implode. Please don’t rely on this without fully testing it first!

Alternatively, you could create one that reminds the user about the welcome thread, but only make it visible explicitly to myself and no-one else - and ONLY if I’m a Super User...

<div id="remind-blastoise" class="" style="display:none;">
<h4 class="h4">Timmy's Blastoise Reminder Delivery Service</h4>
<div class="html">
<a href="/lounge-area-14/meet-the-community-introduce-yourself-3">Don't forget to check this today Blaster!</a>
</div>
</div>
<script> 
if (inSidedData.user {
userid: "1179",
rank: "1",
role: "roles.superuser",
name: "Blastoise186"
}) {
// Make the widget visible
$('#remind-blastoise').removeClass().removeAttr('style');
}
</script>

Then that probably either does the trick...Or implodes into an even bigger fireball… :stuck_out_tongue:

Userlevel 5
Badge +3

Thanks @Blastoise186 

 

Some nice code there I definitely won’t be using…

 

The examples in the OP and in your comment refer to widgets within the ‘side bar’ page area. If we wanted to insert something over the top of the usual homepage quick links / sidebar / header structure (such as a banner ad) would the inSidedData object route still be the way to go?

Userlevel 5
Badge +1

I’d say you probably could @timcavey . Since it would all be set up within inSided anyway, these objects should work nicely. But you’ll probably want to ask someone a little more experienced than this Blastoise to craft the code…

If you wanted this one the homepage, you should be able to spin up a HTML widget in the Body position, as per 

And then pop the code you’re after in there. While you might be able to pull in data from integrations like Salesforce, I’d say it’s probably easiest done if you keep it within the internal data that inSided already has on hand.

Assuming I coded my examples right, they should work just fine this way, but you could also borrow the other examples and use those instead to get you started. Anything that works as a Custom HTML widget for the sidebar, should work in the other positions too. And I now realise why the main body is centered like it is - because it’s perfect for making sure widgets like that Atlassian Statuspage embed don’t clash with anything else. :wink:

Non-dev here, so I think I need the “for dummies” version of this…

I’m trying to recreate the dynamic widget and only show to non logged in users, so I’ve inserted an HTML widget and pasted the code below with no luck. What am I doing wrong?

Thanks in advance!

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

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

 

Userlevel 5
Badge +1

Hi there @bhbx !

Unfortunately, it looks like this got missed by everyone else and I’m not seeing anything obvious myself. Let me try to summon @tom.shaddock to see if he’s got any clues on this one. :)

My only guess is that the script containing the inSidedData object needs to go into Third Party Scripts, rather than the HTML Block widget. Try splitting the two sections up and see if that helps.

Userlevel 5
Badge +3

I think we need one of them Insided devs to visit. @Yoeri seems to be a wise option to try…..

 

 

My only guess is that the script containing the inSidedData object needs to go into Third Party Scripts, rather than the HTML Block widget. Try splitting the two sections up and see if that helps.

 

In our community, we can use all of the coding within that HTML side widget itself, without the need to add anything in third party scripts. 

Userlevel 6

Let me circle this around internally and get back to you. Splitting the code between the Custom HTML widget and Third-party Scripts should not be necessary. All code can be included in a single HTML widget like Tim mentioned.

Thanks for the helpful responses! Looks like I missed this key detail:

 

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.

 

Per @Blastoise186’s suggestion, I added the script to the last code panel of the third-party scripts section and the HTML separately in the HTML widget. The button needs some width adjustments, but other than that, it’s fixed!

Userlevel 6

Great! Thanks for providing this feedback and @Blastoise186 for the right solution 👏

Userlevel 5
Badge +1

Hehehe. The devil is in the details… :wink:

I will admit that I spent two days trying to figure this one out before even attempting to reply - and rewrote my reply several times! - before I finally took a shot at a lucky guess.

As for resizing the buttons, I haven’t really looked that deep in how to do that sort of thing, but it’s good to hear they’re at least working now. That’s the main thing. :tada:

Userlevel 1

Hi there, is there a way to recover the SSO Provider token (token_sso_id in the API) within the inSidedData object?

 

To give you more context : we are trying to match Insided users with our users directly within Insided  for tracking purposes. It would be of great help for us in order to implement tracking with Segment without having to make an API call at each page to recover the SSO Provider token, and match the current user with our app user.

 

thanks

Hi @victorlacombe!

Sadly, that’s not currently possible.

Maybe it’s possible to achieve the mapping another way? Either through our Zapier integration, or by subscribing to the IdentityAccess.UserRegistered webhook and setting up the mapping in a small integration service. 

Also, I’d like to encourage you to share this use case with our Product team by raising it as an Idea! I can’t promise anything of course, but it’s the best way to get your feature request directly to them.

Reply