Configure it how you want!
Do you want to...
Place it where you want?
Colour it how you want?
Ask what you want?
Done!
Intro to Configuration
The NPS widget works well without you having to specify any configuration. You can override the default settings though by specifying a set of predefined configuration options.
From the ‘Get Started’ section you’ll remember how we invoked the widget:
1
2
3
4
5
<script type="text/javascript">
initialzeCodeRedNpsWidget();
</script>
But you can specify your own configuration by creating a ‘config’ object and pushing it into the widget:
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
var npsConfig = {
styling: {},
settings: {}
};
initialzeCodeRedNpsWidget(npsConfig);
</script>
Some of the things that you can specify are listed in the Features section of the homepage but include the position and colour of the widget and the questions that it asks.
Styling Configuration
The styling configuration allows you to specify the colors, position and z-index (if needed) of the widget.
You only need include an option that you want to change, otherwise the widget will use it’s default settings.
Here’s an example with all possible options specified, where the value of each style is a standard CSS value:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
var npsConfig = {
styling: {
backgroundHoverColour: 'DarkOrchid',
foregroundHoverColour: 'white',
backgroundColour: '#4C59A1',
foregroundColour: 'white',
top: '20px',
right: '20px',
left: '0px',
right: '100px',
zindex: 99
}
};
initialzeCodeRedNpsWidget(npsConfig);
</script>
But don’t do what we just did! It’s just an example to show you you the possible settings. Can you see what the problem is? The top, bottom, left and right values specify the distance the widget should be from each edge… How can the widget be in the top AND the bottom, the left AND the right?
Don’t specify both horizontal settings in the same configuration. The same goes for the vertical settings. Choose one of each, e.g. top and right OR bottom and left, etc.
Apart from that exception, any of the settings can be applied with any other.
Introduction & Rating Texts
The settings configuration allows you specify the introduction text on the feedback form and the main ‘rating’ question of the widget. If you want to change from the default rating scale (0 - 10) then you’ll need to specify some more advanced config. That’s detailed in the Rating Scale section below.
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
var npsConfig = {
settings: {
introductionStatement: 'Thank you for using this service. We would appreciate your feedback by answering this question.',
mainQuestion: 'How likely would you be to recommend this service to others?'
}
};
initialzeCodeRedNpsWidget(npsConfig);
</script>
Optional Comments
There’s also settings config that’s a bit more involved that allows you to call for optional comments from your users.
Imagine you just want to add a call for comments with a ‘normal’ rating scale of 0 - 10, then you’d do this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
var npsConfig = {
settings: {
answerRanges: [
{
start: 0,
end: 10,
question: 'Do you have any extra feedback?'
}
]
}
};
initialzeCodeRedNpsWidget(npsConfig);
</script>
But you’re not limited to just asking one question when calling for optional comments. You can specify any number of these answerRanges to ask a different question based on the rating that the user specifies:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript">
var npsConfig = {
settings: {
answerRanges: [
{
start: 0,
end: 4,
question: 'What can we do to improve?'
},
{
start: 5,
end: 8,
question: 'Is there anything we can do to improve?'
},
{
start: 9,
end: 10,
question: 'Is there anything you particularly like?'
}
]
}
};
initialzeCodeRedNpsWidget(npsConfig);
</script>
You just need to make sure when specifying multiple
answerRangesthat the start and end values for each range line up with the others, i.e. there’s no gaps or overlaps.
Why do the answerRanges values for start and end need to line up? Well, did you notice from the examples above that we never explicitly told the widget what the rating scale should be? Take a look at the next section to find out more.
Rating Scale
The answerRanges section within the settings configuration is where you get to change the default rating scale.
As you’ll have noticed from the examples above, we never explicitly specify what the rating scale should be. It’s worked out dynamically by the widget from the combination of the answerRanges you specify. That’s why it’s important that you make sure there’s no gaps or overlaps in the start and end values when you put all the answerRanges togther.
So imagine you wanted to ask a single question as your call for user to provide comments, but you wanted to change the rating scale from the default 0 - 10 to a customised scale of 1 - 10, then you’d do this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
var npsConfig = {
settings: {
answerRanges: [
{
start: 1,
end: 10,
question: 'Do you have any extra feedback?'
}
]
}
};
initialzeCodeRedNpsWidget(npsConfig);
</script>
It’s the same as in the Optional Comments section above, except that we’ve changed the start value from “0” to “1”.
And if you wanted a scale of 1 - 5?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
var npsConfig = {
settings: {
answerRanges: [
{
start: 1,
end: 5,
question: 'Do you have any extra feedback?'
}
]
}
};
initialzeCodeRedNpsWidget(npsConfig);
</script>
Or 22 - 67?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
var npsConfig = {
settings: {
answerRanges: [
{
start: 22,
end: 67,
question: 'Do you have any extra feedback?'
}
]
}
};
initialzeCodeRedNpsWidget(npsConfig);
</script>
We’re not sure why you might want to do this… but you can. Remember to keep it simple and do what makes sense for you. With great power…
Multiple Widgets
Individuality is everything! And like elephants, each widget remembers…
You can have more than one widget on your site. You could have a different one in different sections of your site. But do you remember from Features that the user data in a widget gets persisted locally in the user’s browser across sessions and browser refreshes?
To enable that to work with multiple widgets then you need to give them each a unique name across your site. Just add a value for widgetName to each one, e.g….
In your home page:
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
var npsConfig = {
settings: {
widgetName: 'im-a-unique-widget'
}
};
initialzeCodeRedNpsWidget(npsConfig);
</script>
In your support page:
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
var npsConfig = {
settings: {
widgetName: 'im-sally'
}
};
initialzeCodeRedNpsWidget(npsConfig);
</script>