SurveyGizmo's CustomScript Action now supports the LUA programming language.
Legacy Custom Scripting Language Deprecation Plans
New accounts (created after October 29, 2018) will only have the option to use Lua in scripts.
As of October 29, 2018 Custom Scripting Actions will default to Lua as the scripting type in the Custom Scripting Action for accounts created before this date. You will be able to switch to the Legacy Custom Scripting; though we highly encourage using Lua.
In the long term, Legacy Custom Scripting Actions will be switched to read-only. Read-only scripts will continue to function; you will just be prevented from editing. The exact date on this is to be determined; we will send notifications well ahead of time.
While SurveyGizmo is one of the most flexible survey tools around, we get requests for customizations that are not available out of the box. This is where JavaScript and Custom Scripting can save the day. If you have scripting chops you can use the JavaScript action or the Custom Scripting action to achieve the survey of your dreams.
This JavaScript will allow you to change your survey's header image via a URL Variable. This can come in handy if you'd like to show different target audiences different images. In this example, we changed the header to be a different color logo for each URL variable. We've seen this come in handy for things like translations as well.
Add a survey with this script and setup to your account.
The Script and Setup
After creating your survey, go to the file library and upload your different images. To learn more about how to upload your images check out our documentation on the File Library.
Copy and paste the below JavaScript code into a JavaScript Action.
//Given a query string field below, pull out the value
function getUrlValue(varSearch) {
var searchString = window.location.search.substring(1);
var variableArray = searchString.split('&');
for (var i = 0; i < variableArray.length; i++) {
var keyValuePair = variableArray[i].split('=');
if (keyValuePair[0] == varSearch) {
return keyValuePair[1];
}
}
}
$(function() {
// ----- Put the URL variable string field here -----
var urlvar = "logo"
// -------------------------------------------
var searchResults = getUrlValue(urlvar);
// ----- Replace header image depending on the query string value
var WhiteonBlackSrc = "//surveygizmolibrary.s3.amazonaws.com/library/298745/_WhiteonBlack.png";
var PinkonTealSrc = "//surveygizmolibrary.s3.amazonaws.com/library/298745/_PinkonTeal.png";
var WhiteonPurpleSrc = "//surveygizmolibrary.s3.amazonaws.com/library/298745/_WhiteonPurple.png";
var imgSrcArray = [WhiteonBlackSrc, PinkonTealSrc, WhiteonPurpleSrc];
var src = WhiteonBlackSrc;
$.each(imgSrcArray, function(i, val) {
if (val.search(searchResults) != -1) {
src = val;
}
});
$(".sg-header-image").attr("src", src);
});
Required Customizations
In the script above you will need to customize variables highlighted in yellow in order to make the script work the way you'd like.
urlvar - Change "logo" to your specific URL variable name.
URL Variable Values - Next change the values of the URL variable to your URL variable values. For example, the variable value for WhiteonBlack would look like ?puppy=BlackonWhite in your survey link.
Image Links - Lastly change the links above to the corresponding images that go with your URL values. To get these image links, go to your File Library and click on your image. Next copy and paste the File URL.
Just like in the example, take your share link and append your URL variable and value. The end result will look something like this: http://www.alchemer.com/s3/4197896/Update-Header?puppy=dachshund
Test all of your URL variables to make sure you're getting the proper images for each one!
Alternative for changing image based on language
function getLang () {
return document.getElementsByTagName('html')[0].lang
}
function changeHeader (srcs) {
// get language of html document
var lang = getLang()
// Set the source, default to English
var src = srcs[lang] || srcs['en']
// HACK: Remove old image, create and append new img
var oldImg = document.querySelector('img.sg-header-image')
var newImg = document.createElement('img')
newImg.classList.add('header-image')
newImg.src = src
var parent = oldImg.parentElement
parent.replaceChild(newImg,oldImg)
}
// URLs you want to use for each language (using the language code)
// See http://help.alchemer.com/help/article/link/set-up-logic-based-on-survey-language
var headerSrcs = {
'fr': 'FRENCH_IMAGE_SOURCE_LINK',
'en': 'ENGLISH_IMAGE_SOURCE_LINK',
'it': 'ITALIAN_IMAGE_SOURCE_LINK',
'de': 'GERMAN_IMAGE_SOURCE_LINK'
}
document.addEventListener('DOMContentLoaded', changeHeader(headerSrcs))
document.removeEventListener('DOMContentLoaded', changeHeader)
