All Onsite UGC Widgets can be used to allow customers to easily create their own Social Hubs including allowing for content to be dynamically refined based upon various topics, supporting keyword search, and more.
Outlined below are the steps one can take to create a simple Social Hub and Topic Filtering.
Step 1: Create your Widget
Assuming you have not yet created a Widget that you want to use for your Social Hub, the first step you should take is to navigate to Engage > Widgets and select Create Widget.
Once you have selected your Templated, named the Widget, you can now grab the Embed code to add to the page you will be hosting the Social Hub on.
Step 2: Define Filters for Each Topic
Filters are the easiest way to define 'topics' for your Social Hub and you can create these either in Curate > Content or Curate > Filters.
Once you have created your respective Filters for each Topic, we will want to get the IDs for each by going to Curate > Filters. These IDs will be listed on the table listing on the page, similar to the one below.
From here we can create our respective Topic links/buttons / etc. The format for creating a link is as follows:
<a href="#" onclick="myFunction(this.id)" id="#{{FilterID}}">#{{Topic}}</a> Using the IDs shown in the above example, our link code would look something like this:
<a href="#" onclick="myFunction(this.id)" id="107558">Topic #1</a> <a href="#" onclick="myFunction(this.id)" id="100361">Topic #2</a><a href="#" onclick="myFunction(this.id)" id="97660">Topic #3</a><a href="#" onclick="myFunction(this.id)" id="94421">Topic #4</a><a href="#" onclick="myFunction(this.id)" id="88661">Topic #5</a>
Step 3: Link your Widget and Menu Items
The final step in the process is to add the Javascript that will link your Topics to your Widget, to do this, we must grab your Widget ID, which you can find either by going to Engage > Widgets or from the Widget Embed Code (Example below)
<div class="stackla-widget" data-id="1234" data-ttl="60" style="width: 100%; overflow: hidden;"></div>
Using this Widget ID we simply inject the Widget ID into the highlighted area of the code below:
<script type='text/javascript'> function myFunction(id) { StacklaFluidWidget.changeFilter(#{{WidgetID}}, id); } </script>And that's it!
Your final page code should look something similar to the below:
<a href="#" onclick="myFunction(this.id)" id="107558">Topic #1</a> <a href="#" onclick="myFunction(this.id)" id="100361">Topic #2</a><a href="#" onclick="myFunction(this.id)" id="97660">Topic #3</a><a href="#" onclick="myFunction(this.id)" id="94421">Topic #4</a><a href="#" onclick="myFunction(this.id)" id="88661">Topic #5</a><script type='text/javascript'> function myFunction(id) { StacklaFluidWidget.changeFilter(1234, id); } </script><div class="stackla-widget" data-id="1234" data-title="Widget Title" data-ttl="60" style="width: 100%; overflow: hidden;"></div><script type="text/javascript">(function (d, id) { var t, el = d.scripts[d.scripts.length - 1].previousElementSibling; if (el) el.dataset.initTimestamp = (new Date()).getTime(); if (d.getElementById(id)) return; t = d.createElement('script'); t.src = '//assetscdn.stackla.com/media/js/widget/fluid-embed.js'; t.id = id; (d.getElementsByTagName('head')[0] || d.getElementsByTagName('body')[0]).appendChild(t);}(document, 'stackla-widget-js'));</script>Extending my Social Hub functionality:
For any further questions or queries, please send an email to support@nosto.com and our support team will get back to you.