All Collections
Widgets
Stories Widget Developer Options
Stories Widget Developer Options

How to adapt the widget code to change layout, sort, and filter.

Joel Pike avatar
Written by Joel Pike
Updated over a week ago

The Stories Widget allows developers to completely customize it. 

Adding locations and tags to a story

First, to be able to sort by locations or tags, you'll need to include a location and tags when creating the story. To do this, add a photo, write a comment and specify the location and tag as in the screenshot below: 

Once you've started including a location and tags in your stories, there are a couple ways to filter your stories and change how they display in the widget:

Filter using JavaScript data attributes

The standard line Story embed looks like this:

<a class="nj-stories" href="https://app.nicejob.co/nicejob" data-filter-media="hide" data-media="hide" >powered by NiceJob</a><script type="text/javascript" src="https://cdn.nicejob.co/js/sdk.min.js?id=123123123123"> defer</script>


data-filter-media has two possible values:

  • Show - only include stories with photos

  • Hide - only include stories without photos

data-media has two possible values:

  • Show - show the photos for any given story

  • Hide - hide the photos for any given story

So for example to show only reviews with no photos you could do the below example.

<a class="nj-stories" href="https://app.nicejob.co/nicejob" data-filter-media="hide" data-media="hide" >powered by NiceJob</a><script type="text/javascript" src="https://cdn.nicejob.co/js/sdk.min.js?id=123123123123"> defer</script>

data-filter-location lets you filter by location. For example this would only show stories from "Chicago".

<a class="nj-stories" href="https://app.nicejob.co/nicejob" data-filter-location="Chicago" >powered by NiceJob</a><script type="text/javascript" src="https://cdn.nicejob.co/js/sdk.min.js?id=123123123123"> defer</script>

data-filter-tag lets you filter by the story tag. For example this would only show stories tagged with "Power Washing".

<a class="nj-stories" href="https://app.nicejob.co/nicejob" data-filter-tag="Power Washing" >powered by NiceJob</a><script type="text/javascript" src="https://cdn.nicejob.co/js/sdk.min.js?id=123123123123"> defer</script>

For more information on adding this code to your website, check out the help article here

Filter using URL filtering. 

Include the following tags on the end of the URL of the page where your widget is located: 

To sort by location this way, include ?location=xx where xx is the location you're looking for. 

To sort by tags, include ?tags=xx where xx are the tags you're looking for. 

The URL in this case will look like this:
https://www.yourwebsite.com/reviews?tags=high-rise-window-cleaning

Changing the layout

1. Using a grid based layout

Grid is enabled by default, simply don't specify a data-style attribute. 

<a class="nj-stories" href="https://app.nicejob.co/nicejob">powered by NiceJob</a><script type="text/javascript" src="https://cdn.nicejob.co/js/sdk.min.js?id=123123123123"> defer</script>

2. Using a single column layout

Specify that in the data-style attribute.

<a class="nj-stories" href="https://app.nicejob.co/nicejob" data-style="single">powered by NiceJob</a><script type="text/javascript" src="https://cdn.nicejob.co/js/sdk.min.js?id=123123123123"> defer</script>

3. Adjusting the height of the stories widget

The recommended method to adjust the height of the stories widget is to adjust the height of the parent HTML container of the widget. 

The parent HTML container also needs the overflow property set to auto.

Featured Story

You can also use the stories widget to show a single featured story. By default, this will display your latest story.

Specify data-style=featured in the data-style attribute.

<a class="nj-stories" href="https://app.nicejob.co/nicejob" data-style="featured">powered by NiceJob</a><script type="text/javascript" src="https://cdn.nicejob.co/js/sdk.min.js?id=123123123123"> defer</script>

Optionally, select a specific story ID to display

<a class="nj-stories" href="https://app.nicejob.co/nicejob" data-style="featured" data-filter=12344>powered by NiceJob</a><script type="text/javascript" src="https://cdn.nicejob.co/js/sdk.min.js?id=123123123123"> defer</script>

Did this answer your question?